27 Great Ideas How You Can Improve Your Web Design
Total number of visits. It’s simple to see. Because it’s right there in your Analytics, every marketer knows how much traffic they’re getting. What happens next, however, isn’t as evident.
That’s why it’s simple to give traffic-building advice, but it’s difficult to give web design advise. There are numerous aspects to consider. It’s tough for us to predict what would work best, even after 1000+ successful website design jobs.
This post contains 27 web design recommendations for maximizing the value of each and every visitor. The majority of these suggestions are backed up by research. These are for novice designers as well as advanced UX professionals, as well as small and large businesses.
Here’s our greatest tips, ideas, and inspiration for creating a successful website. A attractive site converts visitors and extracts more value from each of those hard-earned visits.
The two most important studies are included at the bottom of the page. Skip down if you’re impatient!
The Website’s Structural Layout
Websites are made up of two components: containers and content. Structure and style are two aspects of the container. Let’s begin with the most basic. These pointers are regarding page structure and layout.
1. Use a visual hierarchy to your advantage.
There is a visual hierarchy on every page. If you’re unfamiliar with the term, here’s how we define it:
The order, size, color, and contrast of visual elements is referred to as visual hierarchy. It governs their relative prominence and the order in which the human eye perceives them.
Visual hierarchy is used by web designers to direct visitors’ attention to the most important information first. The position (high or low on the page), sizes (large or little), visuals (video, photos, icons), and contrast are all part of the website layout (color and white space).
When two or more elements are combined, their impact is amplified. A huge video will be prominently displayed on the page for everybody to view. Low contrast text accompanied by graphics will be noticed by a small percentage of the population.
Every page you visit on the internet has a visual hierarchy, which explains why your eyes follow a specific path. When utilized strategically, it draws the visitor’s attention to a series of messages leading up to a call to action.
2. Use a catchy, keyword-focused title prominently on the site.
The top of the homepage (and every page) has either a descriptive or non-descriptive headline. If this is not the case, the visitor may be unable to answer their first question: “Am I in the proper place?”
It’s also a chance to employ a target key and demonstrate relevance. However, many marketers instead write something creative or ambiguous. However, clarity is preferable to cleverness.
Write a descriptive headline rather than a flashy but vague title. Make sure you clarify what the company does above the fold, on the first page.
Is it true that the fold is still a thing?
There is, in fact, a fold. There is a viewable space for every visit on every screen. The renowned fold may be found at the bottom. This visitor will have to scroll down to see anything below this line.
The question of why and whether this matters in web design is a contentious one. Here are two of the best arguments: “There is no fold!” and “There is no fold!” vs. “The fold is still important.”
Of course, there are dozens of different screen sizes to choose from, ranging from tiny to enormous. In the last month, our website was visited on 958 distinct screen sizes. As a result, some designers argue that the fold is no longer necessary.
But, finally (get it?) here’s the bottom line. Every visit still has a fold, and all visits still have an average fold. For desktop/laptop, mobile, and tablet, tools like Hotjar display it as a line in the scroll heatmap.
Yes, there is a fold, and what you place above and below it counts. According to one survey, visitors spend 80% of their time above the fold.
So, high on the page, above the fold, place your value proposition, that 8-word summary of what you do.
3. However, don’t place all of your calls to action at the top of the page.
Visitors may be staying longer, but it doesn’t necessarily imply they’re ready to act. Further down the page, there is a lot of convincing.
When Chartbeat looked at 25 million visitors, they discovered that the majority of engagement occurs below the fold. Although the content at the top is obvious, it is not always the most effective location for calls to action.
One caveat to this widely quoted study: Chartbeat is mostly utilized by news websites, which are not the same as marketing websites. On a news website, hardly one does much above the fold! Normal site design advice isn’t applicable.
Make sure to include calls to action further down the page, in areas where there is a strong likelihood of interest.
4. Make the page tall. Respond to all of your visitors’ inquiries.
More pixels equals more room to respond to inquiries, address concerns, and provide proof to back up your claims. If a visitor is unable to discover a solution to a critical query, they can just scroll down the page. They’ll simply quit reading once they’re satisfied.
The most effective sales sites are those that are modeled around sales discussions.
Would you ever cut someone off in the middle of a sales meeting and refuse to answer their questions? A short page just does one thing: it stops answering questions.
This is where the famous Crazy Egg study comes in. They conducted a survey of their target audience, identified their top problems and questions, and created a long page that addresses everything.
The page was 20 times longer than the previous one. The conversion rate increased by 30%.
“Scrolling is a continuance,” says the narrator. “Clicking is a choice” — Rocket Insights’ Josh Porter
5. Focus on just one item at a time.
“I prefer simple, modern designs.” When we begin web design projects, most of our clients tell us this. They frequently use the website of Apple as an example.
Clutter irritates visitors. Whitespace is something we enjoy. To put it another way, we prefer simple visuals.
In 2012, Google set out to find out what types of websites visitors think are attractive. It’s a research about simplicity with a long title: The role of visual complexity and prototypicality in website initial impressions: Working on gaining a better grasp of aesthetic judgments.
They discovered that more complicated designs are seen as less beautiful.
This explains why single-column layouts and tall pages are becoming more popular. Multiple-column designs (left side navigation, content area, right rail) are more complicated, having more visual elements in the visitor’s frame of vision.
So get rid of the clutter. At each scroll depth, make one of two components the focal point.
6. Use conventional layouts.
The same Google study discovered that “high prototypicality” is linked to perceived beauty. To put it another way, odd isn’t always attractive. A website that adheres to web design guidelines is more likely to be appreciated.
The most beautiful sites have a high prototypicality as well as a minimal visual complexity. They’re both straightforward and uncomplicated.
Consider this: it’s important to distinguish your brand, but the layout isn’t the place to do so. Differentiate yourself by what you say. However, be consistent in how your site is used.
Some automobiles appear to be spectacular. They’re not the same. They’re stunning. They do, however, feature doors on the sides, wheels on the bottom, and front headlights.
But what constitutes a standard? These are the standard elements for a website, according to our research:
The following is a website of “standard” websites with high prototypicality:
- The logo appears in the upper left corner.
- In the header, there is a horizontal navigation bar and a search bar at the top.
- At the bottom, there are social media icons.
- Mobile-friendly design
7. Watch out for “false bottoms”
Page blocks are used to construct modern marketing websites, particularly sales pages. These are content rows that run down the page in a single column, often with an image on one side and text on the other.
A typical service page on a lead generation website looks like this.
The footer has a darker background color, as shown in the diagram. Because so many websites do it, visitors have come to believe that a darker background implies they’ve reached the bottom of the page.
However, if the design has a dark backdrop pageblock, the visitor may believe they’ve reached the bottom and stop scrolling. It’s a fictitious bottom.
Note: I’m debating this with my own designers. Our creative director, Kurt Cruse, makes a fantastic point. Changing the backdrop color is a great approach to alert users that the content type is changing. Kurt, I hear you!
Simply choose your backdrop colors for page blocks with care. To be safe, stick to minor differences or stick to white or light gray. Then, in the footer, change to dark gray or black.
8. Stay away from whirling sliders and carousels.
Clients adore them, and they’ve been popular for years. The homepage slideshow, however, has a flaw: viewers may only see the first slide.
A large number of investigations have come to the same conclusion. Following-slide messages are less likely to be seen, and calls to action are less likely to be clicked. Take a look at how many people click on the slides on a university’s website.
They’re popular because they’re simple to obtain approval for. Above the fold, various stakeholders from various departments each get a few pixels. They’re great for intra-office politics, but not so much for guests.
In conference rooms, homepage slideshows are effective at preventing people from stabbing each other.
So, what are your options?
Stack the slides so that the visitor may scroll down the page and see each one. They’ll become considerably more obvious all of a sudden.
Use a featured image as the hero, using the most impactful slide as the featured image. Make a strong call to action!
9. Stay away from tabs and accordions.
Another method to bring things out of hiding is to avoid tabs and expandable content boxes.
Knowing that up to 76 percent of website visitors scan, you may make your material more visible to them by having everything exposed and without requiring them to click to discover something.
You’ll undoubtedly see tabs and expanding accordions on Amazon if they’re successful.
Remember that scrolling is quicker and more convenient than clicking. Visitors are less likely to see anything if they have to aim and click or tab to see it.
Let’s get to the graphics now. These pointers are particular to web page images.
10. Make use of photographs of individuals
Faces are one of the most potent forms of images. We look at faces more than anything else from the moment we are born. In web design, the magnetic power of people images is quite useful.
Faces not only attract attention, but they also correspond with conversion. When faces and testimonies were merged on a sales page, the famous Basecamp case study demonstrated a substantial boost in results.
Make certain that your website does not resemble a “abandoned spaceship” with no one aboard.
Over the years, I’ve talked to thousands of businesses about their marketing and discovered a pattern. Big businesses strive to appear little, and tiny businesses strive to appear large. Isn’t it strange?
Every organization should just strive to be more personal and human.
11. However, avoid using stock photographs of people.
Stock photographs have their place, but I would avoid them like the plague when it comes to humans. They never seem genuine, and as a result, they don’t develop trust.
Stock pictures entice businesses because of their excellent production quality. Your visitors, on the other hand, are more concerned with actuality. They would prefer to see actual employees of the organization.
Authenticity takes precedence than gloss.
This is supported by research. Visitors tune out stock photos of individuals and “filler” images, according to a study by NN Group, but look at photos of genuine people.
So be yourself, display your team, and include real people in your photos, even if they are well polished.
12. Use facial expressions as visual cues
People photos provide a unique opportunity to direct visitors’ attention. The well-known phenomena of “you look where they gaze.”
When researcher James Breeze showed 106 participants designs, he highlighted the importance of well-placed faces. They have the ability to draw the visitor’s attention to other parts of the site.
This is the well-known study of the baby’s face. Visitors stare at the infant when it looks at the camera. Visitors gaze at the headline when the infant looks at the headline.
My friend Oli Gardner is sick of the baby example (sorry, Oli!). Please let me know if you know of any additional study or good instances in the comments!
Use a line of sight as a directional cue in face imagery to direct visitors’ attention to benefit statements or calls to action.
13. Use visual cues such as arrows.
Faces can direct attention, but they aren’t the only way to keep your guests’ gazes on you. Even more effective are small hand drawn arrows.
CXL discovered that a simple arrow was even more effective in getting visitors to glance at a page element in this eye tracking study.
If you want your visitors to look at anything, use an arrow to direct their attention to it. This tip is either ridiculously apparent or extremely brilliant, I’m not sure.
14. Use color to draw visitors’ attention to call-to-action buttons.
Colors have emotional meanings (red denotes urgency, blue denotes tranquility) and are used to establish brand standards. They are, nevertheless, chances to draw the visitor’s attention to buttons and CTAs.
The ability of color and brightness contrast to grab attention is confirmed by an Eyequant study on button color.
Colorful buttons, however, aren’t always beneficial, according to the study. If you want your button to stand out more, do the following:
Make the button color stand out against the background.
Contrast the color of the button with the color of the button text. Contrast the color of the button with the color of neighboring elements on the page (or leave plenty of white space around it)
The “Von Restorff Effect” is a term that refers to a phenomenon that occurs when a person
Hedwig von Restorff, a German scientist, established in the 1930s that when people are shown a list of ten items, they recall the ones that are a different hue from the rest. Because the occipital lobe is sensitive to visual variations, often known as “pattern interrupters,” this is the case.
Paras Chopra, a web marketer, conducted research that revealed that distinctive colors are not only remembered more, but also clicked more: 60% more!
Pick a “action color” for all of your links, buttons, and rollover effects, as a pro tip. Make it a color that stands out from the rest of the design’s brand colors (the “passive colors”). The action color should only be used in clickable objects.
Links and Navigation
Now we’ll discuss site navigation, which includes the menus, buttons, and links that allow your visitors to move around.
15. Use descriptive language.
Because navigation is always visible, it’s an opportunity to communicate. The most common way for visitors to begin their visit is to scan the header. Anything you put there, including your menus, will almost certainly be seen.
You’ve missed an opportunity to inform visitors what you do when the navigation labels are generic. Consider the following two examples:
If your navigation labels are generic, they are shared by thousands, if not millions, of other websites. You’ve passed up an opportunity to use best practices in website navigation to assist your visitors and boost your search rankings.
16. Put your house on the left, but don’t stress too much about the sequence of the menu items.
Put your home link on the left if you have one. Visitors anticipate to find it there because it’s the most usual location for it.
When it comes to the rest of the menu, research has shown that the order isn’t all that essential. There is a low association between the arrangement of menu items and visitor success, according to two distinct eye tracking studies (source and source).
So don’t spend too much time fretting over the sequence of your menu items.
17. When linking from service sites to blog entries, be cautious.
On a service page, the goal is to turn the visitor into a lead. When you give people a lot of reasons to quit and read your blog, they’ll end up on pages that aren’t as focused on lead generation. Blog postings, by their very nature, have more distractions, exits, and conversion rates that are lower.
18. Use caution while linking to other websites.
When possible, include links to resources that will assist the visitor in achieving their objectives. This is usually a source citation or a link to external references in a blog post. Hundreds of papers and studies are linked in this post!
However, you should use caution while linking to other websites on service pages and your homepage. Do you truly want visitors to click on that link on any page geared to convert visitors into leads? Is it assisting you in achieving your objectives?
19. Don’t put social network symbols in the header of your website.
Similarly, using bright social media icons in your header is counterproductive to your objectives. Visitors who click on any of the candy-colored buttons will be taken to a site that is full of distractions. They’re not likely to return.
This is almost always the wrong approach to go about integrating social media. If you want to link to a social media site, do so in your footer. Visitors can find social media sites if they look, but you’re not encouraging them to leave.
Let’s talk about language for a moment. On the site, we previously advocated a key-focused title. Here are a few more suggestions for website writing, including headers, subheads, and body text.
20. Create interesting subheadings
Subheads with ambiguous meanings abound. They are frequently huge and ineffective, but they are followed by small but valuable items. Isn’t it strange? It would be more logical to do the contrary.
Make sure the big things are interesting and useful to visitors. If you’re using terms like “products” or “services” in your subheaders, consider whether a more descriptive term might be more useful. Here are a few illustrations.
This is beneficial to scanners as well as usability. It is beneficial to the visually impaired as well as accessibility. It’s also a smart SEO strategy. Never pass up an opportunity to make a point!
ProTip: Subheads aren’t always necessary. Would this page still be as good if it weren’t for it? Would visitors be able to tell what they’re seeing? If this is the case, simply remove it.
21. Stay away from long paragraphs and lines.
Digital content best practices do not allow for long, blocky paragraphs. Long paragraphs can be broken up to make the text more digestible. Write paragraphs that are no more than 3-4 lines long as a general guideline.
“Short paragraphs are read, long paragraphs are skimmed, and really long paragraphs are skipped,” says Jason Fried, Basecamp’s founder and CEO.
Visitors may find it more difficult to read if the line length is excessively long. Lines containing no more than 12 words are recommended by the Web Style Guide.
22. Stay away from jargon. Make use of simple terms.
The website will be more successful if it is easy to read. Use language that visitors are familiar with. Long sentences and sophisticated words put more strain on the temporal lobe. That’s not a good sign.
“Less is more!” The term “cognitive fluency” refers to how quickly your visitor’s brain processes what they’re seeing. We automatically perceive something as riskier and/or time-consuming when it is difficult to read. Use concise content, basic typefaces, and an easy-to-read style to increase conversion.” — Brainfluence author Roger Dooley
Copy that is effective for “low literacy” users is effective for everyone. Anything’s not about dumbing it down; it’s about utilizing straightforward language that everybody can comprehend. According to research, lowering the readability levels can increase the success percentage for all visitors.
Even PhDs prefer to read as if they were in eighth grade.
That huge phrase may make you appear intelligent, but it may make your guest feel foolish. A visitor who is unsure of themselves is unlikely to behave. So, when you write, keep this question in mind:
Do all visitors understand the meaning of the words on this page?
23. The “Serial Position Effect” and List Order
Put the most significant information at the top and conclusion of any lists you create in your copy. In the middle of any list, the reader’s attention and recall are the lowest. The first and last things on the page are more likely to be remembered in short-term memory as visitors scan the page.
24. Respond to the most often asked questions by visitors.
They were armed with inquiries. The website’s main purpose is to provide answers to those questions. Every query that goes unanswered is a squandered opportunity to establish confidence. Unanswered inquiries can make it more likely for a visitor to leave.
Joel Klettke was able to quadruple the conversion rates on Hubspot landing pages by using his technique of finding questions and crafting solutions. He conducted interviews with customers, assessed their responses, prioritized the messaging, and finally, in the new marketing copy, he incorporated the audience’s own words. Smart!
Here are the questions Joel asks to find out what the visitors’ most pressing concerns are:
- What happened to make you want to find a solution?
- What other foods did you try, and what didn’t you like about them?
- What nearly deterred you from making a purchase from us?
- What gave you the confidence to give us a shot?
- What made you choose X as the best option?
- What was most essential to you when analyzing X?
- What can you do now that you couldn’t do before (or can do better)?
- Tell me about a time when X made a difference in your life.
What is the objective of your website in a nutshell? Answer.
Additional reading: A 13-Point Checklist for Creating the Perfect B2B Website Service Page
25. Include proof and social proof.
The human desire to do what other people are doing is known as “conformity bias.” As a result, demonstrating that others have chosen you helps choosing your firm appear like a good decision. The idea is to make any decision that isn’t to use your firm look unusual.
Provide proof of your legitimacy to your visitors. Every one of your marketing claims should, in theory, be backed up by evidence.
“How many times have you rolled your eyes at a compelling title tag of “Home” on a website on a design award winners’ list?” This is what happens when you choose an agency that claims to construct something that will work the way your clients/customers need and expect it to work rather than one that promises to “make something absolutely rad and unique.” — Kick Point’s Jen Salamandick
- Adding testimonials is the quickest and most straightforward method. Other sorts of social proof are listed below.
- Endorsements from influential people
- Customer feedback on the product
- “As seen in…” logos of publications that have mentioned your firm
- Widgets for social networking that indicate the magnitude of the trust seals you’re following, such as association memberships, security certificates, and awards
How much proof is sufficient? How many testimonials do you think you should include?
Quite a bit. It’s possible that no amount of proof is ever too much. We ran a brief audit of one of Amazon’s product description pages and discovered that evidence and reviews make up 43 percent of the page.
Suggestion! Make no attempt to provide a testimonials page. They’re usually low-traffic pages. Rather, include testimonials on each service page.
When you mention scarcity, you’ll get “loss aversion.”
Humans aren’t very good at calculating costs and benefits. We have a predisposition to overvalue losses while undervaluing wins. To put it another way, losses are more painful than gains.
This holds true both online and offline, and it helps to explain a lot of human behavior. This article does a good job of explaining it: Behavioral economics and cognitive psychology are being applied to the design process.
Web designers and copywriters can benefit from this fear of losing money. Here are some pointers for drafting copy that considers loss aversion.
- Make the expenses of not using your product or service a focal point.
- Costs should be grouped together, while benefits should be listed individually.
- Make a point of emphasizing quick benefits.
- With limited-time deals, you can create a sense of urgency. If the product is in short supply, mention it.
- Remind your visitors of what they’ll miss, risk, or lose if they don’t act immediately.
27. Make email signup forms more user-friendly.
One can be found at the bottom of this page. It’s a request for you to subscribe. If you look attentively, you’ll notice that it’s made up of three different parts. For email registration forms, these are the three P’s.
Prominence Within the visual hierarchy, it stands out.
Promise It informs the reader of what they will receive and how frequently they will receive it.
Proof It employs social proof in the form of a small testimonial or the number of subscribers.
The conversion rate on the older form was very low when we initially experimented with these adjustments, thus the improvement was substantial. The number of people who signed up for emails increased by 4,863 percent.
Make your email signup form visible, employ social proof, and inform your readers what they’ll get when they sign up.