Restaurant Landing Page — Typography UI

Most times, when we talk about the visual elements of a website, we talk about the visual elements of a website, we talk about images, photos, illustrations and icons. We tend to forget that text is visual too. Every typeface communicates to users differently, without them realizing it. Designing with only text as the content and major visual element can be a daunting task and that is probably why very few designers attempt it. Typography UI is a bold style that makes a very strong statement. That is why it is important to transmit the right mood, which will appeal to the users of the website.

Task

I was asked to design a well structured and desktop landing page for a friend’s restaurant using Figma. This restaurant is one that makes local and intercontinental meals. My goal was to make the website look simple, yet classy and to ensure that the design is a functional one.

The Typeface: Open Sans Text

I started my research with figuring out with typeface works best with a restaurant’s website and to understand how it communicates, in order to be able to transmit the right message through my landing page. From my research, I found out that Open Sans Text topped the list. This is no surprise as it is a very user friendly text.

Open Sans Text is a San Serif font designed by Steve Matteson. It offers high readability and friendly appearance. It has excellent legibility and its letter forms are incredibly strong with a very extensive font library. It is also very readable in small sizes. These are the major reasons why I chose this font. I wanted something users would not find difficult to read.

Open Sans Text Styles

Color

My next action was to find an appropriate color to suit the kind of landing page I was about to design. I eventually chose the color Orange, after conducting my research.

Orange is a chief food color, evoking the taste buds and stimulating the appetite. It has proven effective overtime. It is interesting to understand our subconscious and how we react by the colors we see. The picture below shows the psychological effect the orange color has on our subconscious as humans. Also, food is listed as one of the industries where the orange color is commonly used, due to the huge role it plays in visual perception, emotion and human behaviour.

Psychological effect of the Orange color

User Persona

Mood boards

To better understand how to carry out this task, I made a mood board for the Layout and Composition. I chose these designs because they helped me understand my task better, since I was almost clueless about it, initially.

Final Outcome

Typography

The text is big, bold and clear, and also shows that the Open Sans can communicate effectively at different sizes.

This represents the readability and friendly aspect of the typeface. I also implemented the principle of proximity by grouping related objects together and made sure there was proper spacing between unrelated elements. For instance, the popular meals category are grouped together and maintain a far proximity from the other elements on the page.

Colors

The final colors ended up being slightly different than the ones I chose before I created my mood board, as I thought the color Orange worked better while I was designing the page. The color scheme is the same and there is an overall feeling of unity throughout the entire design. I used the principle of contrast on the headline because I know it works well with repetition and creates distinction by highlighting differences throughout the layout. Since the majority of the page is black, the pop of orange color really stand out. The negative space on the page balances the colors. Black and Orange definitely gives the users the impression that the restaurant is a classy one.

Layout & composition

For the header, I made sure I included the necessary features that the user will need to easily navigate the website, including a call to action feature. The body content implements the principle of hierarchy, contrast, balance, space and proximity which helps to make the design look appealing to the user.It also shows the location of the restaurant and its opening hours and even the popular meals at the restaurant, so the user can quickly make his decision to patronize the restaurant.

Space & Movement

The space is structured in a way that each section is well defined, and there’s no unnecessary element that comes to disturb it. Every element is there for a special purpose, which gives a stable movement, counterbalanced by the neutral background.

Finally, the whole landing page itself, puts in contrast the friendly side of the typeface while maintaining its simplicity. This is made possible, not only by the text itself, but also through the contrast of colors, and the mix of a neutral background.

Conclusion

As this was my first design project in Typography UI, I’m not used to following a logical path to explain my choices. Therefore, analyzing the mood and thinking of how best to translate the message with the visual element of typography was new. What made it even more difficult is that I usually only go with simple designs with really cool high-quality images, so designing with only typography definitely challenged me and made me think in a different way and try something new. It taught me to understand that design can still look good even without images or vector illustrations. This project made me realize the true importance of typefaces and colors and how important it is to choose one that will effectively deliver a precise mood and message.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Victoria Taiwo

Victoria Taiwo

3 Followers

Law graduate || Tech enthusiast || Professional Volunteer || Christian