Project

Creating a system with which fashion designers can make mood boards with the help of AI and get all the needed information

Process

Designer AI is a digital service that connects fashion design to the power of artificial intelligence. It allows fashion designers and brands to communicate with the relevant consumer base, gain knowledge of their needs and preferences and create what buyers want. The design solutions had to appeal to the meticulous and aesthetics-driven target audience of fashion designers, as well as get solid and super-intuitive user interface design for users that could be of various tech-literacy levels.

Logo and Identity

The first strategic task was to agree upon the general visual stylistic concept and brand image. So, the first stage of design was devoted to logo and identity development assigned to graphic designer Arthur Avakyan.

The brand sign presents the typographic logo in which one part becomes the background for another. This way, the logo designer reaches the harmonic and artistic combination of elements that reflect the idea of fashion and technology working together. The biggest challenge was to find the perfect combination of the solid font for the “designer” word and the custom-created lettering for the AI part that would make the needed contrast.

Font and color explorations for the combination of two parts of the logo

The stages of logo design from sketching to the polished final composition

For the identity, it was agreed to take bold color contrast as a visual basis.

Business card design

Dashboard User Interface

A clear, minimalist dashboard design by Tubik UI/UX designer Anton Morozov was based on a dark theme to enhance the perception of visuals, intuitive navigation, and trendy branding.

The header contains several critical elements: an easily found search icon, the control for language choice, and the control to access the profile menu. For navigation through the functionality, the dashboard uses the sidebar giving quick access to core zones of interaction: projects, storyboards, invoices, transactions, and payments. It doesn’t hide in a hamburger menu or any other interactive element so that the users could switch between the pages quickly. What’s more, it makes the navigation super simple for users with middle and low tech-literacy levels. The currently active page is visually marked with the color prompt in the sidebar, and the icons support the titles in the menu: this way different zones of visual perception are activated, as icons set the elements quicker to see while the text helps to decode them correctly. The sans-serif font is clear and easily readable.

The Projects screen uses a simple scannable structure featuring the tabs of existing projects in the workspace and the tappable zone of creating a new project with a schematic prompt: a frame, a plus icon, and the textual explanation specify it. The tab informs the user about the project name, participants, the number of storyboards made for it, and the star icon to mark the favs or the most actual project.

Projects screen

Inside the project, users can see the storyboards giving an instant visual connection to the style with images preview that gets colored when hovered. The same visual prompt is used for the functionality of adding a new storyboard and the plus icon in the avatar-based list of participants allows for adding more of them.

A particular project screen

In creating a storyboard, the designer sets the needed requirements. Again, the outline icons organizing the options are presented with text labels for perfect clarity, while the bright and catchy CTA button has no chance to be left unnoticed. The custom icons were designed by Tubik graphic designer Yaroslava Yatsuba.

So, to sum up, the dashboard is all built around the visuals, which will be manipulated, and the convenience of usage for people with different tech-literacy levels. High readability, dark background making photos even deeper, elegant custom icons, and a well-balanced grid all help users feel it like home.

Here’s the set of interactions to let you see how it looks in action. Smooth motion for loading and feedback by our motion designer Kirill Sunny makes the interactions more dynamic and sets clear communication with the product.

Landing Page and Illustrations

Another important task was designing a beautiful and informative landing page that would support a web marketing strategy. The client wanted to amplify them with custom hero illustrations and storytelling illustrations, so that was another design task for Arthur Avakyan.

The illustration had to reflect the visual connection to fashion illustration style to set the needed emotional appeal, user the brand colors, and attract users’ attention with its aesthetic elegant style.

Neat outline illustrations with color accents reflecting different benefits and aspects of using the tool

Hero illustration for the above-the-fold area needed special attention as it was the first prominent visual to attract the target audience. It was also developed in style close to the classic fashion illustration and moved through several iterations of the creative search for a catchy and informative image.

Chalk-style outline illustration of the mannequin with a dynamic color accent

Digital sketch of the model character wearing the bright dress and visually integrating the elements of artificial intelligence involved in the design process

Two versions of the composition for the hero illustration

The landing page uses contrast color blocks for different pieces of content and charming artwork, instantly setting the theme. Above the fold, the page uses the dark theme echoing the one in the dashboard, minimalist airy composition, and solid visual hierarchy allowing the visitor to scan the page in split seconds. Outline minimalistic CTA buttons are visually highlighted with color contrast.

Here’s the structure of the whole landing page when you are scrolling it down, based on color contrast to separate the content yet giving a consistent eye-pleasing look.

With the mobile-first trend, sure, the designer also paid attention to responsive mobile design as well.

More Design Case Studies

Tasty Burger. UI Design for Food Ordering App

Slumber. Mobile UI Design for Healthy Sleeping

Pazi. UX and UI Design for Vehicle Safety Mobile App

CashMetrics. UX Design for Finance Management Service

Bitex. UX Design for Stock Analysis App

Inspora. Brand and UI Design for Virtual Stylist

Nature Encyclopedia. UI Design for Education

Perfect Recipes App. UX Design for Cooking and Shopping

Originally written for Tubik Blog, graphic and video content by tubik

Сообщение Case Study: Dashboard and Graphics for Service for Fashion Designers появились сначала на Design4Users.

The release of the new style called Fluent Icons was announced on Product Hunt today, and we’d like to unveil a bit more about that news in our fresh D4U Review post.

The new design style contains 965 color graphics covering a variety of topics.

The bright color graphics are pixel perfect and consistent to be effectively used in user interfaces, infographics, presentations, and social media visuals. The icons can be used in personal and commercial projects, free for a link attribution. Those who have Icons8 Pro license, get the extended range of options as they can get all the icons in SVG format in various sizes.

Сообщение Icons8 Released About 1000 Icons in New Style Inspired by Fluent Design появились сначала на Design4Users.

What Is Affordance?

Affordance is a property or feature of an object which presents a prompt on what can be done with this object. In short, affordances are cues that give a hint of how users may interact with something, no matter physical or digital. For example, when you see a door handle, it is a prompt you can use it to open the door. When you see a receiver icon, it gives you a hint you may click it to make a call. Affordances make our life easier as they support our successful interactions with the world of physical things and virtual objects.

Check the screen of Watering Tracker below. In split seconds, you will understand that the needed action is done – the tick shows it. The icons in the tab bar will give you clues about what you can do with the app: check your set of plants (this tab is active as it’s colored while the others are not), add a new plant or check your profile. These are affordances in action.

History of the Terminology

The term was first introduced by the psychologist James Gibson who deeply researched visual perception. He first used the term in his book ‘The Senses Considered as Perceptual Systems‘ in 1966. In 1979 he clarifies the definition of his terminology in the book ‘The Ecological Approach to Visual Perception’: “The affordances of the environment are what it offers the animal, what it provides or furnishes, either for good or ill. The verb to afford is found in the dictionary, the noun affordance is not. I have made it up. I mean by it something that refers to both the environment and the animal in a way that no existing term does. It implies the complementarity of the animal and the environment.” According to Gibson, humans tend to modify their environment with a wish to make its affordances suit them better and make their life easier. Learning the affordances of the environment becomes an essential part of socialization.

Being applied to design, the term referred to only those physical action possibilities of which the user is aware of. In this perspective, the term got its further development in the explorations by Donald Norman in the 1988 book, ‘The Design of Everyday Things‘. According to the expert, “…the term affordance refers to the perceived and actual properties of the thing, primarily those fundamental properties that determine just how the thing could possibly be used. […] Affordances provide strong clues to the operations of things. Plates are for pushing. Knobs are for turning. Slots are for inserting things into. Balls are for throwing or bouncing. When affordances are taken advantage of, the user knows what to do just by looking: no picture, label, or instruction needed.”

With the advent of various user interfaces, affordances got a new vector of development. We did hundreds of operations with diverse actions, tools, and things. Now we also do tons of operations just clicking the mouse or tapping the screen. It makes UX designers work on the new ways of presenting affordances that accumulate patterns and knowledge people have from real life in digital interactions. This experience is dramatically different so the approaches change too.

Types of Affordances in UI

Affordances in UI can be classified according to their performance and presentation. Anyway, their main goal is to actualize the knowledge and experience people already have to simplify the interaction flow.

Explicit (obvious) and implicit (hidden) affordances

Based on their performance, we can find obvious and hidden hints in UI.

Explicit affordances are based on widely known and typical prompts that direct the user to a particular action. For example, when you see a button designed as an obviously clickable element, aka visually similar to the buttons in the physical world, you understand you can click or tap it to interact. If it is supported by a text or icons the affordance becomes even more clear: it informs you what will be the feedback from the system.

A CTA button of this e-commerce webpage is clear as a clickable element and the copy says what this button enables a user to do

Implicit affordances are not that obvious. They are hidden and may be revealed only in a particular flow of users’ actions. The cases when we get tooltips or explanations hovering on a layout element are the ones. Other examples are diverse multilayered elements of navigation such as drop-down menus or expandable buttons that aren’t seen all the time or from the first seconds of interaction but are unveiled after a particular operation. Perhaps, one of the most debatable points here is the hamburger menu that hides the access to functionality behind the special icon.

Hamburger button in the header hides the extended website menu

Graphic Affordances

Graphic affordances are presented with visuals applied to an interface and helping users to scan its functionality. Graphics of all kinds are perceived faster and memorized better than copy so their importance cannot be overestimated. Among them, we could mention the following.

Photos: theme photos, items photos, avatars, and title pictures present the visual support, from information that generally users can do with the app or website (buy, communicate, show, watch, study, write, etc.) to specific features. Let’s say, if an app enables a user to save and share recipes, it’s cool to set the immediate association using appropriate photos like in the example below.

Branding signs: logos, corporate signs, and colors applied to the website or app present an immediate hint about the connection of the UI to a particular brand which may be a strong affordance for its loyal customers.

The logo on the splash screen and in the header sets the link to the brand

Illustration: theme illustrations and mascots have a big potential of giving clear prompts to users. Below, you can see a popup informing users about Halloween stickers in Toonie Alarm with a well-known visual prompt – a Halloween pumpkin.

Icon: interface icons present perhaps the most diverse group of visual affordances. These pictograms are highly symbolic and mostly use the hints taken from the real world so that users could understand them quickly. Even more, after some icons lose the connection with the original physical objects they still present productive affordances if remembered by a big number of users: a floppy disk for “save” is a good example. A heart or a star will immediately link you to favorites, a magnifier will prompt it’s a search and a camera icon won’t take you long to understand that it’s for taking a photo.

Icons are also used as effective hints for classification of the content: categories and sections work much faster with the support of proper graphics.

Button: being among the core interactive elements, buttons came to interfaces as a well-recognized element. Before the era of GUI, it was used in a variety of physical things from simple calculators to complex dashboards. We all know well what to do with a button. The point is to make it visible and obviously seen as a button in UI. Shapes, contrast, colors, and copy all present a great help here.

Field: basically, fields present spaces in which users can input the necessary data. To make them effective, designers also activate the power of affordance: fields should look interactive such a way that people understand immediately they can type in the text inside. The interface of Recipes App below shows the search field: it’s clear that the field is an interactive element due to the shape and contrast and also it is supported with a search icon and the text prompt giving an instruction.

Notifications: there are numerous methods to hint the user that there is something missed or worth attention via notifications. Look at the cart icon in the interface for the Tasty Burger app below: a yellow dot on it gives a quick prompt that it isn’t empty.

Copy (Language) Affordances

Although users perceive images much faster than words, copy also doesn’t lose its positions having a great influence on an interaction flow. The point is that images sometimes need to be decoded with the help of the text so as to avoid misunderstandings. Another thing is that not everything may be shown in pictures. Finally, the copy has an incredibly diverse potential in transferring information, labeling the instructions and calls-to-action, explaining the functionality and supporting the efficiency of the layout with typographic hierarchy. However, the text should be given in a reasonable balance not to overload the interface.

Interactions with copy are very natural for people in their everyday life, for much longer than graphical user interfaces exist. Copy clues and prompts help to understand what to do or what to expect, what information to keep in mind: we read many of them, from signs, adverts, and instructions to newspapers, manuals, and books. In digital UI, it works the same way. It is a straightforward way to communicate with a user. For example, the сalendar screen of HealthCare app shows the variety of language affordances: except for major information about patients, we can see the copy prompt inside the search field, the call-to-action copy on the button and a textual clue given in empty fields of the calendar showing that a user can add an appointment for the day just tapping the space.

Pattern Affordances

Pattern affordances are based on the power of habit and present a huge factor in effective interaction design. Their biggest advantage is saving users’ effort to keeping many things in memory simultaneously. As we mentioned in an article presenting mechanisms of human memory to UX designers, the capacity of short-term memory is limited. So, the more patterns users learn, the clearer is the navigation for them and the better they deal with new input. There are many typical affordances of this kind: for example, we are all used to the clickable logos in website headers which usually open a home page. From one interface to the other, we know that underlined piece of copy is usually a clickable link, the information about contacts and privacy policy of the website is often found in a website footer, and three vertical points in the app layout mean “more” showing additional functions. Saving these patterns means making users feel they understand the interface. So, if there’s a need to break the pattern affordances, think twice and test it well: originality should be reasoned and clear for users.

Animated Affordances

Animation applied in user interfaces creates a strong connection between the physical and virtual world. In most cases, it imitates interaction with real things: pulling, pushing, swiping, dragging, etc. So, interface animations both basic and complex present a group of powerful affordances.

The example below shows the switch in Toonie Alarm app. When the switch is on, it changes several parameters together: the color of the tab, the color of the toggle and the animation of the sun activated. This way it immediately informs the user and also adds emotional appeal to the operation.

Another example shows the notification that appears in the flow of interaction in the Home Budget app and reminds the user about particular limitations. Its animation features pulsation and this way attracts user’s attention to the important warning.

Here’s one more case – pull-to-refresh animation. Appearing on the screen, it informs a user that the UI is being updated and adds some fun to the process of waiting.

Negative Affordances

Whatever strange it could sound, negative affordances also play a big role in positive user experience: they root in the fact that negative result is also a result. The purpose of a negative affordance is to give users a prompt that some elements or operations are inactive at the moment. For instance, the interface of the Homey app given below shows that the “Bedroom” button is active while the buttons of other rooms are inactive – so they present negative affordances. The security level also features that level 5 is totally inactive.

Here’s one more case: the tab bar shows the active button as colored while the others present negative affordances.

False Affordances

In a perspective of UX affordances, false and negative shouldn’t be seen as synonyms. No way. False affordance is what designers should avoid: these are the wrong prompts which lead users to the different action or result, not the one which is expected behind the prompt. Sometimes it’s done intentionally, but in most cases by mistake. For example, if the text in the web copy block is underlined, users automatically think it is clickable. So, they can be really annoyed to understand it doesn’t work – it means that they have been prompted the wrong way.

The brief introduction above lets us understand the significant role which affordances play in user experience design. We will continue this theme with more insights, tips and examples in our next posts, so don’t miss the updates.

Recommended Reading

6 Types of Digital Affordance that Impact Your UX

Affordances and Design

How to Perfect UX with Design Affordances

UX Design Glossary: Navigation Elements

UX Design Glossary: Interface Navigation Elements. Set 2

How Human Memory Works: Insights for UX Designers

Originally published in Tubik Blog

Сообщение UX Design: Types of Affordances in User Interfaces появились сначала на Design4Users.

Button

Button is one of the most popular elements of any interface. It roots deeply in the world of physical things and existed much before GUI appeared: push-buttons later simplified to just buttons are simple switch mechanisms enabling to control a process or machine. Pushing, pressing, hitting or punching (great synonym row was developed for buttons through times), a button actually allows for sending the signal to the machine about the action user wants to do. Used in a variety of devices from simple home appliances, telephones, and calculators to complex dashboards. Being a clear element of interactions, buttons were later successfully transferred to graphical user interfaces.

In UI, a button is an interactive element which enables a user to send a particular command to the system. Basically, with this control user directly communicates to the website or application and forward the necessary commands to achieve a particular goal: turn on the player, send an email, buy a product, download some data, add items to the cart and plenty of other possible interactions. Buttons are extremely popular as elements of user-friendly interfaces because they successfully imitate interactions with physical buttons so their functionality is clear even for users with a low level of tech literacy.

Button design in a mobile game Real Racing

Today, diverse UI buttons serve plenty of purposes. Typical buttons are designed to be instantly visible: designers apply contrasting colors, shapes and even animation to make buttons noticeable in the layout. Buttons are often supported with the copy that explains the action done with the button. Designers have to apply considerable time and effort to create effective buttons that look consistent with the general stylistic concept but are contrast enough to stand out in the layout.

There are several frequently-used types of buttons with additional functionality.

Hamburger button hides a menu. After a click or tap on it, the menu expands. It is called hamburger due to its form that consists of three horizontal lines – it looks like typical bread-meat-bread hamburger. Although today it is quite a typical element of interaction, hamburger menus are still highly debatable due to the number of pros and cons.

Most users using websites and apps on a regular basis know that hamburger hides the links to core categories of content so they don’t need additional explanations and prompts. The essential advantage is that hamburger menus free space: this way the interface becomes minimalist and airy as well as provides room for other important layout elements. Also, it provides additional benefits for responsive and adaptive design hiding navigation elements and making the layout usable on different devices. The arguments against the hamburger menu are based on the fact that this design element can be confusing for users having little experience with websites: they can get misled with the sign which is rather abstract. Thus, the decision about applying the hamburger button should be based on user research, setting a target audience’s abilities and rigorous testing.

Plus button enables to add new content, for instance, a new contact, post, note, position in the list, and the like. Sometimes, tapping this button, users are directly transferred to the modal window of creating content, in other cases, there is also a medium stage when they are given additional option to choose from and make adding the particular piece of data more focused. In this case, the plus button is also an expandable button.

Expendable button opens a variety of options after being clicked or tapped. It is one more way to set the proper flow of interactions without overloading the screen, which is particularly important for mobile interfaces limited in screen space.

Ghost button is a transparent button that looks empty – that’s why it is also called “empty”, “hollow” or even “naked”. Their visual recognizability as a button is typically provided with a shape bordered by quite a thin line around the button copy.  This kind of buttons helps to set the visual hierarchy in case there are several CTA elements: the core CTA is presented in a filled button while the secondary still active is given in a ghost button.

Bar

Bar is a UI section of the user interface with clickable elements enabling a user to quickly take some core steps of interaction with the product. Also, it can inform the user about the current stage of a process. Among the basic types of bars, let’s check the following.

Tab bar — in mobile applications, it appears at the bottom of a screen and provides the ability to quickly switch between core sections of content.

Loading bar is the control that informs a user about the current stage of the action or process. In most cases, users can see the flow with timing or percentage shown in progress.

Progress bar provides feedback on a result of the current process so far, for example, showing how much of the planned activity has been done. You may often see in musical players, for example.

Audiobook store app design 

Switch

Switch is a control that enables users to turn the option on/off. As well as buttons, it is applied efficiently in modern interfaces as it presents the direct imitation of switches people are accustomed to in real life. The important point is that states of the switch should be visibly clear and distinctive so that user could easily understand if the option is active or not. Contrast and slight animation can make the experience simple and user-friendly. Here’s how it was solved in Toonie Alarm app.

Picker

As it’s clear from its name, picker allows for picking the point from the row of options. It usually includes one or several scrollable lists of distinct values, for example, hours, minutes, dates, measurements, currencies, etc. Scrolling the list, users choose and set the needed value. This type of interactive element is widely used in the interfaces which have the functionality of setting time and dates.

Checkbox

Checkbox is a graphical UI element that marks a particular piece of content, usually setting the choice for the binary options. It is one more element setting the bridge with the real world as it looks similar to the process of filling in tests, questionnaires, and other stuff of this kind when you have to put a tick or color the box to mark the option. Checkboxes and switches can be found in any type of user interfaces, especially in the sections of the user, screen or page settings. Also, checkboxes present a common part of navigation in apps and websites with the functionality of task managers, to-do lists, time trackers and the like.

Icon

Icon is a symbolic image used for the purpose of communication. They are informative signs supporting data exchange between the informer and addressee together with text: icons communicate via the images often showing pictorial resemblance with an object of the physical world. In digital design, icons are pictograms or ideograms used in the web or mobile interface to support its usability and provide the successful flow of human-computer interaction.

One of the most valuable benefits of icons is the ability to effectively replace the text. This feature is able to boost usability and strengthen navigation as most users tend to perceive and decode images faster than words. However, even the slightest misperception or double meaning can become the reason for poor UX so the solutions on the type of icons should be carefully tested to reach the good balance of icons and copy for a particular target audience. One of the effective variants is using both copy and icon so that different categories of users could feel good with that: this approach is particularly popular in various catalogs of e-commerce websites where different positions are presented by both words and pictures giving the user double support for quick and clear navigation. Here is the example of this approach in Watering Tracker app.

Based on their functions, icons can be classified as:

• interactive icons directly involved in the interaction process. They are clickable or tappable and respond to the user’s request doing the action symbolized by them. They inform users about the functions or features of the buttons, controls, and other elements of interaction. In many cases, they are obvious and don’t need the copy support.
• clarifying icons aimed at explanation, visual markers explaining particular features or marking out categories of content. They may be not the layout elements of direct interaction; also, they are often found in combination with copy supporting their meaning.
• entertaining and decorative icons aimed at aesthetic appeal rather than functionality often used to present seasonal features and special offers. They present the effective way of attracting user’s attention and enhance the general stylistic concept of a digital product.
• app icons: interactive brand signs that present the application on different platforms supporting the original identity of the digital product.
• favicons represent the product or brand in the URL-line of the browser as well as in the bookmark tab. It allows users to get a quick visual connection with it while they are browsing.

Cuteen app using custom icons for content categories

Search Field

A search field, which is also called a search box or search bar, presents the interface element enabling a user to type in the keywords and this way find the pieces of content that are needed. It is one of the core navigation elements for websites or apps with a big amount of content, in particular blogs, e-commerce and news websites, etc. Well-designed and easily found, the search field enables the user to jump to the necessary point without browsing through the numerous pages and menus: as this approach respects user’s time and effort, it is highly demanded in user-friendly interfaces.

In terms of design, this element can be presented in different ways, from the framed tab to the interactive input line, or even minimalist clickable icon. In the vast majority of cases, the search field is marked with the icon featuring a magnifying glass. This symbol is recognizable by a wide variety of users so it has proved itself effective for setting intuitive navigation. Experiments with the icons can badly influence interactions and usability of the layout, so if other symbolic images are applied, they should be carefully tested. The flow of interaction can also be supported with the drop-down menu offering possible options or auto-filling functionality.

Placement of the search graphic control is a significant concern. In web design, search field can be often found in a header of a website: it is the zone of the highest visibility, so putting a search field there enables users to quickly get transferred to the pages they really need without wandering through the website and scrolling down. For example, it works well for big e-commerce websites often visited by users who have a particular goal, a specific item they are looking for — if they can’t find it quickly and conveniently, the risk is high that they will leave decreasing the profitability of the resource. Moreover, the power of habit should also be taken into account: as numerous websites include search into their headers, users are accustomed to looking for it there when they need it.

Talking about the search field in mobile interfaces, the situation differs as the designer is much more limited in the usable space. If the app is based on a lot of content and search is one of the central elements of interaction, it can be found in the tab bar or in the header and easily reached. In case the search is not crucial for the user goals and usability of the app, it can be hidden in menus or shown only on the screen where it’s potentially needed. Recipe app shown below applies a search field with a textual prompt in the top part of the screen.

Tag

Tag is an interactive element presented with a keyword or phrase that enables the user to move quickly to the items marked up with it. Tags are actually pieces of metadata that provide quick access to specific categories of content so they support navigation with the additional way of content classification. Moreover, tags are often the elements that users create by themselves comparing to the names of categories that are fixed by the website and can’t be changed by users.

Tags are widely used on the platforms based on user-generated content: when you upload the photo to the stock, post on the social networks or write on the blog, you can mark your content with the particular keywords which will then unite all the pieces of content marked with the tag.  In terms of interaction, click on a tag moves the user to the webpage collecting all the content marked with this tag. Also, tags are an SEO-friendly technique increasing the chances that the content will be found via search engines.

Loader

Loader is an animated interactive element informing the user about the process of content loading. As the process takes some time, this way the system shows that it’s working while users understand what is going on. It plays an important role in usability. Moreover, stylish animation and graphics may add beauty and fun to the process. The example below shows how loader works on pull-to-refresh in Slumber app.

Filter

Filters are graphic controls enabling to tune up the necessary settings. They are effective in the aspect of personalization for better UX: users choose and adjust the settings they need. Here you can see how it was realized in Recipe app.

Planning information architecture and interface navigation is not an easy challenge which demands a good knowledge of psychology and interaction patterns, user testing and serious analysis from the earliest stages of an app or website design. Still, it becomes the solid ground for positive user experience which will solve users’ problems and motivate them to get back to the product again and again. Small interactive details become guiding stars making interactions smooth and easy.

Recommended reading

Here is the set of recommended materials for further reading if you would like to learn more on the theme.

iOS Human Interface Guidelines

UX Design Glossary: Affordances in User Interface

How Human Memory Works: Insights for UX Designers

Best Design Practices for Website Header

Web Design. 5 Basic Types of Images for Web Content

UX Design: How to Make Web Interface Scannable

Originally written for Tubik Blog

Сообщение Small Stars of Interaction Design: Interactive UI Elements появились сначала на Design4Users.

Icons

An icon can be defined as an image which has a high symbolic value and is used for the purpose of communication. Icons present signs which are informative and support data exchange between the informer and addressee alongside with words and sentences: while copy is served with letters or characters, icons communicate via the images showing pictorial resemblance with an object of the physical world. In computing and digital design, icons are pictograms or ideograms used in the web or mobile interface to support its usability and provide the successful flow of human-computer interaction.

One of the most valuable benefits of icons among is the ability to effectively replace the text. This feature is able to boost usability and strengthen navigation as most users tend to perceive and decode images faster than words. However, even the slightest misperception or double meaning can become the reason of poor UX so the solutions on the type of icons should be carefully tested to reach the good balance of icons and copy for a particular target audience. One of the effective variants is using both copy and icon so that different categories of users could feel good with that: this approach is particularly popular in various catalogs of e-commerce websites where different positions are presented by both words and pictures giving the user double support for quick and clear navigation.

Based on their functions, icons can be classified as:

• interactive icons: icons which are directly involved in the interaction process. They are clickable or tappable and respond to the users request doing the action symbolized by them. They inform users about the functions or features of the buttons, controls and other elements of interaction. In many cases, they are obvious and don’t need the copy support.
• clarifying icons: icons aimed at explanation, visual markers explaining particular features or marking out categories of content. They may be not the layout elements of direct interaction; also, they are often found in combination with copy supporting their meaning.
• entertaining and decorative icons: icons aimed at aesthetic appeal rather than functionality, often used to present seasonal features and special offers. They present the effective way of attracting user’s attention and enhance the general stylistic concept of a digital product.
• app icons: interactive brand signs that present the application on different platforms supporting the original identity of the digital product.
• favicons: represents the product or brand in the URL-line of the browser as well as in the bookmark tab. It allows users to get a quick visual connection with it while they are browsing.

Read more about types and functions of icons here

Search Field

A search field, which is also called a search box or search bar, presents the interface element enabling a user to type in the keywords and this way find the pieces of content that are needed. It is one of the core navigation elements for websites or apps with a big amount of content, in particular blogs, e-commerce and news websites, etc. Well-designed and easily found search field enables the user to jump to the necessary point without browsing through the numerous pages and menus: as this approach respects user’s time and effort, it is highly demanded in user-friendly interfaces.

In terms of design, this element can be presented in different ways, from the framed tab to the interactive input line, or even minimalist clickable icon. In the vast majority of cases, the search field is marked with the icon featuring a magnifying glass. This symbol is recognizable by a wide variety of users so it has proved itself effective for setting intuitive navigation. Experiments with this icons can influence badly on interactions and usability of the layout, so if other symbolic images are applied, they should be carefully tested. The flow of interaction can also be supported with the dropdown menu offering possible options or auto-filling functionality.

Another important issue is the placement of the search graphic control in the interface. In web design, search field can be often found in a header of a website and this is a good choice: as we mentioned in the article devoted to design practices for website headers, for any website it is the zone of the highest visibility, so putting a search field there enables users to quickly get transferred to the pages they really need without wandering through the website and scrolling down. For example, it is actual for big e-commerce websites often visited by users who have a particular goal, a specific item they are looking for – if they can’t find it quickly and conveniently, the risk is high that they will leave decreasing the profitability of the resource. Moreover, the power of habit should also be taken into account: as numerous websites include search into their headers, users are accustomed to looking for it there when they need it.

Talking about the search field in mobile interfaces, the situation differs as the designer is much more limited in the usable space. If the app is based on a lot of content and search is one of the central elements of interaction, it can be found in the tab bar and easily reached. In case the search is not crucial for the user goals and usability of the app, it can be hidden in menus or shown only on the screen where it’s potentially needed.

Tag

Tag is an interactive element presented with a keyword or phrase that enables the user to move quickly to the items marked up with it. Tags are actually pieces of metadata that provide quick access to specific categories of content so they support navigation with the additional way of content classification. Moreover, tags are often the elements that users create by themselves comparing to the names of categories that are fixed by the website and can’t be changed by users.

Tags are widely used on the platforms based on user-generated content: when you upload the photo to the stock, post on the social networks or write on the blog, you can mark your content with the particular keywords which will then unite all the pieces of content marked with the tag. The screenshot above shows you the part of the home page of Design4Users Blog which actively uses a cloud of tags to enhance navigation around the blog content. In terms of interaction, click on a tag that moves the user to the webpage collecting all the content marked with this tag. Also, tags are SEO-friendly technique increasing the chances that the content will be found via search engines.

As another example, here’s the tagging offered by Unsplash, the well-known platform of free stock photos. When users download a photo, they are offered to type their own tags aka keywords which would describe this photo in the best way helping other users to find it. As we can see, the input field for adding tags also supports users with prompts for better usability. So, tags present user-generated elements of navigation that makes the interface closer and clearer to its target audience.

Planning the navigation is the hard work which demands a good knowledge of psychology and interaction patterns, user testing and serious approach to information architecture from the earliest stages of an app or website design. However, it becomes the solid ground for positive user experience which will solve users’ problems and motivate them to get back to the product again and again.

Today’s set of our glossary is ready for those who need it and we are going to continue this practice before long. Don’t miss the new sets — the next one will continue the issues of navigation with deeper insights into types of menus, buttons, and breadcrumbs. New definitions are coming soon!

Recommended reading

Here is the set of recommended materials for further reading for those who would like to get deeper into this topic and learn more on the theme.

UI/UX Design Glossary. Navigation Elements.
iOS Human Interface Guidelines
Navigation patterns for ten common types of websites
Small Elements, Big Impact: Types of UI Icons.
3 essential rules for effective navigation design
Perfecting navigation for the mobile web
Understanding Web UI Elements & Principles
User Interface Elements
The Most Creative Mobile Navigation Patterns
Basic Patterns for Mobile Navigation

Originally written for Tubik Blog

Сообщение UX Design Glossary. Navigation Elements: Icons, Search, Tags появились сначала на Design4Users.

Guru of user experience design Steve  Jobs said: “Details matter, it’s worth waiting to get it right.” Obviously, icons are on the top of details making interface usable and navigable. So, today let’s discuss what are their types and how they can be used in interfaces.

Definition

In general terms, an icon can be defined as an image that has a high symbolic value and is used for the purpose of communication. Icons present signs which are informative and support data exchange between the informer and addressee alongside with words and sentences: while copy is served with letters or characters, icons communicate via the images showing pictorial resemblance with an object of the physical world. In computing and digital design, icons are pictograms or ideograms used in the web or mobile interface to support its usability and provide the successful flow of human-computer interaction.

Diving into the benefits of icons, one of the most important among them is the ability to replace the text. In one of our earlier articles, we gave details about the relations of copy and icons and their influence on usability. The process of the research showed that usage of recognizable and clear icons had a great potential in strengthening navigation as most people perceive images faster than words. However, even the slightest misperception can become the reason of poor UX so the solutions on the type of icons should be carefully tested to reach the good balance of icons and copy for a particular target audience.

History

Obviously, icons weren’t invented by interface designers. As an object of communication, they have a long and diverse history rooting in ancient times. They are found in maps, signs, schemes, manuals and many other sources of information. However, with the advent of new technologies and graphical user interfaces, icons experienced the new twist of progress. Historically, Xerox is mentioned in credits for creating the first icons for a graphical UI in the early 1970s: the icons were implemented in a machine called Xerox Alto which was very expensive and didn’t really go to the wide masses. Still, that was the beginning of a long story: in 1981, Xerox Star was released and it’s referred to as the first consumer computer which used icons as a part of its interface. In particular, it applied the icons of folders and trash bins that have been used so far.

Source

Another milestone easily remembered on this way is presented with the color icons Apple revealed first in 1991 and then later with their further updates for Macintosh. They featured another approach to the style when icons combined functionality and informative capacity with attractive and harmonic appearance.

Source

These days icons are presented in digital design with numerous packs and sets in all the themes and styles possible. Although there are many ready-made packs, the database of icons is growing all the time in search of new solutions appealing to users.

Talking about the classification of icons, we can mark out several aspects of grouping them on types.

Types based on functions

Clarifying icons

These are the icons aimed at explanation. They are visual markers explaining particular features or marking out categories of content. In some cases, they are not the layout elements of direct interaction; also, you can often find them in combination with copy supporting their meaning. This trick activates multiple elements of perception in one interaction providing better recognizability for call-to-action elements. People, who instantly understand the symbol transferred with the icon, won’t pay big attention to the copy. The same will happen to those who have problems with fast copy recognition. However, using the copy together with the icon decreases the risk of misunderstanding or wrong interactions for people who can possibly misinterpret the meaning of the image.

Homey App

Category icons for Saily app

Interactive icons

The icons of this type are directly involved in the interaction process and are the core supporters of navigation. They are clickable or tappable and respond to the user’s request doing the action symbolized by them. Their main goal is to inform users about the functions or features behind the buttons, controls, and any other elements of interaction.

Tab bar interactions

Menu interaction concept

Decorative and entertaining icons

The icons of this type give more about aesthetic appeal than functionality. However, this aspect is also significant and needs to be considered as the style and appearance corresponding to the target audience preferences and expectations set the solid ground for high desirability. Applied wisely, it is one of the features that can not only attract but also retain users and add much to the positive user experience. Decorative icons are often used to present seasonal features and special offers.

Easter and spring icons 

App icons

App icons are the interactive brand signs that present the application on different platforms supporting the original identity of the digital product. In most cases, it features the logo of the app designed according to the requirements set for this kind of icon. However, it also can apply something else, for example, a mascot or an abstract combination of corporate colors. The effective solution is usually based on thorough market and competition research with the aim of creating an original icon that won’t get lost on the screen full of other app icons.

Elephun App Icon

Favicon

Favicon, also known as URL icon or bookmark icon, is a special type of symbol which represents the product or brand in the URL-line of the browser as well as in the bookmark tab. It allows users to get a quick visual connection with it while they are browsing. This interface element proved itself effective for productive website promotion and good recognizability of its visual identity.

Types based on visual performance

Glyph icons

The term “glyph”[glif] has come to design from the field of typography. The word takes its roots from the Greek word which means “carving”. Originally, the term presents an elements symbols or pictogram which is included in the set of symbols agreed upon many users (readers, writers, etc.): it presents a readable character enabling people to write it.

In the sphere of typography, it is a certain graphic representation of an element of written language within a particular system of writing or particular typeface: it can be a grapheme, or part of a grapheme, or sometimes several graphemes in combination (a composed glyph). Here’s the set of ancient Celtic glyphs, for example.

Source

In modern digital design, the word “glyph” reinvented its meaning but not into a sort of revolution. It is used to define a graphic symbol that provides the appearance or form for a character: it can be an alphabetic or numeric font as well as a symbol picturing an encoded character. Talking about icons, glyph icons are first of all described as a typographic symbol that represents something else, not letter or number. Among popular examples, you will also find the “@” symbol representing the preposition “at”. For example, here is the set of icons for material design from Google.

Material icons

Glyph icons use simplified and universal shapes and images to be recognizable and flexible in terms of responsive design. They play a big role in the issues of navigation for a digital product.

Weather icons

Flat and semi-flat icons

Flat icons are usually a bit more complex than glyph: they can apply color combinations, filling of the elements and present a bit more complicated images. Nevertheless, they are also focused on simple and recognizable visual metaphors quickly transferring the required meaning. The most prominent feature which actually has inspired the name of this direction is applying flat 2-dimensional visual details as the opposite to highly realistic and detailed skeuomorphic images. Flat style allows designers to be more flexible in applying the expressive power of colors and shapes not losing in the legibility of the presented items.

Blog App

Skeuomorphic icons

Skeuomorphism is the design direction somehow opposite to flat. It is based on the idea of reflecting images in 3D look very close to the original natural look of the physical objects. It was popular for GUI of different types and functionality several years ago. But then it was gradually replaced with flat design in UI which is simpler and therefore more flexible and practical for the needs of digital interfaces. Nevertheless, the skeuomorphic icons are still widely used in game design and app icons in game sector.

SVG icons

SVG icons, decoded as Scalable Vector Graphics, are responsive icons built on XML-based 2D vector images. They are designed and integrated according to an open standard developed by the World Wide Web Consortium (W3C) since 1999 and supported by all major browsers. SVG icons are growing their popularity as today websites are used on the diversity of platforms and devices and need to be responsive to provide positive UX.

Types based on applied image metaphor

This direction of icons typology is based on the research provided by the famous expert in usability Jackob Nielsen and revealed in his article for Nielsen Norman Group. In this perspective, icons can be divided into three core types according to the type of metaphor they reflect.

Resemblance icons are the symbols directly depicting a physical object the icon represents. These are, for example, the magnifier for search, the shopping cart, the envelope for mail, etc.

Reference icons are the symbols depicting an object on the basis of analogy. For instance, a picture of a clamp representing a file-compression utility (because it squeezes) goes to this group.

Arbitrary icons are the symbols that currently do not set direct connections with the objects and their recognizability is based on convention and power of habit. This is when we should remember about floppy disc representing the “Save” function: although initially, it was a reference icon, for many users now it doesn’t work like that – they just know the meaning solidly connected to this image for many years.

Multimedia Icon Set

Key features of effective icons

In one of our previous articles devoted to the role of icons in user interfaces, we have already described all the essential features making the icons efficient, so today let’s just quickly recall them.

• clear – the meaning of the icon is understandable and accessible to the target audience
• meaningful – the icon transfers the informative value
• recognizable – the visual symbol applied in the icon is presented in the form which can be recognized and decoded correctly by users
• simple – the icon isn’t overloaded with non-essential graphic elements which allows it to be quickly perceived and understood without too much effort
• original and noticeable – the icon stands out among other similar elements of the interface which is especially actual for the app icons
• scalable and flexible – the icon saves its unity, integrity, and legibility in different sizes and resolutions
• attractive – the icon satisfies aesthetic expectations and sets harmonic visual appeal
• non-offensive – the icon doesn’t have hidden meanings or misperceptions which could feel offensive or rude for any part of the target audience
• consistent – the icon corresponds to the general stylistic concept of the layout it is applied for.

Recommended reading

Here is a bunch of articles for further exploration of the topic:

Icon Classification: Resemblance, Reference, and Arbitrary Icons
A Brief History of the Origin of the Computer Icon
Iconic Simplicity. The Vital Role of Icons.
Visual Perception: Icons VS Copy in UI.
How to Combine Icons from Different Sets in Your UI
Choosing the Right Size and Format for Icons

Originally written for Tubik Blog

Сообщение Small Item, Big Impact: Types of UI Icons появились сначала на Design4Users.

Today D4U Review issue introduces a new service by the Icons8 team called omg-img. Its main goal is to make embedding vector icons in HTML super simple, and it uses a huge collection of icons which is continuously growing and at the moment presents about 50K items available. Users do not even need to insert a Javascript code. This was done with support from a production-scale CDN service provided by KeyCDN.

Users can select icons from more than 10 different styles, specify the size of the icon (up to 512px), and even recolor it. Each style has the size it’s designed for, in other words, pixel-perfect size:
iOS: 50×50
Windows 8: 26×26
Windows 10: 32×32
Android 4: 24×24
Android 5: 24×24
Color: 48×48
Office: 16×16, 30×30, 40×40, 80×80

The team keeps developing and testing the service: a couple of useful features are already being prepared for the next release:
– ability to specify the size as 2x, 3x, etc. instead of in pixels in order to keep correct proportions from the pixel-perfect size for each platform
– adding icon effects like background and a horizontal flip (direction).

Full product description and all the links can be found here. At the moment, all the mentioned functionality is available for icons in png format. The same performance is coming soon for svg and will be open for all the users who have an Icons8 license.

By Icons8, the team behind the great collection of icons for different purposes

Сообщение Design Tool: omg-img. When Adding Icon Is a Piece of Cake появились сначала на Design4Users.

Logo is the basic mark of brand identity, the most prominent symbol of brand image, and the foundation of an effective marketing strategy enabling its connection with the target audience. One of the misperceptions in the world of business is that if the product or service is good, it doesn’t need additional investments of time and money into its promotion. However, it doesn’t work like that: without brand identity, even the high-quality product can get lost just because users or buyers won’t get even a slim chance to learn about it or try it. On the contrary, a strong branding strategy sets the immediate connection of the product or company and its essential benefits with the sign that represents it. Brands, products, and companies need their own personalities that will attract people in the way it often happens with a personal relationship.

Showing personality in your app, website, or brand can be a very powerful way for your audience to identify and empathize with you. People want to connect with real people and too often we forget that businesses are just collections of people. (Aaron Walter)

Worldwide famous designer and artist Karl Lagerfeld once said “Logos and branding are so important. In a big part of the world, people cannot read French or English – but are great in remembering signs”. Knowing how far he went in the sphere of design, it’s really easy to believe he’s right, considering that plenty of big and small companies proved that via their marketing experience.

In our previous article, we looked a bit closer at five types of logos all of which function successfully nowadays. Continuing the topic, today we suggest going deeper into the stages of the creative process in logo design on the basis of extensive studio experience in the sphere.

The process of creating a logo for Upper App

Logo design flow

One of the key characteristics of the most efficient logos is their simplicity. On the one hand, it becomes a challenge for a designer to create a sign which is both simple and at the same time recognizable. On the other hand, it can give clients the illusion that logo creation is a sort of simple operation that needs a couple of hours and doesn’t require special skills, too much time or effort. That is quite a mistake and such an approach will bring branding to nowhere.

Efficient logo design is a complex strategy that includes all the stages of design and marketing process such as:

• setting the task
• user research
• marketing research
• creative search
• choice of style direction
• choice of color palette
• testing in different sizes and environments
• creating a style guide setting right and wrong cases of logo use etc.

As we can see, logo design is a tricky process: many steps should be done to get an efficient result. That is the reason for plenty of companies including startups, beginning their way in the sphere of business, to trust this essential task to professional designers. Practice shows that the logo, which is thought-out to the slightest details and tested properly, is a worthy investment.

Let’s look a bit closer at each stage.

Setting the task

This stage is the foundation of all the design process. This is the time when the designer should get as much information as possible from the client to mark the right way to the goal. It is well-known that the one who walks without a destination in mind will possibly come nowhere. In design (not only the logo and branding direction) it works the same way: to get the result, you should clearly set the goals from the very starting point. It doesn’t mean that the goals will stay totally the same at the end of the journey: they can modify more or less in the creative process. Still, if the goals are not set at the start, the creative process can get easily transformed into a mess.

That’s the first step to designing anything: ask “Why are we doing this?” If the answer isn’t clear, or isn’t clear to you, or just doesn’t exist, you can’t design anything. Stop working. Can you help set those goals? If so, do it. (Yes, it is part of your job. Anything that helps you do your job is part of your job.) (Mike Monteiro “Design Is a Job”)

Designers should always be ready that clients often don’t know in detail what they want. They just want a beautiful logo that will bring success to their business. That is natural and that is the reason why they hire a designer. In our earlier post devoted to stereotypes about designers, we mentioned: “your customer doesn’t have to know all the nuances and peculiarities of the design process. That is why THEY are customers and YOU are a designer.”

Moreover, the thing, which we have checked in practice, is that communicating with clients you should get not only their wishes but also try to get the ideas and reasons behind these wishes. If you understand why your customer wants to see particular colors, shapes or transitions, it will be easier for you (if necessary) to justify other methods of realization for these ideas which would give the result desired by the customer.

The more information you get from the client, the better it is for setting the right direction. Design briefs, calls, and Skype conferences, chat in Slack, brainstorming sessions, mood boards can all form a good starting line for productive work.

At this stage, it is highly advisable for a designer to get the data about:

• the nature of the product
• the target audience
• geographical targeting (if available)
• the keywords with which the company represents its identity
• preferred color palette
• potential carriers and surfaces at which logo will be used
• the need for consistency with existing corporate identity (if available)
• preferred type of logo
• the necessity of mascot design.

Obviously, the list is not totally full, still, it contains the most important positions needed for setting a general design goal.

Research

This is the stage when being based on the established task and aims, the designer has to get deeper into the environment in which the future branding sign will function. The research stage usually moves on in two directions simultaneously: user research and marketing research.

User research means getting deeper into details of the core target audience, knowing their preferences and psychological peculiarities, the influence of color and data carrier on their emotions and experience, the sources of information, and creative performance ways that encourage them and make them active.

Marketing research means exploring the market segment, primarily from the perspective of creative solutions used by competitors. Logo design presumes to create a unique sign that will make the company or brand stand out of the crowd and draw potential customer’s attention. Neglecting the research stage and relying only on their creative intuition and talent, designers risk failing this task as they will not know the conditions of the logo functioning and will not be able to make it efficient and original.

Creative search

This is the stage when armed with loads of data and seeing the path, the designer sets off in the creation process. The aim of this stage is to develop one or several stylistic directions which will allow fulfilling the branding goal and marketing needs. In all fairness, it has to be added that the branding design process like every single personalization activity is very individual in each particular case. Sometimes it happens that the requirements from the customer are so clear and details are collected so carefully at the previous stages that logo direction is set during the first iteration and needs only to get polished. In other cases, especially in cases when requirements are blur or competition at the market segment is really high, various directions should be analyzed and different variants have to be tested to get the one which will be effective and original.

This stage can include the creative outcome of different fidelity levels, from rough pencil sketches to sophisticated digital samples. Any of them can work efficiently, the choice of strategy depends on the designer’s expert decision of a more effective presentation way according to the client’s requirements and specific type of logo. Speed and urgency of the project, as well as its interconnection with other design processes like for example interface design, can also influence the choice of presentation format. You can observe the variety of creative stages in our case studies on branding.

Early sketches of the creative search for SwiftyBeaver logo design

Early sketches of the creative search for PassFold logo design

Early sketches of the creative search for Tubik logo design

A creative search of mascots for Saily App logo

The outcome of the creative search is the selected style and type direction (for example, flat or skeuomorphic, colorful or monochrome, featuring the mascot or not and hundreds of other general stylistic details), color palette, basic shaping and placement of the logo (say, round, square, triangular; using landscape or portrait placement; perhaps setting several variants of shapes and logo elements placement, etc.)

Polishing the details and finalizing the concept

At this stage, the designer develops the chosen direction and works over the slightest details. People staying far from the design process can be stunned by the level of fidelity and sophistication over the image presenting future branding signs. Sometimes, it takes hours of work to develop the variants with tiny changes set in millimeters which still influence the general harmony. This is the time when designers can experiment with forms and lines, hues, and shades, still, at this stage, they work within the already set general stylistic concept.

Shades and shaping variations for SwiftyBeaver logo design

Color combinations for Passfold logo

Background color options for Saily App logo

Mascot variations for Andre logo

The outcome of this stage is the finalized version of a logo visual presentation.

Testing

Designers, believing that the preparation of final high-resolution graphic assets for a logo is the finish of the journey for them, make a big mistake. As well as for any design task, post-design testing of the created result is the must-do. For the logo, it is a vital condition of efficiency and success. It should be tested on different surfaces and devices, in the wide diversity of settings and environments, sizes and resolutions, alone and surrounded by other logos. If such an option is available, it should be tested by people directly representing the core target audience. The results of the testing should be thoroughly analyzed and sometimes they can significantly influence the final logo alterations.

Visual perception and mental associations are deep and vital human element making a great impact on any design element’s effectiveness and attractiveness. There are loads of factors, some of them so slight and deep that it’s impossible for the designer to predict them. Among those factors we could mention:

• geographic location
• color perception
• gender
• age
• religion and beliefs
• level of education
• minor and major disabilities
• psychological peculiarities
• technology awareness.

The list can be continued longer and longer and amaze designers and customers by its diversity level. To avoid the issues of misunderstanding or misperception, as well as risk getting lost in the environment of other logos and icons, testing becomes the integral design process stage.

PassFold logo testing

Saily App logo tested as a game character

 Toonie mascot tested on the app screen

Design4Users logo tested in print

Creating a style guide

Last but not least is the stage when the designer accomplishes the style guide for the approved and finalized logo. The guide should include clear and informative instruction of correct and incorrect variations of the logo use. It becomes the basis for a brand book and enables customers in the future to inform any sides involved in the creative process like print shops, for example, to keep the rules of harmonic presentation of the logo.

Features of an effective logo

Whatever is the choice of type and style in logo design for a particular brand, any logo should include basic efficiency features:

• simplicity
• originality
• versatility
• recognizability
• the consistency of use
• appeal to the target audience
• informativeness
• memorability
• longevity.

Considering that all those traits should preferably get combined in one logo, hiring a specialist for this job is definitely a worthy investment. This flow will cost less time, effort, and money than profits lost later because of poor non-harmonic branding.

Lion browser logo icon

If you are interested to see the full practical path of logo design we keep here in the studio, welcome to look over the case studies of Ribbet, Passfold, Tubik, Saily, SwiftyBeaver, and Andre logos designed by Tubik team. They contain descriptions and illustrations for all the stages of design process.

Recommended reading

Here are some more articles we could recommend for those who would like to get deeper into the topic of logo design:

Identity Design: 5 Basic Types of Logos.

Get started with logo design: 10-step guide

Zero to Logo: The Creative Process in 7 Steps

The Logo Design Process From Start To Finish

12 Essential Rules to Follow When Designing a Logo

Originally written for Tubik Blog
Welcome to read free e-book “Logo Design. Creative Path to Effective Branding”

Сообщение Creative Stages of Efficient Logo Design появились сначала на Design4Users.

One of our previous articles was devoted to the mascots in establishing an effective brand strategy. The business practice of successful companies shows that thoughtfully designed mascot in some cases can work even better than product endorsements with the help of a famous person. Mascots can reflect any traits of character, follow any style needed for product positioning, and communicate with the customer via a wide set of visual techniques. They push the limits of personification and give the chance to create unexpected combinations of elements or make fantastic and non-existing characters alive.

Today we would like to show you the practical case of applying a mascot in UI design by the example of Toonie Alarm. We have already shown a case study on the general concept of user interface design for this app and this time the story is continued with Toonie, a funny bird that goes with the user all around the app.

Task

Designing a mascot for UI of the simple and entertaining alarm application for iPhones.

Tools

Wacom Intuos pen tablet, Adobe Illustrator, Adobe Photoshop

Process

Requirements to the mascot

Furthermore, mascot plays the important role in perspective of interconnection between the user and the product. Integrated into the interface, mascot becomes the core element of communication and interaction, therefore in different states, it can become the basic way to deliver the message to the user.

The basic advantages of applying mascots as a part of UI design include:

Memorability. People tend to remember substantial images faster and longer than abstract ones, especially the characters reflecting human-like features.

Recognizability. As long as it is easier to remember the mascot, it is also easier to recognize the product and its features among the others.

Visual marking. Mascot allows marking visually anything connected with the product creating the additional field for promotional activity.

Personalization. Mascot is one of the best ways to provide the element of direct communication and personal attention to users, which they usually appreciate.

Stylistic support. Mascots being a highly flexible element can become a central part of the general style concept for the product.

Consistency. Mascots applied in a user interface can become a sort of convention and support the general and harmonic perception of the whole interface rather than the set of separated screens.

Emotion and interest trigger. A mascot is one of the fastest ways to provide the feature of emotional feedback to the user, let the interface speak user’s language, and therefore make the product more user-centered.

Aesthetic satisfaction. Mascot as an object of a sophisticated artistic approach can become the feature supporting the user’s need for aesthetic pleasure. The pleasant-looking mascot is a good reason to make a choice in favor of a particular product in case it’s compared to the ones with the same functionality but less attractive graphic support.

The long-term perspective of image development. Mascots accomplished properly usually become the element of long-term branding strategy and are able to satisfy multiple needs getting transformed and refreshing the experience of product use without loosing recognizability.

Efficient mascots should be based on thorough user research, analyzing needs, wishes and expectations of the target audience, and also an attentive study of the market environment to support the appropriate level of originality as the basis for effective design solutions. Therefore, efficient mascot should be:

• memorable
• recognizable
• original
• representing a consistent character
• flexible to adapt and adjust
• applicable for diverse tasks
• looking good in different sizes and resolutions
• stylistically harmonic
• lively and user-friendly.

Designing the mascot for Toonie Alarm, Tubik designers based their creative search on this well-proven set of features.

Toonie the Cheerful Bird

As for Toonie Alarm, the idea of applying the mascot was set almost instantly as the mascot is not only a sort of communicator between the interface and the user but also a great representative of the brand able to enhance its recognizability. Moreover, it has a great impact on easy establishing the voice and tone of the product, creating the feeling of natural communication, and supporting the mood. That was the point when Toonie was born to be a funny cheerful bird, whose mission is to make the world brighter and help users to interact with the alarm. It informs users about news, rewards, errors, and just adds some fun and color to everyday life.

The first step of creating a mascot was the strategically important decision on the character behind it. Considering the nature of the app which is basically an alarm and is aimed at being used on an everyday basis, the mascot had to reflect this major part of functionality quickly and efficiently. On the other hand, the designer had to take into account the high level of competition in this sector: there are already many alarm apps using diverse stylistic approaches to attract users’ attention and satisfy their needs. So, the task was to create a mascot that will look original in the terms of existing competition and at the same time sending the quick and clear message to the users about the nature of the app.

The initial brainstorming session brought many ideas for a mascot, from live alarm character to different cute animals and fantastic creatures with visual markers associated with waking up, alarm, cheerful morning, etc. Still, the idea agreed upon as the most effective was a cute and funny bird. There are many logical reasons for this choice, the key of which is the association with an early bird catching the worm typical for many countries around the world. So, the first rough sketches of the future users’ friend—Toonie the Blue Bird.

Another reason that strengthened the idea of a mascot presenting an easily recognized animal is that the alarm app is supported by the huge pack of stickers. They are used as rewards for being persistent: users get them for waking up several times at the same period of the day. Those cute stickers are performed at the entertaining style supporting the general design concept of the whole app and all of them represent recognizable animals, so the major mascot also chosen in this direction was agreed upon as more effective and harmonic than fantastic creatures or personified material objects.

Now let’s check what functions cheerful Toonie mascot was aimed at.

Mascot functions in user interface

The first appearance of Toonie in public happened in a short animated teaser presenting the logo and brand name of the application. Naturally, for the teaser, the mascot was shown quickly just revealing some very general features.

The next step where Toonie showed its potential in full glory was app tutorial screens. As you can see in the animated presentation below, Toonie plays the role of a character communicating with the users and informing them about the basic functions and features of the app. Visually, the bird mascot also becomes the foundation for feeling all three screens of the tutorial as the integral complex, a united part of the app. Moreover, interface animation is applied in a way that supports this consistency of interactions through motion and transformations of the most prominent visual element which is a mascot.

In actual interactions with the app, Toonie mascot takes over the role of communicator at every step when a user has to be informed about something. This way of having a conversation feels more natural to many users than just impersonal copy blocks of notifications. It creates the illusion of chatting with a real person, even is it is realized with a personified mascot.

The screen below, showing that the user hasn’t set an alarm yet, supports the message with a funny mascot illustration: the bird has fallen down as it is empty on the screen. Such an approach lets designers not to leave the screen empty and use the space for another spark of branding and stylistic consistency.

The next screen you see is Stickers Screen keeping the collection of stickers that users have already collected or locked stickers that can be collected in the future. Again, Toonie informs the user about the existing state of things and encourages them to collect all the existing stickers waking up on time.

If users collect all the set of stickers, a special pop-up notifies them on that achievement with congratulations and certainly, this message comes from the mascot of the app.

As it was mentioned earlier, mascots usually have a big potential for further development and application. It was also tried with Toonie: its image together with the other stickers was stylized and animated for the special Toonie Halloween Stickers edition devoted to seasonal holidays.

Halloween stylization featuring Toonie mascot in illustrated pop-up was used to visually support notification about a special offer for Halloween.

So, the case of Toonie Alarm application showed the efficiency and diversity of the ways via which mascots can support users and attract their attention to important elements. As was mentioned in the article devoted to peculiarities of visual perception in UI, in a vast majority of cases people fix and perceive pictorial elements like icons and illustrations faster than words. The case of Toonie Alarm proved the effectiveness of the approach for simple problem-solving applications used every day. Copy blocks combined with appropriate images of a mascot inform users whatever their key way of perception is, boosting the user-friendly nature of interactions. Moreover, the funny and cheerful nature of the mascot, as well as tone and voice chosen for the communicative copy parts, established the positive emotional background of perception and user experience, which works effectively for the wide target audience.

Originally written for Tubik Blog
Welcome to download Toonie Alarm via App Store
Welcome to read case study on Toonie Alarm UI Design

Сообщение Design Case Study: Mascot for Toonie Alarm появились сначала на Design4Users.

Flat design

Flat design has significantly grown its presence and diversity this year, both in interface design and branding. The design approach is known for its minimalist and concise use of visual expressive means and has established itself as a style favorable for enhancing usability and visual harmony of user interfaces. The most prominent feature which actually has inspired the name of this direction is applying flat 2-dimensional visual details as the opposite to highly realistic and detailed skeuomorphic images.

The features of flat design supporting its steady popularity in interface design include:

• simplicity of shapes and elements
• minimalism
• functionality
• bold and highly readable typography
• clear and strict visual hierarchy
• close attention to details
• thoughtful appliance of bright colors and contrast supporting quick visual perception
• avoiding textures, gradients and complex forms
• applying the principles of grids, geometric approach and visual balance.

Cafe Coupon App 

Thoughtful integration of flat design via diverse interface elements, including icons, illustrations, buttons, tabs, and the like, proved itself efficient for making UI bright, attractive, clear, intuitive, and easy-to-use.

Toonie Alarm

Moreover, this year flat design has set a strong link between branding and UI design, mutually supporting each other in digital products.  One of the fields broadly strengthening this trend was creating logos and app icons flat and simplified. This trend has featured itself not only in brand new projects but also for well-established websites, apps, companies, and products, which have presented new redesigned logos and corporate style visuals redesigned according to the principles of flat design.

Conversational UI

Another broadly discussed trend is conversational UI which has been the object for hot debates and themes for many speeches and case studies this year. Basically, the term “conversational UI” is connected with interfaces that enable users to communicate directly to the system in a way imitating conversation with people. In the vast majority of cases, this sort of UI involves voice manipulation and recognition as part of the interaction.

More and more products are featuring this sort of functionality: some want it just because it’s trendy and fashionable while others find real ways to engage it for problem-solving objectives. Most often it is realized by chat-bots providing a flair of talk to the users. In automated dialogues of this kind, depending on the nature of the product and style of talk which is seen appropriate for the target audience, conversational UI can effectively involve both verbal (language) and non-verbal (emoticons, pictograms, etc.) means of communication.

Among the advantages of conversational UIs, one of the frequently mentioned is the automation of some basic and repetitive operations saving people’s effort for more creative and complex tasks. It can enhance the usability of the product and even make it proactive, giving prompts to the user and improving interaction with the product. Still, there is the trap to overload the product with this sort of communication, based on standard situations and issues while missing non-typical cases or questions which need different solutions. Moreover, by far not all target users are ready to communicate in that way, so this design solution needs to be grounded on extensive user research and testing from the early stages of user experience design. Conversational UI can easily give zest to the user interface. Yet, if it’s not analyzed and tested well, conversational UI can do the opposite and spoil user experience by poor interaction.

Anyway, this year UI designers have thought over new perspectives of applying conversational UI, in particular in combination with AI technologies, and this trend will definitely grow to show new rays of creativity next year. Conversational UI isn’t just another fad: it is the trend providing total or partial changes to certain areas of interaction design and giving an alternative approach to problem-solving and decision-making processes.

Minimalism

This year has given a great bunch of applications and websites designed on the principles of minimalism. They support positive user experience by providing clear and simple interfaces, full of space and air, focused on content and navigation. Minimalist interfaces are characterized with thorough attention to visual elements, not numerous but always transferring a particular message. Minimalist interfaces, both for web and app, also feature sophisticated work with typography and visual hierarchy supporting instant scanning and skimming the content of the page or screen. Moreover, interfaces of this sort usually provide a high level of legibility and readability.

Björn

Custom graphics

The desire of originality sprung out in UI design in the area of custom graphic design of all kinds. More and more interfaces apply custom mascots, icons and illustrations that fulfill multiple goals: adding originality to the visual design concept, enhancing usability, strengthening navigation, and marking out the content depending on its nature and functions. Graphic details play a crucial role in the usability and accessibility of the product and even the slightest changes can bring significant results, speeding up visual perception and understanding interface elements or transitions.

Visual perception is one of the most productive and quick ways through which people are able to obtain information and get it processed by the brain. It influences so many aspects of life that neglecting the issue while creating products for users would be extremely unwise. That is why the aspect of applying visual elements of high functionality in interfaces such as icons and their impact on the general efficiency of the product has been an actual topic in the global design community for a long time. In addition, images push the limits of perception for users who have natural problems with text recognition such as, for instance, dyslexic or non-reading preschoolers.

As for custom illustrations or icons, created for specific products, made according to the preferences and needs of the particular target audience and with a view at certain business goals, they are able to make the product work more efficiently solving users’ pains and satisfying wishes. Perhaps, that is one of the most popular reasons why this trend got so popular in 2016 presenting interesting interfaces with custom graphics of diverse styles and performance.

Weather in UI Design

Another side of this trend is the evolving field of wallpapers for desktops and mobile devices featuring original graphic artworks on a variety of topics. It also can be characterized as a user-friendly trend giving users the choice of means for self-expression and satisfying personal aesthetic needs.

Animated microinteractions

Interface animation is one more hot and debatable topic of this year. Although there is a big army of those who find animation an unnecessary feature overloading user interface and making it more complicated, most users expect motion as an integral part of interaction experience. So, designers and developers work over more and more sophisticated methods to make animation pleasant-looking and problem-solving characteristics of modern apps and websites.

One of the frequent methods of adding motion to UI are animated details featuring microinteractions. Microinteractions supported by clear finalization via motion create fast feedback for the user and make the experience positive and efficient while navigation simple and intuitive. Animated buttons, switchers, toggles and other interactive elements inform users in split seconds activating all the potential of fast visual perception.

Tab Bar interaction

As we mentioned in the earlier article, animation in the interface can create a pleasant illusion close to natural interaction with physical objects which often doesn’t need too much cognitive process. For example, if you pull the object, press it, move out the tab, the movements should feel natural. Most users won’t be able to see this sophisticated work accomplished by designers: they will take it for granted and the fact it makes them comfortable will be the biggest praise for design solutions.

Scroll animation

Scroll animation also got new vibes and perspectives of artistic realization. Thought-out movement of layout elements while the webpage is scrolled enhances user experience significantly and creates the harmonic feeling of one integral smooth interaction rather than perceiving several separate parts or blocks of the page. Moreover, this sort of interaction is aesthetically pleasant and engaging, and these emotions are a good factor of retaining users. This year, full of new updates in design tools and software, showed great practices of sophisticated work on scroll animation.

Organic landing page

Animated tutorials

The tutorial is a vital part of onboarding users for most mobile applications. Certainly, a wide variety of means and techniques are applied to make it clear, engaging, and informative as it is a strategically important element of involving users into further interaction with a digital product. This year designers combined traditional techniques with new popular findings: in particular, custom illustrations and animation brought new vibes to app tutorials, making them more dynamic and enhancing their informative potential.

Social Network Tutorial

Diversity of landing pages

Surely, landing pages were discovered much earlier than 2016, still, this year has brought the new lap of their development and diversity. More and more businesses and social projects take advantage of using them for effective presentation of special services, sales, offers, or issues that need focused user’s attention. Landing pages have also grown their presence in the Net as an effective method of promotion for native mobile apps. Accomplished wisely and thoughtfully, grounded on user and market research and testing, broad usage of landing pages can be also seen as the other user-friendly trend, providing users with necessary information and interactions in a clear and accessible way saving their time and effort. From the business perspective, they also work well giving businesses a flexible tool for original and effective presentation.

Coffee Wings landing page

Brutalism

The trend of brutalism in digital design has rocketed this year getting more and more expressions and diversity. It is often characterized as a web design style aiming at breaking standards and predictable design techniques. The websites created in this manner are a sort of rebellion to sophisticated designs with thought-out symmetry and harmony, complex layouts, and accents of aesthetic visual performance. Vice versa, brutalism is based on simple and raw appearance, in most cases not loaded with many visual details and sometimes even close to plain HTML page. Used wisely, for the appropriate goals and audience, this approach can bring a high level of originality to the website and make it really stand out of the crowd.

Contact List Concept 

Custom grid

According to Internet Live Stats, there are over 1 billion websites in the World Wide Web today. This milestone was first reached in September of 2014, as confirmed by NetCraft in its October 2014 Web Server Survey, and first estimated and announced by Internet Live Stats. The number had subsequently declined, reverting back to a level below 1 billion due to the monthly fluctuations in the count of inactive websites before reaching again and stabilizing above the 1 billion mark starting in March of 2016. With more and more websites coming into play, designers have to be more and more creative to not only make them attractive and harmonic but also give them a feeling of uniqueness and original appearance. That is one of the reasons, why experiments with the grid also won their place in the list of general design trends of the leaving year. A custom grid is a way to save the feeling of harmonic layout and placement of the elements with a higher level of flexibility and originality. However, this sort of experiment requires thorough research and in many cases, the final result comes via several iterations tested and analyzed in terms of usability and visual perception.

Slopes Website

Bold and catchy typography

2016 could also be mentioned as the year of further rigorous practice on typography in the global design community. It brought the world loads of new nice typefaces both universal and created with a view to particular objectives or products. Typography continued its progress as one of the crucial aspects of efficient web and app design, and one of the trends in this domain was practices of applying bold and outstanding typography for webpages, catching users’ attention, and instantly informing them about the core message. In particular, this approach got its development in the sector of landing pages whose quick and dynamic presentation of core data to users has a great influence on conversion rates.

Vinny’s Bakery

Large thematic image

One more trend often found in various designs for interfaces is applying prominent images, which could be either photos or illustrations, as the central visual element of the general composition. Important thing is that the image is never just a placeholder of nice looks: it presents a powerful way to strengthen the informative potential of the page or screen, set the theme instantly, and focus the user’s attention at the significant details. Needless to say, it takes much designer’s effort to choose the one successfully transferring the necessary message and supporting the general stylistic concept.

Healthy Food App 

Handwriting lettering

Custom handwriting lettering also got popular as a design trend and is often used for marking out significant details and images in an original way. Special lettering made by professional designers looks fresh and unique, refreshing the visual performance of the webpage or screen. On the other hand, applied in UI design, it demands additional effort to be tested in the layout as it can happen that hand-crafted lettering looks great separately, but doesn’t work effectively in combination with other elements of the interface.

Real content instead of Lorem Ipsum

This year has featured growing attention to content, its quality, and its performance. In user interfaces, content, and design and interconnected parts that should successfully support each other instead of fighting for users’ attention. That makes more and more designers prefer applying real content instead of well-known Lorem Ipsum, even in cases of creative stages or presentation of design concepts. It gets designers, clients, and users closer to real experience and a more natural feel of interactions.

Website on cooking seafood

Videos explaining or presenting products

Due to easy access to reviewing videos via YouTube, social networks, and other platforms of product presentation, video explainers have quickly established themselves as a popular trend. Naturally, it wouldn’t be logical to neglect such a powerful source of connection with clients and users, so 2016 has brought a great variety of videos presenting the products, companies and services, explaining their benefits and special offers, showing the engaging flow of interaction and connection. They took over the responsibilities of the picture which is worth a thousand words: video explainers quickly show the most important features of the product and let the users know what deserves their attention first of all.

Example of video explainer designed by Tubik Studio for Toonie Alarm

Example of promotional year-in-review video designed by Tubik Studio for Opera

Bright and dark color palettes

No secret, color is one of the most powerful and influential factors in UI design. One more trend in UI design deserving a place in the list of this year is a great variety of color palettes designers choose for applications and websites. Diversity of new fonts and typefaces, as well as research of usability studies, allow going beyond standards and trying new combinations which will take advantage of diverse colors but with it won’t lack in usability. More and more creatives are discovering new horizons combining traditional techniques with innovative approaches in the domain of work with color.

Recipe App

magic.co landing page

To sum up, we can certainly say that in the sphere of UI design 2016 has been the year of creative search and experiments, still, most of them were focused on usability and desirability of the final products. No doubt, 2017 will not lose its chance to polish these trends and open the new ones.

Originally written for Tubik Blog

Сообщение Prominent Trends for UI Design in 2016 появились сначала на Design4Users.