5 Principles of Great Website Design

By Julie Koenig Loignon

Read this article on our website

Fashions fade, style is eternal. - Yves Saint Laurent

I was researching the topic of “timeless style” as I was preparing to write this article and sought the thoughts of fashion icons like YSL (above), Coco Chanel, Giorgio Armani, and Lilly Pulitzer. After all, who better to give advice on design than fashion designers who have served up patterns, lines, and looks that have truly stood the test of time and are still admired and repeated today?

As I kept digging, though, I found some pertinent musings from equally famous names better known for what they write than what they wear:?

In matters of style, swim with the current; in matters of principle, stand like a rock. - Thomas Jefferson

In character, in manner, in style, in all things, the supreme excellence is simplicity. - Henry Wadsworth Longfellow

Concision in style, precision in thought, decision in life. - Victor Hugo

My mission in life is not merely to survive, but to thrive, and to do so with some passion, some compassion, some humor, and some style. - Maya Angelou

What I found remarkable about each of the comments above, made by five different individuals, each of whom was a trend-setter in his or her own right, was how applicable they also are to website design:

1. Great style doesn’t equate to what’s fashionable.
2. Great style requires adaptability, not pliability.
3. Great style is grounded in what is simple.
4. Great style streamlines a lot of things.
5. Great style is first and foremost human.

If asked to define what “great style” is in website design, I have every confidence our design crew at Culture Foundry would answer similarly – albeit in their own style – because the advice above overlaps our approach to website design systems and the great and timeless style that informs them.

So, back to the topic at hand, what are the principles of great website design, and how can you apply them to your next website design project?

Interested in our design experts' thoughts on your website?

Translating Great Style into Great Website Design

Great website design utilizes evergreen principles that balance aesthetic appeal with essential purpose. They serve the user experience by enticing users into a digital environment that is both visually pleasing and functionally efficient, enabling website visitors to find information, evaluate options, make decisions, and complete tasks with ease. In short, great website design principles live where science meets art, and what follows is a shortlist of five (5) design principles you will find at that intersection.

It’s by no means comprehensive, but it is a great place to start. As a marketing executive who has overseen multiple website design and development projects for a variety of businesses, they are principles I pay attention to and expect a trusted web design partner to understand and implement well.

1. Color

Chances are, you have a favorite color, one you selected for the way it makes you feel. Color has a powerful influence on our emotions, which is why it plays a vital role in design and by extension, branding. The fact that certain colors are associated with human qualities means using color to communicate gives your audience a shortcut to understanding your message and intent. For example,

Red = Power

Blue = Trust

Green = Growth

Orange = Energy

Yellow = Warmth

Purple = Wisdom

Ever wonder why some people wear red to make a speech, while others choose blue? If they understand color psychology, they either want you to be impressed by their powerfulness or reassured by their trustworthiness.?

According to the customer service, sales, and inbound marketing software experts at HubSpot, “Color often determines a consumer’s first impression of a brand or product,” and “Color psychology plays a major role in how consumers make decisions and evaluate brands.” In fact, HubSpot cited these statistics:

• Up to 90 percent of an initial impression comes from color.
• Color can increase brand awareness and recognition by 80 percent.
• 93 percent of consumers make purchasing decisions based on visuals alone.

The next time you are out running errands, pay attention to the colors you see in outdoor signage. What feelings do you associate with the green you see in the Whole Foods Market sign versus McDonald’s Golden Arches? Would you feel as energized about your next home improvement project if the Home Depot sign was a calming blue rather than an emphatic orange? Would you recognize a UPS delivery person if they showed up on your stoop wearing bright yellow shorts?

Understanding color, what it means, and how to apply it is one of the most important design decisions you will make for your website, which is another extension of your total brand experience.

Here are key principles to follow relating to color in website design:

• Choose colors that influence the emotions you want your website visitors to experience and that incentivize the behaviors you want them to take.
• Use colors in your website design that are consistent with your organization’s brand and visual identity to ensure you create a cohesive experience for customers, just as you would with official signage and employee uniforms. Help them associate your colors and what they mean with your brand.
• Assign colors that stand out and encourage action on every “call-to-action” element of your website design. Make them noticeable and unique compared to the rest of your color palette, and place your prominently colored CTAs throughout your headers, footers, and page layouts to ensure visitors who scan pages don’t miss them.

Great Color Design in Action

Our client-partners at ImageSource Inc. provide an excellent example of using brand colors to support the user experience while driving customer engagement throughout their website.

The ImageSource site utilizes the brand’s core colors, blue and orange, throughout the site in the form of blue headlines and iconography that communicate ImageSource’s authority and trustworthiness as a provider of business automation solutions. When clicked upon, those blue headers, icons, and other call-to-action areas turn orange, encouraging site visitors to take action, click, and investigate further—or download educational items designed to help them make purchase decisions.

Explore ImageSource’s use of color in website design: https://www.imagesourceinc.com/

2. Typography

Like color, typography helps identify your brand and communicate its characteristics. Choosing a font style – or family of font styles – to use in your external communications, including your website, is as important as your color selections.

Is your brand more traditional? Then a scripted font may resonate with your customers. Is your style more contemporary? Then a sans-serif font will translate your modernity. Ultimately, your website can feature multiple font types – with and without serifs – as long as there is a reason for the variety.

As with color, there are key principles to follow with typography in website design, and we found guidance worth amplifying from the professional UX and UI learning platform, Uxcel:

• Readability:? Ensure your type size and case, line length and spacing, and text contrast are optimized to support readers’ understanding. Remember, not everyone visiting your website has 20-20, full-color vision.
• Scannability:? The majority of website visitors will scan your web pages for relevant content before reading them for context. It should only take them seconds to grasp a web page’s main message.
• Mood: Select font styles that sync with your brand identity, that evoke the emotional response you want from customers, and that deliver on the expectation they have when experiencing that emotion.
• Number:? A good rule of thumb is to limit the number of typefaces used in your website to three, and if you are mixing serif and sans-serif fonts, be sure to establish and respect a hierarchy for how they are used (e.g., serif fonts for headlines and sans-serif fonts for body text.)
• Scale: As part of your typeface hierarchy, establish scale differences for commonly used text elements, such as headlines, callout quotations, body text, captions, and button or label text. Scale up or down font sizes and weights based on that text schema to help organize information and make it quickly scannable for the reader.
• Alignment: Using a combination of left and right text alignment throughout a web page creates visual balance and also aids scannability by directing readers’ attention through denser content.
• Emphasis: Sometimes the best way to get someone’s attention is to use boldface, italics, or ALL CAPS. But do so sparingly and with intent.
• Proximity: How you group or separate text can make it easier to digest and interpret, which is why related sentences are grouped into paragraphs, while disparate topics are separated by white space.

Great Typography in Action

Our client-partners with Accelerated Cure Project (ACP) incorporated a well-calculated typography system into their new website to help visitors quickly scan text-heavy pages for relevant information before diving deeper into rich content. Their typography choices support complex user flows built into every web page, while reflecting ACP’s core purpose, to be a trusted resource for individuals experiencing and researching Multiple Sclerosis.

Explore ACP’s use of typography in website design: https://www.acceleratedcure.org/

Interested in our design experts' thoughts on your website?

3. White Space

While white space is certainly tied to typography, in the digital realm, white space deserves its own section because great website design cannot exist without it.

Incorporating white space (which doesn’t need to be white per se – “negative space” is another descriptor commonly used) into web page layouts improves readability, creates emphasis, ensures balance, and aids in content scanning. It also allows web pages to breathe and gives readers the visual rest they need, especially when consuming text-heavy content.

Whether building micro white space between text elements, such as characters, text lines, and paragraphs, or macro white space between larger elements (e.g., padding and margins), white space is an essential element of great website design. To prove it,?

I will

give you ????????????????????

some space.

(Doesn’t that feel better?)?

Great White Space in Action

An excellent case study in the use of white space and typography in website design can be found on the website for EcoSoul Partners, a climate-action initiative created by Culture Foundry’s founders. (And yes, they also designed the website).

Explore EcoSoul Partners use of white space (and text alignment) in website design: https://www.ecosoul.io/

4. Imagery and Graphics

Including compelling imagery and graphic elements in your website design helps you tell the story of your brand and how what you do impacts your customers and community. In fact, strong visuals help your customers visualize themselves in your story and how engaging with you will help them achieve their goals.??

Graphic elements, such as iconography, line art, infographics, charts, and maps can distill what might have required five paragraphs of expository text into a two-inch color block that can be seen and understood in two seconds. If a picture’s worth a thousand words, well-designed graphic elements are worth millions because they give you a practical means to communicate complex information in a concise and visually stimulating way.

Key principles to remember when incorporating imagery and graphics into website design:

• The images you include should be relevant to your organization (your story) and, when possible, be originally sourced, rather than selected from stock photo archives.
• Images should be high quality and high resolution but not so large as to slow page load times; one megabyte total file size is a good benchmark for large or full-screen background images, while most other small web graphics can be 300 kilobytes or less.
• Test your imagery with diverse audiences and give thought to how your selected images could be interpreted by different constituencies and cultures.
• Use images to further your messaging, and avoid inserting images that add color but? do nothing to advance your storytelling; only add what serves a purpose.
• Keep graphic designs simple, using colors and font styles that meet web accessibility guidelines, and that serve as an extension of your brand guidelines.
• Test your graphics on multiple screen sizes to confirm they will adapt to mobile screens without sacrificing correct formatting and readability; you may need to include multiple graphic sizes and configurations to ensure mobile responsiveness.
• As with imagery, ensure the graphic elements you incorporate into your website design advance your storytelling, while serving as visual guideposts to draw visitors to and through your content.

Great Imagery and Graphics in Action

The Practitioner Hub area of Better Care Network’s official website showcases a wonderful union of candid imagery and colorful infographics that facilitate navigation through this robust resource area. Our design crew worked with the Drupal experts at Freelock on this project. It’s a great example of how to use imagery and graphics to drive mission-based storytelling.

Explore Better Care Network’s use of imagery and graphics in website design: https://bettercarenetwork.org/practitioner-library

5. Animation and Interactivity

It may be stating the obvious to say that motion moves us. Websites that include animated elements pique visitor engagement by surprising them and helping them take desired actions.

Are you more apt to linger on a moving video header or a static carousel? Does the “Buy Now” button seem a bit more engaging if it lights up when you hover over it?

Besides being attention-grabbing, animated design elements can help simplify complex ideas and help visitors relate the challenges they face to the solutions you offer. They can also help customers visualize concepts and processes that would be too difficult (or quite frankly, boring) to explain using more static marketing methods.

Animation, whether in the form of cartoon-like videos or call-to-action buttons that change colors when your cursor hovers over them, introduces a sense of imagination and fun to your website, while greatly enhancing its visual appeal.

Key principles to keep in mind when you introduce animation to your website design:

• As with every design element, focus on functionality; animations should serve a purpose in storytelling, brand positioning, and in helping customers connect the dots as to your relevance to their needs and wants.
• Make sure animated elements are brand and audience appropriate and match the tone of what you need to communicate.
• Use animated elements sparingly, so they delight and entertain website visitors without becoming a distraction to other important content you want them to absorb or the workflows you need them to complete. (Note: This is especially important for scroll-triggered animations.)
• Always remember accessibility to ensure your animations work for all users, particularly if the animations are integral to site navigation or user task completions (e.g., registrations, downloads, video views, etc.).

Great Animation and Interactivity in Action

Our client-partners at Bell Wine Cellars uncorked a delightful microsite for their affordably priced red blend, The Scoundrel. This unique assignment allowed our design team to incorporate some truly “vintage” animated elements into the website design, including popping wine corks, flying emails, CTA arrows that literally “spin the bottle,” and the sneaky appearance (and disappearance) of The Scoundrel’s foxy spokesperson.

Suffice it to say, after working on this website, our design cup runneth over…

Explore The Scoundrel microsite’s use of animation and interactivity in website design: https://the-scoundrel.com/

Conclusion

If it feels like we are scratching the surface of what principles make for great website design, we are. Also important to consider is site navigation and wayfinding, content hierarchy that stacks the most important information at the top, user-focused page layouts, and the ever-present need to design websites responsively for smaller screens and mobile devices. These strategic design principles underpin the more artistic ones we have detailed above.

It’s also worth noting that great designers not only know how to follow these principles, but they know how (and when) to bend and sometimes break them. In other words:

Learn the rules like a pro, so you can break them like an artist. - Pablo Picasso

If you want to take that road and push things further to the design edge, it becomes even more important to make sure you’re in the hands of a professional web design partner.

In any case, the most important principle in great website design is to balance aesthetics with purpose, what looks good with what works well, and most important, with what serves your website users.

Taste is unique. Fashion is fickle. And what’s trendy today may fall out of favor tomorrow. Your website needs to be true to your brand while being assembled in a way that draws people in, invites them to stay, and encourages them to find their happy ending in the story you tell them. Build your online connection to customers with these time-tested design principles in mind, and your website will always be in style.?

Interested in our design experts' thoughts on your website?

We’d love to review your site and explore ways to enhance the user experience using the great design principles we believe in. Connect with us online, or email us at [email protected] to get the conversation going.