Table of Contents
Good web design doesn’t have to be hard. It can be easier than you think. You just need to know what deadly mistakes you must avoid. In this article, you will learn about eleven deadly mistakes you are probably doing. The truth is that these mistakes often prevent us from create exceptionally good web design. Now is your chance to finally change that. Today you will learn about many tips covering areas such as research, wireframing, basic design conventions, typography, grids and much more. Without further ado, let’s begin!
Mistake no.1: Skipping the discovery and research phase
The first mistake that prevents designers from creating really good web design is skipping what I call discovery phase. Following this mistake, another nail into the coffin of every design project is skipping or ignoring user research. The problem with these two phases is that there is not much talk about them. It quite hard to find any mention of user research, discovery (or analysis) on web galleries such as Dribbble or Behance. The majority of case studies you will find online are often mentioning only design phase. In other words, our lack of knowledge or information may be one of the causes of this mistake.
The second reason for doing this mistake and decreasing your chances to create really good web design could also be money. It is no secret that many web design projects have very tight budgets. When you are working on a web design project with budget set to $200, it is easy to think about taking a couple of shortcuts to speed up your work. For example, skipping a few phases of the process. Unfortunately, this decision is often followed by unpleasant consequences.
From the point of design, instead of really good web design, client often gets something that is somewhere around average. From the point of client’s business, it is often complete failure. Website is not aligned with client’s brand and business. It doesn’t provide any support, not to mention increase client’s profits. As a result, client has to hire another designer to either redesign the website or start again from scratch. This is great example of lose-lose solution. Designer has to do work he doesn’t enjoy for little money and client gets poor results.
The third reason of skipping discovery and user research phase and killing good web design might be time. It would be shock for some web designers to tell them that one web design project can take three months or more. When you are getting work mostly on job boards, you are used to projects that take somewhere between one week and one month. Any project outside this range is a unicorn. It is easy to become accustomed to this pace of work. However, it is bad practice. You will never deliver good web design to your clients. The design will never improve client’s business.
How to fix it
The first step we can make is to talk more about our whole design process. When we publish some case study, we should describe (at least briefly) all phase we use in our design process. We should not just describe how we put the design together and post the results. Along with that, we should also talk about how and where we gathered information. We should keep in mind that some young web designers may use our case studies to learn and improve his own design process. When we skip these phases, how is he supposed to know that there are some other phases that are necessary to create good web design.
The second step is understanding that we can’t solve any problem until we know what the problem is. We need to analyze and understand the problem our client has. Then, we have to follow this analysis with research. This will provide us with information that will help us define our target user or audience. With this information we can move to creating user personas. We have to complete these steps first before going any further. Then, we can move on and start to think about sketching and wireframing. Without analysis and research, we are working with assumptions.
The third step is to understand that tools such as Balsamiq, Photoshop, Illustrator, Axure, Sketch, HTML & CSS or whatever software you use are NOT problem-solving tools. Goal of these tools is only to help you prototype your solution. Also, keep in mind that once you create the first version of design, it is high likely that you will tend to defend it. It doesn’t matter how many times will you tell yourself you are not attached to it. It is your creation. You are attached to it. The problem is that when you start to defend your design, you are defending fruit of your work, not a solution.
Mistake no.2: Skipping wireframing
The second mistake web designers are sometimes doing is that they skip wireframing. They will maybe write down couple of ideas about the layout, but that’s all. After that, they will move straight to the Photoshop or Sketch and design first mockup. This is never a good idea because wireframing has many benefits. First, wireframing can help us bring more clarity in the project. It allows us think thoroughly about the layout, content distribution and all possible interactions.
Second, when we share our wireframes with our clients, it can help them think about what they really need to get from the project. As a result, we will have much higher chance of defining the right goals for the project and creating really good web design that will work. We will also be able to set priority for each goal. Third, wireframes are great tools for communicating our ideas with our clients and other project stakeholders. It is one thing to describe your idea in words. It is something completely different when you show your client your idea in the form of wireframe.
Fourth, wireframes will make it easier for us to deliver the core message of the website and test it. Then, we can use wireframes to gather feedback and at the early stage and refine our ideas before going too far. As a result, we will have much higher chance to deliver exceptionally good web design. Fifth, wireframes can also help you avoid potential misunderstandings between us and the developer who will code the website (unless it is part of your job). These misunderstandings include how will the layout adjust on different devices, hierarchy of the content and so on.
How to fix it
In order to constantly create exceptionally good web design, we have to make wireframing inseparable part of our design process. The size of the budget is not an excuse, nor the time we have to complete the project. We have to learn to work with wireframes no matter what. One time-tested truth is that one low-fidelity wireframe can save us a lot of headaches and additional hours spent in Photoshop refining the design. Remember to sketch at least one idea for your design before you move on and start working on design with higher fidelity and more details.
Mistake no.3: Skipping wireframe reviews
There is another mistake web designers often do during wireframing “phase” of their design process. They are not sharing their wireframes with their clients. One plausible reason is that some web designers think that wireframes are tool designated just for them. This is assumption is wrong. Wireframes are tool that should be used by both parties, the designer and also his client. This is the only way wireframes can “work” as they should and help designers create good web design.
When you regularly share your wireframes with your client, you can refine and improve the design. Reviewing wireframes will help you outline the layout structure, distribution of the content, interactions and visual hierarchy. When you move on to graphic editor, the design will be basically done. All you will have to do is to add colors and content. Then, when you send the output to your client, you will already know that there is a high chance that your client will accept your design.
How to fix it
Share your wireframes with your client, team and other project stakeholders. When you sketch your idea take a photo and send it to your client. Or, you can recreate it in some software of your choice and send that. Escape the horror of prototyping in graphic editor and spending hours implementing client’s recommendations when the deadline is near. Instead, use wireframes in the early stages of your design process to test your ideas, gather feedback and refine them.
One advice … It might be a good idea to notify your client that you are sending him a wireframe, not the final design. This may sound ridiculous to you, but not all clients are familiar with wireframes. It can happen that some clients may mistakenly consider your wireframes to be final design. I’m talking from my experience. I’m currently working on UX and UI design for one of my clients. The first time I sent a set of wireframes to my client, he thought that it’s actually the final design. I had to explain to him that I sent him only wireframes. The takeaway is that it is always better to say it explicitly.
Mistake no.4: Violating design conventions
When we want to create exceptionally good web design providing great user experience, there are some conventions we should follow. The most important design convention or principle is probably consistency. Consistency in design is important because when elements always behave the same, our users don’t have to worry about what will happen. When users know what will happen, based on earlier experience, the will feel more comfortable using our website.
The same applies to users’ expectations. Users will feel more in control of the situation and the system if their expectations about it prove right. As a result, they will like and use it more. On the other hand, if our design often doesn’t meet users’ expectations, they will feel insecure and be less likely to use it. This principle of consistency applies to all elements of the website. Whether it is navigation, content or visuals, when we set certain tone, we should stick to it.
When we deviate from this principle users’ experience will start to suffer. When we decide to throw away all design patterns, our designs will be much harder to use. Then, creating good web design and experience will be impossible. As a consequence, user will leave the website before it will have a chance to create any connection with him.
How to fix it
First, everyone interested in design has to learn about design patterns and design best practices. We need to remember that good web design is direct result of using design patterns and best practices. Second, we should follow these principles and deviate from them only when we have credible reason for doing it. Third, we should set specific tone and expectations for our site based on what’s our goal. We also have to take into account client’s business and the industry he is in.
Mistake no.5: Lack of typography and color palette
Lack of color and typography palette can be one of the biggest obstacles in the way of creating exceptionally good web design. When we skip setting color and typography couple of things can happen. First, we may end up with too many colors. As a result, our design will appear cluttered, busy and informal. Second, we may also end up with insufficient amount of colors. Lack of color can look and feel stark. There are also dangerous color choices such as paired and oversaturated hues that can be too hard for people’s eyes. We can say the same about typography.
When we skip planning typography palette, we are running toward couple risks. First, we may use too many fonts. We want our design to look consistent. We don’t want to confuse users by using high number of typefaces. Planning typography and color palette is also important to make sure our design is in accordance with client’s brand and style. Every typography and color choice we make has to mirror personality of client’s brand. It is not far-fetched to say that consistent color and typography palettes are vital for good web design and just any design in general.
Another thing we should think about is how will chosen colors play with chosen typefaces. Every color evokes certain emotions and mood. Some colors are better for conservative and reserved designs. On the other hand, there are also colors that are best for young, bolder and more progressive designs. The same is true for typefaces. For example, web design for bank will work much better with clean and modern sans-serifs rather than scripts. In case you design website for winery with long history and tradition, classical serif with higher x-height will can do wonders.
How to fix it
First, you have to understand that pairing colors and typefaces is just a skill. Both of them can be acquired by learning the theory such as anatomy of typeface and also by immersing yourself in practice. Second, when you are in doubt, stick to two or three colors and tints for maximum impact. Use the same rule for typefaces. I saw and also created many examples of good web design that used just one typeface. When you choose typeface with a variety of weights, you can create beautiful typographic hierarchy with just one typeface. Give it a try and limit yourself.
Second, add neutral colors (shades of grey or blue) to balance it. Third, make sure colors have enough contrast to create clear separation. Fourth, make sure your color and typography palette are able to connect emotionally with the tone and message your client wants to communicate. Fifth, double-check that colors and typography are in accordance with client’s brand. Sixth, take a look at examples of good web design and compare the color and typography palettes.
When you will explore these examples, pay close attention to how colors and typefaces can improve readability. Lastly, let me give you couple of online tools to help you with creating color and typography palette. First great tool that allows you to try different color schemes is Adobe Color CC. If you are looking for palettes you can use, check out COLOURlovers and Color Hunt. Tool I often use for comparing typefaces is Typetester. Great tool for creating font stacks (fallback fonts) is CSS Font Stack.
Mistake no.6: Designing without a grid
Take a look at couple of examples of exceptionally good web design, magazines and posters. There is high chance that all these examples will have one thing in common. All these samples will use some type of grid. There is a good reason why the vast majority of designers are using grid systems. I will give you four. First, grid system bring structure, order and clarity into the layout. This makes the design much easier to understand for people. This also helps people create expectations and predictions that will evoke feeling of safety and comfort.
The second reason for using grids is increasing efficiency and speed of your work. When we use grid systems, we impose constraints on the layout. This reduces the number of available options for content structure and distribution. Options that are discarded are not unified with the direction of our design. When we don’t have to think about all these unusable options, we can move faster. Grid makes us also more efficient by giving us clear structure for placing elements and information.
The third reason is scalability. Using one consistent grid system for the whole project creates a blueprint on which we can build. Also, if we invite someone else to the project, grid will help that person understand the structure of our design. As a result, it will be much easier for them to work with our design and expand it. Grid will also make it easier for other designers to continue in our work. In this way, grid provides a roadmap for the future.
The fourth reason for using grid is creating visual consistency and harmony. When we use grid system, it is much easier to keep our design consistent. Grid helps us find the best place where to put information and gives us guides for creating visual hierarchy. As a result, our design will evoke sense of rhythm and harmony. In a short, grid can help us achieve great user experience and create exceptionally good web design.
How to fix it
First, don’t be afraid of creating constraints for yourself by using grid. The truth is that constraints are good for you. Second, learn about different types of grid systems and find out which type is best for your project. Third, find couple of examples of great web design and find out how they work with used grid. Fourth, don’t deviate from chosen grid unless this is your goal – get user’s attention by breaking the grid and creating a bit of chaos. Still, you have to use this approach with caution and don’t use it too often. Otherwise, it will create inconsistency and harm the design.
One of the most important elements in web design is navigation. Clear and simple navigation will make it easy for users to navigate through the website. On the other hand, navigation that is too complex will make the website almost unusable and discourage many visitors from spending their time on your website. It is no wonder that many websites have great usability even though they are not the best examples of good web design. One of their secrets is simple and streamlined navigation.
In the other side of the proverbial river are websites with navigation containing multiple options hidden in drop downs. To make this worse, some of these drop downs even contain another nested drop downs or some types of lists. This is approach to navigation design is bad for couple of reasons. The most important one is this. If we hide some navigation items, how should new visitors know these items are there? Sure, they can just open the drop down. Unfortunately, visitors are willing to spend only very limited amount of time on the page. What’s not visible will be ignored.
How to fix it
First, we should organize and structure the navigation in accordance with the layout and theme of the website. Meaning, when we design personal website, we can afford to be more creative and try new experimental approaches. When we design business website we should focus first and foremost on efficiency and clarity. Accessibility, usability and clarity is our primary goal, pretty design is secondary. Second, we should also use textual descriptions for all links.
Third, in many situations navigation may be full of items that are related to each other. In that case, we can condense it a little bit. Instead of showing all links, we will show only links that are immediately important to visitors and are not related to each other. If we have links that lead to less or more the same page (about, history, team), we create some kind of sub navigation on about page and place these link there. After that, we will use just one anchor (about) to link to this page.
Mistake no.8: Lack of hierarchy and structure
Imagine layout where everything looks the same. You can’t recognize what is heading and what is plain text. Everything uses the same font size and weight. It seems that there is no order. There is also almost no whitespace between elements and they look crammed on each other. There is no order or alignment. It is just one big chaos. Now, let me ask you couple of questions. Can you orient yourself quickly on the page? Is it easy for you to find what you are looking for? Is it easy for you to navigate through the website and find more useful content? Probably not.
Clear hierarchy and structure in layout is necessary for good usability and great user experience. When we impose hierarchy and structure into our layout, it will be much easier for users to use it and interact with it. When we create clear hierarchy, for typography and other on-page elements, and structure, the content will also be much easier for users to skim, search and read. People will stay longer the page. This will lead to lower bounce rate which leads to improved rankings in search. Here, you can see how good web design can be beneficial for SEO.
How to fix it
First, we should plan the hierarchy, structure and distribution of the content before designing the website. We should design for the content (content-first), instead of creating design and then trying to fill it with content. The fact is that users come for the content, they don’t care about the design. From this point, content is the most important element in user interface design. Second, this, therefore, means that we should always design with real content.
Meaning, we should avoid using lorem ipsum and other types of dummy content. The problem with using these fake information in our design process is that it can result in unsupported assumptions and create serious design flaws. I think that we should start to treat content as UI and always design with real content that will be used on the live website or product. What if you don’t have any content? Ask your client. In the worst case, use content of your client’s competitors.
Third, use different weights, font sizes and colors to establish clear typographic hierarchy. We should do our best and make it easy for users to distinguish between content of different importance. Meaning, it should be clear on the first sight what is primary heading, secondary heading, body text, meta information, link, etc. Fourth, we should use one type of alignment in for related block of content. Centered headings between left-aligned text are not a good idea.
If you want to center something, center either all related content as well or nothing. Primary headings, like on top of articles, are the only exception. Everything else should follow the same flow. Fifth, we should use whitespace between elements on the page the let these elements breath. This will also make the content easier to skim and read. Sixth, as we discussed in point six about grid, we should not deviate from the hierarchy and structure we set unless we are doing it to grab people’s attention.
Mistake no.9: Unreadable or illegible text
Everyone likes beautiful typefaces and everyone likes a freebie. The problem arises when these fonts are making it hard to read or understand the content on the page. Good work with text is necessary for creating good web design. The text itself is actually one of the most important design elements. Sure, we may get relatively far with creating eye-pleasing interface design that will grab users’ attention. However, users have to read text to be able to understand the information on the page and find what they are looking for.
It is unfortunate that some websites with are destroying their potential by using the most bizarre typefaces and font styles. Some of these websites are also using font sizes that make reading a pain. Another common mistake some designers are doing is mixing text with images in a wrong way. As a result, we often see text that is very hard to read. This practice is quite popular for hero or header images and it is often used in conjunction with video headers.
How to fix it
First, we should always test the typeface(s) we want to use in different sizes to make sure it is legible under any conditions. Second, if we want to use same fancy typeface we should use it on content that is short and uses bigger font sizes, such as headings. Third, in case of body text, we should use font size that is readable for all age groups of users. This means that we should not go under 16 pixels. In many situations, 18 pixels is better choice. Fourth, when we are in doubt, we should stick to clean and widely used sans-serifs or serifs.
Mistake no.10: Using poor images
Images are great way to grab people’s attention. They are also useful tool for improving user experience. Yet, there are two exceptions. First, good web design requires images that are in accordance with client’s business and brand. Second, the images we use in design has to be high-quality and custom made. Meaning, we shouldn’t fill the design with dozens of cheap stock images just to fill some empty space. Although it harms credibility of the website, it is easy to find many examples that do exactly that.
Another mistake designers are doing with images is that they choose the wrong ones. Meaning, every image we use in design has to be somehow connected with client’s brand and business. The saddest example can be when client sells furniture and we use image featuring two people with MacBook or room full of washing machines. Another example … What about using photo of beach (without any hotel) as a header image for hotel. Are people visiting the website because they want to see beach or to see photos of the hotel?
How to fix it
First, don’t use stock images. You had better remove your collection right know from your HDD. Instead ask your client for his own photos and images that represent him and his business. Second, every time you decide to use some image, make sure it is in accordance with client’s brand, business and the message design should communicate. Third, previous rules apply also to videos.
Mistake no.11: Skipping testing and evaluation
The last mistake that often prevents you from creating exceptionally good web design is skipping user testing and evaluation. Many web designers think that their job is done when they create the design and pass it to their client. These web designers think that testing and evaluation is not part of their job. This is simply not the truth. I believe that when we create the design we should also test it on real users. I’m not talking about prototypes. Testing prototypes with real users is just no-brainer. We all know that and the majority of us consider it best practice.
Why don’t we approach final version of our design with the same attitude? Why we are often so excited to ship the result of our work and never think about it again? That’s nonsense! When we don’t test and evaluate our designs how can be sure that our work will improve client’s business? Good web design is design that brings benefits to our clients. Without testing, how can we know whether our design works and meet client’s goals? Besides that, how can we learn and grow as designers? Without feedback, we can’t improve our skills.
How to fix it
First, make sure to talk about testing the design with your client. It can happen that some clients will want you to only create the design. Second, test your design thoroughly in different environments and on different devices. Third, test your design in all browsers to make sure the experience is consistent and everything works as it should. Fourth, make sure that your design will work in different settings such as when images or JavaScript is turned off.
Closing thoughts on good web design
Today we covered the eleven deadly mistakes standing between you and creating good web design. As always, let’s quickly recap these mistakes. First, we should make the discovery and research phase inseparable parts of our design process. We should talk about these less visible parts of the process more. Second, we should always start our design process wireframing (after doing research and analysis). Wireframing is important for our getting clarity and testing our ideas.
This makes wireframing necessary for creating exceptionally good web design. Third, we should always review our wireframes with our clients. This will help us find weak spots before we will move further in our design process. Fourth, we shouldn’t violate fundamental design conventions unless it is our conscious decision and goal. Still, we need to remember that good web design is mostly result of using design patterns and best practices. Fifth, we should always start our design process with establishing typography and color palette
We should also make sure they are in accordance with overall tone and message he design will communicate. Sixth, we should always use some kind of a grid to establish clear structure. It will also speedup our work because we will not have to thing as much about where to place elements on the page. Seventh, we should always make the navigation of the website is simple and seamless as possible. Eighth, we should always establish clear hierarchy and structure. It will improve its usability, readability of the content and it is one of the best ways to create good web design.
Ninth, we have to remember that content is one of the most important elements of web design. Therefore, we have to make sure the text on the page is readable and illegible. We should use only typefaces that don’t harm the readability and legibility of the content. The same is true for font size. Tenth, we should only use images provided by client and make sure all of them are connected with client’s brand and business. We should never use stock images, unless we want to create cheap-looking website.
Eleventh, we should always test, and evaluate our designs. This is the only way to find out if the design works and meets goals and requirements for our project. Testing and evaluation is also the best way for us to learn and improve our skills. This way, we can increase our chance to create good web design on regular basis.
This doesn’t mean that there are not any other mistakes you might be doing. In order to grow as web designer, we have to constantly keep looking out for the mistakes we might be doing and correcting them. Otherwise, our skills will start to deteriorate. Remember there is no such a thing as stillness. We can either move forward and grow or move backward and deteriorate.
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
