When starting a web design project, it’s important to consider the basics.
Web design is an art and science that can be both technical and creative. Web designers use their skills in graphic design, user experience (UX) research, information architecture, interaction design, visual interface design (VID), all while considering how people will use the website or app they are creating. This article will cover some of the fundamentals you should know before you start your first Web design project!
Top Three Elements to Cohesive Web Design
There are many elements to consider when designing a website … but for now, let’s stick to the basics and build on our rock-solid foundation.
First thing first, your website experience needs to be consistent across the board. Whether that’s on desktop, mobile, tablet, flip phone – every page and style needs to be consistent to build brand trust and equity in your customers which leads me to our first key element.
#1 Brand Consistency
You know those websites that have crazy bright colors, huge out of place logo, looks insane on a phone and has 967 different styles? Ya … that’s not a good look or experience for your customer. Guaranteed the second they see that is the second you lost them.
Great websites have intentional consistency reflecting their brand in every corner of their business from print to digital.
The best place to start for this would be to create brand guidelines for your business, but we’ll cover that in another article.
For now, consider the following when putting together your design:
- Is my logo the right size on every page?
- Should always be globally sized.
- Are my font sizing & styles consistent across headlines and body copy?
- We recommend having one main headline font & one main body copy font that complement each other – more than two font styles can get messy.
- Are my theme & accent colors the same on every page?
- Colors should match your logo & brand etc. but for web design try sticking to three main colors with hierarchy – primary, secondary, tertiary.
- Are my edges rounded or straight?
- This applies to buttons, dividers, headers, etc. – rounded edges are more playful and soft while straight edges are more modern and hard.
- Does my website look great on desktop & mobile?
- We recommend using a responsive template that way your website adjusts to different screen sizes for the best user experience no matter what.
- BONUS TIP: Is my tone of voice the same with all copy?
- Since you created your avatar you’ll know what kind of tone resonates, we highly recommend ensuring that tone is applied consistently so it feels like the one brand one voice.
There is much more to brand consistency but this should give you an insight as to the impact it can make.
#2 Color Palette
It’s ALL about the color! Color evokes so many emotions and immediate conclusions whether you know it or not. Colors are your visual identity, they make or break your first impression and create emotional connections to your customer that develop brand loyalty over time.
Again, these colors should be selected during the brand guidelines phase of your business but for now, let’s focus on why your color palette is so important.
The Basics
Before you can pick your web design color palette, it’s important to understand the significance of colors and how they interact. This is frequently known as Color Theory.
At its most basic level, color theory refers to the interaction of colors in a design through contrast, complementation, and vibrancy.
Contrast
Contrast is how you divide elements on your website. Think about it in terms of black and white… literally. If you have a black background with white text, your eye is drawn directly to the text. Contrast helps readability by ensuring you can actually see what’s on the page, keeping it simple is the way to go.
Complementation
Basically, complementation is how colors look with other colors. They’re opposites on the color wheel and provide balance for the eye. Complementation can be a great tool to help you choose which colors look good together.
Vibrancy
Vibrancy is the mood a color sets. Bright/warm colors are typically more energizing (think reds and yellows), while cool colors typically make us feel calmer (think blue and green).
These interactions between colors are what make up color schemes. Think of a scheme as a blueprint for choosing what colors go together. They are created by working within color families in the color wheel and with the elements of color theory. Your color scheme is what you use to choose your color palette.
Color Psychology
The world of color psychology is built on the idea that certain colors trigger specific feelings and emotions, which trigger certain courses of action.
Choosing your website’s color scheme based on the emotional experience you want to provide to your visitors has the potential to not only shape your brand’s personality but also elicit certain visitor reactions based on the emotional ambiance you create.
Choosing the appropriate color palette for our website becomes considerably simple once we know what each color is associated with. For example, if you’re building a website for your spa business, it makes sense to use colors that represent nature and healing, such as green, and possibly blue, which symbolize peace and trust.
With so many color palette options that exist within the color wheel, using color psychology as a guiding principle when choosing your color scheme allows you to make more informed design decisions, and focus your theme and style in a way that suits your industry and business persona.
#3 Typography
Aside from the color palette, the typography of a website is one of the most important and impactful influencers of user experience.
The right typefaces elevate a design and make the content pleasant to read. The wrong typography, well, does the opposite and can ruin the visitor’s experience (and cause them to look for alternative websites).
On top of being pleasant to read, digital text must be designed for:
- Shorter attention spans — there are virtually endless website options available, many with better letters.
- Skimmability, as users tend to land on web pages looking for something specific and want to find it fast.
- Accessibility, because not all internet users perceive or interact with web text in the same way.
- Multiple device types and screen sizes — text should be legible across any digital medium.
Like we discussed earlier your tone of voice should be considered when selecting your fonts. Are you playful, serious, modern, traditional? Selecting your tone of voice will help you eliminate a lot of typeface options and help you narrow down the perfect fonts for your website.
There’s nothing that says you have to use more than one typeface (or type family) in your design.
However, using more than one typeface is an excellent method to provide both aesthetic appeal and emphasize the site’s visual hierarchy. When choosing typefaces to combine, keep the following things in mind:
- Determine the primary typeface you want to use. This may be either the body copy or headline typeface. But you’ll need something to get started.
- Consider the contrast between the typefaces you want to mix. There must be adequate contrast between typefaces, but it isn’t always necessary for them to be totally distinct. In fact, if there is too much difference, it might indicate that one typeface overwhelms the other.
- The fundamental shape of each typeface is crucial. Combining typefaces with only minor variations in form is usually a poor idea. You’ll want to combine typefaces with approximately the same underlying forms (e.g., are they circular, condensed, wide, squared off, etc.) or with significantly different shapes.
Combining typefaces is a bit of an art and a science. Once you know the fundamental criteria for a successful combination, finding the right fit takes some trial and error. So just play with it!
Typography has the potential to significantly shape how visitors view a website. The proper typeface makes for an enjoyable experience, but type that is difficult to understand or does not match the site’s tone can have a negative effect on user experience. It’s worth investing time and resources into finding the right fit.
Final Thoughts
When you combine brand consistency, a well-thought-out color pallet, and purposeful typography – you’ve got a winning formula to cohesive web design.
Have fun with this part of the process and explore all sorts of styles until you feel like you’ve really nailed it. While you’re in the exploratory phase keep in mind that simple is ALWAYS better.
It’s easy to get lost in the sauce of super creative design with gradients, micro animations, and all that fun stuff but we’re just starting out here – so keep it simple for your customers and build up to the next level when you’re ready.
Baby steps.
Don’t have time for this kind of research? Want the pros to do it right the first time for ya? Day by Day Digital has always got you back and would love to learn more about your business. Click here for a free 30-minute consultation with a design specialist to create the website of your dreams.