Updates on My Website

Regarding the comments I have received from my teachers and classmates, I have two major things I have to improve on my website. You can know more by reading the previous posts "Feedback on Presentation about Website / Blog / Major Projects" and "My Reflection Based on the Comments I Received". I am going to modify my website based on the feedback and reflection written in these two posts.

First of all, I am going to change the background pictures to the sketching and drawing related to my progression route, product design. Before I post the new picture, I edited it in advance.



The original picture

I used the function provided in Wix

I changed the position.

As the size of the picture does not fit the layout very well, I have to pick the position of the picture in the image setting. Then, I do the same to another one. This time I changed it from "scale to fill" to "tile", so it would show the whole picture, and fill the background with repetition.

I changed it to "Tile".

After edition (Left) Before edition (Right)

After edition (Left) Before edition (Right)

 You can see the difference between before and after edition from the above picture. I have changed the brightness, warmth, and contrast. Therefore, they look more sharp and eye-catching.

Apart from the background picture, I have to change the text size too. Actually, it is not that small on my laptop screen, however, it is so hard to see the words when it is shown on the computer screen inside the campus.

It looks like this now.

However, I found that lowering down the opacity looks better and I had a little change on my second background picture.

The second background picture is not good enough, and it did not fit with the rest. Therefore, I want to make a repetition of this picture by Photoshop. I am going to show the process of it now:

I put two same pictures together in Photoshop and save it as a JPEG format.

As I am using MacBook Pro, I can use the tools provided.

Select the area I want and crop it out.

Then I use the edit function in Wix.

Afterward, I changed the opacity and the position.

For the opacity, I think the original one is too sharp, the colour attracts all the attention from the text (Janis Chan, Product Design Student). After lowering down the opacity, it looks better.

After that, I was looking at the design of the layout on the left-hand side. I had tried some different shapes with different opacity levels. I was thinking which shape should I use, Shape 1 or Shape 2.

Shape 1

Shape 2

Finally, I changed the opacity to 85% and picked Shape 2 because it matches with all background pictures. Then I have changed some little details.

Before

After

I am going to show you the rest of it.

I have spent a day on editing my website, I did not expect that I would spend so many time on it. I am going to post my process of designing my own logo very soon. Hopefully, I would post my final design of key cover in few hours too.