Web design 2013: traditions, innovations, basics
Web design is in constant motion: every year it develops and changes under the influence of various factors, acquiring new interesting tools and leaving behind all the old and irrelevant. This year can be characterized by the fact that one of the reasons for the development of design is the increasing spread of mobile devices and tablets, the emergence of HTML 5. But let's take a closer look at web design trends in 2013.
It is worth starting with new and becoming popular types of sites.
The emergence of adaptive design has led the widespread distribution of various tablets, smartphones and other mobile devices. With different screen resolutions, they make modern web-designers think of a universal website that would look equally good on all devices. The adaptive design automatically adjusts to any resolution and ensures maximum perception of any information by the user, without losing its functionality.
When designing an adaptive site, you need to pay attention to two main points, namely, how the site will behave at different resolutions and what content to display on certain devices.
When designing a grid of adaptive design, Media queries or Media queries are used. What is it?
This technology allows you to prescribe certain conditions (styles) in which the site adjusts to the monitor resolution of the device used or the browser window, changing the width of the layout, the number of columns, the size of images and text. Media queries limit the width of the layout and when a certain value is reached, the prescribed element style is applied. You can try experimenting yourself with the browser window size on the sites of Regent College , Skinny Ties , UX London and see what this will lead to.
')
Content always has a special meaning, and this is especially true of responsive design, because we don’t have two versions (mobile and desktop), so at the design stage you need to understand what content to display. The most important thing is that when adapting a site, it does not lose its functionality, and the displayed content as quickly as possible brings a person to the desired result.
In the mobile version of the site information should be presented briefly and clearly. To achieve this, designers use a number of ways:
1. Replacing part of textual video information or images;
2. Simplify navigation;
3. Creating more capacious content;
4. A clear description of the goods;
5. Simplification of the functional (getting rid of a number of secondary elements), etc.
One-page websites have also gained wide popularity. These sites can be identified a number of characteristic features that are also new trends in web design:
1. Website without reloading the page;
2. Using vertical, horizontal scrolling;
3. One screen - one section of the site;
4. Fixed key elements (header, basket, social network);
5. The use of large fonts;
6. Large thematic illustrations;
7. Use pictures as a background;
8. Large buttons;
9. Separation of screens (different background images, various lines, fills, gradients, shadows);
10. Animations using CSS3 and HTML 5 technologies.
Among the one-page sites are D'Angelico , The Enterprise Foundation , Tag Creative Studio and Snipcart.
On such sites, the main design element is a modular grid. In addition, they are characterized by blocks of different sizes and endless content uploading (one of the techniques borrowed from social networks). To see what a modular grid looks like, we recommend that you refer to the following sites: Lotta Nieminen , La vie a la Fresh , Benetton , MAMO , DNabox.com , Langland .
Modern Internet space is replete with a variety of styles in the design of sites. However, we still see it possible to single out the main directions. Let us dwell on some of the styles.
Minimalism is a popular trend among many designers. Usually, minimalist sites try to focus the user's attention on something specific, i.e. A separate element is drawn that is different from everything else (a picture in the center of the screen, or a large inscription). Bright representatives in the style of minimalism are the sites of Eastworks Leather Company , Whole and Lapka . The characteristic features of minimalism include:
1. Simplicity and clarity;
2. Minimum graphic elements;
3. Functional interface;
4. Black and white color;
5. Minimum shadows.
No less popular and close in style to minimalism. The flat design is based on a two-dimensional style. The main idea of ​​this style is the image of the element's geometry only using colors, without any other ways of giving depth: shadows, bevels, reliefs, gradients. How it looks in practice, you can find on such resources as Spell Tower , LayerVault , Yep! Each element of the user interface should be perceived unambiguously, and interaction with such elements should be intuitively clear to users. Characteristics:
1. No additional effects;
2. The use of simple shapes;
3. Contrasting colors;
4. Focus on typography.
In addition, there is such a design as an “almost flat” design. In the “almost flat” design, flat design techniques are used, but additional effects are added to some elements. For example, buttons contain additional gradients or shadows. Designers, as a rule, choose any effect and apply to all elements of "almost flat" design. Site Mixpanel is an example.
It is usually positioned as lightweight, simple, fast, and open. In general, this style looks like a flat design. Also used high-quality typography, simple elements, well thought out content. Distinctive features of the design metro are that the links are not underlined, and for the visualization of information, multi-colored and uniform filled-in navigation squares are used. You can verify this yourself: Blocklevel , Microsoft SWIT , Etch .
Custom geometry has also gained popularity this year. Basically, it can be traced in all elements of the site (backgrounds, selections, individual elements). Fortunately, HTML5 and CSS3 can now be made. The most trendy geometric forms of the elements are a circle, a rhombus and a hexagon (honeycomb), less common are triangles: Built by Buffalo , V2 , AmplifiQEstudio .
Retro style taken from the era of 50-80 years with posters, posters and other paraphernalia of the time. Quite often, designers, inspired by such work, paint the site in retro style. Popular design elements include:
1. The use of textures (in particular, paper in all its forms - typographical, torn, yellowed - or textures similar to paper), as well as the use of all sorts of scuffs to add antiquity;
2. Decorative elements (frames, patterns, flags, ribbons, lines - double, triple);
3. Retro colors (not juicy, but muted);
4. Typical intricate typography (poster fonts).
The sites Von Dutch , Kinder Forografie , Alex Peirce , Web Design Yorkshire , Rodolphe CĂ©lestin , Teixido perfectly demonstrate the use of retro style in design.
The last thing I would like to dwell on when discussing the topic of the main directions of web-design is the characteristic elements present on the websites in 2013.
Not such a new trend, but parallax is also quite common in today's web environment. Parallax creates a feeling of the depth of the site, so that the illusion of three-dimensional space arises: Spokes , iUtopi , Minerva . A similar effect is achieved by moving several layers relative to each other at different speeds.
The fixed menu is a consequence of the distribution of sites with vertical scrolling: the designers realized that it would be inconvenient for the user to come back up each time to switch to another section or perform some key actions. That is why the main menu began to be fixed from above, all over the site scrolling. In addition to the menu, the main elements of the site are fixed (for example, in the case of an online store, this element will be a basket). A similar menu is used on the sites of Eyal Shahar , Engage Interactive and Ryan Scherf .
Full-size photos and videos as a background generally have a wow effect that attracts the attention of the site visitor: Fifty Three , thinkLuke .
Viewing the video in the background, the user may be interested in and continue working with the site: MediaBoom , Orange.com , The Power Inside .
Large design typography. Not so long ago, technology has not yet allowed the widespread use of non-standard fonts, and most sites were limited to Arial, Tachoma and Trebushet. With the advent of fonts from Google, the arsenal of web-designers has been replenished with about 30 fonts that Google itself has optimized, and which, if desired, can be easily connected to your site. However, times are changing. Modern layout methods allow you to connect almost any non-standard font. And the font combinations are used both in the form of fonts, and in the form of beautifully drawn pictures. Examples of the active use of non-standard fonts can be seen here: Amazee Labs , Denise Chandler , Ryan Scherf .
Another of the trends that have switched to the web from mobile devices is the large interface buttons. “Pressing and touching” among various gadgets is becoming more and more popular, which is why the big buttons “get over” into web-design. Although huge buttons make pressing much easier, they are associated with a large number of graphics, which slows down the page loading speed, therefore site builders have to look for ways to solve their ideas without losing image quality and website loading speed. The use of large buttons is actively used by Ultra Clinic , The Online Gift Card , Precomposed Touch Gestured , KULT Studio , Simbolicons .
Unobtrusive backgrounds. In 2013, web designers began to pay great attention to the background of the site, in particular, to all sorts of textures: they are minimal and unobtrusive on the one hand, and on the other, whimsical. Examples of using unobtrusive backgrounds can be found on the following sites: Mangrove , Teixido , 5Tailors .
QR codes. Another element that migrated from the mobile to the web. Although not only in it: now these codes can be seen everywhere, including on sites. The main function of the code is to attract the attention of the visitor.
Animation using CSS 3 and HTML 5. Now, with the development of these technologies, designers can easily make different effects: deformation, overflow, disclosure, planes and many others, and creative people actively use it. There are many sites on the network where ready-made animation solutions with previews and embed code are already posted on your site. If you want to see how the animation looks like using CSS 3 and HTML 5, go here: WWF , Rule of Three , Inception , InTacto10 , RailUp , Agent 008 Ball .
In conclusion, I would like to say that the influence of mobile devices on the web-industry will certainly continue: with the development of Internet technologies, even more interesting tools will emerge that designers will actively use. But now the existing set of tools allows designers to create truly unique and unlike anything web-masterpieces that attract the attention of thousands of users.
The material was prepared by Nikolay Lisov, web-designer of Astra Media Group.
It is worth starting with new and becoming popular types of sites.
Adaptive design
The emergence of adaptive design has led the widespread distribution of various tablets, smartphones and other mobile devices. With different screen resolutions, they make modern web-designers think of a universal website that would look equally good on all devices. The adaptive design automatically adjusts to any resolution and ensures maximum perception of any information by the user, without losing its functionality.
When designing an adaptive site, you need to pay attention to two main points, namely, how the site will behave at different resolutions and what content to display on certain devices.
Resolution
When designing a grid of adaptive design, Media queries or Media queries are used. What is it?
This technology allows you to prescribe certain conditions (styles) in which the site adjusts to the monitor resolution of the device used or the browser window, changing the width of the layout, the number of columns, the size of images and text. Media queries limit the width of the layout and when a certain value is reached, the prescribed element style is applied. You can try experimenting yourself with the browser window size on the sites of Regent College , Skinny Ties , UX London and see what this will lead to.
')
Content
Content always has a special meaning, and this is especially true of responsive design, because we don’t have two versions (mobile and desktop), so at the design stage you need to understand what content to display. The most important thing is that when adapting a site, it does not lose its functionality, and the displayed content as quickly as possible brings a person to the desired result.
In the mobile version of the site information should be presented briefly and clearly. To achieve this, designers use a number of ways:
1. Replacing part of textual video information or images;
2. Simplify navigation;
3. Creating more capacious content;
4. A clear description of the goods;
5. Simplification of the functional (getting rid of a number of secondary elements), etc.
Single-page sites (“Puffers”)
One-page websites have also gained wide popularity. These sites can be identified a number of characteristic features that are also new trends in web design:
1. Website without reloading the page;
2. Using vertical, horizontal scrolling;
3. One screen - one section of the site;
4. Fixed key elements (header, basket, social network);
5. The use of large fonts;
6. Large thematic illustrations;
7. Use pictures as a background;
8. Large buttons;
9. Separation of screens (different background images, various lines, fills, gradients, shadows);
10. Animations using CSS3 and HTML 5 technologies.
Among the one-page sites are D'Angelico , The Enterprise Foundation , Tag Creative Studio and Snipcart.
Modular grid
On such sites, the main design element is a modular grid. In addition, they are characterized by blocks of different sizes and endless content uploading (one of the techniques borrowed from social networks). To see what a modular grid looks like, we recommend that you refer to the following sites: Lotta Nieminen , La vie a la Fresh , Benetton , MAMO , DNabox.com , Langland .
Styles in web design
Modern Internet space is replete with a variety of styles in the design of sites. However, we still see it possible to single out the main directions. Let us dwell on some of the styles.
Minimalism
Minimalism is a popular trend among many designers. Usually, minimalist sites try to focus the user's attention on something specific, i.e. A separate element is drawn that is different from everything else (a picture in the center of the screen, or a large inscription). Bright representatives in the style of minimalism are the sites of Eastworks Leather Company , Whole and Lapka . The characteristic features of minimalism include:
1. Simplicity and clarity;
2. Minimum graphic elements;
3. Functional interface;
4. Black and white color;
5. Minimum shadows.
Flat (flat) design
No less popular and close in style to minimalism. The flat design is based on a two-dimensional style. The main idea of ​​this style is the image of the element's geometry only using colors, without any other ways of giving depth: shadows, bevels, reliefs, gradients. How it looks in practice, you can find on such resources as Spell Tower , LayerVault , Yep! Each element of the user interface should be perceived unambiguously, and interaction with such elements should be intuitively clear to users. Characteristics:
1. No additional effects;
2. The use of simple shapes;
3. Contrasting colors;
4. Focus on typography.
In addition, there is such a design as an “almost flat” design. In the “almost flat” design, flat design techniques are used, but additional effects are added to some elements. For example, buttons contain additional gradients or shadows. Designers, as a rule, choose any effect and apply to all elements of "almost flat" design. Site Mixpanel is an example.
Metro design
It is usually positioned as lightweight, simple, fast, and open. In general, this style looks like a flat design. Also used high-quality typography, simple elements, well thought out content. Distinctive features of the design metro are that the links are not underlined, and for the visualization of information, multi-colored and uniform filled-in navigation squares are used. You can verify this yourself: Blocklevel , Microsoft SWIT , Etch .
Custom Geometry
Custom geometry has also gained popularity this year. Basically, it can be traced in all elements of the site (backgrounds, selections, individual elements). Fortunately, HTML5 and CSS3 can now be made. The most trendy geometric forms of the elements are a circle, a rhombus and a hexagon (honeycomb), less common are triangles: Built by Buffalo , V2 , AmplifiQEstudio .
Vintage (retro style)
Retro style taken from the era of 50-80 years with posters, posters and other paraphernalia of the time. Quite often, designers, inspired by such work, paint the site in retro style. Popular design elements include:
1. The use of textures (in particular, paper in all its forms - typographical, torn, yellowed - or textures similar to paper), as well as the use of all sorts of scuffs to add antiquity;
2. Decorative elements (frames, patterns, flags, ribbons, lines - double, triple);
3. Retro colors (not juicy, but muted);
4. Typical intricate typography (poster fonts).
The sites Von Dutch , Kinder Forografie , Alex Peirce , Web Design Yorkshire , Rodolphe CĂ©lestin , Teixido perfectly demonstrate the use of retro style in design.
The last thing I would like to dwell on when discussing the topic of the main directions of web-design is the characteristic elements present on the websites in 2013.
Not such a new trend, but parallax is also quite common in today's web environment. Parallax creates a feeling of the depth of the site, so that the illusion of three-dimensional space arises: Spokes , iUtopi , Minerva . A similar effect is achieved by moving several layers relative to each other at different speeds.
The fixed menu is a consequence of the distribution of sites with vertical scrolling: the designers realized that it would be inconvenient for the user to come back up each time to switch to another section or perform some key actions. That is why the main menu began to be fixed from above, all over the site scrolling. In addition to the menu, the main elements of the site are fixed (for example, in the case of an online store, this element will be a basket). A similar menu is used on the sites of Eyal Shahar , Engage Interactive and Ryan Scherf .
Full-size photos and videos as a background generally have a wow effect that attracts the attention of the site visitor: Fifty Three , thinkLuke .
Viewing the video in the background, the user may be interested in and continue working with the site: MediaBoom , Orange.com , The Power Inside .
Large design typography. Not so long ago, technology has not yet allowed the widespread use of non-standard fonts, and most sites were limited to Arial, Tachoma and Trebushet. With the advent of fonts from Google, the arsenal of web-designers has been replenished with about 30 fonts that Google itself has optimized, and which, if desired, can be easily connected to your site. However, times are changing. Modern layout methods allow you to connect almost any non-standard font. And the font combinations are used both in the form of fonts, and in the form of beautifully drawn pictures. Examples of the active use of non-standard fonts can be seen here: Amazee Labs , Denise Chandler , Ryan Scherf .
Another of the trends that have switched to the web from mobile devices is the large interface buttons. “Pressing and touching” among various gadgets is becoming more and more popular, which is why the big buttons “get over” into web-design. Although huge buttons make pressing much easier, they are associated with a large number of graphics, which slows down the page loading speed, therefore site builders have to look for ways to solve their ideas without losing image quality and website loading speed. The use of large buttons is actively used by Ultra Clinic , The Online Gift Card , Precomposed Touch Gestured , KULT Studio , Simbolicons .
Unobtrusive backgrounds. In 2013, web designers began to pay great attention to the background of the site, in particular, to all sorts of textures: they are minimal and unobtrusive on the one hand, and on the other, whimsical. Examples of using unobtrusive backgrounds can be found on the following sites: Mangrove , Teixido , 5Tailors .
QR codes. Another element that migrated from the mobile to the web. Although not only in it: now these codes can be seen everywhere, including on sites. The main function of the code is to attract the attention of the visitor.
Animation using CSS 3 and HTML 5. Now, with the development of these technologies, designers can easily make different effects: deformation, overflow, disclosure, planes and many others, and creative people actively use it. There are many sites on the network where ready-made animation solutions with previews and embed code are already posted on your site. If you want to see how the animation looks like using CSS 3 and HTML 5, go here: WWF , Rule of Three , Inception , InTacto10 , RailUp , Agent 008 Ball .
In conclusion, I would like to say that the influence of mobile devices on the web-industry will certainly continue: with the development of Internet technologies, even more interesting tools will emerge that designers will actively use. But now the existing set of tools allows designers to create truly unique and unlike anything web-masterpieces that attract the attention of thousands of users.
The material was prepared by Nikolay Lisov, web-designer of Astra Media Group.
Source: https://habr.com/ru/post/192744/
All Articles