As part of the initial planning stages I created wireframes using Balsamiq. These allowed me to hit the ground running with an initial design plan.
Throughout the production of creating the website on self-reflection and feedback from others I made design changes. Most of these changes were to accommodate a more aesthetically pleasing site, as well as making the site work better responsively.
- Originally I planned for PC to have a 60% width page container. But after feedback that there was too much white space on the sides. I redesigned the site to be 90% width on all devices.
- This also meant I changed the width of the nav bar, header bar, and footer to be 100% width of the page.
- Change of design to the sections under the header on PC to be paired, and on ultra-wide screens they would triple for each row.
How To Make Popcorn - make.html
- A change made for PC to eliminate unused white space was to move the image on PC to the right of the ingredients and instructions.
- A change made for all devices was to move away from the proposed grid format and to a more fluid design using flex.
- I also added a charcoal background colour for the images.
- One change I made on this page was to stretch the background image the whole page width.
- Moved the 404 to the main heading of the page.
- Added an image on to the page.