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.

Here in Tubik, we have felt all the variety of stones in that way. Today we invite our readers to review the diverse purposes for which graphic design can be highly beneficial as we have checked in design practice.

Graphic design as a creative field

As we mentioned in one of our previous articles about the issue, graphic design can be described as the sphere of human activity that lies on the crossroads of several directions, first of all, visual arts, communication, and psychology. Basically, graphic designers do the job of communication to others by means of graphic (visual) elements such as images of different styles and complexity, types and fonts, pictograms, shapes and sizes, colors and shades, lines, and curves, etc. Graphic designer makes all those elements of visual perception transfer the message, so he makes them functional. Therefore, we could say that graphic designers are artists applying their talents mostly not in pure art, but communicating and purposeful art.

Modern graphic design broadly covers all spheres of human life which deal with visual communication, from books and posters to sophisticated mobile applications or 3D animation. Let’s look into directions in which graphic designers can express their creativity for the sake of solving problems and satisfying needs.

Graphic design directions

Nowadays, graphic design is an incredibly broad sphere for the application of artistic talents. In particular, it includes:

• editorial design
• illustration
• identity (logo and branding) design
• icons and pictograms
• typography
• interface graphics and elements
• print advertisements
• big print items such as posters and billboards
• signs
• packaging, etc.

Thus, it’s easily seen that modern designers in this sphere have multiple options to apply their talents. In all the mentioned directions, the basic purpose of graphic design is to serve a particular purpose or even a set of them by means and techniques of art.

Graphic design in modern life full of digital devices is getting more and more technological.  Famous Italian designer Massimo Vignelli said “The life of a designer is a life of fight. Fight against the ugliness. Just like a doctor fights against disease. For us, the visual disease is what we have around, and what we try to do is cure it somehow with design.” Remembering the words we have to say that the purposes of modern graphic design are pushed further and further. Not only does it beautify the physical or digital object, but also helps its users, navigates them, guides their way via which they can get both aesthetic pleasure and problem-solving benefits.

Graphic design purposes

Today, graphic design can set diverse purposes. It rarely happens that the object of graphic design serves only one objective. Looking over the most essential of them, we would mention the following.

Identifying

This purpose, first of all, serves for branding reasons. It is primarily concerned with creating logos which usually lies the foundation for the whole branding strategy. This is the task at which designers work with multiple factors combining specific features of the target audience, laws, and rules of artistic harmony, the psychology of color and shape impact on human perception and emotions, current situation on the market, business goals of the brand or company.

Numerous logos accomplished by studio designers have proved that this symbolic image plays the crucial role in all the next stages of brand strategy, including print work (like posters, business cards, corporate documentation templates, etc.), interface design (when brand or company uses digital sources and channels of reaching their clients like blogs, websites, apps, widgets, etc.), branded items (like stationery, cups, notebooks, etc.) and other directions. The efficient logo is usually based on deep analysis supported by the designer’s talent and skills and presents a balanced mixture of art and functionality. Thinking over all the details, the designer selects the type and image of a logo that will correspond to the objectives of the company or brand strategy.

Andre logo 

Lion browser logo icon

Toonie logo design

fOxygenic logo

Design4Users logo tested in print stickers

PassFold logo

Read more about types of logos and creative stages of logo design

Beautifying

This is the broadly used function of graphic design items that have found its comprehensive realization in all the spheres of users’ interaction with visual stuff, from advertising to book covers and cartoons, to user interfaces of all kinds, packaging, photos, and tons of other things. It’s not a secret that people are not only rational but also emotional creatures, and most of us are visually driven and aesthetically engaged. Although the content and functions are the most important factors of making a product problem-solving, the old classic trend hasn’t changed: people still believe that a good dress is a card of invitation. An attractive and stylish look is traditionally highly important to make your user think about trying the product, especially in conditions of modern intense competition.

Muscles Magazine

Tales of the Jazz Age Book Cover

Graphic design in all its variety becomes a powerful tool of interface beautification. It can be applied in the slightest details like icons and up to significant elements like illustrations and mascots.

Singify App Tutorial

Cafe Coupon App

Moneywise App

Timeline App

Toonie Stickers

Setting the theme

A broad variety of graphic design techniques and diversity of approaches establish a steady foundation for setting the theme of the offered product via visual elements. Like the copy is able to not only transfer the message but also set the tone and voice of communication, the visual elements, including background, typography, composition, color palette, shapes and sizes, stylistic approaches can immediately inform the user about the features and market segment of the app or website and also appeal to emotions of the target audience. Visual perception plays an incredible role in decision-making, especially in cases of the first interaction when only several short minutes and sometimes even seconds are vital to get the user interested. This funсtion also works when the graphics highlight specific trends or events.

Lowrider

Underwater explorer

Pikachu Poster

Apple Event Animated Graphics

Californication Bus

San Francisco Painted Ladies

Explaining and guiding

This function of graphic design elements is widely used both in print and in all the types of interfaces, first of all in various tutorials, manuals, tool-tips, guides, etc. No need to say that here a picture is really worth a thousand words: it saves precious time and helps to avoid big copy blocks. Moreover, graphics based on a thorough analysis of the target audience turn on the mechanism of empathy and emotional appeal which also enhances user experience and supports business goals.

Travel App Tutorial

Shauts App Tutorial

Saily App Tutorial

Ryiadh Tour Guide

Toonie Alarm Tutorial

Enhancing navigation

Custom graphic elements are a great tool enhancing the navigation and therefore boosting usability. Based on user research and testing, it can have a great impact on conversions and retaining readers, providing an easy flow of journey through the website or app. In addition, all this positive influence is supported by the aesthetic pleasure that users get from sophisticated visual elements and harmonic composition.

Weather App

Passfold App

Veggie App

Boosting communication with a character

The element of personification thoughtfully applied in the product can boost positive user experience, enhance brand image and brand awareness. That is one of the reasons why creating mascots is often a part of a general design concept and content strategy. And that is the job where graphic designers can show their best. Efficient mascots should be based on a thorough analysis of 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.

Mascots are also very helpful in interfaces: they liven up the general process, catch up user’s attention, become the memorable element, create important support for a stylistic concept and make the illusion of direct communication with the user.

Monster Stickers and their animated versions

Spring Girl

Saily App Mascot

Toonie Alarm Mascot

Read more about the advantages of efficient mascots here

Making the copy stylish

One more important perspective of graphic design is typography. Designers are usually keen to make the copy applied in the products not only legible and readable but also nice, attractive, and emotional. In cases of lettering for branding, it also adds such vital features as originality and recognizability.

Lettering for Saily logo

Lettering for Genius Bar

Lettering for Tubik logo

Lettering for Ribbet logo

Custom decorative lettering

As we can see, there are multiple purposes that can be set as well as multiple goals that can be achieved through graphic design. Diversity of approaches enables to the creation of original and unique design solutions and with support of user research, analysis and thoughtful testing graphic design elements can efficiently enhance usability, strengthen branding and provide a positive user experience. That is the point where art and functionality merge and meld for the sake of solving problems and making people happier.

Originally written for Tubik Blog

Сообщение User-Friendly Goals Hit with Graphic Design появились сначала на Design4Users.

We have already shared our ideas about the role of icons in interfaces in the article describing their most important advantages. Today’s article deals with one of the aspects initiated by Quora question “In UIs, do people recognize icons faster than words?” Having shared our ideas in the answer, we decided to provide its extended version here for our readers.

The aspect of speed

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 the 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 the scientific research about visual perception, after theoretic analysis and a set of practical experiments,  A. Santella made a conclusion: “The fact that eye tracking is sufficient for some level of abstraction in our context makes an interesting point. It suggests that the understanding underlying abstraction, and perhaps other artistic judgments, is not some mysterious ability of a visionary few, but a basic visual competence. Though not everyone can draw, everyone it seems can control abstraction in a computer rendering.” People, in general, have incredibly broad abilities to perceive visual marks, recognize and proceed data even transformed in images of a high level of abstraction. That is an important fact designers widely use to improve the usability and navigability of their solutions.

If the only aspect a designer is interested in using icons is speed, then the idea in the original question will work positively. Yes, in the vast majority of cases, people fix and perceive pictorial elements like icons and illustrations faster than words. A great proportion of users are visually-driven creatures by nature, so the following mechanisms of visual perception often work and should be considered in the design process:

• the human eye fixes images much faster than written text
• as psychologists claim, people need about 1/10 of a second to get a general perception of a visual scene or element (that speed is indeed impossible for textual items)
• visuals are transmitted to the brain much faster, and important pieces of information are often fixed by the brain as visual images, even if they were obtained via text perception
• images are less vulnerable in combination with the background and surrounding elements, while text is highly dependent on the aspect of readability
• images have a tendency to stick better in long-term memory, which means that in interactions with the interface, people will not need to process and remember more data than it’s really necessary, so interactions get faster.

Moreover, icons and other sorts of visuals in the interface can make it more universal in cases when an app or a website is used by people from different countries. So, we can claim that using icons improves general comprehension. In addition, pictures push the limits of perception for users who have natural problems with text recognition, such as, for instance, the dyslexic or non-reading preschoolers.

GIF of the Tab Bar Interactions 

One of the popular elements of the layout where icons play highly practical value is a tab bar. Featuring interactive elements, it has limited space capacity; therefore, icons as the visual symbols of available interactions become an efficient design solution. The concept provided above shows that interface animation can liven up the visual elements and enhance microinteractions.

Weather Icons Presentation 

Here’s one more example showing how icons provide a user with the necessary information by visual means. Symbolic images of weather conditions are easy to understand, and at the same time they save a lot of space and give the opportunity to make the layout of the screen informative but not overloaded.

In user interfaces, where in many cases, basic interactions should take seconds, this aspect is highly important, and it is the essential reason to turn hell out of everything into graphic material. All the things mentioned above feature great advantages of visual elements of the layout, for example, icons, as a tool for fast and easy interaction with the product. However, there are some more aspects to analyze before making final design decisions.

The aspect of meaning

On the basis of diverse design projects and concepts designed in Tubik Studio, we deeply believe that speed should not be the only reason to consider and analyze in the process of creating a user interface layout. People can perceive icons super fast, but if the message they transfer is not clear and can have double-reading, this speed will not bring a positive user experience. Fast capturing of the icon bringing wrong understanding cannot be defined as recognition; it’s just fast noticing. Recognition means not only speed but also the right action or information, which this icon should bring to the user.

There are loads of widely-recognized icons, such as a telephone receiver for a phone call, an envelope for mail, a magnifier for search, and so on. Certainly, using these icons, you create a much faster perception of the UI functionality than using copy instead of them. Nevertheless, in cases when the image of an icon is not so obvious, its usage should be thoughtfully contemplated. If the icon doesn’t correspond with the goal and meaning it is assigned, the speed of recognition doesn’t matter. That’s why there are cases when text transfers the idea or data more clearly, and sometimes it is more effective to use a double scheme when the icon is supported by the text.

iPad App Interactions

Here is the concept showing mutual support of copy and icons. This technique activates several elements of perception during one interaction and provides a higher level of recognizability for call-to-action elements. People, who instantly understand the symbol transferred with the icon, won’t pay a big attention to the text. 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.

One more case when icons are often used together with copy is diverse side menus. Depending on the general stylistic concept of the interface, icons can imply a different level of complexity, from simple stroke icons to sophisticated and detailed ones.

Blog App

This design concept of the blog app shows how icons can become a multipurpose visual element. In the presented interface, they support the titles of the categories for blog posts. Textual presentation of the category is visually supported with a good-looking and memorable image. At the same time, copy removes the possibility that different users can see different meanings of the images. What is more, in this case, icons support another important function providing color markers for the categories. This technique makes interaction with the app faster and easier for users and at the same time, enhances usability and navigation.

Anyway, the decision on applying icons, text, or both in the layout should be based on thoughtful analysis of the target audience and understanding the goals and conversions which have to be obtained via the interaction.

Reasons for applying icons in the interface

Summing up the points mentioned above, we can define several popular reasons for using icons in the interface:

– speeding up data perception
– enhancing memorability of the element via visual images
– improving navigation with visual markers
– saving up space on the screen or page when the long words or phrases are replaced with icons
– supporting copy material and providing its additional visual explanation
– supporting the general stylistic concept and its harmonic expression in a broad perspective.

User interface design solutions for PassFold project

Points to consider

Obviously, it is impossible to satisfy any user and consider every existing cognitive scheme, but still, there are some general aspects that have to be thought out in the aspect of design with high visual perception:

• target audience (physical abilities, age, cultural background, general development, and education level)
• typical user’s reading skills
• typical environment of product use
• level of global or local product spread
• level of recognition for the chosen graphics
• level of distraction/concentration provided by the graphics

All the mentioned points deal with human cognitive abilities influencing the quality and efficiency of visual data perception. For designers, it’s important to bear in mind: it’s not enough to make users see the elements of the layout; it’s vital to make them recognize their meaning and quickly understand their message. Copy and icons should not fight against each other to see which one is stronger; they should support each other for the sake of a better user experience.

Restaurant Menu

Recommended materials

Diverse issues of visual perception have been an object of scientific and applied research for many decades. In terms of design issues, we could recommend the following articles for those who would like to know more :
What Designers Should Know About Visual Perception and Memory – the article by VanseoDesign analyzing basic aspects of visual perception in design perspective;

Design Principles: Visual Perception And The Principles Of Gestalt – the article by SmashingMagazine considering the principles of Gestalt theory essential for design practice;

Studies Confirm the Power of Visuals in eLearning – the set of ideas in Shift’s eLearning Blog based on the analysis of visual perception in interaction;

37 Visual Content Marketing Statistics You Should Know in 2016 – the article by HubSpot about trends on visual content with some stats;

From Icons Perception to Mobile Interaction – the scientific article about icons perception in mobile interfaces;

Visual Perception – the list of books on general aspects of visual perception which can possibly be helpful for those who are interested in the topic;

The Art of Seeing: Visual Perception in design and evaluation of non-photorealistic rendering – the theses of scientific research by Anthony Santella.

Useful Articles on UX Design

Here’s a set of articles on more aspects and best practices of user experience design.

Error Screens and Messages: UX Design Practices

Visual Dividers in User Interfaces: Types and Design Tips

How to Design Search in User Interfaces

How to Design User Onboarding

Directional Cues in User Interfaces

How to Make User Interface Readable

Basic Types of Buttons in User Interfaces

Negative Space in Design: Practices and Tips

How to Make Web Interface Scannable

UI/UX Design Glossary: Navigation Elements

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

Сообщение Icons vs Copy. Visual Perception in UI появились сначала на Design4Users.

Users have a great benefit, being able to choose among loads of weather apps and services of different complexity, styles, features, colors, and so on. Moreover, the target audience of this sort of product is almost unlimited and totally diverse; therefore, different ideas and concepts, if done according to the laws of basic visual efficiency and common sense, will find their users.

Tubik Studio designers, working on various UI/UX projects, have also presented different design concepts for weather applications. So, this post is sharing our works and ideas on the topic.

Basic points of UI for weather applications

Design of the user interface for a weather application is usually concentrated on the idea of being informative and clear. This really is the thing that does not include a lot of copy on the screen, so it is very important to find the scheme and layout in which the user will need just a quick glance to get all the data he or she needs. That provides a broad space of creativity for designers as well as becomes a great challenge as any kind of weather app requires keeping a wise balance between the creative visual representation and an extremely high level of usability.

Both aspects – visual and usable – need to be taken into account. If a designer doesn’t think thoroughly enough about solutions to provide an easy and pleasant user experience and enhance usability as the basic point, the app will risk losing the audience because the functionality is the first thing that retains users to such basic apps. On the other hand, concentrating only on the layout and transitions while seeing visual design as the secondary and minor aspect is also a high risk since being a usable and well-thought-out but visually boring app will not attract users’ attention and could get lost in the numerous competitors. So, designers should think over both perspectives and look for ideas to make the design concept pleasant-looking, clear, efficient, and understandable.

Practice shows that the limitations for a designer’s creativity in the case of weather applications are much lower than in a lot of other types of products. As weather apps do not usually use long copy on the screens and apply a lot of visual details, the aspects of readability and efficient data presentation are different from, for example, the screens of a blog app or a social network. Therefore, designers can try various color pallets and combinations, different forms and shapes, interesting textures, visual effects or interface animation, original fonts or unique icons – anything that will support the clear visual perception of the data necessary for a user.

Colors and shapes

In the case of UI design for weather applications, there is no strict trend, requirement, or recommendation about using a light or dark backgrounds. It happens, for instance, with more copy-based products in which the aspect of readability is activated with the perception of the big amount of text: in this case, it could be recommended to try a light background to make the layout more user-friendly and text more legible. For weather apps and widgets, any combinations of colors, sometimes very unexpected, could work efficiently as far as they provide visual support for the data and enable the user to see and understand what they need in a fast and easy way.

Moreover, interesting combinations of colors and shapes can also provide a kind of aesthetic pleasure for the user that can become a reason to choose this particular product among the competitors along the personal user’s taste. So, the range of colors is perhaps one of the widest in this case of design work. The weather concept accomplished by Sergey Valiukh for Fuse has become a good case of practical example.

Weather App Screens 

Organization of the data on the screen is one more important aspect to think about. One of the fresh Dribbble shots by Tubik Studio designer Tamara features the organization of the data along the cards with the basic and additional information needed for the user. The user can choose the place (filtered as a city, region, country, and the like) and get the card which shows basic data such as temperature and weather characteristics (sunny, cloudy, cold, etc.) and additional data such as date and time according to the local time zone. It can be especially useful for users who travel a lot and need to know how to estimate their time and routines considering the local situation.

Weather Concept 

Graphic elements

Graphic elements for weather applications are among the most essential things to put time and effort into. Weather apps, as it was already mentioned, are highly visual, and data perception has to take seconds, so graphic elements should first of all be concentrated on increasing usability. A designer has to remember that this kind of app could be used on different devices, in different environments (bright or poor light around, for example), very often on the go. People with different levels of sight will need to use it. So, to be useful and usable, the app should apply graphic material which will be not only visually appealing and stylish but also easily perceived in various conditions.

Among the graphic elements vital for an efficient weather app, icons should be mentioned first. In one of our previous articles, we have already described the importance of elaborate work on this vital element of any interface. In the case of weather apps, icons have a great field of expression as they actually become highly informative elements. Being aware of this, designer Arthur Avakyan created the original set of weather icons for Tubik. All the icons follow the laws and standards of proportions and composition and will look recognizable and meaningful in different color palettes and combinations. Also, they all were tested by the designer in a range of sizes to check that their recognizability didn’t decrease in any case of use.

Weather Icons Set 

To represent how these icons work in layout, Valentyn Khenkin presented the concepts of a weather app seen on an iPad screen. It shows the location, the weather around – the temperature, pressure, and other details. The majority of screen space is covered by the illustration of the city, which creates a nice style and is recognizable as a support of the feature of location.

Weather Icons Presentation 

Weather App 

Interface animation can become a good way to liven up the graphic elements, as you can see in the animated interface by Sergey Valiukh. Animation adds movement and action, enhances efficient and fast microinteractions, and makes perception of the data even faster and somehow entertaining.

Weather App 

So, when designing UI for weather applications, designers have a broad perspective on their ideas and concepts, choosing different design solutions, and it is rather easy to move out of the box. However, any ideas made about the layout, graphic elements, and animations have to pursue the goal of creating a user-friendly, fast, and clear interface that could preferably have the great support of attractive and stylish looks.

Extensive discussions appear and follow the topic — and certainly, they will move on to the future — about the weather app design and finding the best solution that could be universal for everyone. Nevertheless, every day, millions of users, having different tastes and preferences, different favorite styles and characters, and different feelings of what feels comfortable and looks nice for them in particular, use this sort of simple app as a part of their routine. The more variants of looks and features are designed, the wider range of diverse options that endless target audiences will get to find the one that fits their particular needs and wishes. And that is, obviously, a user-friendly way.

Originally written for Tubik Blog

Check the gallery of weather applications

Сообщение Weather in UI Design: Tips and Examples появились сначала на Design4Users.

This time we are going to tell about one more logo design process which was accomplished by Tubik designer Arthur Avakyan for Saily app.

Arthur Avakyan creating variants of logo for Saily app

Task

Designing a logo of the mobile application for local user-to-user e-commerce.

Tools

Pencil sketching, Adobe Illustrator

Process

Lettering
Saily is a local community app allowing neighbors to buy and sell their used stuff. Therefore it is a kind of e-commerce app but with a solid communication feature. It is important to mention that the team which created the application puts a deep focus on design and culture at the core of everything they do. For the general UI design of the app, which was provided by Tubik designer Tamara, the client set the task of fun and entertaining feel and look. So, the logo had to follow the same requirements to create harmony with the general design concept.

Tamara working on UI design for Saily app

In this case of the design process, designer Arthur Avakyan started with the variants of lettering as it was initially the basis of branding for the app. Traditionally the process started with handcrafted lettering versions in which special attention was paid to the initial capital letter S as it could potentially be further used for the application icon.

Although the lettering looked nice and the designer tried to keep the consistent and harmonic image, the customer wanted to continue the search of the concept which would look more funny and cool to create the feeling of the user-friendly and far-from-formal product. So, the next versions provided by the designer tried the variants of new letter combinations, connections, and styles.

Here are the intermediate versions of digitized lettering which uses rather complex and elaborate lines and connections of all the letters into one integral image.

The next version presented lettering of the other style with simpler lines, less integral connection, which was provided in the previous version by linking the initial and the last letters. This version featured the initial letter S standing separate from the rest of the letters which was more logical in case of the decision to use this letter on the icon or another logo variant.

The client decided on the last version as the most readable and legible as well as flexible for developing further design solutions. The designer tried it in different colors and sizes to ensure that the font is easy to read and recognize in various environments.

Mascot

The second step of work on branding was the design of the corporate character as well as in our previous case studies for Ribbet and Tubik logos. This time the mascot was a ghost and it had the amazing legend behind it, supporting and explaining the aim of the application for the target audience in a funny and entertaining way. According to the original idea set by the creators of the Saily app, the friendly ghost is called Casper and he really suffers from the clutter in the people’s houses that doesn’t allow him to find a comfortable place to sleep. So, with the help of Saily app users are offered to sell their stuff which is unused anymore and free some space to make Casper happy.

Understanding the nature of the app and following the main requirement to make the mascot as cute as possible, the designer offered the first version, based on rounded forms and smooth lines, with a friendly and cute look, big eyes and wide smile as the most prominent details, having outlined body and hands. The image was inscribed in the square-shaped icons with various colors of backgrounds and mascot itself.

Although the general idea was caught, the client wanted to continue the search and try other forms and options to achieve a not only cute but also trendy look. One more variant presents other forms and images of the ghost, removing such details as hands and making the icon look simple and clear.

For another iteration, it was decided to try the version in which the ghost took all the form of the icon.  In this case, the designer also tried different color options as well as another type of facial expression.

The images looked stylish and interesting; however, one more iteration was included in the process. The creators of the app made a decision to feature not only e-commerce functions but also the strong element of gamification and a wide variety of illustrations to support the fun, cute and cool brand image. Considering this factor, the designer offered one more variant, which could be used in numerous and different backgrounds, fulfill diverse functional aims and also be used in the game with the same easily recognizable form. Thus, this version of the ghost was simplified, flat and rounded, and looked nice and stylish both inscribed inside the icon form and as the separate elements of any environment. This solution was accepted as the most universal and flexible for different aims.

To make sure that the mascot is efficient, it was tried on different backgrounds and with various color filling.

The accepted design solution for the corporate mascot was further applied in numerous illustrations used on the screens and in the game featured in the app. The design process for them will be described in more detail in our next case study devoted to UI design for the Saily app.

Saily app mascot ghost featured in the game

This case of logo design witnessed bright and diverse work on variants which would be not only bright and reflecting the nature of the whole app, but also flexible and for numerous aims, following the latest design trends and original to make the mobile app branding easily stand out of the crowd.

More Branding Design Case Studies

Quisine. Branding Design for Food Delivery Service

Logo Design: Collection of Creative Logos for a Variety of Brands

Dicey. Logo and Mascot Design for Party Game

MYWONY. Storytelling with Brand Intro Design

Inspora. Brand and UI Design for Virtual Stylist

AppShack. Logo Design for a Digital Agency

LunnScape. Identity Design for a Landscape Company

Binned. Brand Identity Design for Cleaning Service

Reborn. Identity Design for a Restaurant

Originally written for Tubik Blog

Сообщение Case Study: Saily. Designing Logo for C2C Ecommerce появились сначала на Design4Users.

Arthur Avakyan working on PassFold logo

Task

Logo design for a mobile application for tickets (passes) storage and management.

Tools

Pencil sketching, Adobe Illustrator

Process

As it was mentioned in the task, PassFold is the application for storage and management of tickets and passes bought online. Therefore, it was totally predictable and logical that customers wanted if possible to see the logo which would somehow feature this idea, preferably through visual connection with the shape of a ticket. Also, the customer and the designer agreed upon the direction of trying a combination of this shape with the P letter as the initial letter of the application name. So, these preferences and wishes were the starting point for the designer in this case of logo design.

As usual, the first stage of the process included the research of logos in this sphere of activity and business in order to avoid repetitions and feel the trends. The first variants included pencil sketches showing the process of creative search.

As you can see, the variants show different combinations of the capital letter P and a ticket in the vertical and horizontal placement. Even in the first sketches, the designer tried using colors so that the customer could imagine how it works. There were used the basic colors such as red, green and blue as well as some black-and-white versions.

Then there were three basic variants picked out for consideration, all being the combination of the capital letter with the ticket form. All three versions included a white letter and colored ticket: the green ticket drawn right into the big letter, the red ticket placed horizontally and creating the natural line for lettering put into the general composition and the black-and-white version with a bit different also horizontally placed ticket to see how it will work without other colors.

The customer liked the ideas of combinations but asked to try the other style of a different direction, closer to the origami concept, to compare and decide. That is how the origami sketches were made, also trying different colors and forms of tickets.

Even though this version was attractive and cute, the customer decided they wanted to have a more flat and strict structure of the logo, so the designer continued the search for developing the initial approach. It provided the concept of letter-and-ticket combination and finally gave the version which put all elements in the vertical combination featuring legible and clear capital letter but at the same time distinctly echoed with the ticket form. It worked successfully in different color combinations as well as in the clean stroke version.

The customers were satisfied with this version. To make it clear how it will look in different expressions, the designer also provided two mock-ups, both using the white version of the image. One of the mock-ups showed the stroke variant of the logo on the paper and featured it on the mobile screen with a colorful background.

The general concept was agreed upon and the logo got its basic image and idea. However, at this point, the process hasn’t stopped but paused for the time of general UI design. As we have mentioned in the case study devoted to PassFold UI design, the solution made about the logo had an influence on general UI elements. And in their turn UI solutions, especially about the color palette of the screens had influenced further design work on the logo, as it was tried in different colored versions so that it could correspond with other elements of the layout and look natural and nice.

Also, the logo was presented as the icon according to different variants of operational systems the application was adapted for.

This time all the logo design process passed in one breath. It was full of discussions and remarkably fruitful cooperation of the customers and the designer in search of the optimal version. Also, this case showed the importance of the tight connection between the logo and the other elements of the user interface as well as the general concept of the product. High attention to all the details provides the result which makes the pleasant-looking and efficient design of the whole product.

Originally written for Tubik Blog

Сообщение Case Study: PassFold. Designing Logo появились сначала на Design4Users.

Today’s case study is going to be a little different from the others because this time we are going to share the work we have done for ourselves. So let’s go together along the way of memories of Tubik logo creation.

Task

Creation of a logo for a design studio that works on UI/UX, responsive web design, interface animation, logo, and branding design.

Tools

Pencil sketching, Adobe Illustrator

Process:

The latest version of the logo and lettering for Tubik, which you can see today, is actually the third version of the studio logo. Being a design studio, which works not only on UI/UX and RWD but also on logo and branding design, means being attentive and sensitive to the trends of the market and feeling the time for the wind of change. Well, in our studio history this wind brought changes three times.

The first version of such an essential branding element as a logo was created by Sergey Valiukh and Valentyn Khenkin in the form of lettering with the main aim of making the studio name recognizable and easy to remember. It was accomplished according to the trends of that time when skeuomorphism was widely developed. It contained letters of the studio name that were separated from each other and each one had its own visual solution. Therefore, they followed the same style and simultaneously every letter was a kind of separate visual element being the original form of a letter with its own unique features. After the stage of sketching and processing the result in Adobe Illustrator, two variants were developed: the black-and-white one, in which the greatest accent was put on the unusual form of the letters, and the colorful one, which used a variety of colors. The colored version looked like a set of letters, each made distinct with a different color background.

The first Tubik Studio logo lettering, black and white version

The first Tubik Studio logo lettering, colored version

However, the time was changing, the team of designers was getting stronger, the trends in design were changing even faster. When the name of the studio was already recognized, the designers decided to create a new version that would contain both lettering and the mascot.

It should be said that the studio name has a history and there was a real mascot of the team. Tubik was the name of the dachshund dog belonging to the family of the studio founder and CEO Sergey Valiukh. Therefore, there wasn’t any discussion of what image was going to be used as a mascot. It was decided to be a dog, moreover, the breed had to be as recognizable as possible. So, after a short brainstorming session, the designers agreed upon the round shape for the mascot part of the logo and the lettering being strict and geometric. And since that moment the process of search started. Mostly, the job was done by studio designer Ludmila Shevchenko. She carried out the research of the competition and took into account the actual trends of design as a pitch for studio representation.

So, in the first versions of sketches, the designer did her best to work out as many different variants as possible in order to find a general concept.

The process of working out the concept of the logo

The full set of sketches for different stylistic versions of the logo image

As you can see from the set of sketches shown above, it contains solutions that are stylistically different. There was the option showing the attempt to combine the image of a dog with the image of the starting letter of the studio name (top left corner). Then there were variants trying the whole image of the dog, with its body and legs featuring the idea of movement. Some of them were fully inscribed into the shape of a circle while the others showed the movement of the animal with some elements out of the circle. Also, there were the variants trying the idea to show only the head of a dog in the logo. As you can find in the bottom row, there was the variant with a naturalistic image of the dog’s head. And some variants in a more geometric manner with strict and solid strokes were also developed.

Having discussed all the options and their potential to represent the company among loads of others, be recognizable, catchy and legible in different sizes, the designers opted for the geometric version of the dog’s head. It corresponded with all the goals and it successfully involved the elements making the breed of the dog clear. When all the details and nuances were agreed-upon, the technical work on a digital version of the logo started.

The lettering created to be combined with the logo also needed to be solid, geometric and easy-to-read both big and small.

Digital version of Tubik Studio logo mascot and lettering

The logo was successfully used by the studio and being clear and simple it corresponded to any cases to be used for. Mostly the studio used black-and-white versions of the logo, allowing coloring only in rare exceptional cases when it was unavoidable.

Following the latest trends of web design and working on loads of tasks for design and redesign of different websites and applications, the CEO of Tubik Studio Sergey Valiukh also launched the demanding process of a thorough redesign of the studio website. When most decisions for the website were made on UX/UI, styles, color palette and visual details, it became clear that the logo and lettering also needed redesign. They worked efficiently for the company, however, they didn’t correspond with the general style and concept of the website. Therefore, the third edition of the Tubik logo had to be born.

This time lettering was the first element to be worked out. Tubik Studio designer Arthur Avakyan being already experienced in creating lettering for logos got this part of the thorough and sophisticated job. The version on which the team stopped was absolutely different from the previous one. This time the lettering was smooth and rounded with graceful connections of all the letters into one integral composition. After accepting the general concept and style, the lettering was checked in different colors, sizes, and resolutions to make sure it was legible in any case.

Working out new lettering composition for Tubik Studio logo: from rough sketching to clean digital version

Due to these changes, the mascot logo part also had to be reconsidered. Being very important for the company, these changes brought all the team together in the big brainstorm session where various options and details were discussed by the whole team. It was real teamwork and after that, all the designers worked on various sketches and styles to work out as many variants as possible. Although in search there were interesting solutions reflecting the whole dog image or some new elements such as the dog’s paw trace, in the process the team decided not to change the general idea of using the dog’s head for the mascot representation in the logo.

Brainstorm session at Tubik Studio

There was also an attempt of combining the shapes so that the shape of the dog image reflected the shape of the capital letter T in the lettering.

T-concept of the mascot image

Although this variant was interesting and original, it was somehow losing the elements reflecting the breed. Moreover, testing showed that in smaller sizes, for example, used in the header of the site, it could be even hard to recognize the animal as a dog immediately. The option could be confusing and didn’t correspond with the company’s aims and wishes. So, the path of search had to be continued.

Working on the final version, the designer Arthur Avakyan tried different versions of the dog heads. The strokes of the image had to reflect the smooth and graceful character of the lettering so keeping that track the designer tried variations of shapes and length for noses, ears, and other visual elements. All the variants were tried in colors used as basic for the site.

Trying new variants of the mascot in colors of Tubik Studio site

Finally, having a more or less clear vision, the designer also decided to try the variant which would make the image more dynamic. That’s how the image with the head directed a bit upwards was created.

The dynamic version of the mascot image

The designers of the studio tested the version in different color schemes, sizes and resolutions both separately and together with lettering. Thorough testing showed that this version worked the best that’s why this variant was accepted as the final one.

A new and previous version of the logo in comparison

The final version of Tubik Studio logo

The process of creating a logo is always highly creative and intensive. The designer has to go through loads of ideas to create the one which would satisfy multiple needs. The creation of the Tubik logo was a result of great teamwork and deep attention to detail. It is always vital to remember that the logo is not just the image, it’s a symbolic representation of the company, therefore, its design needs not only inspiration and art but also research, analysis, hard work, and rigorous testing.

Originally written for Tubik Blog

Read more about basic types of logos and logo design stages, learn when and why an animated logo is a good idea, and check the collection of inspiring logos mastering negative space usage

Сообщение Case Study: Tubik Studio. Designing Logo for Digital Agency появились сначала на Design4Users.

Being a symbolic sign, logo is one of the most important parts of a company or project identity. It should combine lots of magic ingredient of success: pure and distinctive shapes and colors as well as the overall image being both original and meaningful. A designer assigned to create the logo gets a very responsible job and has to get through lots of ideas and updates before the creation of the final version satisfying the customer.

The designer for Tubik Studio Arthur Avakyan is already experienced in such things so he always considers lots of those issues and he did the same working on the logo for Ribbet project

Tools:

Pencil sketching, markers, Adobe Illustrator

Task:

Designing the logo for the online photo editor with a wide set of tools.

Process:

The designer started working out the idea of lettering compositions that could be used for logo style.

First sketch variants of new lettering

Lettering processed in Adobe Illustrator

However, the customer wanted to use the visual elements that would be associated with the mascot of the company. The word used as the name of the company — Ribbet — is one of the variants to express the sound made by a frog or a toad, so the image of a frog has been originally the mascot of the company. They wanted to preserve it in the logo in order to create the consistency with other visual elements of branding as well as the name of the company. Having analyzed the experience of the other competitors on the market, they came to the conclusion that it would work efficiently and would create better web-presence. Being widely functional, the service lacked in the style which would distinguish it from the competitors. So, it was agreed to create the variants combining lettering with the visual elements reflecting the mascot.

It should be said that the logo was created in tight and deep connection with the whole concept of the Ribbet site design. Tubik Studio has been working with this customer on the general design of the site and that was the reason why the company decided on creating the logo which would correspond with the general conception. By the way, that was a very efficient decision as the designer creating the logo was able to work together with designers developing overall redesign of the site at all the stages of the project. Very soon the users will see an absolutely new version of the Ribbet site style.

Originally the company didn’t have a visualized logo using any image — they used only a lettering composition reflecting the name of the site. So, the task was to create a unique logo which company could use in all its products and social networks profiles.

Therefore, as the online graphic editor already had the general style of the site developed and it included mostly dark colors and shades with some blue color accents and was quite strict, elegant and serious, the concept of the logo had to correspond to it. The website was totally redesigned and the lettering used for logo needed fully new concept too.

Trying to get away from the previous idea, the author offered a neat geometric originally made lettering composition.

Trying new versions of lettering in the redesigned style of the site

When the customer asked to develop the idea of the visual element showing the mascot, the first variants of visualizing the frog were based on the image of a frog’s pad, but they didn’t seem really clear to make necessary associations with a frog in different sizes, so the designer decided to try other variants.

The variant of visualizing the mascot with the image of a frog’s pad

All first versions were created by means of traditional pencil sketching aiming to keep elegant and serious stylistic features. At the same time, the designer worked on the other version of lettering, more gentle and rounded than the previous.

First sketches visualizing the company mascot for the logo

The combination of new visual elements with the new style of lettering

The collaboration with the customer was kept first of all through revision of the sketches and afterward if those sketches had been approved, they were processed in Adobe Illustrator.

The first version of the frog seemed to be a bit complicated for the customer so they asked to simplify it by eliminating some details and making the image clearly perceived. There was created the variant with the half-head of a frog, which was not clearly associated with the frog so it wasn’t accepted.

The simplified version of a half-head frog image

Combinations and versions of lettering and images of a frog with different details and shaping

The customer asked to add a little fun and joy to the image so that they could see if the character will work. Taking this into account and meeting the customer’s wish, the author added some details, trying to play out a smiling mouth.

The emotionally marked character of the mascot in combination with various lettering styles

The version was rather stylish; however, it didn’t match with the whole stylistics of the site, so this variant was put aside on the agreement of both the customer and the designer. The task became more distinct: to create a more natural image of the frog adding some details, as the practice showed that oversimplified version could confuse a user and prevent the customers from achieving their aims.

The customer selected and showed the samples of real logos which they liked and thought appropriate in the perspective of brand identification. Those samples showed that the main accent should be still put on lettering. After creating and reviewing numerous variants of lettering the customer and the designer agreed on one as the best version.

Working out sophisticated lettering versions

Then there was a long and thorough process of specifying the details to the approved version, such as lengthening/shortening or moving some strokes and elements. There were tons of tiny but really numerous corrections and alterations in order to get the most harmonic version. It is natural as the logo was based at purely original and uniquely created lettering. At last, the final version was agreed upon.

Thorough work on details in the final version of lettering

Nevertheless, the designer didn’t forget about the customer’s desire to visualize the frog as the mascot of the site. So, the designers of Tubik Studio got together at brainstorming session and developed the idea of using previous images of a frog and animating them in a functional feature of preloader.

Brainstorming session in Tubik Studio

The final image of a frog animated for a preloader on the site

In addition, there was created a simple and rounded variant of a frog image which could be used together with the lettering or independently.

New versions of visualizing the mascot for logo

Various combinations of lettering with the image of the mascot

So, it can be seen, that the designer has made great efforts to meet all the needs and wishes of the customer, that is why his work was highly appreciated by the customer. In a while, all the work on the website redesign by Tubik Studio together with the new logo will be presented to the users of the Ribbet service.

The final version of Ribbet logo

This case has become one more example showing how many attempts should typically be made in the process of logo creation. The designer has to do his best and be always ready to listen carefully to the customer. In addition, it is vital to be ready for research and deep analysis of existing products in the sphere in order to create original and highly competitive product satisfying customers, increasing brand identity and attracting users.

Originally written for Tubik Blog

Сообщение Design Case Study: Ribbet. Logo for Online Editor появились сначала на Design4Users.