Arian SimonWeb Designer - Business Owner - Entrepreneur who makes happy little mistakes.
I’m so thrilled to finally show you this huge monster list of web design best practices, containing tips from famous experts in many different web branches and with many different specializations.
Thank you all for making this list what it is – a huge compendium of web design tips, tricks and knowledge!
This list will continuously update, grow and expand.
If you want to contribute too message me at hello at createtopnotchwebsites.com.
Early in 2016 I started building a secret guide in my secret labor with top secret best practices on web design. And I asked the world’s wisest sages to contribute their wisdom and they (some) followed my call.
As you can imagine this guide is so huge and so good that you won’t have seen anything else like this before. Written in stone (kind of) to last and rule for eternity. Including the bestest, top secret, most awesome, truly unique practices on Layout, Design, Colors, Texts, Fonts, Images, Extensions and Project Management. All in one ultimate handy guide.
Even more this is not only me babbling about my self proclaimed wisdom. NO. This is a huge awesome ultimate definitive collection of web design tips and tricks and best practices written by experts in various branches all around the world. So whether you are searching web design tips for your small business or just your private project, you definitely want to make sure you cover the basics.
Enjoy a collaborate collection of the best web design practices available.
This section contains web design tips and tricks around managing your website project. Whether you create a web app as part of a big team or you are starting your own website as solopreneur, make sure you cover all project management basics. This will greatly increase your chances of success. Especially if you are part of a bigger team, make sure to cover these web development tips.
You may argue now that this is only the first best practice because of my years long software testing experience. Whether this is true or not, I can’t stress this enough: testing is one of the most important factors for a great website, web application or app. A polished product or service may not get you trophies to pile – but happy users.
You don’t want to experience modern fancy shit storms on your own product. You don’t want to deal with complains all day and night. This can all be prevented by starting tests as soon as you start developing and designing.
Even smaller updates can seriously cause interference of your core service. I thought far too often that I don’t need to retest after adding this small plugin. Only to find some new minor bugs days later.
Some more software testing wisdom: “there is no bug free system” (relax but keep testing), “you can’t test everything” (prioritize) and “a bug found early costs far less then a bug found late” (test early).
If you want to read more about testing, check out this post.
One more rule for testing: Go through different browsers. Each browser behaves differently and executes different commands or restricts others. Also look at different versions of different browsers.
You can find tools that ease the task of different browser testing in the PDF version of this guide.
On some sites more than 50% of traffic are incoming from mobile devices. Therefore you better check your website for mobile flawlessness too. Modern websites use responsiveness to create great mobile experiences. Responsiveness is the method to align your elements differently according to which screen width is used. The goal is to provide each screen width the best possible result.
A neat way to test this is closer than you think:
Open your website in your web browser > right click somewhere on your website > select “inspect” (or similar depending on your browser) > select the mobile icon and you are ready to go.
You can even just grab your browser window and drag it to become smaller. Reload your website and explore the result.
Speed is an important factor to create successful websites. You have two major speed fans: your visitors and search engines. I think I don’t need to explain why your visitors love it when your site loads fast. Even more search engines love sites that load fast. The reason behind this is that search engines love what users love. And search engine users love sites that load fast.
Pretty simple, right?
Therefore always strive for fast loading sites.
How to test your website speed?
This post gives you all the tools you need to test and compare your website loading speed.
How to setup for a fast website?
It all starts with a fast host. Read my Website Setup Guide to find out more about hosts.
How to speed up your website?
This post provides tools and suggestions for speeding up your website.
No one likes thieves. And Google really battles copied content. Therefore always strive for unique content. I included helpful tools to test if your content is unique in the full PDF version of this guide.
If your content is marked duplicated, you will be penalized by search engines.
Use mockups to plan ahead and save big on time and money. Every error you correct in the mockup stage would cost multiple digits more in later stages of your product. Discuss the mockups with everyone involved in your project. Get on common ground and start building afterwards.
This tip was contributed by Leon and the balsamiq team.
Documentation is one of the most important aspects of collaborate web projects. Without documentation your chances of failing are infinite higher. Find a tool your team can access (preferable remotely) and include it in your development process. This means allocating and calculating time for it. Also use the comment functions in your programming language to explain your sections.
Bad documentation results in exponential communication needs, confusion, task repetition, personal knowledge fortresses which weaken the team and many more disadvantages.
This tip was contributed by Leon and the balsamiq team.
Your website’s layout defines how your website’s elements are aligned. Creating a layout is clearing the chaos. Set behavioral rules to further ease the use of your website. The following section contains best practices to define your website’s structure. Implement all these website layout tips and create outstanding user flows.
Minimization is modern. Yet this trend results of usability. And to be honest I’m a big fan of usability. I even bet you are too. While I’m not always a believer of following trends, this one resulted by thinking of the greater good: increasing the ease of use for your users.
It doesn’t necessarily mean you should only put half of your functions in your product or service. Put all the functions in there but sort, cluster and align them afterwards. The shorter and easier the use of your website, the better your conversion rates will be. (conversion rates = the amount of users reaching your service’s goal, e.g. buying stuff, contacting you, interacting,…)
You don’t have to be a hero and stand out on what has proven to work. Stand out by fixing things that are broke.
This is a plea to follow conventions and trends where appropriate. If every second website has its menu at the top of the screen, don’t put yours at the bottom just for style reasons. Users are expecting your menu at the top. Do us all a favor and leave it there. By doing so you ease the use of your service.
Be consistent in your layout. I guess at this point you already noticed that many best practices are focused on easing the use of your service for your users. This is true.
Consistency eases the use and allows faster navigation through your website. The learning curve is flat and this results in great usability.
Beside that fact, if you change your layout too often it can really damage the beauty of your site. In the best case it may look sloppy but most likely it will look like you had no clue about design.
Permalinks are the URL parts attached after your domain ( www . yoursite . com / permalink ). Accurate and on point permalinks are also loved by search engines. Use this to your advantage.
Your last element on your website has one hell of a task. It needs to be strong and steady so your website doesn’t lose your visitors. Choose wisely if you want to use a footer as your last element. Most footer are really cluttered with useless information.
Instead you can catch them with a single call to action. Give them the choice of more value or let them leave. Or present options similar to what they already like. However keep in mind that the more options you present, the less likely your visitors will pick one. Remember, we are all lazy. I may as well leave before taking a decision alone.
Guide your users at the end of your pages.
“Back to top” buttons are simple little helpers that do the heavy lifting of scrolling back up your site. If you write long blog posts they come in handy. Especially if you don’t have a menu that sticks on top.
Instead of just copy pasting your email you can also provide contact forms. Most contact forms also handle spam bots really well. I wrote a blog post on how to prevent your email from being spammed. You can check it out here: WordPress Security Plugins. Read the section on WordPress Anti Spam if you run a WordPress website yourself.
You can also use forms for various other tasks. Instead of sending your prospects PDFs to fill out, use a form that they can conveniently fill out on your website.
You can have the best design elements in the world. But if they’re squished and cluttered, the overall design is going to look terrible. The best-looking (and most popular) sites online usually have a super-simple design. Just look at Google and Wikipedia for 2 examples.
Brian Dean from backlinko.com.
The best case scenario is a design your visitors can browse through without a single thought. We (humans) are lazy. If you want to please your audience let them be lazy and invest in their comfort.
Simplicity also has another advantage: the shorter and simpler the way to your website’s goal, the more visitors will reach it. Equals in more success for you and your team.
And don’t get this one wrong: Simplicity doesn’t mean you should make it a simple task to build your website. NO. Striving for simplicity is an investment you shouldn’t underestimate.
I learned this tip from an art student. She told me that world class pieces of art are very symmetrical. And the same rule applies to page design. In many ways, symmetry = beauty. Brian Dean from backlinko.com.
This is probably one of the most advanced best practice to web design I have ever digged into. If you want to really get it right, strive for balance. The most comfortable way is to design a symmetrical layout. However you can also achieve balance with asymmetrical layouts. Consider weights and position of elements in your design. Step back from your monitor and observe your result.
Studies showed that most interactions happen above the fold on websites. (above the fold = what users see before they scroll down)
Therefore present your most important call to actions, headlines and information above the fold. Don’t make your users think. Show them immediately what they can expect from your website and what it’s all about.
Like silence in music, space is one of the most important aspects for websites. It’s not only what you design, but also what you don’t. If you clutter your site, users will flee before digging in. If you provide to many options, users will run before taking a decision.
Space prevents all this.
It’s best treated like medicine: don’t use too much, don’t use too little.
Responsiveness is the ability of your website to align its elements according to your users screen width. Therefore responsiveness is responsible to provide each user the best possible experience, no matter the device.
As alternative you can also build new versions (“mobile versions”) of your website for each possible device size. However responsiveness is most often less effort and therefore the modern method of choice.
Frameworks like bootstrap include responsiveness out of the box.
Think of your website as an orchestra. Every element should play its part to reach the one ultimate goal – whether this is a beautiful song or your customers buying your products in your web shop. Ensure that your users comprehend the ultimate goal on your website. Be transparent what you expect them to do. Ease your users’ decisions by presenting your goal clearly.
If you have sub goals on your website, distinct your one big goal from your sub goals. Make your big goals bold and your sub goals shallow. Or order your goals accordingly by placing them in hierarchical positions.
Work out a minimum goal for your website. If a user doesn’t want to reach your biggest goal (which is absolutely fine, you can’t please everyone), what should be the minimum action he takes before he leaves?
This could be filling out a one question survey or similar small tasks.
Your website’s design is your website’s soul. Design triggers emotions, guides your users in directions and causes actions. Your decisions on design choices influences your users’ consciousness and subconsciousness. These are the best website building tips you can find!
If you want to reach your users’ hearts travel by design.
No matter which style you choose – stick with it. Like consistency in layouts, your design should also follow a set pattern which you define. Else your design will look sloppy, unfinished or in the worst case simply bad. Modern designs include
Icons can really ease the use of your website. We comprehend images a lot faster than texts and therefore are drawn to recognize images before anything else. Use icons to make the navigation of your website a breeze.
There are different kind of icon sets for different design styles available. For example you will find flat icons, elegant icons, hipster icons and so on.
If you want to find out more about icons, read my article on how to find beautiful icons for your website (and how to implement them).
Distinguish the items that are interactive on your website. Let user know that they can interact with certain elements on your website. For example provide icons on hover or simply change the color of interactive elements on your website when users hover or click on them.
Use basic designs to make your logos easily recognizable and rememberable. Don’t use too many colors. Don’t use too many forms. And don’t use hard to read fonts.
Create your success simple – design your logos simple.
You can use design one-off decisions to highlight things, but don’t overdo it. As with many things the dose creates the poison. If you are unsure stick to your defined design rules.
Create designs that are easy to understand. Make them blatantly stupid. Your users will love you for it.
The less time your users need to think, the more time they have to love you.
Visitors don’t know what is important on your website and what’s not. Use font weights, font sizes, borders, colors and background colors to highlight your important call to actions and content. It will increase your conversion rates and ease the use of your website.
Let your elements work together. Use labels and headlines to describe buttons and form fields. Use images to elaborate complex texts. Again this eases the use of your website and increases your conversion rate.
It needs to be clear what an application offers as well as how it works. The more natural it feels the better it is.
Valentin Scholz and the Chatgrape Team
Providing a natural feeling to your website greatly increases usability. Users don’t need to think and your learning curve is flat. Usability leads to happy users and higher conversions. Go for it!
Designs get better the more time you invest in fine tuning. The things you do right matter. But not solely. Also the amount of things you do wrong count into your result. The less errors you deliver the more professional your service appears.
Remember that once you deliver the final design, it’s up to your clients to manifest it with their content. Whether they have a trained eye or not, they should be able to pick up where you finished and uphold the branding you’ve so painstakingly designed. Consider the little things, research your client’s content thoroughly – if it’s a words-based site, decrease the time spent on how to display imagery and work on the many ways your client can use typography to express their contents.
Shini Park from parkandcube.com
… and improve what’s out there. Web trends are formed this way, sure – but break-through’s in web interaction and design is also discovered through looking at your peer’s work and thinking of a better solution.
Shini Park from parkandcube.com
Most research projects fail. You don’t need to build something new from the ground up. Develop on what is already working and you will greatly increase your chances of being successful.
(Nearly) Mobile first. Most people only think about desktop websites, however designers need to expect a similar importance of mobile appearance. The use of frameworks to correctly display websites on mobile devices, graceful degradation and progressive enhancement are an advantage.
Andreas Ostheimer from ostheimer.at
Striking effects please every web designer. However do they appeal to your users too? Are your users experts or new to your website’s subject? There is no reason for overdoing effects on any website. They only confuse users. Sometimes it’s enough to have clear links and a refined layout to be successful.
Andreas Ostheimer from ostheimer.at
Colors are a significant part of your website’s design. Colors alone – without forms – trigger emotions. Therefore carefully select your website’s colors. Combine them systematically and give it your individual touch. Following section provides best practices, tips and tricks on color related topics.
If it can be aligned with your design use shadows to distinguish elements from each other.
(But: if you chose a flat design completely remove all shadows as they are not part of it)
Shadows are a great way to help headlines stand out if they are not distinctive enough from your background color or image.
Here is an example without CSS shadows:
And the same example with CSS shadows:
Noise creates haptic perception of backgrounds. Again don’t use it for flat designs, as this breaks it. If your design style allows noise you can use tools like noisetexturegenerator.com to design your background noise.
Some gurus suggest the use of only 2-3 colors for your website. My rule of dumb is 1 main color, 1 action color for your most important call to actions and a couple of background colors. On createopnotchwebsites I wanted to create something harder, have a couple of colors (5 actually) and use them for a playful design. It may not be conversion rate increasing, however I still love to browse through this site because of its cheerfulness. And if you invest a lot of hours into something, I believe it’s important that you like doing it.
The best way to be consistent with your colors is to define your color scheme. There are various tools that help you do it. I included them in this PDF version of this guide.
When defining your color scheme make sure that your colors match. Tools help you. Most of the time I use tools for a rough scheme and alter it manually afterwards. Again here is the link of the PDF version featuring all the helpful tools I use.
If images and colors are the soul of your website, texts are the brain. Use it to describe your services, offerings and even more important benefits of your site. This section contains website text tips, so you create memorable websites.
Use webfonts to create really cool websites. Google has a huge compendium of webfonts freely for you to use. And there are far more places to find great web fonts. If you want to find more about web fonts read my article on finding, testing and implementing them.
Write outstanding headlines. Headlines are the first thing your visitors are going to read on your website. The goal for your headlines is that visitors read on. So make them as compelling as they can get. This applies for each further sentence. Because the one goal of each sentence is to make your readers excited enough to read the next one.
On the design part of headlines make them distinctive enough from other elements, especially backgrounds. I sometimes discover seemingly great websites, just to see that they wrote their headline directly above a turbulent background image, making it a pain to read.
For the sake of everything, if you only take away 1 thing from this whole guide, then please let it be that you will never design hard to read headlines.
Font size, line height, width and CPL are important factors for the readability of your website. Use tools to calculate and experiment with different sizes and don’t settle for less then a good fit. Your texts readability determine your website’s ease of use and how much your users love you.
If you want to get all the neat tools to calculate font size, line height and width, download the full version of this guide (containing all the tools) below.
You can further ease the use of skimming through your website by highlighting important text parts. Simply use a bold text style to let readers quickly distinguish between important and not so important words. The faster your readers read through your text, the more likely they will get to your website’s main goal.
Writing good copy is essential for a website. No matter if you want to write exciting blog posts and gain new readers or if you want to sell your premium products. I haven’t seen a website without copy yet. And if it’s only a single word.
Copy makes a statement like nothing else on your website. It’s the easiest element to correctly interpret.
Images are colors and forms combined. Thus even more capable of triggering emotions. We strongly resonate to specific forms that are similar to what we know and like. One of the biggest resonators for us are human faces.
This is connected to the plea to use distinctive headlines. Don’t use background images below texts so your readers can’t read the text. This is such a no go, often overlooked but easy to avoid. Don’t design for the style’s sake. Design for your users.
Don’t make your images too small. However don’t make them to big either. Use a good fit of image size and quality to file size. If you implement your images too big, they get resized by your browser which slows down your website unnecessarily. You can even smush them to strip irrelevant information off of your images.
Use images that fit your design and have high enough resolutions to add to your website. If you use low resolution images your whole site appearance suffers. Remember that images are really catchy elements of your website’s design. Use them wisely.
However remember that high quality images result in big file sizes which causes slower website loading times. Optimize them to have a good quality – file size ratio.
My rule of dumb is: Not bigger than 300KB.
Sliders may seem fancy at first but they draw attention away from your really important content and elements. Every time the slide changes, your user’s attention is drawn back up. Therefore I don’t use sliders for my own web projects anymore.
Website’s extensions enrich your website with additional comfort functions for your users. Following section provides ideas how you can extend your website with neat little features and gadgets. The ultimate goal is to increase your website’s user engagement.
I suggest giving social media at least a thought before starting a new web project. You don’t need to have your own Facebook, Twitter and Instagram sites. However maybe your users want to share your articles, so why not make it as easy as it can get for them?
Building a website or blog as a dialog platform is a beautiful art. I believe that the greatest things result out of dialog instead of monologue.
Comments are a great way to open your doors for dialog to happen.
Even negative feedback isn’t something bad. It shows that someone cared enough to let you know the cause of the upset.
I included 5 extra tips and all the helpful tools I use in the PDF version of this guide. You can print it to have it ready whenever you design a new website.
Designing beautiful interfaces is one important step to create successful services. This also applies a hundred percent to websites.
I hope this guide helps you on your tracks. It can be your supportive buddy answering all your questions. It can function as your personal bible of web design. Whether you want to build a new website or update an old, you grab the guide and check point by point to make your website the best it can get.
Even more, you can quote it, download it, print it and stick it above your bed. You can share it with your friends and build the most amazing websites you can think of.
I need to ask you a favor (if you like this guide):
Can you share the link to this guide with everyone who you think benefits of it?
I also really appreciate it if you share it on Facebook, Twitter and whatever other social media you use.
Thank you sincerely!
Thank you for your awesome contributions:
Thank you Brian Dean from backlinko.com.
Thank you Leon and the balsamiq team.
Thank you Valentin Scholz and the Chatgrape Team.
Thank you Shini Park from parkandcube.com.
Thank you Peter Spatzierer from peterspatzierer.com.
Thank you Andreas Ostheimer from ostheimer.at.
(ordered by day of contribution)