While exploring the vastness of the web, many will probably notice that most sites are built on the basis of a grid. Elements or blocks in such sites are located on the page not chaotically, as it was a few years ago, but in a certain sequence and structured (sometimes it is imperceptible at first glance). These sites are well balanced and tend to look clean and tidy. Much credit for this neatness belongs to grid, which underlies the design and provides the user with a clear, undistorted structure of the site.
Although grids tend to represent simple intersections of horizontal and vertical lines at a given interval, many designers use them to embellish and accentuate obvious geometric shapes and visual paths. We can see these paths and shapes in portfolio sites, galleries, blogs, and other creative projects. This is not surprising, since the mesh has a number of useful properties and advantages, for example, such as:
Creating visual paths to guide users
Combining various components into a coherent whole
Sorting information
And, of course, the mesh is the best fit for demonstrating the beauty of straight lines (you don't have to go far). Below we have prepared sites in which the grid is more than just a basic design.
Conclusion
As already mentioned, the grid is an integral part of design and easily turns chaos into order, and in website design, like nowhere else, this opportunity is really important. Most users want to get information quickly and easily, and not better way rather than presenting them with a clear and well-organized structure.
No, this does not mean at all that appearance the site should be linear and simple. Sometimes, even simple geometric shapes, skillfully "diluted" with colors, images and graphics (remember), can be really attractive. What do you think? Doesn't this explicit blocking look appealing?
Websites also have their own skeleton. But it is useless to ask doctors about its features. And the veterinarians are also not aware of the structure of the site. Only the layout designers know about this. It is on them that the structure of the skeleton of the future resource depends. And the main way to create the bones of his skeleton is block layout.
Website layout is a craft for the initiated
There is something mysterious in the layout of the site. But this is until you get to know this craft better. We begin our dedication:
The next stage in the development of the site after creating its layout is the layout. The task of the layout designer is to transfer the skeleton of the future site to the virtual world using html code and css tables. Simply put, transfer the dimensions and proportions of the resource into a form that is understandable for the browser.
In the process of layout with html code, the "skeleton" of the site is broken down into parts. And using css ( cascading style sheets) sets the size of its "bones", color and location.
There are several types of layout:
I. Tabular - used to be the main type of layout. In the table layout, the tag is used to set the site structure
and its child tags. Layout using tables allows you to arrange all design elements in the most proportional way relative to each other. But at the same time, this code turns out to be too voluminous:
Also, the main disadvantages of the table code include its long loading time and poor indexing of content by search engines.
The content of a spreadsheet-based page will not be displayed until all of the data has loaded. Block layout allows you to display each loaded element separately.
Poor indexing of table pages is due to large gaps between blocks of text located in different cells of the table.
Now tabular verst is rarely used as the main method for creating sites. Now it is used only for structuring tabular data and the location of graphic images.
II. Block - currently the main layout method. Unlike a tabular block layout, it has a number of advantages:
Separating the styling of the elements from the html code;
The ability to overlay one layer on top of another - this ability greatly facilitates the positioning of elements.
Better indexing by search engines;
High speed of loading a page consisting of mutually independent elements;
Ease of creating visual effects ( dropdown menus, lists, tooltips).
The main disadvantage of the block layout is a certain " ambiguity»Understanding her code different browsers... Therefore, html pages often have to be "refined" by using special hacks.
With the advent of block layout, such a concept as "cross-browser compatibility" was born. Due to the difference in the display of the same element in different browsers, layout designers have to insert whole chunks of code (hacks) into the main html.
The hack is highly specialized and solves the problem of incorrect display in only one browser.
The main element used in block layout is the tag
... The section of code separated by this tag is called a layer. All styling decisions have been moved beyond the boundaries of the html code into cascading style sheets. They are accessed via IDs or css classes:
How does block layout work?
Before starting the layout, a ready-made psd website layout in graphic editor cut into blocks (layers). Cut out background pictures are placed in a separate folder, which will be attached separately to each layer:
For example, let's take this website layout, created in Photoshop. First in text editor using div, we set the structure of the future resource and assign its own id selector to each layer. It turns out the following structure:
Then to the finished structure of the site in html with the line attach the css file. Then we add to it the style description of each layer, positioning relative to other elements and its dimensions.
You can learn more about all the css properties from the technical documentation for the language.
This is how our example of a block layout of a site looks in a browser window:
Of course, this example is just a visual aid to demonstrate how block layout works. The real layout is done using background images and logos included in css. And also with the inclusion of hacks in the html and css code to optimize the display in all browsers.
While exploring the vastness of the web, many will probably notice that most sites are built on the basis of a grid. Elements or blocks in such sites are located on the page not chaotically, as it was a few years ago, but in a certain sequence and structured (sometimes it is imperceptible at first glance). These sites are well balanced and tend to look clean and tidy. Much credit for this neatness belongs to grid, which underlies the design and provides the user with a clear, undistorted structure of the site.
While grids tend to represent simple intersections of horizontal and vertical lines at specified intervals, many designers use them to decorate and accentuate obvious geometric shapes and visual paths. We can see these paths and shapes in portfolio sites, galleries, blogs, and other creative projects. This is not surprising, since the mesh has a number of useful properties and advantages, for example, such as:
Creating visual paths to guide users
Combining various components into a coherent whole
Sorting information
And, of course, the mesh is perfect for showing the beauty of straight lines. Below we have prepared sites in which the grid is more than just a basic design.
Conclusion
As already mentioned, the grid is an integral part of design and easily turns chaos into order, and in website design, like nowhere else, this opportunity is really important. Most users want information quickly and easily, and there is no better way than to present them with a clear and well-organized structure.
No, this does not mean at all that the appearance of the site should be linear and simple. Sometimes, even simple geometric shapes, skillfully "diluted" with colors, images and graphics (remember flat design), can be really attractive. What do you think? Doesn't this explicit blocking look appealing?
The coming year has brought a lot of fresh technologies and trends, but most likely the trends that have shown themselves by the end of 2015 will dominate. More videos, vertical pattern solutions, material inspired ideas and stylish slides. Increase in popularity is to be expected for these techniques. Most of the new concepts are not so difficult to implement. Below are 11 web design trends (and many great example sites) that we will face in 2016. Samples of these designs will really help you get a sense of the trend.
The site is attractive with animated backgrounds, interactive effects
More beautiful typography
Simplified interfaces paved the way for the idea of beautiful typography (as well as easy-to-use web tools like Google Fonts and Adobe Typekit - expanding your development capabilities with huge online libraries). The simplicity of the inscriptions (readable and easily perceived) in the concept of "calligraphy" frees up space for other elements. What you should try to link is the readable font and the entertaining newness of the options.
a country-style restaurant website: measured and unhurried, without fuss (catchy contrasts) with well-chosen colors and fonts. Country style (rustic-style) gives a feeling of closeness to nature. The feathered branding is reflected graphically (illustrations, backgrounds). In general, this is part of the identity - "Hawk and Hen", as a symbol of a successful hunt
Illustrations and drawings
Illustrations with drawings bring creative imagination and a cheerful mood to the design. Works for all types of sites (not only for children). The popularity of the “illustrated” style has also grown when it comes to the design of small elements (icons, etc.) in the site design.
What is especially pleasing in this trend is that illustrations add personality to the site. Since illustrations or "sketch icons" are most likely hand-drawn, visually and by general feeling, such a site for users seems to be more personal. From the point of view of the development of the trend towards increasing the efficiency of communication with the user, there is still a lot to be done on this path.
The site has nice microiterations and illustrations. and "Baby-style" of the entire site turns design into a game
Website scalability is an issue for every web designer. Agree, creating an author's visual product, you want it to remain equally beautiful and convenient for users of any device. The option is unacceptable when a blog or website looks great on a screen with a resolution of 1920x1080px and is completely unreadable on a smartphone screen with parameters 240x320px.
10-15 years ago there was not such a variety and number of monitors. Therefore, it was easy to develop website designs. You create a regular static design for a fixed screen width and you can be sure that most users will see the site as intended.
Today, users have not only monitors with a wide variety of resolutions, 3.5 billion people access the Internet from mobile devices - netbooks, tablets, smartphones, etc. Building websites using old methods is no longer comme il faut.
The first decision that many developers have come up with is to create a separate "lightweight" version of the site for mobile devices. Many major portals have done this. However, in recent years, the number of different types and subspecies of devices from which users go online has grown at an incredible pace. And it should also be borne in mind that the owners of tablets or smartphones also view the full version of the site. Therefore, in the end, web designers and developers came up with the idea of "responsive" design.
Until now, one can come across several versions of how different IT specialists understand "adaptive design". Let's try to figure out what are the options for developing a website design.
Static design
"Static" or "static" refers to a site that consists of immutable HTML pages. Such a site implies the presence of a fixed theme with a fixed width and most often contains one or literally several pages. To display such a site in the center of the screen, 1000 px is enough. Content will always be strictly centered.
It is also worth considering that only a person with good experience in web development can update a static site. It does not have an admin panel, so all changes must be made through the source code.
The advantages of static design:
Saving time and effort during development;
Requires less load on hosting;
Images, video materials, banners can be displayed without the fear that they overlap each other or shift at different monitor resolutions.
Disadvantages of static design:
On the mobile device the site will be displayed with a horizontal scroll bar;
Widescreen monitors display static design rather poorly - not an option for those who seek showiness.
There used to be much more static sites - the emergence and development of CMS contributed to the reduction of their number in favor of dynamic ones. Examples of static sites:
Dynamic design
"Responsive design is one of the most current trends in website development, which has come seriously and for a long time" - these titles are now replete with almost any site dedicated to web development and. It will not be difficult to find out what it is. However, there are some subtleties that relate to understanding and perception of such a design. Let's take a look at them.
"Rubber" design
The main feature of this design is that the width of the columns is set in percentages, not pixels. Therefore, the "rubber" design is stretched to the full width of the screen at any monitor resolution. To make such a design, especially when using a block layout, is somewhat more difficult than a fixed one, but the user will not see empty fields on the page. It is noteworthy that the rubber design was initially quite widely used in Runet, while in the West, developers remained committed to static design for a very long time.
However, the simple rubber design has certain limitations and disadvantages. With the wide range of screen sizes that modern devices have, it is difficult to implement a rubber design so that everything looks equally good at any resolution, so that the design does not "move apart", so that pictures and videos do not crawl beyond the boundaries of the blocks, etc. for this reason, other solutions were required to create a truly universal site.
Adaptive design
To make the site look equally good on mobile phone and on a large monitor, the developers of some sites took the path of developing several, in fact, independent, design options for different devices... When a user visited the site, the server determined the type of device and screen resolution and "gave" this or that version of the site. Moreover, each version was pre-optimized for different resolutions. For versions for screens with a small resolution, reduced images were used, and some elements were removed altogether. The layout of the blocks itself was also different from the "large" version.
Responsive design is justified when creating large-scale projects: information portals, online stores, forums, corporate sites and other similar resources. It looks especially impressive on monitors with a diagonal of at least 15.6 ''.
The principle of responsiveness is based on the creation of a single URL that adapts content to different screen formats. Examples:
See how the position of text and images changes on different screens. Why is this cool? One of the reasons is that Google gives preference to such resources in search results. Another reason is that sites like these are easier to design and maintain, which makes the job of many people easier.
Responsive design
The last method that web designers came up with was responsive design, which was opposed to the usual adaptive design, although until now these terms are often confused and used in a similar sense. Responsive design combines the features of responsive and fluid designs. It automatically adjusts to any screen width, just like the rubber one. In this case, in the process of adjusting, the arrangement of the blocks and the size of the pictures can change. Also, some elements may appear, disappear or change. For example, a regular horizontal menu can change to a drop-down menu.
More importantly, the locations from which people will come to your site. Therefore, it is very important to take into account any Internet speed, because a huge number of people live in remote areas, where the Internet speed is not even 1 mb / s. There is a study that says 57% of users will leave your site if it takes longer than a few seconds to load. Not too long ago, Google started to take speed into account when ranking sites. It does not have a big impact on the position of sites with an average loading speed, but if the page does not load within a certain time, then the search algorithm applies penalties to such a site.
All this makes us take a closer look at the speed of the Internet and provide the user with the opportunity to download content quickly enough at the lowest speeds. That is, "responsive" design is not only a story about screen sizes, but various scenarios, solutions for which must be flexible and well thought out "inside and out."
