Web design as a concept refers to the *process* of creating the front-end (what the visitor of your website sees) of your coffee website.

It's one part of what digital professionals call web development and includes focus on user experience, aesthetics, flow, formatting etc..

Web design, in the context of selling coffee, is really about blending the look and feel of your website with customer-centric functionality.

This article will cover the basic elements of web design and how they impact your coffee shop website.

Images

product image of shoe

The types of images considered in most web design related decisions include Logos, Photos, Product Photos, and Illustrations.

 

    • Logos: 

      Your logo is obviously an important way to symbolize your coffee website's brand. It's the visual representation of your company as far as customers, partners, and the general public are concerned. Your logo should be in the header of your website and, when clicked, bring visitors to your homepage. Don't over think this. People have been conditioned over time to expect key elements of website's to be placed in specific areas in relation to each other. Anything that divurges from the standard expectations causes website visitors and potential customers frustration.

 

    • Photos:

      When thinking of photos in the context of design, remember their purpose is always to connect your website and online presence with the "real world". Photos on your website should represent ideas, concepts, values, and anything you want to communicate to your customer about your brand and product.

 

    • Product Photos:

      Product Photos we consider separate from "regular" photos because they are so fundamental to any eCommerce website and come with their own purpose and art. Product photos are meant to capture the value of the product in a way that distinguishes it from alternatives and helps customers to experience the potential benefits. For instance with coffee product photos, a picture with a minimal background, so as not to distract from the product / coffee baf itself, is usually recommended. Moreover, because you always want to sell the benefits of coffee (vs the coffee beans themselves) we'd typically recommend including imagery that evokes the flavour profile of the coffee. Things like berries, caramel, and chocolate that correspond to the taste and texture of the coffee as opposed to just the coffee beans themselves.

 

    • Illustrations

      Graphics and illustrations should serve the same purpose as photos for the most part, but they come with the added benefit of allowing for more customization and originality. They open the door to interesting imagery formats like infographics and should be used in support of more sophisticated brand storytelling.

 

Web Typography

typography

Web typography is what we call fonts that are used on websites.

Web fonts have become so sophisticated that there's actually a whole field of Typography designers who specialize in developing font for websits.

Choosing a font for your website might seem like one of the more insignificant decisions you'll have to make but in fact it is a choice that can depend on a number of thoughtful considerations.

Remember, when it comes to website fonts, like many other design elements, need to accomodate a number of "adapatations". They need to work across different screen sizes (mobile and desktop etc..), screen resolutions and other visual settings.

This means that while you want your choice of font to represent the brand and aesthetic, you also want to make sure it makes sense pragmatically.

You need to ensure the font "stands up" to the test of being readable across different devices, screens, sizes, browsers etc.. first and foremost.

Letters and spacing need to be optimizied in a way that text is easy to distinguish no matter how small or big.

Colors

colors

Choice of colors is another important aspect of web design.

Here too you want to avoid over thinking things, ensuring you get the basics right and your choice of color scheme is in agreement with the overall design of the website and tone of the brand.

Much has been made of terms like "color psychology" where marketers try to better understand and choose colors based on their target audience. Keep in mind that there has been research done that demonstrates our response and perception of colors is highly personal and dependant on a variety of factors include cultural differences and personal experiences.

The truth is there are no colors that consistently communicate attributes like "blue is calming" etc.. as too much depends on individual associations and context.

The key thing here is to ensure the choice of color aligns with the brand and helps to differentiate where possible.

For a coffee website using some shade of brown might seem unavoidable, but if, for instance part of your main value proposition for the coffee involves environmental sustainability than you might consider shades of green more prominently.

Navigation & Structure

navigation

Decisions related to navigation can impact your coffee website's credibility and above all help visitors understand the website.

A well implemented navigation will facilitate user flow through breadcrumbs, drop down menus, and logical hierarchies.

If a website is large enough, navigation considerations can also extend to the implementation of an internal search function. 

In the context of web design, the key thing to keep in mind with respect to navigation and menus is that they are *obvious* to the visitor or customer. You want to ensure the text you use for your links and menus is clearly different from regular non clickable text, for instance.

Consistency and simplicity is also important. If you have navigation elements through a sidebar, or a top level header menu you want to ensure those elements don't change regardless of which page you visit (for the most part). Vistors will have a much easier time browsing your website in cases where the navigation is the same everywhere they go.

Finally, as much as navigation is defined by user experience, it's also defined by your business goals. Your links and nav should reflect your priorities as far as what actions you want a visitor or customer to take. The obvious priority is usually to make it easy for anyone to find a link to purchase a product, for instance, while less essential actions like visiting a contact or about page can typically be relegated to the footer area of the website.

 

Page Layouts

layout

Each block of content or imagery can be thought of as a component or element. 

Website layout design looks to deliberately position these elements to that they make logical sense and facilitate good user experience, while aligning with the overall brand and aesthetic.

The layout also has important, less obvious, implications on how successfully the website performs. Because the choice of layout will also dictate the sequence of page component, your layout will determine the order in which each part of a web page appears.

This impacts page speed (as if you place page elements that take a long time to load up front than visitors will have to wait until that part of the website is done loading in the browser to make sense of your page.

The layout also impacts user experience and conversion rate optimization. Similar to navigation, the page layout informs the areas of your web page that will receive the most attention and how early that attention will be captured.

Your choice of layout might also change depending on the type of page.

For instance a product page layout will likey have specific requirements with respect to keeping important calls to actions (CTAs) above the folder so visitors don't have to scroll to see how to purchase a product.

In contrast, a blog article will likely be structured differently to ensure the text / article is easy to read through intuitively.

Moreover, the page layout can be an expression of the brand. The priority is to keep is simple and intuitive as always, but some creativity can be explored in playing with symmetry.

Website Templates

website templates

If this all sounds a bit overwhelming than take heart and keep in mind that most website builders or content management systems like WordPress and Shopify etc.. will have some kind of a framework to employ website templates.

A website template, sometimes referred to as a "theme", allows web design and development teams to build websites on a foundation of reusable components.

The design and development of text boxes, images, page layouts etc.. are all predefined and fairly easily customized through a graphic user interface (thus not requiring knowledge of coding and web development).

Choosing a template is basically choosing through a collection of all these design elements that are already built to relate to each other in a way that is logical and pleasing.

Changes and customizations can always be made, sometimes very easily, but the overal structure of the website is largely defined.

You can find examples of templates here:

WordPress Templates (Themes)

Shopify Templates (Themes)

Wix Templates

Square Space Templates

Web designers focus on many more aspects than what we've documented here, but the above elements are all critical and part of what we focus on when evaluating websites. 

If you're looking for aspirational websites that can help inform and inspire your own, the elements outlined here should be part of your criteria in isolating the really good ones.