Negative space – or white space, in other words, – is the area of the layout that is left empty. It may be not only around the objects you place in the layout but also between and inside them. It is a kind of breathing room for the object on the page or screen. It defines the limits of objects as well as creates the necessary bonds between them according to Gestalt principles and builds up effective visual performance.

Negative space in graphic design is often seen in logos, illustrations, posters, and creative lettering: for them, it becomes an active part of the visual presentation and makes key objects even more expressive. In this issue of D4U Inspiration, we’ve collected some examples of creative logo designs that apply such an approach. Enjoy and get inspired!

Logo designed by Tubik for Aviar, the company that deals with flight rights protection. The designer creates an elegant and bold symbol playing with visual metaphors of a plane and shield combined with the power of negative space.

Logo by Leavingstone uses the negative space to artistically combine the silhouette of a man’s head with a rolling sheet of paper.

Logo design integrating a symbol into a wordmark by means of negative space; designed by Roy Smith for a wildlife photographer and BBC Springwatch cameraman.

Sophisticated logo designed by Yoga Perdana and elegantly integrating the image into the wordmark

Stunning set of logos by Yoga Perdana mastering negative space for expressive branding and applying visual details connected to nature and animal world

Logo design by Alex Tass for Topus, a project focused on architectural 3D scanning/printing features number 1 combined with a T letter, both showed in perspective in the negative space.

Chat Robot logo design by Dmitriy Lepisov: the idea was to use negative space and combine letters C&R, a “+” sign, a chat symbol and a robot head in one logo.

Logo design exploration by Eddie Lobanovskiy visualizing swimmer in the wordmark.

Wordmark designed by Kakha Kakhadzen is based on contrast and negative space inscribing letter O into the word.

One more contrast-based logo design by Antonio Calvino uses negative space and visual details to integrate a letter into the word and making it playful with a splash of ink.

Don’t miss the collections of animated logos, animated illustrations, and other D4U Inspiration posts.

Сообщение Branding Inspiration: Creative Logo Designs Activating Negative Space появились сначала на Design4Users.

To organize content in UI clearly for users, designers apply a well-known technique called visual hierarchy. Today’s article gives a general insight into the essence of this approach and the tools helping to organize the content properly.

What’s visual hierarchy?

Visual hierarchy is one of the core techniques which are applied to the design process. It is initially based on Gestalt psychological theory which examines users’ visual perception of elements in relation to each other and shows how people tend to unify the visual elements into groups.

Visual hierarchy strives at presenting the content of a product that way so users could comprehend the level of importance for each element. It organizes UI components so that the brain could distinguish the objects on the basis of their physical differences, such as size, color, contrast, style, etc.

The visual presentation of UI elements has a great influence on the user experience of a product. If content components look like a mess, people can’t navigate within a product or interact with it properly. Moreover, unstructured copy content has a low level of legibility, so users can’t scan it quickly and they need to make a significant effort to distinguish the data they’ve been looking for. Such bad UX can lead to poor user satisfaction which means a product wouldn’t be much sought-after.

Typographic hierarchy

Copy content is a significant part of any UI design. That’s why visual hierarchy often highly depends on typography. Specialists decided to emphasize the importance of copy presentation by creating a separate system of visual hierarchy called the typographic hierarchy.

The system aims at organizing copy content in the best way for users’ perception. Designers modify and combine fonts to build the contrast between the most meaningful and prominent copy elements which should be noticed first and ordinary text information. The fonts are modified by regulating sizes, colors, and families as well as their alignment.

Typographic hierarchy includes different elements of copy content which are headlines, subheaders, body copy, call-to-action elements, captions, and some others. To build an effective visual hierarchy, all the elements need to be segmented into different levels. Let’s see what they are.

The primary level. It includes the biggest type like in headlines. The primary level aims at providing users with the core information as well as drawing people’s attention to a product.

The secondary level. This is the type of copy elements which should be easily scanned. They usually involve subheaders and captions which help users quickly navigate through the content.

The tertiary level. Body text and some additional data build the tertiary level. Designers often apply relatively small type still it should remain readable enough.

As the copy content is usually a major source of information in UI, designers need to present the data gradually. By segmenting copy elements into different levels, designers help users easily go from one piece of copy to the other and perceive the information in the right order.

One more thing to mention is that while creating typography for mobile products, designers are recommended to keep the number of layers within two. The thing is that small mobile screens don’t provide enough space for three levels. That is why the elements of a secondary level such as subheaders step aside to make mobile UI look clean.

Vinny’s Bakery website

Visual hierarchy tools

When designers have already chosen all the content components, it’s time to create an order. Let’s find out what helps designers to set the effective visual hierarchy of UI components.

Size

One of the most powerful tools for visual material transformation is size. It is rooted in human’s mind that big things are somehow more important than the small ones. That’s why users’ attention automatically goes first to the large words or big pictures.
Designers need to distinguish the level of significance for each content element and based on this data transform the components into big and small.

Color

In our previous articles, we’ve mentioned that color has a great impact on the users’ perception the reason why it serves as an effective tool for visual hierarchy creation.

Colors have their own hierarchy which is defined by the power of influence on users’ minds. There are bold colors such as red, orange, and black which can easily draw attention. On the other hand, there are weak, or soft, colors like white and cream which work better as the background.

Using the different colors designers can support a slight hierarchy of the UI elements. For example, CTA buttons in bold colors will definitely be the first thing that users see if the other UI elements are created in a softer palette.

Contrast

Hierarchy is based on contrast itself. One element contrasts with the other and that’s how users can see the differences between the content elements. Contrast can be created via visual differences including size, color, and style. Still, it’s recommended to keep the contrast in balance so that one object wouldn’t completely obscure the others.

Negative space

There can be many components in a user interface and to make them all noticeable for users’ eyes designers need to give them some private space. Negative space, or white space, is the area between elements in a design composition. Some designers usually don’t think of the white space as a component of design still the experts apply it as a useful tool helping to build an appropriate composition. A right amount of negative space between the elements will help users to notice and perceive each of them to each of them.

Proximity

As we said above, visual hierarchy is built upon Gestalt principles, so designers pay deep attention to the proximity of UI elements. As people tend to unify the visual elements into groups, UI components need to be placed that way so users could categorize them. If some elements are placed in a certain proximity, users automatically perceive them as a group. Designers can use proximity as a tool which helps to divide the content into subcategories.

Repetition

If people notice that some elements look similar, they may automatically unify them into one group. That’s how repetition works. Designers repeat some patterns for different objects on purpose so that users could unify them. For example, a website with a great amount of body copy at a page can highlight the most important sentences with another color. Seeing the sentences in this color users can follow from one key point to another.

Visual hierarchy is a foundation of effective information architecture. When UI elements are structured and organized, people enjoy using a product and it will be more effective in solving their problems. Moreover, powerful visual hierarchy improves the navigation system since people can better orient within a product. Stay tuned and be ready for the next article about visual hierarchy.

Recommended reading

Copy Content in User Interface: Tips and Practices
Basics of Information Architecture for Designers
Information Architecture: Techniques For Designers
Gestalt Theory for Efficient UX: Principle of Similarity
Gestalt Theory for UX Design: Principle of Proximity

Originally written for Tubik Blog

Сообщение Visual Hierarchy: How to Organize UI Content появились сначала на Design4Users.

One of the previous articles here has started the series of posts devoted to Gestalt theory and ways to effectively apply it in UX design. For a brief reminder, Gestalt theory is based on the following idea: when people perceive the complex objects consisting of many elements, they apply conscious or subconscious methods of arranging the parts into a whole organized system instead of just the set of simple objects. It works on different levels of perception, but the visual part seems to be the most interesting for designers creating interfaces. We have already presented the definition of Gestalt theory, the principles of grouping in particular, as well as looked into the principle of similarity for user interfaces. This time let’s discuss the principle of proximity for UX design.

Principle of Proximity

This principle is based on the cognitive tendency to perceive the objects close to each other as related, especially in comparison with those which are placed farther. Having the urge to organize a variety of data and objects around, people often group them this way automatically, much quicker than they start real thinking about it. So for designers, this is another good prompt for how to organize the interface along natural ways the brain absorbs and classifies data. The simple scheme by Andy Rutledge, given below, visualizes the principle of proximity.

Source

The important thing to bear in mind is that via research and experiments proximity proved itself more powerful than other distinctive features such as color or shape, for example. People tend to see elements as related if they are close to each other in comparison to other objects even if other features differ, like another simple scheme below shows.

In user interfaces, which are full of different content, the principle of proximity helps a designer to organize the layout to make it scannable and easily-perceived for users. It’s not a secret that users aren’t ready to spend much time learning how the complex interface works so intuitive screen which can be quickly scanned has much more chances to retain the users and give them the best features of the website or app.

In general, we could define two directions of applying proximity principle in user interfaces: for typography elements and copy content and for blocks of different content and controls. As well as in the previous article devoted to grouping principles, we will support them with examples by Tubik designers.

Typography and Copy

One of the domains in which proximity plays a crucial role is the organization of copy content in user interfaces. Scannability of the copy blocks in the layout is vital because readers don’t usually stay on the pages which look like a long homogenous thread of text. First, most users scan the page and check the hooks like headings, subheadings, highlights, and keywords, and only then read more if they got interested. That is the reason why the copy should be arranged according to the laws of both quick perception and aesthetic looks.

White space, also known as negative space, plays a great role in this process. It allows a designer to activate the power of nothing:  the space without any content not only adds the air to the general layout but can be also used to organize its elements as groups and unities where it’s needed.

For copy content, it can be used in different ways. For example, with white space, a designer can harmonically separate the paragraphs in a big bulk of text to make it more digestible and visually pleasant for readers: this approach is often applied in blog articles and big copy blocks on websites. In this case, the principle of proximity signals that the copy lines which are closer to each other present the unified idea or piece of information and in this way makes all the text structured.

Here’s the interface concept of architecture blog. The principle of proximity works in this UI on several levels. First, it unites the lines of one copy block to be decoded as one piece of information. Secondly, every copy block is placed close to the image it describes so even quick scanning lets the viewer understand that they belong to each other and present the single piece of content in general layout. The call-to-action element – link “See more” – also works according to the principle of proximity being placed a bit farther than the body copy content but close enough to show that it is included in this particular content block. So, we can see that in this case, the designer activated proximity both inside and outside every particular block of content making them harmonically arranged while the general layout structured. Pieces of copy are beautifully composed around the theme illustration and are scannable in split seconds.

This approach also works well for extended lists like menus and catalogs. Proximity applied thoughtfully becomes an effective tool to organize all the positions and group them effectively.

For example, let’s look at Slopes website. The links to the core interaction zones of the websites in the header are quickly perceived as one unified group as they are placed close enough to each other and far from other content. The same works for the extended menu hidden behind the hamburger button: the links are organized in groups that are visually defined due to their close placement. Negative space used according to the principle of proximity strengthens the general visual hierarchy of the page.

Blocks of Content and Controls

One more domain where proximity can have a positive impact on user experience is an organization of diverse content blocks in the layout: except copy, these can be images, links, icons, controls, CTA elements, products cards and loads of other stuff. The principle of proximity allows designers to arrange these blocks in a way which most naturally corresponds to natural human abilities of visual perception.

For example, here’s the e-commerce app for a jewelry store. The right screen shows the product card: we can see that the general data about the item – color, width, weight, and material –  is given in several lines which are close to each other and therefore are naturally perceived as a unified piece of content. At the same time, the detailed description of the item presenting quite a considerable piece of writing is placed further and in that way separated a bit from the data file. So, these content blocks don’t merge and users can easily differ key data from the detailed description.

Here’s another example, grounded heavily on the principle of proximity – a layout of an online magazine. All the content and control blocks are arranged on the basis of the broken grid and without any frames separating them from each other. The proximity of the elements allows users to quickly define core content zones: the set of links in the header, the list of the latest publications on the left, the field of the preview for the fresh article, and the block of social network links in the footer. Moreover, inside this global block, the principle of proximity continues to separate or unify the elements: according to it, the designer arranges the positions in the list of latest publications around different topics as well as separates the links to the web pages in the header from the controls of instant action such as search or subscription. This approach not only makes the layout elegant and scannable but also strengthens intuitive navigation for better usability.

Although we have just started revising Gestalt theory usage in design, it’s already obvious that knowing these simple yet effective principles can save much effort for users and support user-friendly interfaces with mechanisms that work according to human cognitive abilities and psychological patterns. Follow the updates to check the explanations and examples for other grouping principles: symmetry, continuation, closure, and others.

Recommended Reading

Gestalt Theory for Efficient UX: Principle of Similarity
Cognitive psychology for UX: 7 Gestalt principles of visual perception
Design Principles: Visual Perception And The Principles Of Gestalt
Improve Your Designs With The Principles Of Similarity And Proximity
Gestalt Theory of Visual Perception
Gestalt Principles: How Are Your Designs Perceived?

Originally written for Tubik Blog

Сообщение Gestalt Theory for UX Design: Principle of Proximity in Interfaces появились сначала на Design4Users.

Visual hierarchy in web and mobile interfaces belongs to the domain knowing which designers strengthen their creative potential. Exploring the ways how people perceive information and using them for building good navigation, digestible copy, and effective color choice has a great impact on the usability of the product – and scannability as its important part. So, today we are going back to basics: let’s start revising how Gestalt grouping principles can affect user interfaces positively.

What is Gestalt theory?

Basically, Gestalt is the term that comes from the German word Gestalt [ɡəˈʃtalt] meaning “shape, form”. It is used primarily in cognitive psychology for the field exploring the laws of meaningful perception of the data which people constantly get from the world that seems primarily chaotic. The basic idea behind this movement can be caught through the well-known phrase by Gestalt psychologist Kurt Koffka: “The whole is other than the sum of the parts”. When people perceive the complex objects consisting of many elements, they apply conscious or subconscious methods of arranging the parts into a whole organized system instead of just the set of simple objects. It works on different levels of perception, but the visual part seems to be the most interesting for designers creating interfaces.

Why could designers get interested in this issue? Because it helps understand the psychology of the app or website users better. When you know the factors influencing visual perception, it makes the process of UX design much more proficient giving higher rates of successful interactions and lowering the level of misunderstandings users could get on this way. Among the various levels of this approach, principles (or laws) of grouping are probably the most essential for designers to consider. These principles are based on the idea that people arrange what they see along with some patterns organized into five global categories: Proximity, Similarity, Continuity, Closure, and Connectedness. Here’s one of the infographics offered by Vertical Measures blog and visualizing the core description for some principles.

Source

In user interfaces, principles of grouping applied thoughtfully make the perception of layout elements quicker and easier as well as establish the priorities in different levels of interaction. Today we are going to consider the similarity principle of grouping widely used in design practice.

Similarity principle

The principle of similarity is grounded in the idea that things that share visual characteristics such as shape, size, color, texture, value or orientation will be seen as belonging together. It means that if a person perceives the set of elements, he or she tends to group the ones which have one or several features alike as the related items.  Therefore, giving different layout elements identic or similar visual features, designers stimulate users to set the appropriate connections and understand the whole scheme faster.

Similarity can be based on various visual parameters such as color, shape, size, and orientation. Let’s check some practical examples of interfaces designed by Tubik team.

Color

Bright Vibe Calendar

Here’s the common example of applying color similarity in the simple calendar app. The letters marking the days of the week on the calendar screen are visually grouped with one color which is different from the colors used for the numbers in the calendar grid. Therefore, the quick glance is enough to separate these types of symbols – color simplifies the process of the first scanning. The next level of color similarity takes place in the field of numbers: the dates on the week which the user has chosen look brighter while the other dates of the month look more faded. The key interactive zones are colored brightly and present the visual accent which is instantly noticeable and cannot be missed. So, color enables the designer to make the easy path of navigation for a user with an effective visual hierarchy via the principle of grouping.

To-Do App

One more example here shows how grouping by color can be applied effectively for the copy in graphical interfaces. You can see the screen of a to-do app where the position which is already marked as done is featured in different color compared to the tasks that are in progress. It enables the user to scan the list quickly and group the kinds of tasks in split seconds.

Blog App

More complex application of grouping principle by color is marking categories and blocks of content. It works very well in the interfaces full of various content organized on several levels such as, let’s say, blogs, e-commerce or educational resources, etc. Color markers simplify navigation and keep the consistency of design enabling users to remember the color prompts and find the content they want easily. The example above shows the blog app applying this principle: various posts are organized around global categories and marked with colors which you can see on icons, colored tabs on the posts and correspondent quick stats of posts in the user profile. The same principle is applied in the Moneywise App shown below.

Moneywise App

This is the educational app devoted to economics: the content is organized into four global categories. The color used to mark the category is used as the background color for all the cards belonging to it. So, in the process of interaction, it helps users to quickly get oriented where they are.

Surely, this way of color grouping goes further as it organizes not just the elements on one screen but different screens or pages within all the digital product. However, it also corresponds to the Gestalt principles: such an approach allows designers to create interfaces that look and feel consistent and support the general integrity of visual perception from screen to screen, from one interaction to the other.

Size

The principle of similarity grouping the elements by size is another cornerstone in creating intuitive and user-friendly interfaces as it establishes the basis for strong visual hierarchy supporting users. This approach helps to set priorities and make the most important content visible. Grouping the similar content elements by this principle arranges the connection between them, often faster than a user can read the copy or see all the details.

The good way to present this principle in action is checking the organization of copy content.

Architecture Firm Website

The example features the corporate website of an architecture company. The copy blocks presenting the benefits and approaches of the firm are supported with the keywords applying two grouping principles simultaneously: they use different size and different text orientation. In the process of interaction, they are obviously perceived as the related elements. Also, the extended menu page shows the typographic hierarchy grouping copy elements by size: keywords, categories, and subcategories.

Tab bar interaction concept

Here’s another example of grouping by size and color. We can see the concept of a tab bar in which interactive elements of equal importance are given in the same size and faded shade while the core interactive element – plus button –  is made prominent via bright color and bigger size. Moreover, trying to add the content via this button the user is offered three options for different types of content. And again, grouping the appearing three buttons which use the same color as the parent button but smaller size, the interface enables the user to set the connections and hierarchy of navigation elements easily based on typical operations of cognitive perception.

Shape

One more way to group the elements on the web page or screen is marking them by shape.

Green Spy app interactions

The example shows the app which uses cards of the same shape to simulate the interaction with the physical objects – the base of data cards. This approach allows the user to perceive the set of content blocks as related.

Homey App

The interface for the Homey app shown above also presents the example of grouping by shape consistently from one screen to another: the buttons marking the rooms use the rounded-square shape while the buttons of various indicators within a particular room screen use the round shape. It sets the clear connections between the related layout elements as well as global navigation in the app.

Although we have just started revising Gestalt theory usage in design, it’s already obvious that knowing these simple yet effective principles can save much effort for users and support user-friendly interfaces with mechanisms that work according to human cognitive abilities and psychological patterns. Follow the updates to check the explanations and examples for other grouping principles: proximity, symmetry, continuation, and others.

Recommended Reading

Design Principles: Visual Perception And The Principles Of Gestalt
Improve Your Designs With The Principles Of Similarity And Proximity
Gestalt Theory of Visual Perception
Gestalt Principles: How Are Your Designs Perceived?
Psychology in Design: Principles Helping to Understand Users

Originally written for Tubik Blog

Сообщение Gestalt Theory for UX Designers: Principle of Similarity появились сначала на Design4Users.