What is quality in web design: examples and recommendations. Part 2
Don't forget to read: What is quality in web design: examples and recommendations. Part 1. (or here ).
And today we will talk about what a well-designed typography is and how to properly organize the elements on the page .
Although the real texts for the site will not be written by the designer, they play the same important role as the overall quality of the content. The designer must work hard so that the texts are easy to read and hold attention. There are many ways to make text readable and pleasing to the eye. As we enumerate the rules and norms of what should and should not be done, I will give a few examples of sites where rational typography really works.
Big and beautiful headlines on The Netsetter
')
Headlines are very important in web design, especially in blog design. A recent trend in web design is the use of large and bold outlines in headlines. This trend has a number of positive consequences - not only are blocks that are important from the point of view of usability, but also space is created and the page structure is determined. This is perfectly illustrated by the following example with Netsetter - here you can see how a lot of space is created around the header, and, of course, it reads very well.
Leading and discharge in the text
The Viget site is a very beautiful example of how typography is important in web design. In the example below (taken from their portfolio), you can see how using a larger font helps to create free space. Even with the thin, fragile font that is used here, you can see how much space is created in this area of ​​the page. In fact, this font typeface is very elegant, and it is an excellent choice. One more thing that catches your eye here is the attention to the height of the line (leading). The distance between the lines was increased from the default value to create more free space and make the text more readable. You can use this trick in your next job.
Web Design Ledger - mood fonts
You can find a suitable font by trial and error, or you can choose a font based on different moods that fonts help bring to the page design. For example, the resource Web Design Ledger , possessing a rather nondescript retro design, at the same time creates a feeling of openness and modernity, so that the choice of a font that evokes similar emotions can be the key to the success of the site. Designer Henry Jones (Henry Jones) chose a popular Georgia serif transition font for headings that fits very well with the worn look of the site. The modern sounding of the site gives another font that is radically different from the font of the headings - the main content of the page is printed in Helvetica, a sans serif typeface with very smooth and open outlines. The choice of headset in this example was very reasonable and, in fact, helped set the mood of the entire site.
Short list of typography requirements in web design
Defining good typography in web design will be easier if you look at some examples (see above). But why are these examples so good and what should you be oriented to in typography for your next website ??
Here you can give a thousand tips, but I do not consider myself an expert in this field, I just learned to appreciate the effect of good typography. If you want to learn more about the subject and see even better examples, I highly recommend reading the relevant article in Smashing Magazine.
Design activities seem to many attractive because of its creative component, and bored here, of course, not necessary. Now I know that the word “organization” does not sound at all creative and fun, but if you form a habit of good organization, everything will not be as dismal as it seems at first glance. The organization of elements of a web page always takes place in different ways, depending on the type of site and on how specific elements are important for its content.
Despite the fact that the placement of content items varies from time to time, there are several techniques to help greatly facilitate this task. First, you need to decide what purpose this design has. For example, you create a website designed to boost sales, or filled with some information, or create a subscription service or directory of links, etc.
Commercial site design: 37 signals
Looking at the popular site 37 signals, it is easy to notice that their products are sold so well for a reason. The creators of the site have done everything possible for you to see what they are selling and to help you make a purchasing decision. There is everything that is required from the site intended for sales.
In the example picture, you can see that the site has 4 key features that make it ideal for shopping. Attention is drawn to the first detail: they made a very dark block with short contents and large headings typed in bold size. Then, they excite the interest of the buyer, listing some of the advantages of each product with a nice illustration. The next detail is the desire to buy , and it is supported by quotations and confessions, there are even some videos from the series “Our customers have something to say”. And the last characteristic is dynamism . The 37Signals website has various dynamic components, and it’s nice to look through a rather long page to see that there are several dynamic elements below.
Design for content (blog): Well Medicated
Creating a blog design is a different story. You do not need to spend time convincing and reassuring users about products, your “products” are already in sight, your content is your products. Make it so convenient for users to view and read your posts, as well as write to you or your blog.
Content should be the main or one of the main things that are in the blog. In this example, the pretty pink headline in bold draws attention directly to the content. There is a good sized picture for previewing and a good 2/3 paragraph of text, followed by a “Read more” link. Standard information is also provided on when and by whom the recording was made. For me, this is one of the best examples of what I would call quality “design for content”. Attention can be drawn to everything that is of interest, there are nice large subscription icons that help users follow your blog posts. In addition, this will undoubtedly increase the number of subscribers, so this technique works on two levels. It’s very easy to encourage users to browse other sections of the blog - you can use everything from the “recent posts” tab or displaying popular topics in the sidebar to organizing drop-down menus or simple and effective lists. This is easy, but very effective, especially in a blog. Blogs usually relate to personal questions, so giving visitors the opportunity to contact you in various ways will be very helpful and will encourage people to get to know you better and visit your blog again.
Of course, it happens that you have to do everything differently and break standards. But there are some simple tips that you can follow to create a transparent structure and an orderly design.
Read the following article: “What is quality in web design: examples and recommendations. Part 3. "and you will learn how best to use the colors and backgrounds in the design, as well as how to give the design a zest.
And today we will talk about what a well-designed typography is and how to properly organize the elements on the page .
03. Well thought out typography
Although the real texts for the site will not be written by the designer, they play the same important role as the overall quality of the content. The designer must work hard so that the texts are easy to read and hold attention. There are many ways to make text readable and pleasing to the eye. As we enumerate the rules and norms of what should and should not be done, I will give a few examples of sites where rational typography really works.
Examples of well-designed typography
Big and beautiful headlines on The Netsetter
')
Headlines are very important in web design, especially in blog design. A recent trend in web design is the use of large and bold outlines in headlines. This trend has a number of positive consequences - not only are blocks that are important from the point of view of usability, but also space is created and the page structure is determined. This is perfectly illustrated by the following example with Netsetter - here you can see how a lot of space is created around the header, and, of course, it reads very well.
Leading and discharge in the text
The Viget site is a very beautiful example of how typography is important in web design. In the example below (taken from their portfolio), you can see how using a larger font helps to create free space. Even with the thin, fragile font that is used here, you can see how much space is created in this area of ​​the page. In fact, this font typeface is very elegant, and it is an excellent choice. One more thing that catches your eye here is the attention to the height of the line (leading). The distance between the lines was increased from the default value to create more free space and make the text more readable. You can use this trick in your next job.
Web Design Ledger - mood fonts
You can find a suitable font by trial and error, or you can choose a font based on different moods that fonts help bring to the page design. For example, the resource Web Design Ledger , possessing a rather nondescript retro design, at the same time creates a feeling of openness and modernity, so that the choice of a font that evokes similar emotions can be the key to the success of the site. Designer Henry Jones (Henry Jones) chose a popular Georgia serif transition font for headings that fits very well with the worn look of the site. The modern sounding of the site gives another font that is radically different from the font of the headings - the main content of the page is printed in Helvetica, a sans serif typeface with very smooth and open outlines. The choice of headset in this example was very reasonable and, in fact, helped set the mood of the entire site.
Short list of typography requirements in web design
Defining good typography in web design will be easier if you look at some examples (see above). But why are these examples so good and what should you be oriented to in typography for your next website ??
- Is the text readable?
Do not be afraid to attach headings large and bold. - Have you thought about detente?
Good discharge greatly improves the readability of the text. - Do your fonts fit your mood?
Make sure the font complements the design idea.
Here you can give a thousand tips, but I do not consider myself an expert in this field, I just learned to appreciate the effect of good typography. If you want to learn more about the subject and see even better examples, I highly recommend reading the relevant article in Smashing Magazine.
04. Organization of elements
Design activities seem to many attractive because of its creative component, and bored here, of course, not necessary. Now I know that the word “organization” does not sound at all creative and fun, but if you form a habit of good organization, everything will not be as dismal as it seems at first glance. The organization of elements of a web page always takes place in different ways, depending on the type of site and on how specific elements are important for its content.
Despite the fact that the placement of content items varies from time to time, there are several techniques to help greatly facilitate this task. First, you need to decide what purpose this design has. For example, you create a website designed to boost sales, or filled with some information, or create a subscription service or directory of links, etc.
Commercial site design: 37 signals
Looking at the popular site 37 signals, it is easy to notice that their products are sold so well for a reason. The creators of the site have done everything possible for you to see what they are selling and to help you make a purchasing decision. There is everything that is required from the site intended for sales.
In the example picture, you can see that the site has 4 key features that make it ideal for shopping. Attention is drawn to the first detail: they made a very dark block with short contents and large headings typed in bold size. Then, they excite the interest of the buyer, listing some of the advantages of each product with a nice illustration. The next detail is the desire to buy , and it is supported by quotations and confessions, there are even some videos from the series “Our customers have something to say”. And the last characteristic is dynamism . The 37Signals website has various dynamic components, and it’s nice to look through a rather long page to see that there are several dynamic elements below.
Design for content (blog): Well Medicated
Creating a blog design is a different story. You do not need to spend time convincing and reassuring users about products, your “products” are already in sight, your content is your products. Make it so convenient for users to view and read your posts, as well as write to you or your blog.
Content should be the main or one of the main things that are in the blog. In this example, the pretty pink headline in bold draws attention directly to the content. There is a good sized picture for previewing and a good 2/3 paragraph of text, followed by a “Read more” link. Standard information is also provided on when and by whom the recording was made. For me, this is one of the best examples of what I would call quality “design for content”. Attention can be drawn to everything that is of interest, there are nice large subscription icons that help users follow your blog posts. In addition, this will undoubtedly increase the number of subscribers, so this technique works on two levels. It’s very easy to encourage users to browse other sections of the blog - you can use everything from the “recent posts” tab or displaying popular topics in the sidebar to organizing drop-down menus or simple and effective lists. This is easy, but very effective, especially in a blog. Blogs usually relate to personal questions, so giving visitors the opportunity to contact you in various ways will be very helpful and will encourage people to get to know you better and visit your blog again.
Tips for organizing your content
Of course, it happens that you have to do everything differently and break standards. But there are some simple tips that you can follow to create a transparent structure and an orderly design.
- What is the purpose of the design?
As we showed above, determine the purpose of your design. - Design using mesh guides
The grid will allow you to squeeze the most out of the available space. - Experience the location of the elements
Stay on site as a visitor, is it easy to use the site? - Remove unwanted items
Anything that does not matter should be removed or removed away. - Attention balance
Some things should be arranged simply to focus attention on others.
Read the following article: “What is quality in web design: examples and recommendations. Part 3. "and you will learn how best to use the colors and backgrounds in the design, as well as how to give the design a zest.
Source: https://habr.com/ru/post/57582/
All Articles