What is quality in web design: examples and recommendations. Part 1
Some outstanding examples and recommendations for creating a quality web page or blog design.
Many people tend to describe their web design services as “quality”. But what does the word “quality” mean here? How to determine whether the design is of high quality or not? Well, I see several ways to determine the quality in relation to the field of web design. After all, if one day to determine what allows you to create high-quality web design, you can use the same techniques for honing your own style.
')
To explain how I understand quality in website design, I have compiled a few recommendations and examples.
One of the main advantages of a good website is the rational use of distances between design elements. If you carefully consider how certain elements are arranged and aligned on the page, you can significantly improve its overall appearance and create a sense of high-quality design for the user.
To establish the correct distances between the design elements, you must first of all look carefully at all the objects that make up the web page. Looking at the big picture, you can better understand how to optimally arrange objects. Sometimes it helps to reduce the page and look at your design at an alternative angle.
Great layout of items on Good.is site
As you can see, this page creates the feeling of a very open and clean space. This was due to the designer’s decision to leave significant distances around blocks of text and pictures.
Very successful distances between elements on the Digital Mash site
If you correctly position the elements on the page relative to each other, they will look much more attractive and will click on them more often. The Digital Mash site is a great example of a very friendly design.
Mass of an empty seat on the website Creatica Daily
And again - the distances between objects help to highlight content so that it can speak for itself. There is not so much content on the page, but the creators of the site were not afraid to leave large free spaces. If you have only a few lines of text on a page, this does not mean at all that they cannot take a lot of space.
Plenty of space on the Postbox site
If you take a closer look at the Postbox site, you can see which indents are made around the edges - in fact, they are 60 pixels each. It would seem that it is a bit much, but in action it looks just fine.
The main error in determining the distances between content elements is pressing them to the edges of the page. No matter how stylish the objects themselves are, if you squeeze them onto the page too much, it will lose a lot in style and quality.
An example of insufficient distances between objects
In the previous section, we showed which successful indents were made on the PostBox site, and below we made an imitation of it ourselves to show how it would look with insufficient distances between objects. Now you can see how much the wrong arrangement of objects can spoil the design. In this case, the web page loses much, and the sense of quality disappears.
The decision on how much free space to use on the page has to be taken anew in each specific case. Therefore, you need to train your eye to be able to determine the correct distance required around each element, and use this knowledge in the design. It is not easy, but comes with practice.
When the design is “brought to mind”, it can be seen immediately. Sometimes it all depends on the smallest details, which many may not even notice. “Perfection to the last pixel” I call the method when close attention is paid to lines, edges and borders. You can insert just a line, or you can add small details, whether it be light gradients, a simple shadow with a width of 1 pixel or highlight - and your work will really stand out. Some designers known for this approach are: Collis Ta'eed, David Leggett, and Wolfgang Bartelme .
Attention to detail on the Envato website
Below I have cut out a few examples. In Example 1, you can see that the green plate has a light green border 1 pixel wide. In Example 2, a light gradient shadow inside the block and a white border 1 pixel wide on top are used. Clever - use shadow to create a highlight impression. On the green surface in the background there is a small and very light shadow, which allows you to draw attention to the clean and clear details inside the white block below. Although it seems that there are few such details, they really help to create the impression that everything on the page is slightly polished, creates a sense of three-dimensional realism, as if the objects were placed on top of the page, and not on a flat, static layout.
Attention to detail on Tutorial9.net
David Leggett knows a bit about pixel smoothing . His recent redesign of the site tutorial9.net is a mix of pixel anti-aliasing techniques. In Example 1, you can see how it made the tabs look a little smoother, just adding a simple 1-pixel highlight to the top. In Example 2, a number of methods are used. The drop shadow on the camera icon, the use of light and shade on the white area, 1-pixel highlight at the top of the navigation bar.
Pixel-perfect buttons and dividers on the RedBrick Health website
A beautiful navigation bar created by Ryan Scherf is another example of using pixel perfection to create high-quality web design. The pink button has a 1-pixel highlight, and the dividing lines between the links are worked out just as well and in detail: as you can see, instead of using just gray separator lines, Ryan added 1-pixel highlights to the bottom so that everything doesn't look flat. and two-dimensional.
Pixel perfection is not alien to grunge: AvalonStar website
And here is a wonderful AvalonStar: crazy grunge-style blog. But even in an untidy grunge design, 1-pixel high glare looks impressive. If you look at Example 1, you will see how the gradient shadow is used on the brown top panel, and the green block below has a 1-pixel highlight on it. Due to the combination of a dark tone at the top and a 1 pixel high flare, the blocks look slightly shiny.
Here the main thing is practice. As you can see in the examples, such a simple thing, as a 1 pixel-high highlighted line can add style and depth to your work, you do not need to resort to mind-blowing volumetric details and gradients to create the impression of something truly voluminous.
PS Read the following article: What is quality in web design: examples and recommendations. Part 2.
Let's talk about examples of well-designed typography.
Many people tend to describe their web design services as “quality”. But what does the word “quality” mean here? How to determine whether the design is of high quality or not? Well, I see several ways to determine the quality in relation to the field of web design. After all, if one day to determine what allows you to create high-quality web design, you can use the same techniques for honing your own style.
')
To explain how I understand quality in website design, I have compiled a few recommendations and examples.
01. Distance between objects on page
One of the main advantages of a good website is the rational use of distances between design elements. If you carefully consider how certain elements are arranged and aligned on the page, you can significantly improve its overall appearance and create a sense of high-quality design for the user.
To establish the correct distances between the design elements, you must first of all look carefully at all the objects that make up the web page. Looking at the big picture, you can better understand how to optimally arrange objects. Sometimes it helps to reduce the page and look at your design at an alternative angle.
Examples of successful location of elements
Great layout of items on Good.is site
As you can see, this page creates the feeling of a very open and clean space. This was due to the designer’s decision to leave significant distances around blocks of text and pictures.
Very successful distances between elements on the Digital Mash site
If you correctly position the elements on the page relative to each other, they will look much more attractive and will click on them more often. The Digital Mash site is a great example of a very friendly design.
Mass of an empty seat on the website Creatica Daily
And again - the distances between objects help to highlight content so that it can speak for itself. There is not so much content on the page, but the creators of the site were not afraid to leave large free spaces. If you have only a few lines of text on a page, this does not mean at all that they cannot take a lot of space.
Plenty of space on the Postbox site
If you take a closer look at the Postbox site, you can see which indents are made around the edges - in fact, they are 60 pixels each. It would seem that it is a bit much, but in action it looks just fine.
Wrong distances between objects
The main error in determining the distances between content elements is pressing them to the edges of the page. No matter how stylish the objects themselves are, if you squeeze them onto the page too much, it will lose a lot in style and quality.
An example of insufficient distances between objects
In the previous section, we showed which successful indents were made on the PostBox site, and below we made an imitation of it ourselves to show how it would look with insufficient distances between objects. Now you can see how much the wrong arrangement of objects can spoil the design. In this case, the web page loses much, and the sense of quality disappears.
Tips for the correct location of objects
The decision on how much free space to use on the page has to be taken anew in each specific case. Therefore, you need to train your eye to be able to determine the correct distance required around each element, and use this knowledge in the design. It is not easy, but comes with practice.
- Use in mesh design with guide lines
Using a grid definitely helps to understand the importance of distances between objects.- Try again and again
By trial and error you can determine what should be the indents.- Free space doesn’t mean wasted
If you have empty space on the page, it is not necessary to fill it.- Less is more
Than trying to fit on a bigger page, make less content on it, add free space and place only vital information.
02. Perfection to the last pixel
When the design is “brought to mind”, it can be seen immediately. Sometimes it all depends on the smallest details, which many may not even notice. “Perfection to the last pixel” I call the method when close attention is paid to lines, edges and borders. You can insert just a line, or you can add small details, whether it be light gradients, a simple shadow with a width of 1 pixel or highlight - and your work will really stand out. Some designers known for this approach are: Collis Ta'eed, David Leggett, and Wolfgang Bartelme .
Examples of "perfection to the pixel"
Attention to detail on the Envato website
Below I have cut out a few examples. In Example 1, you can see that the green plate has a light green border 1 pixel wide. In Example 2, a light gradient shadow inside the block and a white border 1 pixel wide on top are used. Clever - use shadow to create a highlight impression. On the green surface in the background there is a small and very light shadow, which allows you to draw attention to the clean and clear details inside the white block below. Although it seems that there are few such details, they really help to create the impression that everything on the page is slightly polished, creates a sense of three-dimensional realism, as if the objects were placed on top of the page, and not on a flat, static layout.
Attention to detail on Tutorial9.net
David Leggett knows a bit about pixel smoothing . His recent redesign of the site tutorial9.net is a mix of pixel anti-aliasing techniques. In Example 1, you can see how it made the tabs look a little smoother, just adding a simple 1-pixel highlight to the top. In Example 2, a number of methods are used. The drop shadow on the camera icon, the use of light and shade on the white area, 1-pixel highlight at the top of the navigation bar.
Pixel-perfect buttons and dividers on the RedBrick Health website
A beautiful navigation bar created by Ryan Scherf is another example of using pixel perfection to create high-quality web design. The pink button has a 1-pixel highlight, and the dividing lines between the links are worked out just as well and in detail: as you can see, instead of using just gray separator lines, Ryan added 1-pixel highlights to the bottom so that everything doesn't look flat. and two-dimensional.
Pixel perfection is not alien to grunge: AvalonStar website
And here is a wonderful AvalonStar: crazy grunge-style blog. But even in an untidy grunge design, 1-pixel high glare looks impressive. If you look at Example 1, you will see how the gradient shadow is used on the brown top panel, and the green block below has a 1-pixel highlight on it. Due to the combination of a dark tone at the top and a 1 pixel high flare, the blocks look slightly shiny.
Tips for perfect design details
Here the main thing is practice. As you can see in the examples, such a simple thing, as a 1 pixel-high highlighted line can add style and depth to your work, you do not need to resort to mind-blowing volumetric details and gradients to create the impression of something truly voluminous.
- Attention to fine details
Small details that complement the content of the page - the key to success.- Think in pixels
Borders, gradients, lines, shadows, etc. should not be huge to produce the proper effect.- Before and after
Compare the results of your work: what the page looks like before and after applying different effects. Then you can see how effective they are.
PS Read the following article: What is quality in web design: examples and recommendations. Part 2.
Let's talk about examples of well-designed typography.
Source: https://habr.com/ru/post/57552/
All Articles