This article comes from the Mockplus team, a faster and simpler prototyping tool.
It is well known that web UI design with a good visual hierarchy is preferred to plain, unfocused web UI design. Why is that? The answer is simple. The page design of visual hierarchy is not only beautiful, but also pleasing to users. Moreover, a clear and intuitive visual hierarchy has been established to facilitate users to simply and quickly identify and read the required page content, thus improving user experience and reducing the jump rate.
However, how can we combine the features of the web page/product with the real needs of users, hierarchy the visual content of the page, so as to provide a better user experience, achieve interaction with users, and ultimately promote the purchase of the product? Here’s a look at some of the most recent examples of visually layered web design and some tips for organizing visual content, as well as some prototyping tips for prototyping these web designs (with Mockplus, my favorite quick and easy prototyping tool) :
1. Use interface element size to build hierarchy
The larger and more prominent the interface elements (such as text, images or shapes), the easier it is to attract the user’s attention. Therefore, in specific web interface design, designers can create a hierarchical relationship of page information through gradient size changes. Of course, the importance of the content should also be proportional to the size (that is, the larger the more important).
As shown in the figure, the size of the text is used to reflect the hierarchy of web page information.
Note: the size should also be controlled within the acceptable range of users
Too big, can show the content is limited. It’s too small, it’s not easy to read, it’s cumbersome.
Prototyping tips:
When prototyping a web page with Mockplus, a prototyping tool with a rich library of components and ICONS, most components can easily be resized by simply using width and height attributes or dragging and dropping borders to create an intuitive hierarchy.
As shown, Mockplus allows users to resize components simply by using width and height properties or by dragging borders.
2. Use the differences of light and shade, shadow and transparency of interface elements to reflect simple hierarchy
Like black characters on a white background, the same elements, the same color, different shades, shadows and transparency can also reflect a simple hierarchical relationship. Of course, without the involvement of too much color, different text, pictures and other page elements combined with transparency, shadow and light and shade, can also make the whole design very simple style and layering. (Click on the link for more minimalist web design tips)
As shown in the picture, text light and shade, combined with size changes, make the page hierarchy clearer and simpler:
Prototyping tips:
In this regard, the editor finds that Mockplus provides special transparency properties that can be set by modifying the value of the property based on hierarchical design requirements.
If you need to add element shadows, it can be done easily by overlapping components.
Figure, “picture” and “shape” component combination, achieve the addition of shadows.
3. Use color to layer the page
Color, as the visual hierarchy tool most commonly used by designers, also plays an important role in creating highly hierarchical web designs. And specific design skills, we can refer to the following points:
First, brightly colored page elements are more likely to stand out from softer elements. As shown in figure:
Here, bright reds and yellows stand out from the softer pink background.
Moreover, some colors, especially the choice of some theme color schemes, for determining the overall tone of the web page, attract the attention of users, the role is also very obvious. For example, blue, which generally represents calm and peace, is suitable for some daily things management software. And red, on behalf of enthusiasm beaming, suitable for some holiday related shopping promotion software choice.
In the picture, use red to highlight promotional information on the page.
Secondly, the gradient change of color saturation can also reflect the intuitive and rich hierarchical structure.
The same color, saturation gradient can also help show the hierarchy of site elements. As shown in figure:
Finally, the color module is also obvious for the logical relationship of interface elements
Each page element with the same logical relationship is placed in the same color module nearby, which makes the page structure clearer and makes it easy for users to quickly view relevant content.
Figure, use colour module, more intuitionistic ground divides functional area.
Prototyping tips:
Mockplus, on the other hand, offers a very powerful color picker that allows designers to select and add colors with a simple click. Its color collection function, but also for the future reuse and maintain the consistency of the whole design color provided a possibility.
Of course, it’s easy to combine the “shapes” component to add rich functional color blocks to a page, as well as simple “hover” or “click” color interaction states.
As shown, add color blocks to divide interface functional structure.
4. Use the page layout to show the hierarchy of the page
Page layout is also a common visual tool used by designers. On the one hand, the same website, internal pages can be based on software or product display content requirements, using a variety of layout mode, increase the variability and readability of the page. On the other hand, it can also directly use repeated page layout in different pages, which is convenient to help users form certain reading habits and quickly and effectively query the information they need.
For the specific layout mode of a single page, you can try the following ways to achieve:
* Use grid to divide different page modules
The grid is one of the recognized tools for dividing the functional modules of a page. It also plays an important role in organizing the visual content of an interface. In addition, combined with the color changes of each grid, can also make the whole page more cool and intuitive. The diagram below:
* Use location differences to reflect logical relationships
The same logical relationship (like, dependent, causal, etc.) or similar/related elements are placed in the same or parallel location or module of the page, which makes it easier for users to browse the desired page information.
Of course, within each logical relationship, the hierarchy can be deeper and clearer by combining headings and lists.
* Use dots and lines
In web design, designers can not only directly use dots and lines to highlight content, but also use dots and lines to divide pages into blocks and layouts.
As shown in the figure, the logical relationship between contents is reflected through different locations. Also, use lines to separate page structure and layout.
* Take advantage of alignment differences
The alignment of text, images, and related elements is also an important tool for experiencing different hierarchies.
In summary, page layouts can also help designers create more beautiful and layered web designs.
Prototyping tips:
With Mockplus, designers can easily add interface grids using a combination of “quick grid + autofill” features. Moreover, in the specific design process, the use of tools such as alignment, ruler and guide line can also make the layout of the web page design easier and faster.
As shown, Mockplus’s quick lattices and autofill functions are utilized to create web grids and divide interface functional structures.
5. Use white space and spacing to highlight visual content
The clever use of white space can be very effective in highlighting page information. It’s also a good strategy to keep space between elements on the page so that they’re not “crowded and cluttered” with each other. As shown in figure:
6. Use comparison to highlight the hierarchical relationships of web pages
All of the visual organization tools mentioned above, such as size, color, shading, spacing, etc., can also make a page more visually beautiful and rich, and reflect the structural hierarchy between elements.
As shown, use strong contrast of color to highlight page hierarchy.
In addition, the overlay, clarity, and level of detail of page elements can also effectively highlight the level of importance of the content on the page.
The pictures and text at the front should be more important, clearer and more detailed, so that users can read easily and avoid confusion.
7. Use different interface styles to create a unique visual hierarchy of web pages
Of course, this is not to say that designers need to use the above design tools to demonstrate a hierarchy of web importance. In fact, it’s also a good idea to create a visual hierarchy with a designer’s unique texture, graphic or graphic elements, etc. The diagram below:
In short, no matter whether to use the above design tools, combined with designer creativity, to create a unique visual hierarchy style, is a good design concept.
Prototyping tips:
At this point, Mockplus offers a lot of great features to help designers do what they want and prototype, test, and iterate on these wild ideas quickly and easily.
For example, its team collaboration and team management features make it easier for designers to complete designs more efficiently. Its 8 presentation and sharing methods, such as export images, HTML and demo packages, provide convenience for designers to choose appropriate ways to test and share related designs according to actual needs.
In addition, its component style library makes it possible to save and share required component styles and reuse them at any time.
8. Analyze user needs and web browsing patterns, optimize page content and location
In the process of hierarchical structure of web page interface, it is not to blindly add or highlight a certain part, but to analyze user behavior and divide the corresponding structure level according to user demand level. Otherwise, no matter how layered it is, users will just smile and leave because they can’t find what they need.
In addition, depending on the needs of the user, decide which content needs to be placed in the most urgent and prominent position in order to attract users. At the same time, we also need to analyze the page location of important content according to the user’s reading mode when browsing the web page.
According to Nielsen Norman Group, web users tend to read in an “F” or “Z” pattern, that is, reading from left to right, beginning and ending in detail, and choosing between sections based on the size and title structure of the page or article. The diagram below:
So, in web design, designers need to pay attention to the interesting and practical content of the beginning and end of the page, as well as the main part of the middle attention to the size of the title concise, establish a clear framework hierarchy.
In short, whether it is user behavior portrait, or user browsing pattern analysis, the final hope is to be able to arrange and distribute page content more reasonably according to user needs, intuitive, clear, easy to identify.
9. Other design tools
Other visual design tools, such as interface text aspects, text fonts, typography, alignment, and so on, can also highlight page hierarchies.
Prototyping tips:
Mockplus’s “single-line text” and “multi-line text” components make it easy for designers to build frames based on the size, font, color, layout, and alignment of web page text. Also, the right combination of interaction design can make the whole design more attractive.
Conclusion:
Of course, hierarchies don’t just make web pages more intuitive and pleasing to the eye. Moreover, Android or iOS apps with certain limitations, such as page size, device screen, response or not, need a clear hierarchy to get rid of the chaos and complexity of the page and attract more users to click and use. The same applies to all of the above design techniques.
In short, however, timely translation of various design ideas into visual prototypes through a useful and powerful prototyping tool (such as Mockplus, described above), further testing and iteration is the only way to create a truly beautiful, practical, and well-loved Web /app.
Anyway, I hope you found the hierarchy design tips and prototyping tips above enlightening.