Creative Workspace

No secret workspaces have a great impact on productivity, creativity, focus, and inspiration. And that’s also the aspect of great diversity: some of us need a clean and minimalist environment while others strive for tons of inspiring bits and kits, plants, or books. Inspired by the theme, we’ve created a set of illustrations showing the diversity of creative workspaces.

Artists’ Universe

The more you dive into art, the deeper it feels like a sort of endless and impressive universe, with each artist presenting a particular star or even galaxy full of amazing discoveries. This illustration collection aims at opening this universe a bit via the powerful and inspiring artists representing different cultures, epochs, and styles, but all having lit their own immortal stars.

The bright Mexican painter Frida Kahlo

The pioneer of impressionism Claude Monet

Maria Prymachenko, a Ukrainian village folk art painter, a famous representative of naïve art

René Magritte, a Belgian surrealist artist well-known for witty and thought-provoking artworks

Gustav Klimt, an Austrian symbolist painter and one of the most prominent members of the Vienna Secession movement

Salvador Dalí, a Spanish surrealist artist worldwide famous for his technical skill as well as striking and bizarre artworks

Vincent van Gogh, a Dutch post-impressionist painter, one of the most famous, productive, and influential figures in the history of Western art

Black and White Artworks About Design Studio Life

Here in Tubik, we know the ins and outs of different sides of the design process, the power of teamwork, and the importance of concentration. As well as the work-life balance issue, so much thought out by creative people. Here’s a collection of catchy and daring monochrome artworks devoted right to that topic.

Geometric Art of Design

Artists and designers know well that all the world around is full of geometric diversity. This collection of digital artworks also touches that theme: the illustrations are spiced with the geometry magic and reflect different aspects of the design process.

Curious Cat and Creative Process

This set of illustrations is dedicated to various stages of the research and creation process. This series has a mascot character uniting all the episodes into one line of visual storytelling: meet the curious and clever сat going all the way from a question to the solution.

Question and problem statement stage

Research stage

Systematization stage

Analysis stage

Hypothesis stage

Solution stage

Mixing Styles

Collaboration on a creative project is never a simple thing, as sometimes it has to crush together different visions and approaches to get a wow result. This set of artworks is inspired by that theme and based on the creative illustration at the crossroads of different styles and dimensions.

All designers strive to experience that moment of zen when everything in their design is harmonic, balanced, and eye-pleasing. Even if that’s just a short second before the next round of polishing, perfecting, and upgrading. Catch that feeling with the illustration below.

Don’t forget to take creative breaks to avoid creative blocks – that’s the idea behind another illustration from the set.

Design in Progress Illustrations

Here you’ll find a pack of diverse illustrations devoted to different work styles and setups: from individual work to teamwork, from working from home to office vibes, from freelancing to studio design.

Getting into work from home

Teamwork mode

Research stage in the user experience design process

Communication as an integral part of designers’ job

Backstage of freelancing from home

Teamwork uniting the superpowers of different colleagues

Starting a design day from the client’s feedback

Diving deep and focusing

Working in the quarantine mode

New illustration sets are coming soon, don’t miss them.

Illustration Collections and Digital Art Case Studies

If you want to see more collections of illustrations or discover how they work in particular design projects, here’s the set of posts for you.

Fulfill. Illustrations and Web Design for 3PLs Marketplace

Roebuck. Mobile Design and Illustrations for Educational App

8 Bright Packaging Design Projects Employing Illustration Art

Bikker. Identity Design and Illustrations for Biking Service

Animal World: 4 Beautiful Illustration Sets About Wildlife and Pets

Book Illustrations for Visual Storytelling

In Search of Illustration: Design Process for Illustration Set

ABUK. Custom Book Cover Design for Audiobook App

Moonworkers. Digital Illustrations on Film Production

MYWONY. Storytelling with Brand Intro Design

Tubik in Paris. Design Process for Narrative Illustration

Originally written for Tubik Blog, graphic content by tubik

The illustrations in the post belong to Tubik and cannot be used by other resources without a link to the source.

Сообщение 40+ Inspiring Illustrations About Art, Workspaces, and Creative Life появились сначала на Design4Users.

We’ve already touched upon the topic of wireframing in our article about creating mobile applications, and since the topic remains actual and debatable, this time we want to devote the full article to the roots, nature, benefits and diverse issues of the wireframing process as well as the reasons why it’s advisable for designers to apply it.

What’s a wireframe?

Wireframe is a simplified and schematic visual representation of a layout for website pages or screens of an application interface. Wireframes are similar to architectural blueprints: they are usually black and white illustrations, sometimes with bright marks or spots to outline specific areas or points, that give a clear vision of the project structure and connections between different parts.

Wireframing is effective at the beginning of the design process when the main objective is to create the product’s structure. Designers use wireframes to outline visual and typographic hierarchy on user interfaces, set the interactive zones and elements, plan transitions and interactions, organize the general interface clearly for the target audience. Since a wireframe is focused on the structure, not the visual and emotional perception of the details, designers try to keep it simple. They mostly limit it to monochromatic color schemes, with boxes and lines representing copy, pictures, and all the interactive elements on the page.

Example of UX wireframe for HealthCare App

Earlier we presented the typical creative flow for the digital product we have here in Tubik by the example of creating mobile apps and mentioned the set of stages in this process:

• setting the task and initial scope of works
• estimation
• user/market research
• UX wireframing
• prototyping
• UI design
• animation
• software architecture planning
• iOS development
• testing
• release
• updates.

According to this list, it’s easy to see that UX wireframing is not the first stage of digital product creation, but it’s usually the initial phase of actual design when the future website or application gets its first visual presentation, the sketch of its face and figure. The chances are high that the actual participants in creating digital products would agree with the idea offered by UXPin team in their book on wireframing: “Whether you’re building the next hot startup or a solid website or mobile application, wireframes are invaluable in keeping everyone on the same page – not just product managers, designers, and engineers. And they can be changed really quickly to accommodate the collaborative and iterative nature of product design and development, especially in agile startups and enterprises.”

Why do you need wireframing?

Wireframing is a fast and cheap way to plan the structure of the page or screen design. What’s more, it gives numerous advantageous opportunities not only for designers but for the whole development team and for clients too. First of all, a wireframe is the first visual representation of a designer’s abstract idea. This step ensures that the developers and the clients get a clear understanding of the project’s design. Furthermore, in case the client wants to make some changes, a wireframe is much easier to reshape since it doesn’t take much efforts and time to create one.

The other benefit a team gets from the wireframes is that developers can clearly see the placement of the elements on the page. Some software for creating wireframes allows seeing all the sizes and spacing by clicking a single button that saves time for both the designer and the development team. In addition, wireframing is quite inspiring for designers. It is flexible and provides much room for experiments which makes the creative process more productive and presents the field for fresh outstanding solutions.

In one of our previous articles, we provided a bit of metaphor on the basic reasons why wireframing is always included in creative process here in Tubik. When we think about building the house, for example, we usually mean the process of the physical appearance of the construction rather than tons of projects, drawings and calculations made on paper. And yes, physically it’s possible to build the house without any project as well as it’s possible to create the interface out of thin air. However, in this case, you shouldn’t be surprised if one day the house will crack and collapse without any visible reasons as well as the app looking amazing and stylish won’t bring you any loyal users. If you want to have a reliable house, a durable mechanism, a powerful application or a highly-functional website, the recipe is the same – take your time for thorough planning and projecting. This is not going to waste your time: vice versa, it will save your time and effort you would otherwise have to spend on the redesign and attempts to find out why your product doesn’t work properly.

All in all, wireframing is an effective tool that can save time and money for both the team and the client. It helps organize development and design processes and reduce the chances of problems on future steps.

Types of wireframes

There is an opinion that a wireframe is exceptionally a low-fidelity paper sketch of the page structure with boxes and lines illustrating visual elements. Nevertheless, today modern technologies help designers create wireframes of different fidelity level within a short time and without great effort. Typically we can define 3 widely-used types of wireframes.

Low-fidelity wireframes. They are black and white illustrations focused on a “big picture” of the page. UI elements are shown as boxes and lines without detailed annotations. The wireframes of this kind are quite abstract, but they give a chance to see the basic structure of the user interface.

Medium-fidelity wireframes. This type is created in a monochrome palette, often gray-scale which makes it similar to the previous one. The wireframes can be created both manually or via digital tools so that the UI components are more detailed and realistic. Copy elements such as headlines and headers are distinguished that assists to establish typographic hierarchy. Placeholders are filled with images and the comments describing their destination.

The UX wireframes for SwiftyBeaver project

High-fidelity wireframes. These wireframes are created via digital tools. The core difference from the other types is that high-fidelity wireframes are built in color and present the screens in the view close to the final visual performance. The fonts are styled and visual elements are created with textures and shadows. The designer pays more attention to the sizes and alignment of UI components. It’s actually the static version of the app or website presented page-by-page or screen-by-screen. So, in distinction from the previous stage, they are called UI wireframes.

UI Wireframes for Saily App

Wireframing vs Prototyping

High-fidelity wireframes tend to be often confused with prototypes because they are created in colors and look realistic, similar to a fully accomplished project. Nevertheless, these concepts present different stages of the design process, have different aims and focuses. As we’ve already mentioned, wireframes are focused mostly on the structure of the page. On the other hand, prototypes are created to give a more detailed look at the UI elements, their style, and alignment: the biggest difference is that prototypes give the opportunity to test the interactions between the user and the interface similar to the final product. As we mentioned in UI/UX Glossary, the original concept behind the term ‘prototype’ is the sample model of the product that gives the ability to test it and see if the solutions and decisions made about the product are efficient. However, prototypes should not be seen as the analog of the final product as they aren’t those: their main aim is to enable a designer, a customer, and a user to check the correctness and appropriateness of the design solutions.

Interactions need to be thought out well and similar to the final result and checked thoroughly before the development team starts their work. Making alterations, adding elements, and changing transitions is much more time-consuming and expensive at the stage of development, that’s why it’s important to check the usability of the UI elements in advance. Prototyping is much more efficient and useful as the step between UX design and UI design. So, here in Tubik, we support the workflow having the sequence «UX – prototype – UI».

The prototypes on UI stage can be created for the presentation of application general looks rather than for testing and improving its functional features. And this is the trap in which it is easy to get confused. Prototyping all the details on the final stage of UI in most cases is not so reasonable as it could seem. It can be too time-consuming and in this perspective, it would be better to spend the same time on coding a demo-version. Moreover, usability should be thoroughly checked first of all at the UX stage, otherwise, it would be much harder to change inefficient solution after having accomplished a lot of work on UI. Certainly, it would be amazing to create prototypes both for UX and UI, but by far not all the designers and customers agree to spend so much time on design tasks and want to test and improve the design much faster and cheaper. Anyway, the solution of applying prototyping at different stages of UI process should be approached individually according to the requirements and goals of every particular case.

Prototypes are created on the basis of the static wireframes, making them clickable and interactive, so the designer can try out if the interface is clear and usable for a real user. This kind of testing is a key step in the design process because it allows identifying possible problems and difficulties with user interactions. There are various prototyping tools providing functionality on checking the usability of the design solutions, and research platforms which make the process even easier.

Efficient wireframing tools

Today, designers are not limited in the aspect of choosing tools for wireframing: there are plenty of them, free and paid, to set up the productive design flow. The number of tools is growing so fast that it’s easy to get lost among them.

Wireframing is an integral part of the design process here at Tubik, so our designers need a flexible and effective tool for creating wireframes that can be effective both for individual and complex team tasks. The long path of probes has led us to Sketch.

Sketch is a professional design software that allows creating the variety of art and design projects. The program is vector-based and gives the opportunity to work with layers and shapes which can be easily manipulated via the tools panel. Sketch is an effective tool for UI/UX designers because it can be applied at different stages of the design workflow starting from wireframing. The features which we see as advantages are quite convincing.

It’s vector-based. This means designers can use vector shapes and scale them without losing quality. Moreover, the artboard is still pixel aware which is a core thing for creating quality web and app design.

Effective guidelines. You can see dimensions of the components and spacing between them only by holding the alt key. This is helpful not only for designers but also for developers. When designer shares the wireframes with the development team, they can define the placement and details of UI components and layout without designer’s explanations.

Grids. Unlike many other tools, Sketch provides the inbuilt grid feature that saves designers’ time since they don’t need to create it beforehand.

Native font rendering. It often happens that fonts in a browser look absolutely different compared to the PSD and it ruins the whole picture. Nevertheless, Sketch uses native font rendering that makes fonts feel more natural and accurate in browsers.

It’s fast. Sketch is a tool oriented on web and app design, so the functionality is more concise compared to other software in the field. This makes it lighter, so it works much faster not overloading the computer which saves time (and nerve!) for designers.

Yet, there is one specific feature about Sketch: it works only on Mac and there are no exceptions. Nevertheless, if you don’t have one, you shouldn’t give up. There is still a classic option – Adobe Photoshop. Yes, it may work a bit slower but it is an efficient tool for creating wireframes, and many designers are sincerely linked to it as a multipurpose tool. Moreover, you should remember that not all the customers are ready to accept the assets in Sketch, so Photoshop will save the game in this case. It proved itself as an efficient tool. Among newer options, the star of Adobe Experience Design (XD) is also rising and winning its positions on the market and in design flows.

And, for the last point here, if you are keen on creating interactive high-fidelity wireframes, you’ll need additional tools to make them clickable prototypes. For this stage, we could single out InVision and UXPin: these tools help to add the interactivity to wireframes creating efficient samples for gathering feedback from the team and clients.

Tips on how to make your wireframing efficient

There are no big secrets about creating a quality wireframe still some tips on how to make it more productive can be mentioned for the bottom line:

Do thorough research beforehand. Do not start the wireframing process before you outline the goals, USP, target audience, and the problems which should be solved with the product.

Keep them simple. The aim of a wireframe is to create a structure of the page design, details go after.

Use a monochromatic palette for UX wireframes. Our experience proves that the design process is more productive if the designer leaves detalization for the next step.

Write annotation. If the designer plans to present a wireframe to the team, it would be good to include annotations. They help to catch and understand the ideas quicker and deeper.

Gather feedback. Try to ask the opinions of your team members and perhaps even potential users, if possible, at this stage. It is an effective way to improve your work and save your time for later stages needing a more sophisticated design.

Use a grid. It helps to place all the components in an efficient way for users’ perception.

Recommended reading

Here is the collection of recommended materials for further reading in case you would like to read more on the theme.

The Guide to Wireframing (E-book)
The Wireframe Perfectionist’s Guide
Using Wireframes to Streamline Your Development Process
What is a Wireframe: Designing Your UX Backbone
Jargonbuster: mockups, wireframes, prototypes
What’s the difference between wireframes and prototypes?
10 tips to improve your wireframes in the web design process
9 Free to Use Wireframing Tools

Originally written for Tubik Blog

Сообщение UX Wireframing: Foundation of Usability появились сначала на 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.

What is the ideal process of UX/UI to make the product viral? Designing various products here in Tubik Agency, we usually avoid talking about anything ideal as it is quite a contradictory category. However, we are keen to share our ideas about making products viral on the stage of UX/UI design.

What is virality?

Virality is the concept behind which we understand fast and easy self-promotion of the product among users. Like a kind of infectious disease, it spreads from one person to another other, and no special efforts are needed to support this process. Organic growth of this sort of product is coming from recommendations and sharing. Making the product viral is the dream of any customer who sets it on the market and, therefore, any designer who is keen to create something successful and widely known.

Initially and traditionally, production of this “gene of virality” and “infecting” the product with it was entrusted to marketing specialists and advertisers. They analyze the target audience, research the market and develop the strategy according to which they directly or indirectly stimulate the users to share the product and create a solid presence on the market. In the sphere of promotion, it is a well-known law that the best advertising is word-of-mouth, one that is based on personal recommendations. The strategy and means of making the product viral can be thought out and agreed upon not only when the product is created but also much earlier, in the stages of its physical or even conceptual creation.

Nevertheless, now virality goes far beyond the marketing process, especially when it comes to web and app design products. Practice shows that there are some things to consider and some mechanisms to apply in the process of UX/UI design in order to make the product more or less viral, which means promoted by users and therefore saving time, money, and efforts on marketing.

Pre-design (UX ideation) stage

Any designer knows that predesign stage is as important as the time for actual work on design creation. Design should be based on solving problems and giving positive experience, so it’s not only visual but also a psychological thing. This stage is vital for any kind of product, but if you have the aim to make your product viral, it requires even more attention and deeper analysis. So, here is a list of some things to consider at this stage in the aspect of the potential virality of the product.

1. Find the key features and start with them

The mistake of some products which haven’t become really successful and widespread is the attempt to solve a lot of problems at the same moment. This way is not only really complex and needs much deeper analysis at the pre-design stage, but also can be a bit confusing for the users, who sometimes will not be able to distinguish the real aim of the product at once. So, first of all, define clearly who is your core target audience, what is their major pain and how to help them. Don’t become the hunter who tries to kill two birds with one stone; otherwise, it’s easy to forget about virality, although you may create a great multifunctional product. It’s better to add functionality and expand your target audience step-by-step rather than to start everything together at the same moment.

Book swap app

2. Analyze the target audience and their potential emotional response

When you have defined your target audience, and you want to make them promote your product through word of mouth, you should touch their souls and feelings. You will make people tell about the product if you create a strong feeling about it. Therefore, you should analyze their needs and typical demographic characteristics to create a noticeable emotional response that they would like to share with others. By the way, this response can be absolutely different depending on the aim of the product: you can awe them, shock them, scare them, inspire them, enchant them – any strong feeling will encourage the user to tell someone about the experience, to share it with others.

Music player concept 

3. Support a simple and original idea that unites people

There are a lot of practical examples of how simple ideas based on some widespread needs, wishes, or hobbies rocketed to success. Take Instagram, which started as a simple service of sharing photos for those who like this type of presenting themselves, or Pinterest, which started as a simple storage for interesting links. Now they are large-scale multipurpose services not only for personal but also for business needs, but they started from very basic needs which a lot of users could not satisfy in a fast and easy way. It is vital just to find the problem which makes a lot of people suffer, and they will unite around its solution.

Singify App

Saily App

4. Create a unique solution to the wide-spread problem or issue

There are two effective ways to make your product fast promoted, but they are first of all based on your decision if you are aiming at long-term or short-term perspective. If you want to create a long-term product that is going to become viral, then your way is to think about the problem globally and create the original product solving the widespread problem. It will take more time and effort, but it also creates a long-term prospective way. On the other hand, if you want something that will make your name with less effort and quicker spread, there is one more way: you can find drawbacks and bugs in existing popular products and create solutions for them. This is usually the short-term perspective, but it can be helpful to get well-known on the basis of already promoted products.

In both cases, it is important to concentrate on originality, not copying. Don’t try to create a second Facebook. Try to find the first your own product or at least a feature that solves a problem which earlier couldn’t be solved or can make previous solutions better, faster or easier and people will do the promotion for you.

Contact List Concept Scroll

5. Think over the element of fun and entertainment

People love when they are offered not only deeply serious things but also the element of the game or fun. Even highly scientific or business-like products can contain some elements of fun, which will make the product more widely discussed.

Cafe Coupon App

Green Spy App

6. Create the need of using friends to achieve user’s own goals

This is one of the most efficient techniques, which approved itself in numerous cases. When you create a great product, its quality can make people talk about it, and it will attract some attention. But if you promise the person something useful and beneficial, they start acting to satisfy their needs and at the same time, attract new people to use your product directly. It can be more space in virtual storage, some exclusive bonuses in the games or discounts on the goods – anyway, it will make users work as your most powerful weapon of product promotion.

Event app concept 

Singify App tutorial

All the mentioned points would better be decided and agreed upon before you actually start the process of UX/UI design so that in this stage, you could polish your strategy by tactic steps.

UX design stage

In the process of UX design for the potentially viral product, your main aim is to create as positive a user experience as possible. Actually, it is required for any UX, but for the viral one, it’s vital. And you can make it with the following steps.

1. Create the illusion of the choice

Users don’t really like when they feel that they are forced to do something. To make the experience pleasant, you should think about how to create the illusion of choice, sometimes even in obvious things. Users should be guided invisibly through the thought-out navigation and layout, but at the same time, they should feel that they are real decision-makers at any step of the way. The absence of this feature can be dangerous for the virality of your product.

2. Think about the feeling of the game

Games can be different, and they are not only for kids. Sure, the more serious the product is, the more hidden the element of the game will be. It is up to you, what part of your product will be infected with the direct or indirect gaming virus, but if you think about this sophisticated thing, it will work for you in spreading the product.

Moneywise App

3. Give the product heart and soul

We can often hear that designers should put a part of their soul into the projects they are working on. And that is not a joke, especially when it comes to potentially viral products. When the designer gets deep into the task and tries to solve it as if it was their own problem, when designers look into the user’s problem and penetrate into it, it always gives the products of high-quality, user-friendly, and pleasant UX. Users don’t only use the product, but also feel the product, its temper, and its energy. And when the designer creates it cordially, not only mechanically, the user will feel and appreciate it.

Museu Landing Page

4. Provide necessary functions right when they are needed

This may be the main point to consider at the UX stage of the process. It is essential to analyze not only the whole concept of the product but also all the steps that users are going to take. This is the time when user stories and cases are going to be extremely helpful. When you think over them, you will be able to bring forward the features at that very moment when they are most needed. And it will inevitably create a positive experience that deserves to be shared with other users through positive recommendations.

Healthy Food App

5. Make the connection with social networks fast, easy and solid

Social networks are the great basis for the virality of a product, so it’s vital to think if they are going to deal with it and how. You can (and should, if possible) simplify the sign-up and log-in procedures with social networks; you can think about how to encourage people to share their achievements or inform their friends and followers about using your product. It will create a strong and various web presence and will open the door to the viral promotion of the product.

Echo project

Blog App

UI design stage

The UI stage is more about the visual representation of the web or app product, so it’s easy to think that there’s nothing to do here because the most important basics of virality must have already been completed at the UX stage. However, there are a lot of important points which can expand and enforce the virality of the product at this stage. And we see them as the following:

• Make the product stylish and good-looking
• Ensure the interface is not overloaded
• Review and iterate to obtain the most efficient solutions
• Prefer UI elements which are simple, clear and original
• Create unique and recognizable visual feature (including icons, mascots, characters, and so on)
• Include interesting animation and transitions
• Provide an intuitive interface and natural interaction
• Include high-quality graphic elements

Dynamic Scroll

Timeline App

Fresh and funny button animation

Book Swap App

Sports App

BuonApp

At this stage, it’s very important to think of high-quality graphic elements, including the smallest ones. Depending on the nature of the product and target audience, you may use interesting illustrations, nice photos, funny characters, and the like to make the website or application visually appealing so much that people will be keen to show this “So nice! So cute! So stylish! So beautiful” something to their friends or colleagues. The traditional exchange like: “Have you seen that funny cat in the new calculator on PlayMarket? No? Still no? I can’t believe it, it’s so cute!” is able to virally promote the product even when it has no incredibly unique solutions to global problems.

Potential trap: utility vs good looks

When you consider how to make the product viral right from the first steps of creating and designing its concept, it’s easy to get into two well-known traps. One of them is to think that virality is the feature of only useful products, i.e., visual representation doesn’t matter. The opposite side of this fight says that only visual features really matter when you want to make your product viral. As you can assume from everything mentioned above, we would recommend keeping the balance and finding the happy medium. That is why it is important to think out and include different tactics at all stages of the design process. That doesn’t mean you have to apply all the positions mentioned above in one particular design process, as the choice of techniques depends deeply on the nature of the product and the target audience. However, thinking over all of the positions and applying those which are appropriate will bring massive results in the aspect of virality. As practice shows, only in this case, your product will get truly viral through utility, usability, and pleasant looks. All of these features will bring out desirability, which is so important to make people want to share the product with others and promote it this way.

Useful Articles

Here’s a bunch of articles to dive deeper into the theme of web and mobile user experience design

User Experience Design: 7 Vital User Abilities

How to Design Search in User Interfaces

5 Basic Types of Images for Web Content

UX Design: Types of Interactive Content Amplifying Engagement

The Anatomy of a Web Page: 14 Basic Elements

 10 Reasons to Apply Illustrations in UI Design

UX Design: How to Make Web Interface Scannable

Negative Space in Design: Tips and Best Practices

Motion in UX Design: 6 Effective Types of Web Animation

Types of Contrast in User Interface Design

5 Pillars of Effective Landing Page Design

User Onboarding Design: Practices and Tips

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

Сообщение UX Design to Make Your Product Viral появились сначала на Design4Users.

In our article about illustration potential in user interfaces, we have already mentioned mascots and characters, providing some general ideas on how their implementation can improve UI concepts as well as become the foundation for solid and strong branding. So, today let’s analyze in more detail what are the advantages and secrets of mascot magic and when they are applicable.

The essence of a mascot

Mascots are images, usually personified, which in most cases represent the brand, product, or service identity and therefore become its symbolic convention via the whole application or website as well as the branded items and promotional activities.

Andre Landscape mascot concept

Mascot becomes the element of identity and inter-connector between the user and the product. In many cases, the mascot is the basic element of communication and interaction; therefore, in different states, it can become the basic way to deliver the message to the user.

The business practice of successful companies shows that thoughtfully designed mascots 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. Mascots push the limits of personification and give a chance to create unexpected combinations of elements or make fantastic and non-existing characters alive.

Designing mascots for our numerous customers as well as our own studio brand, we have already checked their great power as a multipurpose and comprehensive design element. 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.

Saily mascot design process

Advantages of mascots

Let’s see what the important practical advantages of mascots are applied in branding and content strategy.

Memorability

People tend to remember substantial and actual images much longer than abstract ones, and characters reflecting human-like features are the favorites of this technique. No doubt, it can have a significant influence on the level of brand awareness.

Recognizability

Mascot can become a strong element of an original and unique piece of the content presenting a particular product or service. A well-done analysis of the target audience, as well as a sophisticated and thought-out design, can provide the brand with an important element making it recognizable in seconds. This advantage is also directly connected with the previous one. As long as it is easier to remember the mascot, it is also easier to recognize the product and its features, among others.

Visual marking

Mascot allows marking visually anything connected with the product creating an additional field for promotional activity. A mascot can work as a logo, transform into illustrations, elements of gamification, printed stickers, and every time, it will support a strong visual connection with a brand.

Personalization

As has already been mentioned, users usually appreciate the element of direct communication and personal attention to them. Mascot is one of the best ways to provide it. It can communicate directly with the speech bubbles, provide visual prompts via various facial expressions, reflect the mood of the user with different graphic variations of the mascot, provide helpful instructions in the tutorial and congratulate the achievements. There are hundreds of ways to strengthen the element of personal communication using mascots. For users, it can make a big difference, especially in cases of interaction: communication with a particular character often provides a much more positive and dynamic user experience than impersonal instruction sent by the system.

Stylistic support

Mascots, being a highly flexible element, can become a central part of the general style concept for the product. It is easy to send the key message to the user via mascot: it won’t take long to understand if the product is serious or entertaining, lively or calm, business-like or easy-breezy, highly private or broadly social, and so on and so forth.

Product voice and tone

In combination with the previous feature, mascots can play a great role in supporting general tone and voice, which is the basis for a branding strategy. Mascot usually reflects the most important feature of the product and transfers the idea much faster and in a user-friendly way. Moreover, it often gives a chance to avoid long copy bulks in product descriptions enabling visual perception of information which is by far faster than text perception.

Onboarding tutorial for Singify

Emotion and interest trigger

Dealing with users, we all should remember that they are unique individuals, unique inner worlds full of their own emotions. Emotions and feelings are often the main power moving people to a particular choice, decision or operations. Mascot is one of the fastest ways to provide this feature of emotional feedback to the user, letting them speak the user’s language, and therefore make the product more user-centered.

Aesthetic satisfaction

Although practical and problem-solving issues mostly come first as the central way of attracting and retaining users, aesthetic satisfaction shouldn’t be neglected. Mascot, as an element of the sophisticated artistic approach, can become the feature supporting this user’s need. A pleasantly looking mascot is a good reason to make a choice in favor of a particular product in the case when it’s compared to the ones with the same functionality but less attractive graphic support.

Long-term strategic potential

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 losing recognizability.

Saily mascot design process

Diversity of usage

Mascots can be applied in hundreds of various ways, both in digital graphics and physical products, starting from simple stickers and illustrations up to printed stuff, dolls and toys, play characters and cartoons.

Element of virality

Unique and stylish mascot can become a strong element of virality, becoming so popular among users that they will not only spread it to each other but also create new versions, parodies, discussions, and the like. That works especially efficiently in products for kids when the mascot actually becomes a central representative of the product and creates a high level of desirability.

Element of consistency

Mascot applied in various elements of branding and content strategy creates the feeling of consistency which is the basis of strong brand presence and positioning on the market.

Requirements to mascots

Therefore, according to everything mentioned above, we can sum up what requirements for efficient mascots should be considered. Among them, we would insist that a 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.

Mascots in UI

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

Also, wisely used in illustrations featuring actions or interactions, a mascot can become a good way to avoid using too much copy on the screen and, in this way, save space for other important elements of the layout or just more “air” really needed to create a good perception of data on the screen or page.

Saily mascot applied to mobile app user interface

Certainly, mascots should be wisely applied in order not to overload the interface where it is not needed. The aim of a mascot in any kind of environment is to simplify and speed up the interaction with a product. If this objective is not achieved, the mascot can play a bad role and create unnecessary distractions instead of improvement for the branding. In our next post, we will continue this topic, considering some pitfalls and issues necessary to consider in the process of creating a mascot as the element of branding. Stay tuned!

Branding Design Case Studies

Here’s a set of more case studies sharing the design solutions and approaches for some of the design projects done by the Tubik team.

Page Turner. Identity and Packaging Design for Bookstore Chain

BlockStock. Brand Identity and Website for Minecraft Models Resource

SwitLuv. Theme Packaging Design About Love for Sweets Brand

Fulfill. Illustrations and Web Design for 3PLs Marketplace

Roebuck. Mobile Design and Illustrations for Educational App

Garden Gates. Identity and Packaging Design for Garden Center

Bikker. Identity Design and Illustrations for Biking Service

Kaiten. Identity and Product Design for Food Marketplace

Glup. Delivery App Branding and UX Design

Crezco. Brand Identity and UI/UX Design for Fintech Service

FarmSense. Identity and Web Design for Agricultural Technology

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

Сообщение Mascot Power for Effective Branding появились сначала на Design4Users.