The Do’s and Don’ts of Designing a Website
Designing a website is no small task. In the early days of the internet, you simply popped open (Macromedia) Dreamweaver and started hand-coding some basic HTML structure. These days there are so many ways to go about it, including website builders and predesigned templates you customize to fit your needs. Whichever method you choose, many basic principles still apply. Below we’ll look at some simple Do’s and Don’ts every web designer should consider to not only have a good website but the best website.
The Do’s of Website Design
Because websites can be rather complex, the planning stage is crucial. While website design may refer mainly to the visual aesthetic, it’s so much more. Getting a handle on what you’ll be designing is the first step to putting all the pieces together.
A site plan gives an excellent overview of the site’s scope, and how many linked pages and sections you’ll need to account for in your design. Tools like Slickplan and Lucidchart make this process easy.
Tools such as Adobe XD or Figma take the planning stage further by allowing you to create wireframes and prototypes quickly. This stage is great for accounting for all the little pieces of content and features you imagine will be in your design.
DO Focus on UX
UX or user experience is crucial to the success of a website design. A user should be able to scan the page and identify key elements quickly. The most visually appealing or just plain cool website is worthless if it’s not user-friendly. While it’s true many sites look similar, there is a good reason for that. Website visitors have essentially learned how to navigate websites and expect certain structures, such as a navbar at the top of the page. Suppose you choose to hide the navigation menu off-canvas, and it’s only accessible by a small icon or hamburger menu in desktop view. In that case, you likely are doing so at the cost of usability.
Beyond design and usability, UX impacts SEO and accessibility. Both of which are vital components of any modern website. UX also affects perception, trust, and conversion rates. “A good user interface can increase websites’ conversion rates by up to 200%.”
DO Create Great Content
High-quality content provides many benefits. Not only does it inform, engage, and aid in SEO, but well-written content can create a visual flow that takes the user on a clear journey. Creative headlines pull a reader into the site. Blockquotes, bulleted lists, and other highlighted information provide easily digestible visual nuggets that break up a page design.
DO Design Thoughtfully
When it comes to website design, old graphic design adages still ring true—Less is More; Form Follows Function; KISS (Keep It Simple Stupid). This philosophy goes back to UX. As discussed earlier in this list, user experience should be at the forefront of your design approach.
Every web designer strives to create the best-designed website ever, but there are nearly 2 billion websites, and web design trends and advancements are in a constant state of flux. A more successful approach would be to focus on the user and add value for them while making the site visually appealing.
DO Optimize Performance
Content may be king, but page performance and a responsive web design determine if the content is a good king or bad king. Design your website with performance in mind. Too many large images, videos, fonts, and scripts degrade performance and negatively impact page speed. While they may contribute to a nice-looking design, if the page doesn’t load quickly enough for the end-user, it’s a design fail. “93% of people have left because a website didn’t load quickly enough.”
DO Think SEO
You’ve done all the above to create a nicely designed website, but is it search engine friendly? We won’t attempt to go into the minutia of SEO here, but if you have done the Do’s above, you’re on your way to a solid SEO foundation. Structuring the content on both the frontend and backend is essential for SEO, so your code needs to look as good as your frontend. Do you have the proper meta tags? Have you used heading tags appropriately? Do your images have alt tag descriptions?
Other design factors impact SEO as well. Are you designing a modern website or a throwback to the 1990s? An off-putting website design will likely increase your bounce rate, which will, in turn, affect search rankings. “94% of first impressions are design-related.”
DO Design for Mobile
We probably should have led with this one. Reports have noted umpteen times that mobile has overtaken desktop for web traffic. Websites should just work on mobile devices. Google wants it. Users want it. Your clients want it.
There are many resources for this endeavor. Responsive grid systems provide a lot of forethought in tried-and-true layout strategies. Problems arise with customization, often breaking rules or cutting corners to achieve specific goals. Compound that with the fact that there are thousands of types of devices and browser combinations. Enter device testing platforms like Lambdatest or Browserstack. These tools provide real device testing, automation, pixel-by-pixel comparisons, and more. It’s best to break your designs in these tools versus user devices.
DO Test and Test
Now that you’ve thoroughly tested on multiple devices don’t forget to test everything else. Sometimes it’s easy for web designers to miss the forest for the trees. There is so much to focus on that silly mistakes can creep in. Even the best designers can do things like preview a site on a live server, and it seems fine, but all the images are missing for everyone else. This nightmare scenario could be caused by the images somehow still referencing the local copy running on the designer’s machine. They’ll continue to show for the designer, but not for the rest of the world. To avoid such disasters, test internally with a group of testers before moving on to UAT (User Acceptance Testing).
Humans may still miss errors to be discovered later by site visitors. Broken links are probably the most common issue. A good tool for this is Ahrefs Free Broken Link Checker.
Hear From Industry Experts
Read the latest tips, research, best practices, and insights from our community of expert B2B service providers.
Don’ts of Website Design
DON’T Have Too Many Distractions
Too many ads, obtrusive pop-ups, and too many elements will kill any web design. Maybe your site is getting a lot of traffic, and you want to increase the number of ad locations to generate more revenue. DON’T. Not only will you overwhelm the site design with too many ads, but you’ll overwhelm the user as well, and they will likely bounce. The website will lose its original focus and just seem spammy.
Too many pop-ups or opposing design elements will have a similar effect. When done well, they can be informative and drive conversions, but for the most part, pop-ups are frustrating. Pop-ups are especially frustrating when combined with other distractions. Overly saturated color schemes, blinking text, autoplay videos, and too many distracting images are web design offenses, yet they are still out there junking up the internet. Take this very real site, for example.
DON’T Use Too Many Fonts
You knew it was coming. Using too many fonts makes every don’t list for web design. Yes, it’s a design faux pas. Using too many different fonts in a website design is distracting, inconsistent, and unnecessary. It’s an original sin of all graphic design, but there is an extra price to pay for web design. Loading several web fonts increases page load times drastically, which is bad. Often a designer is lazy and calls the whole font family when they only need to call what they use. Loading unused fonts create unnecessary bloat and should be avoided.
In fact, one should limit web font use in general. Don’t forget to consider using web-safe fonts when you can.
DON’T Confuse Users
Is it clickable or not? This one seems obvious but is probably the offense most often committed by designers. We’ve covered the importance of UX design, and this is one of the issues that can spoil the user experience.
Beware the use of boxes and borders around text that aren’t links. These appear to be buttons, and when they aren’t clickable, they just confuse the user.
Should text links be underlined? Yes and no. It depends on the context. The goal is to make your links intuitive. You wouldn’t need to underline your main navigation links if you’ve designed and located them in an obvious navbar or menu. Your body links need to stand out. Don’t just bold them, and don’t use underlines on anything that’s not a link. This practice hinders readability and is very frustrating to users and should be avoided.
DON’T Use Large Blocks of Text
Nobody wants to see a big gray wall of text when visiting a website. It’s off-putting and daunting to read. You want to lead the user through the content by proper use of headings, callouts, and images. Keep your paragraphs concise and eliminate the redundant copy.
DON’T Make Text Too Small
Whether for mobile or desktop, your text needs to be readable. For text-heavy pages such as blog posts, the body copy for both should be at least 16px. That’s the default for browsers, so that would translate to 1rem. Because of the available real estate, going to 18px for desktop view can make reading even easier depending on the different fonts.
The headings should be noticeably different. As a rule of thumb, headings should be at least 1.3 times the body text size, while H1 titles should be approximately double.
DON’T Set It and Forget It
Long gone are the days of websites being simply brochureware. Websites today are marketing engines that you should constantly fuel with design refreshes, rich content, and traffic acquisition efforts.
The average lifespan of a website is now around 2.66 years. Beyond that, a site can quickly look and function like an old site. Not to mention website refreshes are great opportunities to reengage your audience.
DON’T Use Black Hat Tactics
You’ve designed a beautiful website, but it’s not getting much traffic. It can be tempting to consider employing questionable tactics to gain the system and drive more traffic. Don’t do it. Many of these are entered into when well-intentioned web designers or clients are approached by unscrupulous vendors pushing SEO claims, and you’re not quite sure what they are doing.
In the long run, following SEO best practices and referring to the DO’s list above will inevitably boost organic traffic. Remember SEO is a marathon, not a sprint. Don’t overpromise results to clients either. If organic SEO takes too long, consider paid options to drive more traffic to your shiny new website.
Most designers have probably heard the saying, “Good artists create. Great artists steal.” Maybe that was true in the past—or maybe not, but today the real threat of litigation and penalties from Google for duplicate content makes it very much not worth it.
If you, or your client, lack the resources to create or afford photography, there are free alternatives for stock photos such as Unsplash. You could even tap into public domain images, but this can get tricky to navigate. And as we’ve all learned in school, don’t plagiarize. Creating original content is the best way to get your site noticed and appreciated.
To Sum It All Up…
Like with anything in life, developing some healthy habits can go a long way in website design. This list of Do’s and Don’ts isn’t gospel, but using simple references like this can guide you down the right path and help you avoid costly mistakes. Moreover, implementing a system of best practices will benefit the clients or companies you work for and you, the designer.