Building a restaurant landing page
As a product design intern on the WeJapa internship, our task for the second week was to design a landing page for a friend’s restaurant. This article is a look into my design process.
Overview
Typical to how it would be if working with a real client, we were given specifications/requirements as to how to go about designing it. No vector art or illustrations were to be used — only high resolution food images and typography were allowed.With the freedom given to choose a concept of the kind of restaurant I want to design, I chose to design for a restaurant that serves sophisticated and high class intercontinental cuisine. Of course, we told to pay strict adherence to all we were taught on the principles of design the previous week. Read more on that in my article here.
Inspiration
As with every project I embark upon, there’s a lot of thinking to be done before I get down to designing anything. I needed to understand the nature of the client In am working with (even if it is a fictional one) — their thought process, their perceived tone with their customers and the message they seek to pass across. The restaurant in this case study wants their new or potential customers to look through their menu at what they have to offer as a way of advertising.
To get inspiration, I visited Pintrest ton see examples of flyers, food presentation by restaurants, how typography is used to set the mood on pages and on a personal note, the difference between a landing page and a home page. From my research, I was able to determine the kind of imagery I needed for the page. Here is a screenshot of the Pintrest board I made for the project:
Style Guide
As I was taught and in order to further gather my thoughts on how the design would look like, I created a style guide. Being a small project, it was just a simple guide with only typography, sizing and colour considered. I chose Dancing Script and Josefin Sans as my fonts. Dancing Script to me is able to pass feelings of artistic professionalism and taste to anyone who sees text written with it. Josefin Sans apart form being a good font tom pair with Dancing Script, is also very legible as body text and adds its modern look to the artistic look of Dancing Script. Here’s the style guide below.
Wireframe
Although I did not do any paper sketches (most times I do), I already had a sketch I was okay with in my head. I proceeded to create a wireframe showing the basic structure of the page. My research on the difference between a landing page and a homepage came in handy here. A Homepage is the first page people normally hit on visiting a site. It usually contains a basic introduction to the company or service and provides links to other parts of the site. A landing page on the other hand is a standalone web page specifically for a marketing or advertising campaign. To read more on this topic, visit this article on unbounce. Here’s my wireframe.
It has just one call to action button to take you to the menu. The circle represents where my imagery would sit when added.
Design
The design was easy to flesh out at this point. All I had to do was find the right copy and the right imagery that looks as professional as the meals the restaurant has to offer ( thanks to Clark Douglas for taking such an awesome picture on unsplash). This is my final design in colour and grey scale (I imagined animated lines and circles on the screen).
Conclusion
Following the correct process helped me to not only create a design but refined my thinking process. It made me resist making the rookie move of starting to design right away and hack my way through till the end. I have designed a similar concept in the not too distant past. I did that using the rookie way. Comparing this design to that, the improvement is nice.
Would love to know what your thinking process is like when designing!
