Reflections

Implementing the mock-up

First when we got the mockup, the structure was quite clear. And the heriachy of the text was easy to understand. But when we tried to implement them, we found that the mockup doesn't explain many of the details. Therefore, we added our decisions based on the information they provided.

In order to fullfill every requirement, we've changed some of our choices. For example, we changed the apparance of the link and lists by using pseudo-classes and pseudo-elements.

When we implemented the mock-up, we thought some parts of the mock-up could be replaced with a better solution:

1.The title and the sub-title of a page at the center of a page is more resonable than aligning it to the left. Though it follows with the way that the main content shown, but since the font size of the tittle is big enough and it overlapse with the background image, so it's more symbolic compared to the other content of the page. So it makes more sense to keep it at the center of the page.

2.We also think the emoji box should be seen as one section of the text as a whole. So every emoji with a separate box will affect the judgment about the heriachy of the page. So we decide to remove all the boxes. We also made a the lists have alternate between normal and bold text, to make it more readable.

We have decided to rate the mock-up as: 2.5/5

Sustainability

We are only using two images on our design, this makes the page a lot more sustainable as images usually are what takes up the most space. We could have done more image compression on our images. However, this would reduce the quality too much, and we therefore decided against it. For example, for the backgroud image we used a tool to compress it from 21kb to 18.8kb. The different in size is not so big, but the quality took a big hit. We therefore decided against using the compressed version.

Self Reflection

We have gained a new understanding of the mockup we made after implementing one from that another group made. First and foremost, it had some problems with the color and styling; We made the choice that the title should be red and have a font to make it look like blood. Because one the requirements was to have a gradient, we chose to make a random box around one of the paragraphs and give it a gradient. These minor issues aside, we feel as though we made a good mockup that left room for creativity while also being clear what we are trying to convey. Overall, we give it a 3.5/5