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 everything 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’s worth starting with new and popular types of sites.

Adaptive design

The emergence of adaptive design has led to the widespread dissemination of all kinds of tablets, smartphones and other mobile devices. With different screen resolutions, they make modern web designers think of a universal site that would look equally good on all devices. Responsive design automatically adapts to any resolution and provides the 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 various devices.

Resolution

When designing an adaptive design grid, Media queries, or Media queries, are used. What is it?
This technology allows you to specify certain conditions (styles) under which the site adapts to the resolution of the monitor of the device used or the browser window, changing, if necessary, the width of the layout, the number of columns, image and text sizes. 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 with the size of the browser window on the Regent College , Skinny Ties , UX London sites and see where this leads.

Content

Content is always of particular importance, and this is especially true of responsive design, because we do not 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 during adaptation the site 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 the text information with video or pictures;
2. Simplification of navigation;
3. Creation of more capacious content;
4. A clear description of the goods;
5. Simplification of functionality (getting rid of a number of minor elements), etc.

One-page sites ("Puffs")

Single page sites have also gained widespread popularity. Such sites can distinguish a number of characteristic features, which are also new trends in web design:
1. Site without reloading the page;
2. The use of vertical, horizontal scrolling;
3. One screen - one section of the site;
4. Fixed key elements (header, basket, social networks);
5. The use of large fonts;
6. Large thematic illustrations;
7. Using a picture as a background;
8. Large buttons;
9. Separation of screens (different background images, all kinds of lines, fills, gradients, shadows);
10. Animations using CSS3 and HTML 5 technologies.
Among the one-page sites include D'Angelico , The Enterprise Foundation , Tag Creative Studio and Snipcart

Modular grids

On such sites, the main design element is a modular grid. In addition, they are characterized by blocks of different sizes and endless loading of content (one of the tricks borrowed from social networks). To see what a modular grid looks like, we recommend that you visit the following sites: Lotta Nieminen , La vie a la Fresh , Benetton , MAMO , DNabox.com , Langland .

Styles in web design

The modern Internet space is replete with a variety of styles in the design of sites. However, it still seems possible to single out the main directions. Let us dwell on some of the styles.

Minimalism

Minimalism is the most popular trend among many designers. Typically, on sites in the style of minimalism, users are trying to focus on something specific, i.e. some 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 Eastworks Leather Company , Whole and Lapka . The characteristic features of minimalism include:
1. Simplicity and clarity;
2. A minimum of graphic elements;
3. Functional interface;
4. Black and white color;
5. Minimal shadows.

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 to image the geometry of an element only with the help of colors, without any other ways of giving depth: shadows, bevels, reliefs, gradients. How it looks in practice, you can find out on such resources as Spell Tower , LayerVault , Yep! Each element of the user interface should be perceived unambiguously, and the interaction with such elements should be intuitive for users. Special Features:
1. No additional effects;
2. The use of simple shapes;
3. Contrasting color schemes;
4. Emphasis on typography.
In addition, there is such a type of design as "almost flat" design. The “almost flat” design uses flat design techniques, but additional effects are still added to some elements. For example, buttons contain additional gradients or shadows. Designers, as a rule, choose some effect and apply to all elements of an “almost flat” design. Website Mixpanel example.

Metro design

Usually it is positioned as light, simple, fast and open. In general, this style is similar to a flat design. It also uses quality typography, simple elements, well-designed content. The distinctive features of metro design are that the links are not underlined, and for visualization of the information, multi-colored and uniformly filled navigation squares are used. You can verify this yourself: Blocklevel , Microsoft SWIT , Etch .

Custom geometry

Custom geometry also gained popularity this year. Basically, it can be traced in all elements of the site (backgrounds, highlights, individual elements). Fortunately, HTML5 and CSS3 now allow you to do this. The most trendy geometric shapes of the elements are a circle, a rhombus and a hexagon (honeycomb), less commonly there are triangles: Built by Buffalo , V2 , AmplifiQEstudio .

Vintage (retro style)

The retro style is taken from the era of 50-80 years with posters, posters and other paraphernalia of that time. Quite often, designers, inspired by such work, draw a website in retro style. Popular design elements include:
1. The use of textures (in particular, paper in all its forms - typographic, torn, yellowed - or textures similar to paper), as well as the use of all kinds of scuffs to give antiquity;
2. Decorative elements (frames, patterns, flags, ribbons, lines - double, triple);
3. Retro colors (not juicy, but muted);
4. Typical intricate typography (poster type fonts).
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 sites in 2013.

Not such a new trend, but also quite common in today's web environment - parallax . Parallax creates a feeling of the depth of the site, which creates the illusion of three-dimensional space: Spokes , iUtopi , Minerva . A similar effect is achieved due to the movement of several layers relative to each other at different speeds.

Fixed menu, is a consequence of the spread of sites with vertical scrolling: the designers realized that it would be inconvenient for the user to return upward each time to go to another section or perform any key actions. That is why the main menu began to be fixed on top, throughout the scrolling of the site. In addition to the menu, the main elements of the site are recorded (for example, in the case of an online store, such an element will be a basket). A similar menu was used on the Eyal Shahar , Engage Interactive, and Ryan Scherf sites .

Full-size photos and videos as a background mainly have a wow effect that attracts the attention of a site visitor: Fifty Three , thinkLuke .
Watching the video in the background, the user may become interested and continue working with the site: MediaBoom , Orange.com , The Power Inside .

Large designer typography.Not so long ago, technology did not yet allow the widespread use of custom fonts, and most sites were limited to Arial, Tahoma, and Trebuchet. With the advent of fonts from Google, the arsenal of web designers has replenished with about 30 fonts, which are optimized by Google itself, 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. Moreover, font combinations are used both in the form of fonts, and in the form of beautifully drawn pictures. Examples of the active use of custom fonts can be seen here: Amazee Labs , Denise Chandler , Ryan Scherf .

Another trend that has moved to the web from mobile devices islarge interface buttons. “Press and touch” among various gadgets is becoming more and more popular, which is why large buttons “move” to the web design. Although the huge buttons make clicking much easier, they are associated with a large number of graphics, which slows down the page loading speed, so 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 addressed by UltraKlinika , 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 kinds of textures: they are minimal and unobtrusive on the one hand, and on the other bizarre. Examples of using unobtrusive backgrounds can be found on the following sites: Mangrove , Teixido , 5Tailors .

QR codes. Another element that migrated from the mobile sphere to the web sphere. 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, flowing, revealing, planes and many others, and creative people actively use this. There are many sites on the network that already have ready-made animation solutions with a preview and code to insert into your site. If you want to see how animations using CSS 3 and HTML 5 look, you should go here: WWF , Rule of Three , Inception , InTacto10 , RailUp , Agent 008 Ball .

In conclusion, I would like to say that the impact of mobile devices on the web industry will certainly continue: with the development of Internet technologies, even more interesting tools will appear that designers will actively use. But now the existing set of tools allows designers to create truly unique and nothing like web-masterpieces that attract the attention of thousands of users.

The material was prepared by Nikolai Lisov, web designer of Astra Media Group.

Also popular now: