Five Tips For Better Website Design (With Examples!)

Five Tips For Better Website Design (with examples!)

There are many different factors that go into a great looking website design. It needs to have style of course, but the overall design also needs to focus on the user experience and ease of use. If you're currently struggling with making your website pretty AND functional, this article's for you!

1. Keep Your Homepage Minimalistic and Clutter-Free

It is rare to read every word on a website. Instead, the user quickly scans pages, and picks out keywords and sentences. Knowing this, it is better to appeal to these behaviors instead of focusing on the word count. Text and Calls To Action are very necessary on the homepage, but make sure to break them up with larger subheadings (h1, h2, h3, etc.). Also, what works really well is using images or icons as ways to communicate your point without having to add too much text.

2. Design with Hierarchy in Mind

A crucial part of a designer's job is to arrange content in a clear manner. You only have a few seconds to capture the user's attention and tell them what your site is about. The way to capture their attention is to establish a clear hierarchy of your information. To help create a hierarchy, remember to have color, contrast, sizing, and spacing between your content so that the reader can follow the breadcrumbs that you have left for them.

Here's an example of Visual Hierarchy.

3. Create Easily Digestible Website Content

The “Readability” measures how easy it is for people to recognize words, sentences, and phrases. When your site’s readability is high, users will be able to efficiently scan your site and take in the information in the text without much effort.

It’s very important to have a contrast between your text and its background so that the text is clear. You have most likely carefully selected colors that are part of your brand identity and they should be represented on your website. Feel free to play with colors, just don’t sacrifice the readability for creativity.

Here is an example of low contrast text. See how hard it is to read?

Font SizeWebsites early on had small fonts, but as they progressed and developed, people realized that it was hard to read tiny fonts. A typical rule to follow is to keep your body text at least 14-18px, which is a standard paragraph text size.

Font Family: Serif vs. Sans SerifSerifs are those little projecting points or lines that some fonts have on the ends of their letters. Times New Roman, for instance, is from the Serif fonts family. Sans serif literally means “without serif”. Sans serif fonts (the most famous is Helvetica) are typically the best choice for online texts. Script fonts (The ones that look like handwriting) are really cool with all the fancy curves, but please be considerate of your visitors’ eyes. Using them for headers is fine, but not paragraphs of text.

Font OverloadAs a rule, don’t use more than three different typefaces throughout a single website. Some projects may call for more elaborate font combinations, but if you do choose to use a variety of fonts, the overall effect should be harmonious, not cluttered.

4. Easy Website Navigating

You might consider yourself one to always break the mold, but when it comes to website navigation, it's best not to make it too complicated. Don't send your visitors on a quest to find their destination, otherwise, they won't be returning. A website with a solid navigation helps search engines index your website content while also improving the user experience. (Win, win!)

A couple ways to improve your website navigation are:

Link Your Logo To Your Homepage It’s a common practice that your visitors are used to and will save them some clicks.

Mind The MenuThe navigation menu should be on the top of your website and structured according to the importance of each section.

Offer Vertical NavigationIf your website design is styled to be more of long-scrolling, it would be best to add an anchor menu. With one click, users will be able to go back to the top, down to the bottom, or directly to any section of the website.

Don't Forget The Footer Your footer is most likely the last thing to be seen on your website, so remember to include all the important links there. This could include a shortened version of your menu, social icons and additional important links (terms of use/FAQ/contact/blog etc.) your visitors may need.

Keep The Important Content Up TopRemember that your website visitors should be to understand what your website is about without having to scroll. Fun fact: back in the day (like 2012) we called that "above the fold."

5. Be Mobile Friendly

More and more users are accessing websites via their mobile devices than ever before. Pretty soon more users will access websites on mobile vs. desktop. Because of this, it is super important to make sure that your website stays mobile friendly so that the user doesn't lose out on the experience. Luckily, when designing in Squarespace and Shopify, their platforms make it pretty easy to create a mobile-friendly website across all screens.

In Conclusion

When keeping the user at the forefront of your mind in website design, not only will you have a solid looking website, but you will have a pleasant user experience to match. Are you ready to start your website or take your current website to the next level? Feel free to reach out to us so that we can help!

x, gretchen

I'm Gretchen Kamp.

I'm a graphic designer turned business owner who lives in yoga pants and is fueled by pizza and red wine. I am a soon-to-be fiancé to a handsome nerd, and a mom to a goofy snaggle-tooth rescue pup. I love traveling the world and teaching other female entrepreneurs everything I've learned in the last three years of full-time self-employment. When I'm not in my design studio, you can find me at Cyclebar or galavanting in San Diego with my semi-insane girlfriends.