From web designers to marketers, customers to CEOs, everyone has an opinion on web design.
That's what makes the web so diverse and interesting!
But a good design strategy can't rely solely on personal opinions while hoping for the best. Sure, your website will be creative, but will it be effective?
Today we'll show you how your website can be both, using the underlying web design principles.
More...
This article isn't a collection of my personal design preferences or trendy techniques. It's a stripped-back view of the core goals of great web design and how to achieve them.
The Goals of Great Web Design
It's OK to be creative when designing your site. It's an expression of you and your brand. Go ahead and make something beautiful!
But every design choice needs to be underpinned by solid principles.
And web design principles need to be tied to real goals.
So before we share any real advice, we need to define these goals.
What are the fundamental goals of a well-designed website?
- To quickly guide visitors to an intended result.
- To communicate your brand, personality and trustworthiness.
- To suggest the level of quality customers can expect from your products.
- To welcome your target audience, and discourage those who are not a good fit.
Each and every web design principle needs to be tied to these aims.
Otherwise they are just personal design choices!
Goal 1: Quickly guide the visitor to an intended result
Your visitor's time and attention is precious.
If users can't find what they need quickly, they'll find it from your competitors. This is especially true with mobile browsing.
Your website needs to guide them – based on their needs – to their next action or result:
- Learn about and buy your product
- Watch a video
- Download an app, PDF, demo
- Sign up for a newsletter
- Register for an online community
- Read a specific article and comment
Good web design leads visitors to a solution for their needs.
Bad web design leaves people asking, "Now what?"
Goal 2: Communicate your brand, personality and trustworthiness
The fun part!
Your visitors want to know what kind of company or person you are. This is your chance to connect with them on a personal level.
Ultimately, they want to know how similar you are to them, and if you really understand the challenges they're trying to overcome.
Your website needs to help visitors to know, like and trust you:
Know
Is it immediately clear what your website offers?
Is your website consistent in terms of branding?
Like
Is your website overly corporate for sports fashion customers?
Or too personal and edgy for a big enterprise-level FINTECH client?
Do you speak the same language as your audience?
Trust
Can visitors find reassuring testimonials, reviews or case studies?
Does your website showcase an active community of like-minded people?
Goal 3: Suggest the level of quality customers can expect from a website's products
Imagine you are shopping for a new smartphone. You visit two shops...
The first shop is beautifully lit with the latest models on display.
Specs and prices are clearly displayed, and the shop assistants are smart and seem genuinely interested in helping, even if that means missing out on a sale.
However, the second shop has brown, faded carpet. Maybe it was once orange, it's hard to know.
The products are behind smudged plastic cabinets without prices. Some of the specs are clearly wrong. When you finally find the shop assistant scrolling through Facebook in the corner, he says you'll need an extended warranty, antivirus protection, and an overpriced USB cable.
Which shop do you think will have the better product and after service?
Designing a website is exactly the same.
Your users will make assumptions about the quality of your product and customer service based on their experience with your website.
Goal 4: Welcome your target audience, and discourage those who are not a good fit.
Effective, profitable businesses know their customers.
Equally as important -- they also know who their customers aren't. This includes people who:
- Can't afford their product or service
- Won't pay high or low prices
- Won't take the personal responsibility or action needed to see success with a product
- Live in unsupported regions
One of the biggest misconceptions of web design is trying to appeal to everyone. This always results in appealing to no-one in particular.
It's a guaranteed path to low conversion rates and high customer service loads.
Your website needs to immediately tell a visitor either:
Yes – we understand your needs and can help!
or
No – this isn't for you.
The Fundamentals of Great Website Design
So we've got our goals.
Now let's share some design principles to achieve them!
Throughout this guide, I'll also share how our own product - Thrive Theme Builder - can make your life easier, but that's entirely optional. These principles can be applied to web design regardless of the tools you use.
Let's jump in...
Be Consistent
Consistency isn't boring. It's what separates effective vs. haphazard web design.
The human brain seeks out consistent patterns everywhere to make sense of things. You can't fight against human nature!
UXPin says it better than I ever could:
Human beings look for patterns wherever they go, even on the web ... Users learn patterns the more they’re exposed to them.
Your website should be consistent across:
- Colors
- Page Elements
- Behavior
One great example is to make sure your main structural features (e.g. buttons, headings, breadcrumbs) don't suddenly change color, style, behavior, or position halfway through a user's experience.
Good designers have a central place or policy to manage fonts, colors, logos and other visual elements across a site. Some prefer to dig into the CSS code every time they want to make a change. Others use a more comprehensive solution, like a digital asset manager.
Really great web designers invest time creating brand guidelines: a simple document that can be shared with anyone responsible for adding content to the site.
Below is a great example of the color palette for Coca-Cola Zero, taken from their Brand Identity and Design Standards document. You don't have to be a huge corporation to create something similar; even a simple Word or Google Doc will make your design life easier and guarantee consistency.
Brand guidelines for Coca-Cola Zero. A great way to ensure consistency across design elements.
How can Thrive Theme Builder help?
Ensuring consistency across your WordPress theme is a core feature of Thrive Theme Builder.
Simply select colors that match your brand, and watch your website instantly update every element. We call this Smart Color Technology because, well it's pretty darn smart!
Typography Matters
We touched briefly on typography in the Consistency principle above, but it definitely deserves its own section.
If you've gone to the effort of publishing amazing content, it's time to consider how typography affects readability.
Every heading, sentence, word and link will be transformed – positively or negatively – by your choice of font and typeface.
Font Typefaces
Don't mix font typefaces or sizes across similar elements.
Avoid heavily cursive or serif fonts, except for stylised headings and short text elements. They are more difficult to read on screens and make a page feel needlessly busy:
Imagine reading this entire article in this font!
Design headings for structured content
HTML headings (H1, H2 etc.) are created to provide hierarchy information to search engines and screen readers, as well as visual separation to visitors.
Avoid using HTML headings for global, non-content elements (navigation, breadcrumbs, widgets). Better schemas are available for these while leaving HTML headings for the main page content.
Inline formatting
Use inline text formatting sparingly (like bold, italics and highlighting). Done right, they emphasize critical information like features and benefits. But remember, when everything is emphasized, nothing is!
Screen Sizes
Test your typography across different devices: full screen, tablet and mobiles. Font size, letter spacing, line height and color can look surprisingly different on smaller screens.
How can Thrive Theme Builder help?
Beautiful fonts updated in real time across every page on your site. Use our powerful typography editor to manage your global fonts and styles. Only available in Thrive Theme Builder!
Prioritize your Page Flow
People read web pages more like magazines than books:
- They don't start at the top and work down
- They don't read every word
- They scan for an interesting hook
- They skip over entire sections
- Long paragraphs make them glaze over
Understanding how visitors seek out and consume information is essential for good web design.
F-Patterns
Eye-tracking technology shows that most visitors use a predictable pattern to decide if a page contains valuable information... before choosing to stay or leave.
They scan a new page in an F-pattern, starting at the top-left and moving across in smaller movements. It's vital that they find a suitable visual or headline hook, or they’ll abandon your website for a competitor.
Classic web visitor eye-tracking tests - Source: CrazyEgg.com / UseIt.com (The reading pattern doesn't always resemble an F shape. Some layouts produce something closer to a Z or T. )
How can you take advantage of this web design principle?
Feature your most important elements first.
Don't rely on users to know what's important. They expect you to tell them.
Make your headline count and hit them with your most impactful content 'above the fold'.
Don't assume the next action is obvious to your visitors.
Emphasize call-to-actions and messaging with:
- Prominent positions
- Ribbons and banners
- Content boxes
- Big, bold buttons
- Opt-in forms
- Animations (use sparingly!) and hover effects
Restart the pattern with subheadings, sections and dividers
Anything that spans the full width of your page provides a little boost to F-pattern scanning.
Remember that the effect quickly diminishes, so don't rely on them too far down a page.
Of course, don't place anything vital in the bottom-right. It won't get much attention down there.
How can Thrive Theme Builder help?
Our professional page templates are designed with usability principles baked in.
Just choose a great starting layout from Thrive Theme Builder and customize it to fit your brand and personality. Want to try a different page flow? What used to take days of custom coding now takes just minutes of drag and dropping.
One Purpose
Confidence is sexy – confidence in what a page is, and what it isn't.
Most web pages should focus on a single topic or action.
Every element on the page should promote and strengthen it.
The quickest way to make a web page utterly ineffective is to invite too many opinions from different stakeholders. This is what I like to call 'design by committee', and it looks something like this…
CEO
Add an image carousel, an interactive map, and a visitor counter.
Marketing Team
Opt-in form.
Content upgrade.
Quiz.
Share buttons.
App download.
Content Manager
We need to link to the last fifteen articles to improve SEO.
Also, embed our latest video to boost views.
User Group
I like blue.
Make it bluer.
No. Not that blue. A different blue.
Just because you can put something in your web design, doesn't mean you should. Everything should serve a tightly defined purpose.
The exceptions are “passing-through” pages such as your homepage, section hubs and blog archives. Their purpose is to showcase multiple topics, user journey paths and decisions. They are useful for segmenting visitors and – with the help of web analytics –building data on what is important to your future audience.
The 'one page, one purpose' principle actually makes web design easier by removing options from your design toolkit.
How can Thrive Theme Builder help?
You don't have to reinvent the wheel with effective designs. There are tried and tested page layouts available for most page types that require only minimal tweaking to fit with your branding and content.
Thrive Theme Builder templates are laser-focused on what's important for each particular page, whether a blog post, archive list, video post, or even your 404 error page.
Choose and Encourage a Call-to-Action
Every page of your conversion-focused website should offer a call-to-action (CTA).
It doesn't need to be a hard sell: it depends on the purpose of the page and its place in the user journey.
For each web page, ask yourself these two questions...
- What single action do you want your user to take?
- What is the fastest, most effective way they can take it?
I like to group call-to-actions by these 3 levels of commitment:
High Commitment
- Link to product sales page
- Booking a call or appointment
Don’t be afraid to promote your product if it aligns with your audience's needs. They want a solution, or they wouldn't be here.
Low Commitment
- Email opt-in
- Providing data, e.g. a survey or quiz
These require some effort or data contribution from users. They are a great way to hint at the quality of paid products.
No Commitment
- Read related articles
- Download a printable resource
- Leave a comment
Low effort CTAs can keep people on the website and showcase additional content they might feel a strong connection with.
Call-to-actions should be impossible to miss or misinterpret.
As a web designer or business owner, you are probably very familiar with your CTAs. Don't assume your visitors have this same innate understanding.
Make your call-to-actions instantly recognizable... buttons, ribbons, opt-in forms, click-to-call numbers, download icons, related blog post lists.
How can Thrive Theme Builder help?
Thrive Theme Builder comes pre-loaded with beautifully designed call-to-action elements.
Just choose a template that fits with your CTA, customize the messaging, and link it up to your sales page or email platform. This makes it easy to test out different CTAs in minutes.
White Space
Ironically, one of the most important design principles is a complete lack of design.
White space is a calming buffer of nothing that frames your content.
Sounds very zen, doesn't it?
Don't feel you have to pack every web page with information-dense elements. Use margins and padding to help visitors feel less overwhelmed and showcase your most important content.
Obvious caveat: White space isn't necessarily white. If your background color is light blue, then so will your white space!
How can Thrive Theme Builder help?
You'll find pixel-perfect whitespace in all our templates, straight out of the box.
However, feel free to tweak your own margins and paddings to match your brand and personality. Of course, as with everything in Thrive Theme Builder, your changes will show instantly on all similar WordPress pages that use the same template.
Don't Make Them Think
Many years ago I was gifted a book about website usability — 'Don’t Make Me Think' by Steve Krug.
It became so influential that 'Don’t Make Me Think' is now known as Krug's first law of usability.
A well-designed website never makes visitors ask:
- What is this page about?
- What is this element for?
- What action should I do next?
- How do I find a certain page or section?
Remember, people don't navigate websites consciously.
I mean, they're not unconscious in the medical sense! But they do scan, skim, drift, and rely on intuition and pattern recognition.
Every time you ask your visitors to make a conscious decision or assessment, you introduce doubt into their experience. That means less time browsing, higher bounce rates, and lower conversions.
Don't Make Me Think is a principle that you can apply to every aspect of web design, but here are some tips:
How can Thrive Theme Builder help?
Make your visitor's next step a no-brainer.
Thrive Theme Builder offers custom-made templates for the most common types of business and brands: services, local business, content publishers, and personal branding.
Each template is designed to help your audience find what is important... both to them and your business.
Optimize for Different Devices
It's official: more than half of all internet traffic comes from mobile devices.
Statista pegs it at 52% in 2019. For some niches, this will be much higher. And it's growing fast: mobile devices accounted for 34% of internet traffic only 5 years ago.
Mobile web design isn't optional. It's a fundamental web design principle.
Responsive web design is more than just fitting everything onto a smaller screen.
Websites need to work simulaneously across laptops, desktop PCs, tablets and smartphones.
Visitors consume websites differently depending on their device and situation.
Attention spans are different on smaller screens. Your visitors might be using public transport, killing time at a restaurant, or yes, even sitting on the toilet.
You must constantly ask yourself which elements and layouts are appropriate for each device.
Here's some ideas when it comes to making your website mobile responsive:
- Hide non-essential elements completely
- Stack columns into rows, making the page flow better vertically
- Reduce margins and padding to fit more content into the viewport
- Reduce and streamline navigation menus for touchscreens
- Design entirely alternative elements where appropriate
How can Thrive Theme Builder help?
It's easy to switch between device previews in Thrive Theme Builder's editor. Just toggle between desktop, tablet or smartphone to see a real-time, accurate preview of how your page will look.
But it's much more than just a preview: you can tweak your design for different screen sizes right there too...
Want a smaller headline font for mobiles? No problem. Larger icons for tablet users? You got it.
Wrapping Up
There's a big difference between fundamental web design principles, and web design choices (aka opinions).
Your website conversions won't improve simply by changing fonts or button colors on a whim. That's a trap that just makes you feel like you're doing something productive. It's far better to focus on the underlying principles and goals of professional web design instead.
And lucky for you, many of these principles are built into our Thrive Theme Builder straight out of the box. Of course, if you prefer to use other design tools, this advice will still help your website to work better for your business and audience.
So finishing where we started: it's OK to be creative when designing your website!
The internet would be a boring place if every website looked the same. Creative design is something to be celebrated, as long as those choices are based on the goals of your business and audience.
Let me know your thoughts in the comments!
Lots of good info here! Reminders on things we can implement. Thanks!
I have two questions.
1. I am using Custom Post Types. I want to use post grids to show on the archive page. Is it possible for me to select a specific post type instead of normal posts? Or select page categories instead of post categories?
2. How can we implement a specific archive template for a specific category or a specific post type? And a different template for another category or another post type? Instead of ‘apply to all archives’ kind of deal?
Are these things possible with Thrive Theme Builder?
Please let me know. Thanks.
Hello Kaivalya, all of the things that you’ve asked about in your comment are possible. Y
– The post list element works with all post types and all taxonomies
– Theme builder allows you to create templates specific to post types and to taxonomy archives
This article is very helpful to me. Please keep updating more content on this topic. Thanks!
One more very helpful article from your awesome team! Once again then, THANK YOU!
What an incredibly well written and thorough article! Wow
Thanks Alan, I’m glad it was helpful for you.
I understand what you are putting up. And I too believe that action should be taken