Basic Rules of How to Become a Good Web Designer?
Becoming a web designer is not only about how to use certain software. You have to know the basics of a website, be up to date with the latest web design standards, know how to combine colors and how to use typography and how to create beautiful and usable designs.
In this article I will walk you through the basic rules you should consider before starting learning web design and become a professional web designer.
One of the most important element of web design is typography. You need to know about key factors that you should take into consideration when picking the right typography for a website. Another important element is the color which is a powerful element design. After all, everyone has a color preference and we all see colors in different ways.
Choosing the Right Typography
For somebody new to the design process is easy to underestimate the importance of typography. It is true that it does not have the same impact as layout, color or imagery, but it is important. Design exists to help us communicate a message and when it comes to the well the primary way to communicate is through text and that makes typography very important. Get it wrong and your content will become illegible or you will communicate the wrong message to the reader.
When you talk about typography most people’s minds instantly to go their choice of font. It is important to know that typography is not just about the font you use. There are a lot of factors about typography.
It is important to know that in order to use a font on your website, that font needs to load into the user’s device if it is not already loaded. Unfortunately due to licensing restrictions you cannot simply use any font that you have on your computer. Instead, you need to use a user font that is available to use on the web.
When you are starting you should limit yourself for a free font available through Google and in time you may wish to explore paid services. But it is recommended to start with Google fonts. Sometimes, if you are loading a font from Google Fonts you can get very large fonts which do not always load instantly.
In fact, some situations they may not load at all. In that case, you need to have a font back, you can use instead. This means that when it comes to a font back you work with a font already installed in user’s device such as Arial, Georgia or other common fonts. So you end up with font stacks which contain your preferred font, your web form, and the default system font. Most of the time you will have no problem using any font available for use.
There are many factors when you choose a font, but the main ones are the style and the size. Different fonts have different styles, for example, there are Arial, Calibri and so on.
Fonts also have a personality so selecting the wrong personality can change the whole feel of your website. Finding the proper font it takes practice.
You can start by going to Template Monster and look at the whole range of templates available to see what font choices are other designers making. You will see some trends that you can copy in your own font selection.
Some fonts are designed to work large, other small. Think carefully about what size you want to use before you make a selection.
Always test the font before you buy it. Some fonts are hard to read when are small or ugly when are too large. You may need to use multiple fonts when you are working on different sizes, but take care because too many fonts can make your website look terrible. More fonts you add, the more disjointed your design starts to become. Your font starts to become distracting and users will focus on what font you use instead of what text you wrote.
If you want to create a sense of visual hierarchy or to differentiate elements on your page then try using different weights and size of fonts instead of different styles. You just need to show a little bit of restraint.
If you do want to use more than one font then finding two fonts that work together can be tricky as well it needs practice. There are tools to help you such as fontpet.com it is a good place to start selecting your fonts
The line height is the gap between each line of text so the closer the line height the harder it is to read and the users can accidentally skip from a line to another. Unfortunately, font line height set in browsers and font packages are client side. Try to set your line height at least for 1.2, but ideally, try even larger. Not only increasing the line height increases your content visibility but also your design looks better and airy.
Letter spacing is the gap between characters and if the gap is too small then characters can run together while if the gap is too large the words start to break apart. At small font size, you should make a small letter spacing while for large you need to use a smaller letter spacing.
Line length is one of the most important element for typography and can be challenging when working on a responsive design website. It is represented by the number of characters on the line.
Too many characters and your eyes get tired, too few characters and the eye is forced to go back and forth in order to read the whole sentence increasing your place on rankings and even users.
Most of the web designers think that a good line length is between 50 and 70 characters. So you should aim for that. So for a smaller screen size, you may need to reduce the font size to compensate.
It is not always easy in mobile devices to stay within the limits of the line length so you may need to experiment in order to get the right balance.
About Colors and Color Schemes
Color generates a strong emotional response from people so it can feel like a dangerous ground a lot of time. The color is not as subjective as you think.
There is a lot of research regarding color selection which can help you select the proper color for your website. There are three elements which influence what color we like:
The psychology of color.
We have a strong emotional response to color, sometimes because something is very obvious such as a connection. So you may associate a blue color with water so a template for a fishing website may have a lot of blue in it.
Other times, the connection is deeper than that. A coffee shop template uses the color brown to associate its brand with coffee but also to bring in your mind the taste and the warmth of a cup of coffee.
Another great example is fast food which they use red and yellow because combining red and yellow makes an association in our minds with speed and with some fast food ingredients such as ketchup and mustard.
Not all color associations are universal. Different cultures view color in different ways for example in most Western cultures red is a signal for danger, yet in China is considered luckily. So you should take care when you use red.
Color can work together very well, but some look absolutely terrible. Color theory is a huge topic, but the basic are quite simple. You need to see the color wheel because it can help you select colors which go together.
For example, you can draw an equilateral triangle over the wheel color and you will find that colors pointed by the triangle work together. Fortunately, there are a lot of great tools such as Adobe Color, an online tool that helps you create a color pile. You just add one color you like and Adobe Color will select other colors that work with your color.
If you do not have an idea what color to start with, then another approach is to use an image to get started. Just load the image to Adobe Color and it will give you a color pallet based on it. You can also see other color pallets uploaded by other people.
When it comes to using your color palette there are a couple of things you need to know first. First, focus your use on a small number of colors, in fact, to get started I recommend having just a primary color and a secondary color. So your primary color will make up the vast majority of your interface and then your secondary color can be used sparingly to draw the user’s attention to key elements.
You can use multiple shades to add a little bit of interest. Usually, a shade is either a darker or a lighter version of that color. But do not overwhelm the user with dozens of shades.
You should know how people view colors and this depends on every person in part. Some cannot see the full range of colors. So you need to use something even more for than just color in order to make users focus on what you want. You should use contrast, style, font, and color.
Not just color blindness impact how we see colors, the devices from we see the website can impact how we see the website. Different screens show the colors in different ways. Some of them are poorly configured or are not a good quality.
On cheaper monitors the colors tend to shift towards the spectrum. In other words, a blue dog becomes a dark one. So you cannot use just a color and you need to adapt your colors to work well on the web.
Great text on a white background is incredibly hard to read from mobile devices. Also, elders may have problems regarding colors. There are tons of tools and guides to ensure a good contrast if you want and you can assure everyone can read your content.
In the first part, I have presented you some of the most important elements of web design: typography and color. In this, the second article, I will write about website usability, branding, and simplicity.
When you are designing for the web you actually are designing an interaction so users will engage your design which is in contrast with the print design. You should know how to bring a client’s brand online, what mistakes to avoid and what does it involve after you read this article.
How to Create Usable Designs?
Usability is the process where users can interact with your website. This process should me simple and there are three ways a user can interact with us online: links, buttons, and forms.
The problem is that designers were often so intent to create beautiful designs that they fail to create usable designs. Links, buttons, and forms are a great example to see how things can go wrong if you do not focus them.
The default style for links is represented by the underline and the blue color of the links. This is pretty ugly especially when you have a lot of them on the page and that is why many designers choose to hide the underline and change the color. You can use color to focus links but also, you can use other effects.
You can observe that visited default links are also ugly, but it is important for the user to know which links they visited so make the visited links differently from the unvisited ones. Do not forget to make a link to react when they click on it. Depending on the user connection, a pause may appear before the page refreshes and the user has time to see if they clicked the link or not.
The same problems should be resolved for buttons where you can add some effects when users click or hover a button. There are also forms that you can use. Do not change the default appearance of forms too much.
The basic form design provided in the browser are pretty good even if are not so pretty. And if you are making changes to the form design make sure that fields should look at fields while radio button also looks and action as radio buttons. You need to keep the usability of forms even if you change the design.
Usability is not only about links, forms, and buttons. It is also how clean your design is. If a website is not obvious and does not give the answer we want we simply go to another one. That is why good design should aid in finding information and not get in the way.
The design should support your content and that means keeping your design clean, simple and intuitive. This means that every element needs to justify itself. Does the element help a user? It is one of the questions you need to put yourself.
Too often we add content and design elements to our website to help users to complete some tiny task. Motivation is good, but in doing so would make it harder for users to complete the most important tasks that exist on your site. With each element you and to your design you need to pass it through the following thought process:
- Can this element be removed?
Is it really necessary? If the answer is yes, ask yourself if it can be moved deeper into your website so it does not get in the way of more important elements. If you do not think that can be removed or moved, your final option is to shrink it.
- Can you deemphasize this element so it does not distract the user from more important ask?
When interface elements are stripped back and you have got the minimum that you can get away with it is much easier to design a simple clean and an intuitive interface. You need to let elements breathe.
The more elements are together the more the content is harder to read and also the design is pretty ugly. White spaces are an incredibly powerful tools and aids scalability and reduce distractions. White spaces also draw the eye to the most important element.
Design serves a purpose and that purpose is that users need to complete their task, else it is odd. The secret is to remove distractions and make buttons and links more obvious.
Web Design & Branding
Sometimes, even if the client has already an offline brand, he wants you to recreate one for the online version while other times the client does not have a brand and he ask you to create one from scratch, but you are constrained by his ideas. Most of the time the client does not even know what he wants because he does not have a good understanding of their brand identity.
You may find hard to articulate what the brand of their company is. This means it can often become your job to work with the client to figure out exactly what their brand is all about.
The brand is about a lot more than the logo of a company. The brand is about the personality or character of the organization. Is the organization humorous, informal, professional, and serious?
These characteristics affect every element of your site from the choice of the color pallet to any element. These characteristics will affect typography, white space and other elements. With this in mind, it is crucial to understand the personality of the organization.
Having a specific person in mind when your design makes things so much easier, for example, if you design a website that reflects photos you would make very different choices regarding color while for a website created for the restaurant. A good idea is to ask for feedback from clients or friends of your client and take notes.
You really want to avoid clients designing the website, but that does not mean that you cannot discover their preferences and to get their help. The best idea is to sit with the client and discuss what they really want.
If a client already has a set of guidelines or other elements such as logo, typography you need to be aware how to interpret them. You also need to stay with your client and discuss because things are never simple and you cannot just use guidelines brand on a website because some of them break rules.
Other times you need to update the color pallets or you need to use the corporate font. You cannot control the details of a web page as a print. Clients which want to control everything such as web site dimensions, need to talk with you upfront otherwise later you will have some surprise.
Now you know the basic rules of how to become a good web designer. The next step is to get inspired, practice and start learning Photoshop or other photo editing software. You will not become a professional web designer overnight. It takes months or even years of practice and learning to get to the level where you can get enough work to sustain yourself from your web design skills.