Tips for using images on websites and blogs
Of course, the image is the epicenter of any web site, because people are by nature visual. When creating a website or blog, we pay special attention to content, design…

Continue reading →

The ideal form of authorization - how to do it is not necessary (errors and tips)
Recently, we posted a number of useful tips on creating effective registration forms on the site, and today we want to talk about the authorization / login unit. Recently, a…

Continue reading →

Web design illustrations are the best examples of use.
If you carefully study any selection of website designs on a particular topic, you will see one trend - illustrations are now in vogue. They are so widespread that we…

Continue reading →

Hamburger menu: a bit of history and alternatives

We continue to discuss the topic of navigation in web projects. After reviewing examples of bread crumbs, we decided today to talk about the so-called hamburger menu. There was a time when this element brought freshness and novelty to user interfaces on mobile devices. This icon has become not only an integral part of top mobile applications, but has also begun to be actively used in site headers (in adaptive versions and not only). It got to the point that the menu began to appear even where it was completely inappropriate. As a result, the criticism collapsed on the hamburger menu button, and the former favorite became the culprit in the controversy.

Let’s look at and discuss why this navigation format has gained such popularity, and does it have any worthy rivals these days? The material is based on this article, thanks to the author for interesting thoughts. We also recommend to look at examples of hamburger menu icons and scripts for its implementation.

HISTORY OF POPULARITY OF THREE MAGIC LINES
The history of adaptive hamburger menu began in 1981, when the designer of the company Xerox Norm Cox created an icon in the form of a hamburger. This image was used in the Xerox Star system to designate a list. However, the hamburger button menu gained real popularity in the era of smartphones: thanks to it, it was possible to fit difficult navigation through desktop applications on a small screen – it successfully hid behind three bars that resemble three components of a hamburger (two layers of bread and one – of meat).

Popularity Hamburger Menu
The navigation option with a hamburger menu quickly became one of the most popular design elements for smartphones. To find the desired section / page, all you had to do was touch the screen, and not perform a whole series of actions.

If earlier the clutter of controls created chaos, distracted and increased the time to make a decision, now various drop-down lists, search strings, icons of social networks and much more are hidden behind a neat icon.

ALTERNATIVES OF THE HAMBURGER MENU IN NAVIGATION
This implementation of the menu is not easy has become a mandatory element of the design of smartphone applications. However, she has alternatives that are worth paying attention to.

Such an implementation is convenient in a situation where it is difficult to select the most important menu items and hide some functions in the “More” section. In this case, all elements can be placed on a single panel with the ability to scroll. However, due to the fact that there will be only a few items in sight, designers will need to give the user a visual clue about the need to use horizontal scrolling to view other objects. In addition, the idea of ​​navigating by scrolling will not please every user.

A large number of sections of the same importance that you do not need to constantly keep in sight, can be hidden in the drop-down horizontal menu. To view hidden items, you need to click on the downward arrow located next to the name of the main section.

Bottom navigation is similar to the option using tabs – with the difference that the tabs are not located at the top, but at the bottom of the screen. The bottom panel can be visible or hidden (in this case, it is displayed when you scroll up or down endlessly). Items in this navigation are indicated by icons, with or without labels.

VERTICAL TEXT
Separate from the usual practice of horizontal text placement is the incipient trend of the location of the text on the menu vertically. The advantage of this solution is a significant saving of space on the screen: a narrow strip of text can accommodate the name of any section.

The difference between UI and UX: a practical example
Home »Web Design» Usability »The Difference Between UI and UX - Examples from Usability Specialist The difference between UI and UX: a practical example Comparison of UI and UX Today…

...

How to choose the best illustrations for your site
I somehow had a publication about the best free photobanks and photo stocks in which the question was raised where to look for images for the site. Today I want…

...

Web 2.0 style design: simplicity as art
In the fall of 2005, with the help of the publisher Tim O’Reilly, the term Web 2.0 was firmly included in the lecture of web developers. Like any new term,…

...

7 popular typography trends in web site design
Typography is the style, location and appearance of printed letters / texts on a page. Currently, it has already become an integral element of web design. A lot of interesting…

...