Building the Perfect Website Design
5 Tips for Perfect Website Design
Visual design is one of, if not the most forward-facing aspects of a website. It’s what shows off the personality and story of your brand and the best parts of your service offerings. Visual design is the pretty picture that makes your first big impact to grab and keep the audience’s attention.
Without strong visual design, a website can look bland and have no personality. I’m talking about things that could lead to websites using Comic Sans (and NOBODY needs Comic Sans in their life). Using uninspiring visuals, combative color palettes and terrible typography can create a cluttered mess where your eyes don’t know what to focus on first.
To help you avoid the pitfalls of bad design, we’re talking tips for your visuals that enhance your site by catching the audience’s attention, telling a story and making it easy to navigate through your pages. But first:
Disclaimer: Don’t forget your UX design!
When people think about website design, they usually think of graphic design—the visuals, colors, pictures and typography. But website design is way more than imagery. It involves a lot of UX design work like planning layouts while thinking about user behavior.
Because UX is focused on the user’s decision making process, it’s important for them to know the website’s goals first. Then they can think about placing content and visuals just right in the site’s hierarchy can help the site achieve these goals.
UX and visual design go hand in hand for a successful website because of how closely they work together. For example, if your main goal is to get people to make a purchase, you want product visuals or a “BUY NOW” button easily accessible at the top of the page. That’s UX. But you’ll also want that button to be eye-catching and beautifully designed using the principles of color theory. That’s graphic design. A site’s layout, design and placement of elements should flow cohesively to help tell the brand’s story. That’s why teamwork between UX and graphic designers makes the dream work.
We say this to make it clear that the term “website design” is so much more than visuals, but for this blog, we’ll focus mainly on that aspect of the process. The UX design process is another blog for another day, but we can’t possibly discredit its role in site design.
So let’s dive in. How can websites utilize visual design to their advantage?
1.) Make a big first impression.
The biggest and most important thing is the immediate, gut reaction when someone first lands on the site. Statistically speaking, you have about 2-3 seconds to draw visitors in right away visually and capture their attention.
To put some strategy behind your visuals, refer back to your list of site goals. Make the site design elements that tie back to your top goals stand out first. Always be very clear at what you do, right away. The immediate message to visitors should be well crafted and representative of the personality of your brand. Each page, but especially your homepage, should be designed like a funnel: Biggest, most important info up top, smaller details at the bottom, narrow end of the funnel.
If you’re selling a product, put crisp, clear product imagery up top along with photos or videos of people interacting with the product to drive a more emotional connection. For better first impressions, use your own image or video assets on the site whenever possible. Custom photography or illustrations is always the more engaging option over “multicultural diverse office crowd smiling.” Trust us, it’s worth the investment. An extra touch of motion up top can also help sell, like a hero video or supporting animation .
Take the Chef’s Garden website we created as an example. Their homepage creates a big first impression with custom photography of delicious looking veggies supported with a clear message.
2.) Determine what’s most important and go from there.
Once you’ve kept a user’s attention enough to stay on your website and begin navigating, it should be clear what they need to do next. Several places on your site, such as the header navigation, will need to be strategically built out with clear pathways the user can take through the site, depending on their intention.
When there are multiple places for a user to click next, it helps to determine what the primary, secondary and even tertiary clickable items are and style them accordingly. Typeface, font size and weight as well as a systematic color palette can divide up the various levels of informational hierarchy with headers and subheaders.
Take for example, the site we designed for The Jet Express ferry service to the Lake Erie Islands. They want people first and foremost to purchase ferry tickets, so this main call to action is above the website fold and first in the navigation bar. In the same funnel system mentioned above, the less important information is filtered down through the rest of the homepage.
3.) Don’t overcrowd it.
It’s cool to be excited about your brand and ready to show the world, but you don’t need to say everything right off the bat! Site overcrowding usually happens with a “design by committee” mentality where everyone tries to squeeze what’s most important to them at the top of the site. People have different priorities and feel that their information is most important to the user.
One concern we hear often from team members is “But if people don’t scroll, how will they see my information!” We promise you, people know how to scroll and the chances are they will do it. It’s almost instinctual to scroll through a site’s homepage, especially on mobile devices where your thumb is always at the ready. But if a user is greeted by your site with four different messages and calls to action, the chances of them navigating away immediately skyrocket.
If you find overcrowding is becoming a problem, go back to your website goals and assess which message is most important. Put what’s most important above the fold and spread your other messages through the page funnel.
4.) Keep your site as open and airy as a patio in summer.
In addition to spreading out your main messages, white space is also a crucial component of site design. Using plenty of negative space allows things to breathe and helps the message come across clearly. It can also make certain site elements stand out.
Ask any designer—you get to tell a better story with more white space. Spacing out the content into digestible sections, allows users to absorb your website messaging and story simply and effectively. Take, for example, a product you’re selling.
- Start by telling the audience what the product is
- Further down the page, show who the product is for
- After some white space, explain the benefits of the product
- Then scroll down to talk about payment plans
- Finally, mention that the product is made in the USA
See how you can use this funnel method to tell a nice, spaced-out story on one page? The most important stuff at the top and details at the bottom.
5.) Choose great typography.
Strong typography is something else that goes a long way in delivering your site’s message. And the strongest typography is also the simplest. Choose two typefaces, maybe a third one as an accent, with 2-4 weights total for your font family. Maintain consistency with what you have. Because less is more, a dozen different fonts on one site ends up looking messy, not fancy.
Consistent font styles also contribute to that hierarchy aspect we mentioned earlier. Font weight and size are crucial in helping the user determine what’s most important on the site and where their eyes should look first. For example, using Helvetica for almost all your content but Garamond for just a few things automatically makes Garamond stand out. You could use Garamond for button text to call attention to it as an important item.
And remember, when it comes to fonts you also don’t have to rely on Arial and Times New Roman ever again! The days of websites using basic fonts are over now that availability goes beyond Microsoft Word. Typeface providers have a plethora of different fonts that can be free or licensed through a font provider like Google, Adobe Fonts, Fonts.com and more.
thunder::tech designed a website for Crisis Prevention Institute, an organization that provides courses that teach individuals ways to handle confrontational situations, and de-escalate them. The typography used for the website and the brand is a combination of a hand drawn typeface and an elegant slab serif. This combination has a calming and soothing personality that supports the brand’s vision and mission.
A solid visual design is just one of many intricate moving parts that contributes to your website. A successful site wouldn’t be possible without the foundational support of flawless UX design, well-planned optimization and innovative development. The teamwork needed on every new website we create is why we don’t approach sites with just visual design in mind, instead looking at everything holistically with an integrated mindset.
Visual design lays the groundwork for a gorgeous site that makes all your dreams come true. You can learn more about thunder::tech’s web design and development services here.
About the Author
Bruce Williams is the Vice President Development Department at thunder::tech. He charts paths with clients to get the most out of digital technology and design. He prefers Marvel over DC and will always be CLE.
Related Blog & News
How to Write Effective Product Description Pages (PDPs) That Convert
Blog | Nov 04, 2024How to Use Storytelling to Elevate Your Brand
Blog | Oct 29, 2024How to Build a Successful YouTube Strategy
Blog | Oct 14, 2024Q4 2024 Marketing Trends: What to Watch for and How to Prepare
Blog | Sep 05, 2024Contact us today! No pressure, but we are here to help
Reach out to learn more about how thunder::tech can help your business not only succeed, but accelerate.