Thought process for a restaurant landing page design

CHALLENGE

I was faced with creating a landing page for a restaurant with the use of mainly typography and as little images as possible. Illustrations were not to be used and from the brief provided, this landing page was to be as minimal as possible and in the process conveying the principles of good design. Colored as well as grayscale versions of this landing page were to be also created.

PROCESS

Before setting up my Figma board for the design of the landing page I needed to draw inspiration and create a moodboard to help me have a view of what my landing page would look like after completion. What better place to draw inspiration than good old Pinterest, I also made use of Dribbble but eventually made a copy of the ones I was satisfied with on a separate page on my Figma board and named it “moodboard”.

With that part sorted out I had to select colors and typefaces that represented a food and restaurant brand. I searched on Paletton for color palettes for a food brand and stuck with the ones that had yellow and red in them. This is because in color psychology the color yellow invokes hunger and we want users that land on our page to ultimately order from us. For the typeface I chose Raleway, a Sans Serif font. This is because we want to project ourselves as a modern and friendly brand.

As soon as I had all of these sorted out, I moved to my Figma board to put my ideas to test. I started first by creating the header and adding the different components like “about”, “contact” and so on. I made sure I included my Call to Action(CTA) button and made it stand out by placing it in a rectangle with a yellow fill since yellow is the primary color of our brand. After a little tweaking here and there I was satisfied with what I had.

Next was our logo, since its a faux brand I only made use of a wordmark logo “DinewithMe” with our sans serif typeface, Raleway. Moving on to our hero text, it needed to be the first thing users saw once they landed on our page, I achieved this by making the text bold and this time adding our primary color of yellow to it, there was no doubt it was going to stand out and fulfill its purpose. Then I moved on to creating the other texts on our page while keeping in mind the hierarchy of each text and their importance. I made all the headers yellow in color while sub-headers were left as black in color but were all bold in weight. The descriptions for each header was left in black also but were light in weight instead.

From our design brief, minimalism was encouraged and I ensured I stuck by this principle by only including the most important elements that were crucial to this design. At the end of this project, I really liked how it turned out even without the use of images and illustrations and I must say this was a challenging but equally enjoyable project and I’d definitely try this again in the nearest future.

Product Designer • Minimalist