Web design is such a broad field that mistakes can be spotted all over the place – it is almost impossible to deliver a product without a mistake until you undergo full testing, which not everybody has the financial power or time to do. These mistakes can range from a few pixels of padding missing to using a wrong number of fonts. Today we’ll take a look at some of the problems people make so that next time you deliver or design a product you can avoid these pitfalls. This way your products will be better overall and your design skills will be appreciated even more.
Let’s begin with the typography. With content being arguably the most important element of a webpage, a designer must have knowledge of how to make it work. Reading some typography books or tutorials is recommended, because it will improve your use of fonts and typefaces and will allow you to play with them for better results. With the right font every piece of text can be made interesting and attractive in web design. Modern designers already know the importance of typography and spend lots of hours testing new typefaces and improving their designs before delivery.
Serif – Sans-serif relation
Mixing typefaces is popular nowadays and works wonders if you know how to make it work. Mixing two different styles can create results that look very good, but pay attention to mixing serif with sans-serif fonts. While you can try your skills doing it, there is a good idea to ask for a second opinion before you propose your client a design with mixed fonts. Typography always looks good to yourself and always expresses the thing you want it to express, but always ask for another opinion. Remember it is rarely about you, but about the future visitors of your webpage.
Number of fonts
There is not much to say here, but the bottom line is don’t mix too many fonts in the same design. Having a couple of fonts to play with is much better than playing with the whole Google Web Fonts suite, because this can, and will, disrupt the readability of your text. As a rule of thumb it is good to use the same font for content all over the webpage, and only use another one for headings, big titles and other elements. Two fonts should be enough for every matter, and keep in mind: never use more than three at a time.
Gabriel Lorin integrates multiple typefaces in his portfolio.
The Gestalt Law of Similarity shows that people tend to group objects together if they look alike. If you wish your content to be part of the same visual field, then don’t use different typefaces, because this will create the opposite effect. The same font provides good continuation to the content as well, which makes it more readable for the user, improving his experience on your webpage.
On the other side, using the same font all over your webpage might be a bit too boring and might look like a beginners work. This is why I said that two is, as a general rule of thumb, the best number of typefaces you can and should combine in your designs. Now don’t get me wrong, I’m not saying this is how it should always be, but I’ve achieved success and good results with this number all the time, so it might be worth it to give it a shot.
The best way to achieve a good result is testing and playing with fonts. I wrote a small guide on how to improve your website’s typography here, take it as a short read.
Contrast is important
Because everybody wants to be different on the internet, some designers develop interfaces using lots of colors – which is not a problem, as long as you use them wisely. Some designers play with too many colors and achieve some nice results at times (at least they think so), that they forget about having a powerful contrast between background and content. This is important because it allows the user to better read the text and doesn’t make his time on your website frustrating.
As you can see in the image below, the text on the left side, written in pure black and white, is easier to read, because it has a high contrast with the background. On the right side you can see that the content is much more difficult to read, although it is the same font type and size as in the left column. Dark grey and red do not have a high contrast with blue, therefore it is not a good choice of colors. Sure, this image shows basic and obvious mistakes and I am sure not many of you thought of using the combinations on the right side, but it is just an image that illustrates what the choice of color can turn your website into.
Now that we settled typography, fonts and colors, let’s move on to spacing. With our screens becoming bigger and bigger, there is a lot of space of play with. We do not surf the web on screens with a low 640 x 800 pixels resolution; we’re doing it on 15″+ screens now and a minimum resolution of 1024 x 768, according to the W3C. Sure, there is still the mobile screen matter, but we will discuss it another time. Right now we focus on design for desktop.
It is always good to give thought to padding, margins and general spacing between elements. This is called “working with negative space”. The best designs out there use a lot of negative space and therefore have a lot of visibility, content is distinguishable from other elements and, with a simple but smart choice of color, they are sustainable and work good on long term for all types of users.
Spacing needs to be kept consistent for it to work well, so always pay attention to the small details when designing or coding – this is a matter of pixels for both internal padding and external margins. The grid layout you decide to build upon in the beginning will help you stick with exact margins, and if you don’t use a grid system, then go and get one from here.
Now I am not saying you should waste a lot of space only because you have it, but having a cluttered design will not help either. If you don’t know where to start from, go out there and visit some webpages you like, I am pretty sure some of them work on a grid system and use a lot of negative space. Take Apple’s website for example (image below). They tend to maximize the use of white space and keep the content on the low side, but without minimizing its importance. There are never problems with hierarchy, everybody knows what is important and what’s less important and all looks organized.
Apple's webpage is a very good example on how to use negative space.
There are more sources out there where you can get a good grid system for every webpage you work on. It’s a very good idea to always build on a framework and keep building on it until you deliver the final product. By using some preset style and elements of margin, padding and spacing, you will make the work easier for you and the final website better in terms of design.
Using old tech
This should be punishable by law. Designers who still use tables (like in the beginning of the 2000′s) and still develop using Microsoft Frontpage should be banned for life. Also, old elements like animated GIFs, background music or frames should be avoided at any cost. All these things are not only out of style, but are not up to the standards of the web anymore. This will make the webpage load slower, get indexed worse or not at all and the new browsers might not even interpret your code accordingly. Technologies appear on the web all the time and it is important for every designer or developer to keep up with them. If you still have old webpages built with these elements, go back now and update them, because otherwise they will only make a bad name for yourself. Although you might aim for their past success, you don’t want to have a website like the one below, do you?
AOL's old website from the 90s shows what you should avoid using today.
Size, placing and proportion
Because now you know what a framework is and you’ve probably already tried it, I will go a bit more in depth. Size and proportion are important elements of a grid system because they tend to show the user what is important and what is not very important. The navigation bar should be placed at the top or in worst case in the sidebar, but it always has to be over the fold, because the user needs to surf around your website. It is also important to make the most important elements bigger without making the others too small. When the user loads your webpage for the first time, he shouldn’t use more than three seconds to find out what’s important there, where the navigation is, if there is a grid system, where is the content, is the content easy to read, does he know where he is in that moment and so on. There are, as you can see, many things a user needs to find out by himself in the first few seconds after he lands on a webpage, therefore aid this process by making these elements clearly stand out from each other.
The items and elements on a webpage should be easy to access. The user should not zoom, squint or attempt to work too much for finding the information he needs. He should only take a brief look and already know what and where to do.
Applied Divine Proportion
If you also heard of Golden Ration or Divine Proportion, you know that most standard designs adhere to it. Although designers deserve some credit for it, the Golden Ratio of 1 to 1.62 in a rounded form is widely used out there in the world. The Divine Proportion helps balance web design in a natural way while keeping everything in balance and make the design feel just right.
Set goals
Before starting on a design, it is always a good idea to decide what your goals are, what you want to achieve and why. Don’t ever forget this afterwards, because setting goals is important for the development process. Forgetting what your goals are will make your design hectic and less friendly. Therefore, if you need to, occasionally go back to your original goals while developing and try to see if everything still matches your ideas, otherwise change what needs to be changed. This way you will ensure your designs will always stay clean and you will always focus on the main goal.
Let’s start discussing!
With so many things to look out for in the design world, I know it is not an easy task to deliver good products, but making an effort will always pay off in the end. Sure, solving these issues might not be that easy in the beginning if you are inexperienced, but if you work on them they will come with time, trust me.
Have you ever made these mistakes, or at least some of them? Did you ever think of a smart way of solving them? Share your thoughts with us and let’s make the design world better for the more inexperienced of us.
0 件のコメント:
コメントを投稿