lemFrom the author: good time of day, dear reader. Today’s lesson will focus on what principles such a field of web development, web design, includes. For beginner web designers, it is very important to understand that in the process of working on the web design it is better to focus on the effectiveness of functionality and content rather than focusing on shapes and forms. And it doesn’t matter whether you’re working on iot smart lighting system of the future or working on aged software and considering which approach to choose for legacy system modernization.
Of course, a creative approach to the case is also needed, but it should not be considered the task of the designer to entertain users and heat up interest in the site through animation and colorful illustrations. You need to “descend” to the level of an ordinary mortal user, with his preferences, needs and interests. After all, in the end, it is important only whether the user likes the site, he will appreciate the good balance of ease of use and sophistication of the design of your “child”.
If you still find it difficult to understand the rules of good manners in the design of sites, refer to comprehensive video tutorials on web design for beginners, which will save you a lot of money and time you can spend searching for the right information, theory and practical training.
Principles of good web design. Any web-design course for beginners starts with a long description of its concepts, principles, functions and tasks. I will not go into these theoretical details, I will dwell only on the description of the main points.
There are a huge number of opinions that design solutions are the most convenient and “advanced”. Of course, web design for business sites, image sites, information portals and blogs will be completely different. To create a truly effective and harmonious interface, it is necessary to combine the basic principles of ease of use of the site with a creative approach and visual component.
Steven Bradley, a well-known blogger, in his article “Design Principles: Dominance, Focal Points And Hierarchy” names three basic principles of web design:
- domination
- focus points
- hierarchy
In today’s web design lesson for beginners we will consider these principles in more detail. “What is it for?” – you ask. And here for what. When working on the projects (let’s take for example this website of a local resort in Ukraine), you will repeatedly face the requirement of customers to increase the size of any elements to highlight and emphasize them. When you do this, you will find that you now need to perform similar manipulations with other objects to maintain balance.
You will gradually realize that some objects are dominant, while others are just background elements. However, if several objects begin to dominate at the same time, it can not only confuse the work, but also affect the harmony and attractiveness of web design in general.
Principle 1. Domination
If you compare any two objects in the design, then there are two options:
- they are completely identical
- one of them will dominate the other
The dominant object immediately catches the eye, it is noticed earlier. Thus, it has more visual weight. Domination can be created by varying the following properties of the elements:
- size
- color
- form
- texture
- saturation
- depth
- free space
- orientation
- perceived volume and weight
Another way to make an object dominate is to apply a visual direction effect or a so-called visual hint. For example, surround an item with arrows pointing at it. This way, you can make it dominant even with less visual weight than other objects.
I do not recommend you to do two or more dominants – they will “fight” for attention and upset the whole balance. Nor should an element be overly dominant so that it does not overshadow the rest of the composition.
Principle 2. Focus points
Focus points are less pronounced, minor elements in the issue of dominance. They are presented in the form of zones with less visual weight.
To make the most of this principle in your work, it is desirable to use no more than three focus points. Then the contrast between them will be pronounced, and a person will intuitively divide what he sees into something “very important”, “important” and “everything else”. The more focus points the user sees on the screen, the harder it will be for him to perceive the information.
Principle 3. Hierarchy
The visual hierarchy assumes the presence of several levels of dominance. It should be based on the priorities of information to direct the user’s attention to the most important and provide him with a positive experience from the consumption of content. If, for example, the title of the page is more important than a fact in the article, then its (title) should be visually distinguished. The dominant object in the hierarchy must answer all the questions of the user who came to this page for certain information.
To build a hierarchy, you can play with the size, placement, color, alignment, contrast and vertical rhythm of the elements. If we look at the picture above, we will see that the main property of building a visual hierarchy is the size, which distinguishes the titles from the text, divided into blocks with different font sizes.
In mobile application design, the ability to use different principles of the visual hierarchy is limited (such as space or size), so color comes first.
In this example, we see that the “Proceed to Checkout” button is highlighted in red, while the “Narrow Your Search Results” button is gray and is flush with the product links and filter. It is easy to guess which of the buttons occupies a prominent place in the visual hierarchy of this interface. This brings our web design lesson for beginners to an end. In conclusion, I want to remind you that all the knowledge gained is desirable to immediately apply in practice. To do this, you can use a variety of paid and free video courses that will help you adjust self-study, explain complex techniques in simple words, and just inspire further development.
If you want to improve your web design skills, subscribe to our blog updates and read the latest materials “first hand”.
Was this article helpful to you? Recommend us to friends on social networks! Till next time!
