A Web Design Case Study - The Restaurant

Communicating Warmth & Luxury to a Mobile Audience

A restaurant requires a website that communicates warmth and that invites its visitors to come and enjoy. They’re websites that are also viewed, by the vast majority, on mobile devices. For this fictional business I took the opportunity to use a different approach, designing the mobile version first and foremost.

Quick Note Before You Get Started:

The company model is all imagination, this means the website strategy does not present the same level of research and discovery that a real business deserves. The project’s purpose is to practice and present design skills.
All the names and/or places presented are fictional.
All images are free stock, available photo credits are found at the bottom of this page.
You may notice pieces of text missing from the website, some content, for example about sections or profiles, are specific to the company; this makes any content created without a company unrealistic.

View Prototype

Featured Design Objectives

A New Design Approach to Target a Largely Mobile Audience

Usually the design of the desktop comes first. There are a couple reasons for this. When developing, it begins with the desktop and then you adapt the layout to accommodate each of the progressively smaller screens. The landscape layout for desktop also allows for more creativity and larger graphics.

Yet, over 50% of traffic on the web is coming from mobile devices. Could the approach to design perhaps use a refresh? While I would not change anything when it comes to the industries where their target audience is mainly on desktop, perhaps for some I could boost the value of the website by designing for the mobile user.

This is a difficult task. Not only is it difficult technically when it comes to developing but the smaller screens are a challenge. Coming up with interesting layouts for such a small screen takes practice. This website was one of my first attempts.

I used a beautiful, quality image, to provide interest in a simple hero section layout. Coloured lettering adds a unique touch. The next thing I did was pull the 2nd section heading off the side of the page, this creates interest once again and maintains readability. I then applied it throughout the design to maintain consistency. Small details like these add a little something, making a unique experience despite the limitations of the small screen.

Creating Luxury Takes Precision and Attention to Detail

The feeling of luxury is created in many ways. Choice of color, layout, and content all play a part, but let’s begin with one of the most prominent factors, font.

Consider the difference between the fonts used in this project versus the font I chose for the pet sitting website. Click to view the pet sitting case study. Both are serif typefaces, the classical style communicates a business as established and dependable. However, Ultra (used for the pet sitting website) gives a much different effect, it creates a friendly, happy feeling. Baskerville, on the other hand, is sleek and elegant in its shapes and layout giving the website a sophisticated, luxurious air.

The high contrast between a black background and content is also often used by the websites of luxury companies. As we’ll discover in the section to follow.

High quality images also go a long way to creating luxury. If a brand doesn't take the time to invest in quality imagery, what does that say about the time and money invested in their product or service? Images that flow nicely, are high quality, and capture the desired feel have a powerful role.

Every one of these design details have to be very carefully thought out, each on their own will not achieve the goal. It is all the small details together that create the final effect. This is what high level design is. To succeed requires time, effort, and meticulousness.

Featured Design Principles

Dark Backgrounds Work Well when Creating Luxury but Creates a New Challenge

Personally, I have struggled with design on a black background. The final project can be a little hard on the eyes, the glaring white letters in bright light being harsh. For this reason, it takes precision and practice to create a website that makes effective use of a black background.

When used correctly, a dark website helps a brand stand out. Simple colors used in a bold way creates the feeling of sophistication a luxury brand requires. It is timeless and, combined with a serif font, there is no doubt of a classical effect.

Here are some of the details I consider when using a black background. First, never use true black! Instead choosing an extremely dark shade of a brand colour will tone down the harsh contrast black has to white. Most won't even realize it's not true black. Another factor to take into consideration is the typefaces you are using. Anything too thin will be very hard to read, even to those without eyesight issues.

But, the first thing you need to determine is whether a background is even suitable for your brand and target audience. Readability is a concern so when targeting certain age groups you’d want to avoid it all together. Bold or large colour schemes are greatly impeded when using black in such abundance. The feel a black website can create is also very limited. Feelings like contentment, friendliness, joy, relaxation, and even trustworthiness can be nearly impossible to convey.

Black backgrounds can be a powerful tool. They can help evoke strong emotion and create unquestionable sophistication. However, they are not for every business. I will alway consider very carefully the pros and cons should a black style ever come up for one of my clients.

Small Mobile Screens make Interesting Layouts More of a Challenge

There is not much room on a mobile screen, and the portrait orientation does not lend itself to creativity. Many mobile experiences get overlooked, for what fun are they? And yet, for the vast majority of brands a great deal of their traffic, or possible clientele, comes from mobile users.

“Interesting” or “creative” layouts get forgotten in the mobile view when they are created for the desktop, landscape, screen. What if design started with the mobile view? An idea I addressed above and used for this project. As I mentioned above, there are a few technical difficulties in this approach but what are the benefits?

By thinking about the mobile screen first, layouts can be chosen for their merit on this screen size instead of the larger desktop. For what works and is “interesting” on a bigger screen may be all together unusable on a small one.

For example, perhaps a giant bold heading works to draw interest on a big screen, but large lettering on a mobile either takes up too much room, or is not identifiable as “huge.” But consider how I choose to offset a few of the headings in this project off the side of the page. This is something “out of the ordinary”, something “interesting”, while it also works perfectly on the small screen and can be easily applied to a large one.

After this case study, I want to pay greater attention to the mobile experience. While for most businesses it would not be effective to design solely the mobile or even to begin with it, I do want to be more mindful in my design choices to better account for my clients mobile users.