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.

This theme built up the foundations for a new UI design concept created in terms of Tubik UI Fridays: one of the creative sessions was devoted to Home Budget, the application for finance management. The creative team of UI/UX designers Ernest Asanov and Dima Panchenko and motion designers Kirill Erokhin and Andrey Pixy worked under art direction by Sergey Valiukh. Let’s review what design solutions were presented for the task.

Task

UI/UX design for the web and mobile versions of a personal budget manager

Process

Describing the functionality of the app in general terms, Home Budget allows users to manage their expenses and incomes, creating the extended database for tracking financial flows or changes and getting comprehensive stats. The app was planned to have two variants: the web version presented with an informative dashboard and the mobile version giving simpler information and enabling to add new data quickly and easily.

For both variants of interfaces, the designers agreed about the dark background of the layout and the fonts which would have a high level of legibility for both letters and numbers.

Dashboard

The web dashboard was aimed at presenting extended stats for a particular period. The choice of generally dark interface enabled the designer to create an attractive layout with prominently visible colored details drawing users’ attention to the interactive zones of key importance.

With the dashboard, the users can get the data about their expenses and incomes processed and shown as a variety of statistics for a particular period. As we can see, different blocks of data are organized around cards. The presented page features an overview of the core blocks for the period of the recent week. The horizontal menu in the top part presents the navigation zone enabling the user to set the default periods of overview such as last week or last month as well as choose the custom period they are interested in.

The cards present such information blocks of data:

• the menu with quick access to popular categories of expenses
• information on total expenses and frequency of transactions
• the list of popular transactions
• the cloud of expenses and the weekly average rate in comparison to the previous period
• the line graphs of expenses and income for the chosen period graded by day on the horizontal axis and sums on the vertical axis
• the map with the pins marking the most frequent locations of spending money
• the block of recommendations based on financial operations of the period.

Another visual detail that could be mentioned is that for the graphs and markers presenting actual financial changes, the designer applied green and red colors which are widely recognized as signs of positive and negative financial balance. Also, the list of popular categories supports the presentation of each particular category with both name and icon to enhance the navigation and make interactions intuitive.

Here’s a piece of animated interactions with the dashboard. Slight unobtrusive motion of the layout elements supports natural microinteractions. When the graphs expand, the other blocks shrink naturally leaving the names of theme blocks visible and readable so that users could continue transitions easily.

Mobile UI

The other direction of the creative process was focused on the UI for a mobile app. While the dashboard is aimed at not only adding information but also presenting the results of its analysis, the mobile interface has the other core focus of functionality: first of all it is concentrated on having the user informed about the operation of the current day and enables to add new data in different environments and on the go.

Here is the feed of the latest financial operations, marked by categories shown via icons. The top part of the screen shows the tab of the users’ basic data and marks the credit card used currently. Also, you can see the graph reflecting the flow of finances during the day showed with vertical bars. To interact with it, users can apply horizontal scrolling. When the tab is active, the bottom shadow gives a prompt on that imitating interaction with physical objects.

To get access to the core zones of interaction, the users can press the hamburger button located in the bottom left corner which supports usability for those, who use devices with big screens. The application also shows the important notifications or recommendations to the user: they are shown in the top part of the screen, under the profile tab and over the bar chart zone. The notifications are presented in different colors that mark the nature of the message, for instance, applying orange for warnings and blue for reminders.

Also, the user can interact with each particular position in the list. Left swipe opens the menu of options marked with icons: the entry can be quickly edited, shared or deleted.

The mobile interface was also supported by animations. The one above shows the interaction with the hamburger menu divided into three sections.

Another piece of the animation shows interaction with the feed of financial operations for the current day. The warning notification adds more dynamic experience, attracting user’s attention with pulsing movement, and can be removed with a left swipe.

This project has started the deeper immersion into the world of digital products for financial management for the Tubik team and that was definitely the inspiring experience to be continued in further creative sessions. Follow the updates for new concepts and welcome to check the previous cases from Tubik UI Friday: landing page for Big City Guide and mobile interface for Night in Berlin app.

Design Case Studies

If you are interested to see more practical case studies with creative flows for mobile and web design, here is the set of them.

Nature Encyclopedia App. UI Design for Education

Florence App. Illustrations for Healthcare Service

Inspora. Brand and UI Design for Virtual Stylist

Bitex. UX Design for Stock Analysis App

Slumber. Mobile UI Design for Healthy Sleeping

Real Racing. UX and UI Design for Mobile Game

Tasty Burger. UI Design for Food Ordering App

Watering Tracker. UI Design for Home Needs

Originally written for Tubik Blog

Сообщение Design Case Study: Home Budget. UI for Finance появились сначала на Design4Users.

The color meaning can vary depending on the culture of the target audience. Moreover, sometimes one color may have absolutely opposite meanings in different countries. This is the reason for designers to acknowledge the specialties of culture’s color perception while creating the design for a foreign country. Today we’ll find out the meaning of basic colors and how they are interpreted in different cultures.

Western culture

Western culture is widespread around the world including European countries, the USA, and Canada. Many historical events have united these far and different countries into one big culture. The color meaning in Western culture was based on some common traditions and beliefs.

Here is the list of the basic colors and the meanings which they are typically associated with.

Red. The color usually associates with passionate, strong, or aggressive feelings. It symbolizes both good and bad feelings including love, confidence, passion and anger.

Orange. An energetic and warm color bringing the feelings of excitement.

Yellow. This is the color of happiness. It symbolizes the sunlight, joy, and warmth.

Green. The color of nature. It brings calming and renewing feelings. Also, may signify inexperience.

Blue. It often represents some corporate images. It usually shows calm feelings but as a cool color, it also associates with distance and sadness.

Purple. Long associated with royalty and wealth since many kings wore purple clothes. It’s also a color of mystery and magic.

Black. The color has a great number of meanings. It associates with tragedy and death. It signifies a mystery. It can be traditional and modern. Everything depends on how you employ it and which colors go with it.

White. The color means purity and innocence, as well as wholeness and clarity.

By Tubik

Eastern and Asian cultures

East and West are two opposite points of the world so no wonder that the traditions of these cultures are often contradictory. So, if you are creating the design for the Eastern countries, you need to keep in mind the fact that color meanings aren’t similar to the Western.

Here is the list of the basic color connotations for the East.

Red. The color is associated with Eastern countries in the first place. Red is thought to be the most positive color bringing happiness and prosperity, so it is often used everywhere in the East.

Orange. It is a positive color as well as the red. In many Eastern countries, orange symbolizes courage and love.

Yellow. It associates with things like being sacred and independent.

Green. The color believed to bring health and eternity (religious).

Blue. In Eastern Culture, it represents wealth and the betterment of self.

Purple. Similar to the West, it is associated with wealth, nobility, and royalty.

Black. In many Eastern countries, it is the color of health and prosperity. However, in Thailand and Tibet, black is the color of evil.

White. Unlike Western culture, white is linked to death and mourning. People wear white clothes for funerals.

By Nick Slater

Chinese culture

China is one of the biggest and ancientest Eastern countries. Its nationality is rich in traditions, myths, and beliefs. There are some peculiarities in the color interpretations in China which designers should consider.

Red. It is a traditional Chinese color. People wear red on the biggest occasions such as the New Year and weddings. Red symbolizes good luck and long life to the people.

Orange. This color Chinese people associate with good health.

Yellow. An interesting fact is that yellow can be associated with vulgarity. When the Chinese say “yellow picture” or “yellow book” discussing types of publications or media, it’s in reference to this type of image and websites.

Green. Hats colored green for men in China mean the man’s wife is unfaithful.

Blue. While in Western culture it is a masculine color, the Chinese consider blue as feminine.

Black. It is the color of boys in China. Black associates with masculinity.

White. The color represents death and bad luck.

Design project by Yi Mi Xiaoxin

Indian culture

Colors have always played a large part in the Indian culture and have deep significance for people. In Hinduism, colors are often related to certain gods and bring various associations. Proper use of the colors is vital for Indians because they are believed to create the appropriate environment to keep people cheerful.

Here are the meanings of colors in India.

Red. It’s the color of purity, so brides wear red clothes. Red is also associated with the goddess Durga who has a red tongue and almost red eyes. In Southern India, the red color stands for violence and disruption.

Orange. Orange is the most common color. Orange represents the “sacral chakra” according to the Hindus belief. The orange also is associated with courage and sacrifice.

Yellow. The color in the Hinduism symbolizes sanctity. Yellow also is connoted as the color of commerce.

Green. In India 30% of the population is Islamic and the green color is respected in Islam. Also, green has the connotation of a new beginning and happiness.

Blue. It is the color of Krishna, a central god in Hinduism. Blue symbolizes strength and is often used by sports teams.

Purple. It is the mix of red and ochre which symbolize wealth and nobility in India.

Black. This color is associated with a lack of desirability, negativity, and inertia.

White. Indians wear white at funerals and it’s the only color widows are allowed to wear. Similar to Western culture, it is the color of peace and purity.

By Ranganath Krishnamani

Latin America

It is thought that Latin America and the USA have a lot in common since they are neighbors. Nevertheless, the only thing uniting these cultures is the word “America” in their names. The ancient civilizations and folks such as Maya and Inca have formed this culture with their myths and knowledge.

Here is how Latin Americans interpret the colors.

Red. It is often associated with war, especially in combination with black. In Mexico, red is a religious color.

Orange. It is the color of the sun and the earth (because of the reddish-orange ground color in many countries).

Yellow. In many Latin and South American countries, it is associated with mourning.

Green. The color is the symbol of nature, although in some countries it is the color of death.

Blue. For the Catholic population, blue is associated with religion (Virgin Mary’s robe and headscarf were blue). In Mexico, it is the color of trust and serenity, and, in Colombia, blue is the color of the soap.

Purple. In Brazil, purple has connotations of mourning and death.

Black. It’s the color of masculinity and it is often worn by men.

White. Similar to the USA, white means purity and peace.

By MUTI

By DKNG

Every culture is unique and has its specialties. So, if you are creating a design for a foreign country, you should learn more about its culture in order to avoid misunderstandings with the target audience.

Useful Articles

Color Theory: Brief Guide For Designers
Design for Diversity of Cultures: Color Perception
Color in Design: Influence on User Behavior
Design Tips: How to Choose Colors for Interface
3C of UI Design: Color, Contrast, Content
How Shape and Color Work in Logo Design

Сообщение Design for Diversity of Cultures: Perception of Colors появились сначала на Design4Users.