Web Mockup

Part 1: About my website and Inspiration

The website that I am creating in my Interaction Design: Interface class is called GimmeFood!, a gourmet food delivery service. I wanted the design to be modern, elegant, and simple.

Part 2: Style Tile

I decided to use the Marion font because it is similar to the fonts that chic and elegant magazines use. It is a sans serif font, so I paired it with a serif font, Lato. My first colour palette was yellow, orange, blue, turqoise, and brown. When paired together, these colours look fresh and remind me of food-related products. However, when creating my mockup, I realized that there were too many colours to incorporate. I tried only using two or three colours, but what I found was that it was best to use keep it simple by using black and white with a pop of colour to show elegance.

Part 3: Mockup

In one of my earlier mockups, I tried using yellow as the background. In my opinion, the yellow was too bright as a background and would make a nice pop of colour. Instead of showing elegance, it shows whimsy, playfulness, and boldness.

I changed the background colour to white and changed the main header fonts to Marion, and it already look more elegant. I also changed my “pop of colour” to blue. Using yellow as an accent colour against white was too bright, I need a colour that would look good against black and white fonts, and vice versa.

I changed all the header fonts to Marion and all sub-header fonts to Lato and added top and bottom borders for the navigation menu. I also added borders to other text elements which gave a sense of harmony and balance.

Part 4: The Final Mockup + Wireframe