7 steps to becoming a better Web Designer

Research and looking for inspirations

Start with browsing through websites of your competition.

At the very beginning, it is worth to browse through websites of your competition. Take a notice of style they are created in. Pay attention to what kind of interesting solutions and the details have been used on them, what information are displayed, what is their hierarchy and what modules are used. Then you really should take the time to think about the vision of your project. To find unusual inspirations or innovative solutions you might want to check out such websites as behance.net, dribbble.com or awwwards.com.

You might find many interesting and modern inspirations at behance.net.

Those websites present only the most professional projects, thanks to which you will have the opportunity to get familiar with current trends and see how best freelancers and the biggest agencies choose typography and colors for their projects. On those websites people skilled in the field of design also exchange constructive criticism, so you'll have the opportunity to find out what you should improve or what to do differently in your projects. You can read more about this topic in the 7 places to look for inspiration for your next web project article on out blog.

Mockups will make your life easier

Before you start the design process, you need to remember about creating a sketch. You can make it on paper or in applications dedicated to such tasks, such as Balsamiq or Axure. They allow users to plan the placement of components and modules, so during their work designers won’t have to think about what and where they want to place on the website. In your mockup, you should plan space for logo and menu (collapsed and expanded). Decide between using banner or slider and consider what should be included in a footer. Be sure to include in the model of all modules that are to be found on the website. At this stage, you should also determine whether you want to design in full-screen mode or stick to a specific width of content for the page. When you select the second option, you should use the grid, which will be discussed later in the article.

When designing a model, look at it from the perspective of the end user - created site must be intuitive, transparent and easy to use. This is really the most important determinant of what should you do during the prototyping stage.

The selection of colors

After completing the previous steps, you can move to the selection of colors. Try not to pick a lot of them, because the result can be chaotic and unpleasant to the eye.

Example of a poor choice of colors

Usually, you should limit yourself to up to three or four colors. One of them should be contrasting, so that will attract attention and emphasized the importance of chosen elements of design. Distinguishing it from other shades will help to avoid the monotony of the project. One or two colors should serve as the leading colors on which we will base our design.

Example of a good choice of colors

Remember to make the text clear and distinct when combined with your chosen colors. The selected colors must also match the logo and the identification of the company (CI). This way you will keep your design compatible with other materials of the enterprise.

Another important aspect influencing the decision you make, is the theme of a website because it significantly influences your choice of colors. Projects that present serious content or to reflect the characteristics such as prestige and elegance should be created in neutral colors (e.g.,. black, white or shades of gray and brown).

An important element that affects our color palette is also whether the site is directed to the visually impaired or people that have a problem with recognizing colors. In such cases, you should choose strongly contrasting colors.

Typography - choice of font

On the Internet, you can find a lot of excellent fonts that you can use in your project (both free and for pay). However, it’s important to check whether they are suited for use in web projects. The perfect place to look for great fonts is Google Fonts, which you can use in a completely free and easy way.

Example of a poor choice of fonts

Just as in the case colors, you fonts you can use too many fonts in you project - it is good practice to stick with two or (maximum) three. Our selection of styles should differ from each other, what can be achieved by, among other things, combining serif fonts with the sans ones. It's best to use several variants (e.g.,. light, regular, italic, medium, bold, black), so you can change the thickness of the slope and therefore create more attractive and professional design.

Example of a good choice of fonts

You should also try different sizes of fonts, thanks to what you can easily emphasize the importance of chosen element and draw the user's attention to it. Use different sizes for headings, paragraphs and items such as buttons. Similar to colors, a theme of the website should influence your choice. Subdued and elegant fonts will be used for serious projects when futuristic and extravagant styles are perfect for projects with more of a casual character.

The selection of typography is crucial. In my opinion it often significantly affects how the project is received by customers, so try to spend more time on it during the design phase.

Why should you use Grid?

Grid easily allows maintaining aligned spacing and margins in the project.

As I mentioned at the beginning of my article grid is a system of horizontal and/or vertical guidelines that are dividing the graphic design into modules. It allows you to arrange and organize items in the most logical way possible, as well as to adjust the size of the modules in such a way that they corresponded with each other. Because of that, you have to set the width that you want to design on before you start your work. Of course, you will be able to find ready to use PSD files with superimposed grids, but you can also create them in generators such as Gridcalculator. You can also easily manipulate the width of the modules (without having to worry about their consistency) thanks to the use of auxiliary lines. Thanks to grid it is much easier for Front End Developers or other Designers to work on your projects. Read more about the grid in the article on our blog - Why We Love GRID (And You Should Too!).

Naming and grouping layers

Example of a bad practice of working on a PSD file

Your first reaction will probably be to say that the names and grouping of layers are nothing special and that they don’t affect the aesthetics of the project ... Of course, you're right, but I want to give advice for the most novice designers. :) By grouping and naming layers (according to their functionality and importance) you will never have a problem with the rapid determination of what they refer to. It will also help designers and developers who will work on the file you created in the future.

Group and name layers so that you will keep your project clear and in order.

Another advantage is that you will not have any problems with working on files that were not used for a long time. Look at it from the other side - if you had to take over the project that is messy, you wouldn’t probably be very happy about it. An additional argument for the proper naming and grouping of layers is that employers, when they hire new designers, often consider knowing grid as a requirement.

The transparency of the project - Flat Design

Example of Flat Design

You probably often had the opportunity to browse through chaotic websites that are filled with spectacular elements. Projects should be created in terms of clarity and User Experience so that they won’t create the feeling of overloading. Don’t try to hard to display as many elements as possible in every section of designed website. Do not pursue exaggerated originality, because you can achieve the opposite effect to the one you intended. Try to design in the most transparent way, pay attention to details, which can improve the aesthetics of the project in an amazing way and highlight designer’s skill. Keep in mind the spaces and don’t be afraid to use large margins - your project must be light and easy to read. Use large images and clear graphics. With this approach you can easily distinguish essential items and create a professional looking website. The best example of this approach is minimalist Flat Design (less is more), which got rid of the ugly and outdated gradients, shadows and heavy colors. It opts for the clarity and lightness of the project, what won the hearts of designers and pushed unreadable projects that are filled with unnecessary detail into the shadows.

What can you do to be a better Web Designer?

Adherence to these rules will make your designs better, your work more comfortable and your projects more put together. The lack of chaos at work will make it even more rewarding. Developing rules will allow you to improve your skills continuously and ensure that each new project is even better than the last one.