5 Simple Web Design Tips
Published on 15/12/2020
Every webpage starts the same: a blank page or template.
With this absence comes an abundance of possible choices and creative solutions regarding how you design your page. However, this abundance isn’t always a good thing. While you may have infinite choices, you do not have infinite time.
These tips will help you make strategic decisions early on in the process to minimize productive shortcomings while maximizing the overall quality of your finished product.
With this absence comes an abundance of possible choices and creative solutions regarding how you design your page. However, this abundance isn’t always a good thing. While you may have infinite choices, you do not have infinite time.
These tips will help you make strategic decisions early on in the process to minimize productive shortcomings while maximizing the overall quality of your finished product.
1) Assume Your Website’s Visitors Will Skim Through Your Content
It would be great if every visitor to your website took the time to sift through all the content you worked so hard at producing, but that simply isn’t going to happen. The average visitor will not put forth the effort to parse through a detailed wall of text.
They will merely scan the content for relevant keywords, much like they scan shelves at the grocery store, searching for their favourite detergent brand. As such, ditch the walls of text and adjust your content accordingly.
Make sure that if something is important, you draw attention to it before anything else.
It would be great if every visitor to your website took the time to sift through all the content you worked so hard at producing, but that simply isn’t going to happen. The average visitor will not put forth the effort to parse through a detailed wall of text.
They will merely scan the content for relevant keywords, much like they scan shelves at the grocery store, searching for their favourite detergent brand. As such, ditch the walls of text and adjust your content accordingly.
Make sure that if something is important, you draw attention to it before anything else.
2) Hold Your Visitors’ Hand Throughout Their Visit
While older web design standards promoted website exploration, this is generally not recommended anymore — unless you’ve created the next great social media platform. Instead, design your website very purposefully and guide them through the entire experience.
According to the Interaction Design Foundation, “Users define the visual hierarchy of a website or app. The item that first grabs the eye’s attention is at the top of the hierarchy. Each item that next draws attention is subordinate to the one before it.”
Whether you want a visual hierarchy to exist or not, one will, and you should take advantage of it! Thus, in 2020, web designers should curate their websites, making them as linear as possible by having each section logically follow the last, guiding the user with prompts each step of the way.
To do this, go through the content of your website (or have someone else go through your content) and take note of how your eyes naturally navigate the page and where you want to go next. If it takes more than a few seconds to find primary information that leads into the next section, you may need to redesign your page.
While older web design standards promoted website exploration, this is generally not recommended anymore — unless you’ve created the next great social media platform. Instead, design your website very purposefully and guide them through the entire experience.
According to the Interaction Design Foundation, “Users define the visual hierarchy of a website or app. The item that first grabs the eye’s attention is at the top of the hierarchy. Each item that next draws attention is subordinate to the one before it.”
Whether you want a visual hierarchy to exist or not, one will, and you should take advantage of it! Thus, in 2020, web designers should curate their websites, making them as linear as possible by having each section logically follow the last, guiding the user with prompts each step of the way.
To do this, go through the content of your website (or have someone else go through your content) and take note of how your eyes naturally navigate the page and where you want to go next. If it takes more than a few seconds to find primary information that leads into the next section, you may need to redesign your page.
You can see both limited text and guided search applied above in the screenshot of Harry's homepage. Harry's, a shaving company, has prioritized guiding their users directly to either gift sets or a specified razer purchase. Of course, the guidance does not stop at the homepage; if a user clicks get started, they won't be greeted by just a general sales panel, but rather a direct offer, which covers most users' wants.
3) Learn to Love White Space
Not every page needs to be filled to the brim with content. In fact, you should be liberal in your use of white space as a means of directing your visitors’ attention to specific nodes of content throughout the page.
According to a report by SimilarWeb, the amount of time a user spends on a website, regardless if it’s accessed through a smartphone or desktop, has gone down consistently over the last decade. Between 2017 and 2019, they found a 49-second drop in time spent on websites before users navigated away from the website. That means that designers need to be increasingly diligent in how they manage the layout of their website and how they direct their visitors’ attention.
Think about Google’s homepage. It’s practically all white space. And, because of this design, users know exactly how to use it.
Similarly, at Grapedrop, we embrace white space as often as possible. Check out our building prompt below. It may be simple, but it’s also aesthetic and intuitive for users.
While you may not have to become a minimalist, you should strive to be very purposeful in what you delegate as necessary on your website. Chances are there’s a lot of room for erasure, a lot of room for white space.
Not every page needs to be filled to the brim with content. In fact, you should be liberal in your use of white space as a means of directing your visitors’ attention to specific nodes of content throughout the page.
According to a report by SimilarWeb, the amount of time a user spends on a website, regardless if it’s accessed through a smartphone or desktop, has gone down consistently over the last decade. Between 2017 and 2019, they found a 49-second drop in time spent on websites before users navigated away from the website. That means that designers need to be increasingly diligent in how they manage the layout of their website and how they direct their visitors’ attention.
Think about Google’s homepage. It’s practically all white space. And, because of this design, users know exactly how to use it.
Similarly, at Grapedrop, we embrace white space as often as possible. Check out our building prompt below. It may be simple, but it’s also aesthetic and intuitive for users.
While you may not have to become a minimalist, you should strive to be very purposeful in what you delegate as necessary on your website. Chances are there’s a lot of room for erasure, a lot of room for white space.
4) If Everything Pops, Nothing Does
Imagine that you chose a deep, dark blue for your background color and magenta pink for your CTA button.
The button in your mind is probably popping out on the page quite prominently. Now imagine all the text on the page was the same color as your CTA button. It isn’t so prominent anymore.
Be careful with your colour schemes and ad placements: they make a world of difference in how you manage people’s attention.
Imagine that you chose a deep, dark blue for your background color and magenta pink for your CTA button.
The button in your mind is probably popping out on the page quite prominently. Now imagine all the text on the page was the same color as your CTA button. It isn’t so prominent anymore.
Be careful with your colour schemes and ad placements: they make a world of difference in how you manage people’s attention.
You can see the effective use of both white space and careful "pop" from Digiday and Buzzfeed News screenshots, shown above. Notice that both sites, aiming to put forward their content, have reduced the use of colour, except where necessary, while ensuring plenty of white space.
5) Simple Designs and Simple Copy Make For the Best Web Design
The goal of any website is to help visitors navigate from point A to B while effortlessly absorbing the content you provide.
That means visitors shouldn’t need to drag out a thesaurus because you decided to get flamboyant with your adjective choice. This will only break their immersion in the website, potentially causing them to become distracted and leave the site.
Make sure your simple, easy-to-navigate web design is coupled with a simple, easy-to-digest copy.
No confusion, no problems.
The goal of any website is to help visitors navigate from point A to B while effortlessly absorbing the content you provide.
That means visitors shouldn’t need to drag out a thesaurus because you decided to get flamboyant with your adjective choice. This will only break their immersion in the website, potentially causing them to become distracted and leave the site.
Make sure your simple, easy-to-navigate web design is coupled with a simple, easy-to-digest copy.
No confusion, no problems.