This week we had a critique for our web essays, so it was really insightful to see what Kyle thought of my website. There was some things that were broken in the webpage, and this was because I was using transform, and this meant that some elements were not resizing to the viewport properly. There was also some other issues and critiques that I had to work on.
Background Title Issue:
Throughout the process of designing and building my website I did have some issues, and most of these came when I was coding my website. The first one that I came across was that my ‘Background’ heading was breaking when the viewport size was changed. In CSS I used transform: rotate(-90deg) to make it vertical, but as you can see the vertical part of the heading moves when the viewport size was changed, and after trying to figure out how to fix it for ages, I decided that I would just get rid of the vertical part and make it all horizontal. I wanted to make it work, but after hours of wrestling with it, I decided that i would rather have the website work and look a little different than have it broken but look how I want it. After all, as Interaction Designers our designs must be accessible and responsive, so I thought that make an adjustment was the right choice.
How it is supposed to look
How it looks when viewport is changed
What I changed it too, getting rid of the vertical part
Kyle also thought that although my design is about Wolfgang Weingart, there should still be a consistent structure throughout. One major change that I made from my original design to my finished one was setting out all the headings and paragraphs in the same way, so that there was a continuous layout throughout, and this would make the website more accessible and less random. Here are some of the main changes that I made:
A New Direction Section:
Here is my original design for this section, with the heading on the right, and also being right aligned. I originally liked how I used the space in this, but after my critique, I thought it would be better to make the whole design of the webpage more consistent.
Before critique
Here is what I changed it to. As you can see I placed the heading above the paragraph, and also left aligned the text. I wanted to use a similar layout throughout the whole design now, so each section looks similar to this one, instead of having random layouts like I did in my original design.
After critique
Conclusion Section:
The conclusion section originally had 2 headings, one above the paragraph and one underneath, and the paragraph was right aligned. In the critique Kyle thought that it would be better if I left aligned it, and took out the second heading. Here is my original design of it.
Before critique