Nevertheless, effective teamwork is the foundation of a successful company, and teammates need to get along with each other to work productively and efficiently. Step by step, Tubik Studio was transformed from a small design agency to a full-service digital company so we’ve experienced the pitfalls appearing on the way of creating a cohesive team. Today’s article highlights the problems occurring in the teamwork and presents useful tips on organization of the effective teamwork in a digital agency.

Why is teamwork important for a company?

No matter how many talented workers a company has, it will be hard to build a profitable business if employees don’t work as a team. Teamwork is not only about operating together for one company, it means to collaborate so that you could achieve the company’s goals on its way to success. But what benefits can teamwork bring? Let’s see.

First of all, team members increase the efficiency of their work as well as the general productivity of the company. The amount of work is shared among employees so the tasks are done faster while nobody is overloaded with a ton of work. Moreover, it’s much easier to solve problems if there are colleagues willing to help rather than dealing with them by yourself.

Another benefit of teamwork is that together team members are able to generate more ideas. Brainstorming and task discussions are one of the biggest sources of fresh and unique ideas. The diversity of opinions and creative thoughts make a pleasant environment for idea generation. Furthermore, each team member can share their experience and knowledge so employees constantly learn and develop their professional skills.

In addition, teamwork enhances connections between team members. The efficient interaction within a team contributes to a better understanding of the project details and ensures the quality of the product in all aspects. Besides, informal communication between colleagues increases their effectiveness in the work since some fun and laughter help to reduce stress and fatigue.

How can different departments get along?

Effective teamwork is impossible when the departments can’t get along. Digital agencies have a difficult task – unite extremely different personalities under one roof and even more make them support each other. To achieve this aim, you need to learn deeper about possible pitfalls on the way successful teamwork in a company. Let’s discover common problems that can appear when designers, developers, and managers are working together.

Designers vs Developers

Designers and developers are often seen like cats and dogs bickering all the time which often has a bad influence on the workflow. However, now when most of the digital companies aim at providing full-cycle services, these two opponents are forced to find ways how to understand each other. To find out what causes these confrontations, we’ve distinguished the most common issues occurring in designer-developer relationships.

Developers ignore design principles. Design harmony, visual hierarchy, the balance of design elements play a significant role in a quality digital product. However, it often happens that developers miss some details or change them for some reasons crushing the harmony within the design. Obviously, designers react negatively and ask to correct errors. But the conflict starts when developers say “What’s the big deal?”. It actually is the big deal and designers need to explain why rather than arguing.

Designers don’t understand anything about HTML CSS. Of course, designers are not developers and they don’t have to know how to program but the basic knowledge of the web and how it works is essential. Design created without knowing web principles can be too difficult to actualize in a real life and it’s not about developers’ skills. To avoid such an unpleasant situation, designers are recommended to learn the basics of CSS, or Cascading Style Sheets, a language that defines a layout of HTML.

Developers make the design look different than designers expect. Every designer must have been in a situation when the developer shows the coded version of the design and it looks like anything but the one that designer meant. Different colors, unnecessary white spacings, or even different fonts can make designers get angry with the developers but it’s not always their fault. Many designers do not consider the fact that colors may look different on Mac and the whole picture can be changed on the different browsers.

Designers estimate their work time wrong. Time estimation is a painful question for everyone who’s paid hourly. When you work in a team, it’s getting worse because the other departments depend on you. Sometimes, designers underestimate the time they need to accomplish their part of work and the development team is forced to push hard so that they could meet the deadlines. Certainly, it can’t be a good thing for the relationships between designers and developers. However, programmers need to take into account the fact that the design process heavily depends on creative aspects and inspiration presence, so it makes time estimation more difficult for designers.

Designers and Developers vs Managers

One thing that designers and developers undoubtedly have in common is their confrontations with managers. When it comes to the “managing time”, programmers and designers can forget about their issues and create a coalition against the manager. But what are the problems? Here they are.

Designers and developers don’t stick to the deadlines. Managers are responsible for delivering the product to the client on time. And when the product team is late and can’t meet deadlines, the blame goes to the managers. Still, in this situation, the fault lays on oth sides because managers couldn’t organize the team properly at the start while the team was too irresponsible.

Managers are too demanding. Sometimes there come clients with a project that can be done for two weeks and they say “I need it to be done in three days, no longer”. Managers take the risk of agreeing and ask the team for the impossible. This may happen when the managers don’t understand the peculiarities of the design and programming process and underestimate its complexity.

Managers can’t establish the connection between the product group and the clients. One of the biggest problems leading to bad product creation is misunderstandings between clients and the product group. If managers do not make sure this connection is established right, designers and developers can build the product that doesn’t correspond to the client’s expectations, and the blame will be put on the product team.

No one takes responsibility for the failure. People can’t live a life without failures, and of course, digital companies also have bad days. There always will be the clients who will abandon their project and pay no money to the agency. This is when the team starts to blame each other and no one takes any responsibilities. However, it’s a common problem which companies face from time to time and that it’s not a reason to fight. The team needs to accept the failure and learn from the mistakes.

Useful tips to improve teamwork between departments

Difficulties exist so that we could overcome them. Today there are many great digital agencies showing that effective teamwork is possible. Discovering their secrets, we’ve conducted the research on the efficient tips about teamwork and created a list completed with some advice from Tubik experience.

Constant communication. To collaborate and understand each other, team members need to communicate. If the team works on the project, every department should know how things are going. Designers should involve development team on the very first steps explaining their choices. And the development team needs to advise designers on the aspects of realization.

Learn the craft of the others. Misunderstandings are often the result of ignorance. Designers don’t know about CSS, developers are not aware of design principles and managers know only about management. It’s the worst scenario for the team. If each department learns the basics of the craft of the other departments, they will understand each other.

Managers can help. Both design and development teams need to understand that manager is a major link connecting them to the client. Managers know the product team as well as the customers, the reason why they can organize the work in the best way.

Respect. It may sound too obvious still many of us underestimate someone else’s job putting our job as the biggest. We need to keep in mind that all the parts of the work are vital and the proper combination of them gives the desired outcome.

Use the technology to your advance. Modern technology makes our life easier in many aspects and teamwork is not an exception. To make collaboration and communication more productive, team members can use cloud-based platforms such as Slack to communicate faster. Moreover, using tools like Sketch and Zeplin can significantly improve designer-developer relationships because they make the process of assets exchange much easier and faster.

Learn the trends. If you’re a designer, it doesn’t mean you need to follow only the design news. Read about the web and programming trends and you will find more topics to discuss with the programmers, or even you’ll together come up with the new idea. The same refers to developers.

Informal communication. If you want to know the colleague, you need to communicate not only in the office but also somewhere outside. When you learn the personalities, you may be able to collaborate at work more effectively. Besides, a friendly atmosphere reduces stress and improves the productivity of the whole team.

Today the summing will be short: working together people can move mountains. So, the effective teamwork leads straight to the success. Stay tuned!

Recommended reading

Designers And Developers: No Longer A House Divided
5 Pet Peeves Developers Have With Designers (and How to Avoid Them)
5 Pet Peeves Designers Have With Developers (and How to Avoid Them)
Designers and developers collaborate better with these 5 adjustments

Originally written for Tubik Blog

Сообщение Helpful Tips on Effective Teamwork in Digital Agency появились сначала на Design4Users.

When you work in a creative industry, time management seems to be something far and impossible to do. Loads of work, lack of inspiration never allow you to feel free in controlling your time. Nevertheless, our bosses and clients expect us to be highly productive, so we cannot afford delays and mistakes and have to use our time in the most effective way. Today our article presents some practical tips on time management for professionals in creative spheres.

Plan your day

Many of us coming at work may spend the whole morning surfing the social networks up till the lunchtime and then wonder where the morning hours have gone. The problem is that we rarely plan the day ahead so we don’t know which task, among hundreds needed to be done, to start with. The daily plan helps to organize the tasks and gives the review on how your day will come to pass. With the plan on hands, all you need to do for having a productive day is stick to the plan as close as you can.

It is useful to form your daily strategy in the evening before you sleep or in the morning before the workday begins. There are many ways to creating an effective daily plan. For example, you can write a to-do list in your datebook or take some notes on your smartphone. Moreover, today many apps make this process even easier.

Upper App

Prioritize the tasks

Creating your personal to-do list may become a problem when you have loads of tasks to accomplish. Of course, all the assignments given to us by our clients or bosses are urgent and all of them are usually marked as “to do as soon as possible” but we’re humans and it’s impossible for us to do lots of tasks at once. That’s why you need to think out the details and prioritize the important assignments. To set the priorities effectively, it can be good to answer to yourself objectively which project needs to be finished today and which can wait a bit more.

However, if you have a creative job, it’s not always possible to stick to your plan and accomplish the tasks in the right order. The artistic job heavily depends on inspiration and its absence can stop the whole process. In this case, creative people are recommended to have a fallback meaning the next project in the priorities. Switching to another kind of work can have a positive effect on your mind and creativity.

Eliminate distractions

If you’re a designer, a writer, or an illustrator, your job includes using the Internet, full-time or partly. Of course, the net is the major source of useful information, but on the other hand, it is also the spring of distractions such as social networks and entertaining websites. Interfering the creative process, you can’t concentrate completely on the task meaning you are not able to do the job properly. Certainly, it is hard to eliminate all the web distractions since we need to check our emails or contact the clients, still, we don’t need to be online for 24 hours. In most cases, you can choose a certain time for this part of daily routine like 10 a.m and 6 p.m. and that is enough to keep up with the things going on and stay in touch with the customers.

Track the time

It is said that happiness takes no account of time. Nevertheless, any project has its deadline and we have to fit it, so the count of time does matter here. To be more productive, it’s advisable to establish your own mini-deadlines for the tasks. For example, the task number one should be ready at 11.20 a.m, the next should be done at 13.00 p.m. Try to estimate the time needed for the specific assignment more objectively, do not overestimate yourself. Having a detailed schedule, you organize your time in the most efficient way and prevent your work from dragging on. Also, this helps your mind stay focused on what should be done right here and now.

Stop procrastinating

The majority of us constantly postpone our duties for a particular reason. However, sometimes it may turn into chronic procrastinating when we do anything but work. This can’t bring any good to either you or your clients, so something has to be done about it. Here are several pieces of advice on how to reduce the procrastination in the workflow.

Don’t push yourself. Negative emotions never help. While you’re biting yourself for the moments of procrastination, you are not able to start work. So, the first step to take is to calm down and understand that everyone is keen to procrastinate. There’s nothing wrong with you.

Find out the reason. Every time we postpone tasks there is a reason standing behind it. So, when you feel like procrastinating you need to ask yourself why you are doing it. Is the task too boring, or complicated, or unclear for you? Finding a reason, you’ll be able to find the solution.

Split big projects into small steps. Consistently, when we have a big project ahead, it may seem a heavy burden that cannot be accomplished anytime soon. That’s why, it is always a good idea to split the project into small, clear, and simple tasks. You can also talk this through with the client and set the mini-deadlines which will definitely improve your workflow.

Stay focused. Multi-tasking has become a part of the routine for many of us a long time ago, but only a few people learned how to deal with it effectively. We often switch from one task to another, and as a result, nothing is done properly. Try to stay focused on one task at the time, so you could perform it as well as you can. Shifting to the other activity is effective only in case you are totally stuck and have no idea where to move next.

Be good, not perfect

Someone may say that perfectionism never hurts but it’s not completely true. When you constantly work under deadlines, the desire to make everything perfect may play a joke with you. Trying to avoid the smallest mistakes at a certain stage of your work, you lose the time reserved for the next steps. And when the deadline comes, you realize that you have 80% of a perfect design, while the client expected the fully accomplished work. To avoid such a situation, try not to get obsessed with the smallest details that are not vital for the task. Remember that you can always polish everything later if you need.

Don’t forget to enjoy your life

Creative job demands creative energy, but the endless projects, meetings, brainstorming, and other work routines can make us tired no matter how much we love our job. It’s necessary to include time for relaxing into your schedule. An evening with your friends or in the gym can charge you with positive energy and inspire you to do something new and wonderful. So, don’t forget to find the opportunity of having a good time.

Using at least some of these tips, you can improve not only your workflow but everyday lifestyle too. Value your time and the others will do the same.

Recommended reading

Why Being A Perfectionist May Not Be So Perfect

19 Productivity and Time Management Apps for 2016

Deep Work: Rules for Focused Success in a Distracted World by Cal Newport

First Things First by Stephen R. Covey, A. Roger Merrill, and Rebecca R. Merrill

30 Time Management Tips For Work-Life Balance

Originally written for Tubik Blog

Сообщение Useful Tips on Time Management for Design Professionals появились сначала на 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.

Earlier in our articles, we have already unveiled the typical steps of creating interface design for mobile applications. Today let’s go further and set the full path of creation for a mobile app, from setting the idea to its release on App Store.

As well as in any creative process, making a mobile application out of the thin air is a sophisticated process which has its individual peculiarities and features in every particular case. Still, on the basis of Tubik Studio extensive experience of creating diverse applications, it is possible to define several typical creative stages for this process, such as the following:

• 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.

Although you see the sequence of stages, it doesn’t mean that every further phase starts only when the previous one is completed. It’s impossible to imagine this kind of linear dependence as many processes and stages are interconnected even not being consequent in the presented list. Moreover, some of them like testing or estimation come up here and there being spread for all the process of app creation.  Now let’s go along this way step by step to see how a subtle idea becomes a real mobile app.

Setting the task and initial scope of works

As we have already mentioned in the article considering logo design stages, the point of setting the task is the foundation of all the design and then the development process. At this point, the team of designers and developers should obtain maximum information from the client to mark the right way to the goal. The one who walks without a destination in mind will possibly come nowhere. In product design it works the same way: to get the result, you should clearly set the goals from the very start of the path. It doesn’t mean that the goals should stay totally the same at the end of the journey: the proper level of flexibility has to be set as the objectives can modify more or less in the creative process, research and testing. Still, if the general goals are not set at the start, the creative process can get easily transformed into a mess.

Another vital tip, which we have seen through long 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 and at the same time user-friendly and thoughtfully consuming resources or enabling interactions.

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. In our case, this point of the journey is started by sales managers and business analysts who take over the first line of communication with clients and are experienced in setting the bridge between the customer and the creative team.

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

• the nature of the product and its USP
• the target audience
• geographical targeting (if available)
• the keywords with which the company represents its identity
• preferred structure and functions clients see as vital in the app
• preferred visual features (color palette, general style, special features, connection with other already existing digital products or brand strategy, etc.)
• potential technologies, devices, and surfaces at which the app will be used
• the need for consistency with existing corporate identity (if available)
• nature of data processing need of server-side and additional technologies
• specific preferences

Obviously, the list is not completely full, still, it contains the most important positions needed for setting a general design and development flow. The outcome of this stage is the diverse set of information blocks establishing the basis for further estimation of the project, planning logical milestones and sprints as well as working our efficient design and development solutions.

Estimation

The data collected at the previous stage enables business analysts and sales managers to provide the client with the first-level estimation of the time needed for the project and therefore the planned costs. As in any creative process, it is practically impossible to make one totally exact estimation which will stay the same during the whole project: this is the data that should be got back to and reviewed after every stage of the design process. Certainly, there can be some cases of products that are quite simple, have a clear structure, and do not include many screens or elements, so estimation will be quite exact from the very first stages of processing the client’s data and wishes. However, the more complex is the project, the higher are the chances of estimation reviews and adjustments. One more vital thing to mention: these reviews do not necessarily mean growing pricing or timing, as in the creative process designers and developers can find the ways of optimization for design and technology solutions which can even shorten the initial estimation.

This flow is close to perfect in cases of full-stack teams: it means that business analysts can involve designers and developers into the assessment process from the earliest steps of analysis and estimation which are able to provide more real and exact planning of time and costs. Furthermore, specialists participating in the discussion are able to contribute a lot of knowledge and experience on technical details and factors influencing the time and resources needed for the app design and development.

User/market research

This is the stage when being based on the established task and aims, UI/UX designer starts the path with getting deeper into the environment in which the future application will function. The research stage usually moves on in two directions simultaneously: user research and market research.

User research means getting deeper into details of the core target audience to understand their preferences and psychological peculiarities, the influence of different factors like colors, stylistic decisions, and logic of interaction on emotions and experience of the defined group, the sources of information and creative performance ways which could engage users and make them active. Marketing research means exploring the market segment, primarily from the perspective of creative solutions used by competitors. Visual design presumes to create an original and recognizable style that will make the product stand out of the crowd and draw potential customer’s attention.

Famous guru of advertising David Ogilvy emphasized the great importance of research for creating effective results: “Advertising people who ignore research are as dangerous as generals who ignore decodes of enemy signals.” Time has changed the means, goals and technologies, still, the vital role of research established even stronger. Neglecting the research stage and relying only on their creative intuition, experience and talent, designers risk failing this task as they will not know the conditions of the app functioning and will not be able to make it efficient, user-friendly, and original.

UX Wireframing

It is the process of creating the general structure of the designed application or website. It’s usually accomplished via the set of schematic screens or pages of the low or middle level of fidelity. The aim of this stage is to set the clear and orderly structure of all the layout, transitions, and interactions on the basis of the user’s problems and pains which the product is going to solve.

In one of our previous articles we provided a bit of metaphor on that. 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 you would otherwise have to spend on the redesign and attempts to find out why your product doesn’t work properly.

That is the aim of the UX part of the design process. UX wireframing stage should be heavily based on user research, competition research, and analysis of all the data obtained. In the outcome, it creates a clear scheme whose complexity depends on the product functionality and reflects all the systems of transitions and interactions as well as placement of all the elements of the interface based on their optimal use flow. In some cases, wireframing done in pencil sketching or rough drafts is enough, although preferably it is accomplished with the special tools and software optimizing design process and increasing performance.

Prototyping

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

The value of prototypes in the sphere of the app and web design has rocketed for the last few years. Actually, it is easy to explain as even the low-fidelity prototype gets the designer, customer, and tester much closer to the looks and functions of the future product than the most elaborate schemes, drawings, and wireframes. Certainly, that doesn’t mean that schemes and wireframes could be eliminated from the process as they are essential in the process of creating design solutions. However, when you want to feel their efficiency and check if nothing has been missed in the design process, the prototype will be a great help.

Considering the fact that a lot of customers see the prototype as something very close to the final version of product design aka “UI in action”, in practice this approach is not effective. 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 the 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 will be too time-consuming and in this perspective, it would be better to spend the same time 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 solutions 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.

UI (User Interface) Design

User Interface is actually a finalized interactive field in which the user interacts with the product. It includes all the tools of increasing usability and satisfying target users’ needs and wishes. All the features of visual perception, as well as sound and tactile feelings influencing the product use and interaction with it, should be analyzed and optimized here to the purpose of the app or a website is designed. For example, such aspects as color palette, types and fonts, shapes and forms, illustration and animation, and so on and so forth are able to affect the performance of the final product greatly in both positive and negative ways.

In general terms, the UX research and wireframing stages are about how the website or application works while UI is how it looks. Both these stages include work on successful interactions, but UX deals more with logic, connections and user behavior while UI stage provides the visual representation of all the concepts. It means that ideally, the designer should first work on the UX part with concentration on layout, making it more powerful, thought-out, clear and easy to use. Without this vital work you highly risk creating a pure mess out of the user interface.

After the UX part is tested by prototype, agreed upon and the concept of layout, transitions, and features are accepted, the designer starts the UI design part. This is the time when a newborn heart and brain of your product is clothed with its skin and bones. Here the product gets its real color scheme, forms, and features of the layout details, styles, animated elements, and so on. All the UI solutions directly influence the positive or negative user experience, so the processes of UX wireframing and UI design should mutually support each other and follow the same strategy otherwise the efficient solutions of one stage will not work for the other.

Animation

Telling about the details and benefits of interface animation used in mobile apps, we mentioned that the most efficient way is to consider this aspect through all the creative stages. However, the high time to apply it in practice is when UI design is basically accomplished and the general stylistic concept is agreed upon.

Like everything that is put into the interface and process of interaction with it, the animation must be a functional element, not just a decor. Considering motion elements while planning user journeys around the digital product, the designer should deeply analyze its potential for increasing usability, utility, and desirability of the product before making a decision to apply it in the layout or transitions. Animation in UI requires a thoughtful approach and always needs to have a clear purpose set behind. The advantages and utility of using it in the interaction process have to be obvious and outweighing the possible disadvantages.

After this stage is accomplished, the visual details approved and agreed upon, designers transfer the assets to developers who are going to do the magic of making them alive. Also, this is a good time to review the estimation once again and plan the clear sprints on development on the basis of thought-out design.

Software architecture planning

A noteworthy detail is that scalability is one of the most important things for a mobile application. Planning of software architecture can take place as a stage parallel to design. This is a complex process: it usually includes a lot of iterations, with a constant feedback loop between the design team and the development team. The main goal of architecture planning is to create a constructive and integral plan for the software architecture of the app (front-end and back-end). At this stage, developers decide on the most efficient technical and technological solutions for actual realization of the app and maintaining its operability. The decisions depend on various factors, for example, the nature of the product and data it processes, the complexity of design solutions, the necessity to save data and availability of log-in functionality, etc. Back-end development sets the bridge of the app with the web and supports the synchronization of data in both directions.

iOS development

The actual process of coding the app here in Tubik is done in Xcode as an effective and flexible platform with broad functionality for iOS developers. As it is defined on the official website, “Xcode is Apple’s integrated development environment (IDE). You use Xcode to build apps for Apple products, including iPad, iPhone, Apple Watch, Apple TV, and Mac. Xcode provides tools to manage your entire development workflow—from creating your app to testing, optimizing, and submitting it to the App Store.”

Xcode only runs on Macs and has everything developers need to build iOS apps. There are no official ways to launch it on a Windows or Linux PC. This means that if somebody wants to develop an iPhone, iPad, Apple Watch, Apple TV, and Mac apps but doesn’t have a Mac, he or she will need to buy it.

Two basic and most popular programming languages for iOS development are Objective-C and Swift – we considered the benefits and drawbacks of each in our earlier post. Since 2014, Swift language has been used by Xcode for coding more often than Objective-C, which is a difficult language for developers to learn and code. Still, Objective-C is a good fit for early iPhone hardware which has less RAM and slower processes and it is also effectively applicable for maintaining and updating the apps initially created in it. Swift keeps steps with modern hardware and it is also faster in the process of coding, it is more easy-to-use, shorter, and secure. For creating iOS 10 apps, Xcode 8 and the iOS 10 SDK need to be installed, also available from Apple. There are significant changes to the Swift language and the SDK in this version of Xcode.

At this phase of mobile app creation, iOS developers think over the architecture of the app, write the code, integrate functionality to created UI, edit source code, debug and finally export the app to the App Store. Also, writing unit tests and running integration testing are relevant steps in this phase. The Interface Builder is one of Xcode features and it is an alternative to hand-coding the client-side part, allowing developers to put the app code together visually. This feature allows dragging and dropping different visual controls into the app code. AutoLayout helps to control the app presentation based on the size of the user’s screen. With Storyboard, developers can see what each screen of the app actually looks like, while Preview Mode delivers a prior acquaintance of what the app will look like when it is done.

Lots of mobile app developers share the opinion that a text editor is generally needed, even though it is theoretically possible to do the entire coding inside Xcode. Handling long and complex codes can become particularly confusing unless programmers use a text editor supporting all relevant programming syntaxes.

In most cases, while part of the developers’ team is building a client-side part, the other part is coding, integrating and linking to the front-end server-side components of an app such as database, APIs, middleware and etc. Planning the workflow and the number of people involved in the development process depends first of all on the complexity and urgency of the project. For small projects, one iOS developer may be able to create all components of software architecture for the app. For multilayered complex projects, at least a couple of programmers should be engaged, having experience in software architecture and good expertise in both client-side and server-side development.

The main task of this phase is to make a fully working app that is scalable and integrated to all required server-side components like a database, APIs, and other related infrastructure it needs to run. If clients aren’t ready to build the original server-side infrastructure, they can buy a Backend as a Service (BaaS) software bundle or other products. The bundles include a variety of storage options and features, but they aren’t completely “turn-key” as well as they often do not provide the options of deep and comprehensive analytics. It means the client needs a developer who understands back-end engineering to integrate it into the app.

Testing

“Quality is never an accident; it is always the result of high intention, sincere effort, intelligent direction, and skillful execution; it represents the wise choice of many alternatives”, William A. Foster once said and it’s definitely true when it comes to a digital product testing.

Testing is one of the crucial phases of the entire app design and development lifecycle, it can help to find bugs before the app is brought out to actual users. App Store will not accept any apps that have compiling errors and bugs, so the mobile app is prepared for submitting has no chances with those kinds of issues. In the majority of cases, users abandon the app if it has functionality problems, no matter how promising and engaging it seems. Even the simplest apps can be successful for commerce, business, advertising, and other aims if they work correctly and efficiently, according to the target audience’s expectations and solving their problems.

Testing doesn’t mean that developers do not provide the upper quality. To set the analogy, the fact that every book, magazine, or newspaper issue goes through the editor’s eye doesn’t say that journalists or writers are not talented and qualified. Different specialists have different goals and skills in the process to increase general productivity and efficiency, and it works the same way for the design and development of mobile apps. Supposing that developers have done a great job and made no mistakes, the task of testing is not only finding errors. Quite the opposite, it helps to understand the quality of the app and find a way to improve via real interactions.

Automated testing got really popular now because it is effective, cheap, and reliable. iOS Simulator and other testing tools such as Appium, Frank, Calabash, and others are available to help to run the app through the testing process and point out the issues requiring attention. Continuous testing at all stages helps to keep small bugs from becoming major issues later on. In the process of testing, the developer usually goes all the way through the app on a device or in the iOS Simulator of Xcode, screen by screen, to ensure there are no bugs or errors and everything works properly. Fixing or debugging can be done right in Xcode.

All aspects of the app should be tested. Developers will need to check it across different devices (iPhone, iWatch, iPad, iPod, etc.) as the points like screen resolution, processors, battery life and memory will be different and can significantly affect how the app runs. They also test functionality (Do all the functions work well?), handling and loading time (Will it slow down if traffic increases?), and UX (How easy is it to use?). In addition to the above-mentioned issues, developers review crash reports seeing what should be fixed.

Let’s briefly review some types of testing applied in the process of mobile app creation.

Functional testing. It is the most basic test for any application to ensure that it is working according to the defined requirements and there are no functions missed in the process of interaction.

Performance testing. This type covers client application performance, server performance, and network performance. For example, it checks the performance specifications and behavior of the app under certain conditions such as the low battery, bad network coverage, low available memory and etc.

Memory testing. This type checks that each application maintains optimized memory usage throughout the user surfing.

Interruption testing. An app may face various interruptions while working, such as incoming calls or network coverage outage and recovery. This kind of testing shows what will the app do under these conditions. The common types of interruptions are:

• Incoming and Outgoing calls, SMS or MMS and different notifications;
• Low memory warning
• Cable insertion or removal
• Network outage or recovery
• Media Player on/off
• The device power cycle, such as low battery notification, etc.

Security testing. It checks the vulnerability of the app to hacking, authentication and authorization policies, data security, session management, and other security standards.

Usability testing. It is carried out from the early stages of app creation to verify if the app fulfills the established objectives and tasks getting a good response from users. As Joyce Lee, the representative of Human Factors Design at Apple mentions: “Usability answers the question, “Can the user accomplish their goal?”

Submitting / Release

Finally, there comes the day when the app is alive and ready to be introduced to its users. In order to be submitted to the App Store, it needs to join the iOS developer program. Apple reserves the right to review and approve the app before it can go live. In any case, it is advisable to plan around a week or so to have the information reviewed and approved by Apple. If the app is used for commercial purposes, the additional step to submission via filling in short surveys will be included in the process and will need separate approval which is usually expected within a day. The process of the app release in the App Store takes a few steps, including configuring the code, creating a profile, creating a listing, then submitting it through Xcode for certification. It might involve a few fixes and re-submissions, so it is helpful for iOS developers to know the ways and what to expect.

As you can see, the way, which a mobile application goes through, is quite complex and includes a variety of steps ensuring its functionality, beauty, and quality of performance. Don’t miss our next articles that will provide deeper insights into each of the stages as well as tools and tips for better design and development process.

Originally written for Tubik Blog

Сообщение The Step-by-Step Guide to Creating a Mobile App появились сначала на Design4Users.

Obviously, the mentioned factors established strong support for the growth of the outsourcing sector in global business. No doubt, it happened not only in design, still, design is definitely in the top list of the spheres which witnessed the most considerable growth of the field around the world. How did it influence the process of product design? Today we would like to provide our readers with a quick and concise review of the benefits and possible pitfalls both for outsourcing design and in-house product design. The review is based on the practical experience of Tubik Studio, the team that has already tried both directions in the design sphere and is ready to share some ideas with the design community.

Outsource design

Being a team with a broad portfolio of outsource projects and having studied the experience of our clients as well as plenty of successful product companies, Tubik Studio have marked out the following points needing consideration.

— In the outsource design process you are given a particular design task. That means you are able to concentrate on design tasks only as the strategic decisions are mostly made on the customer’s side. In practice, however, this disclaimer works a bit differently: creating design solutions solving users’ problems and bringing profit to the customers, designers can and often should influence the strategy of the product progress on the market. Anyway, all the final decisions and small or big changes of the product strategy are made by the customer’s team as they bear the final responsibilities and all the alterations or suggestions should be made in tight collaboration with the side launching the product.

— In outsource design you work on the task you are assigned for, you are not a chooser of the strategy and not a decision-maker if this product is needed and if the idea behind it is good or bad. You have to study how to like and love any idea you have to work with because it is the only way to create good results and by the way to earn money. That is not in your scope of work to get into deep layers and tell the client that this idea will not work — your task is to make it work. That is what you are paid for.

— In outsource design you need to have good skills of getting dip into the business goals and correspondent wishes of your client. In fact, if you are lucky you get a clear task supported with the outlined target audience of the final product, perhaps marketing plan and ideas on the client’s stylistic preferences. In other cases, you will get just a general line containing highly blurred tasks like «I want you to design a social network for drivers» and that is the part of the job to get all the details of how the clients see it. It can be done by designers, sales, and project managers, but whoever the doer of this vital job is, it is the only way to make the process of collaboration on the stage of design smooth and resultative.

— In outsource design you aren’t always provided with the opportunity to communicate with stakeholders and influence their decisions. You are hired to accomplish a particular scope of works. It has to be mentioned that for many designers it is a benefit as they start work with a particular task in mind and do not need to get involved deeply at pre-design or post-design stages. However, there also can be projects at which after the launch of the product designers are later given additional tasks on maintenance and alterations of the existing product.

In-house product design

— In product design accomplished in-house all the scope of stages from ideation up to sophisticated testing and maintenance is done by one team. This means that designers get more chances of being involved in all the phases of strategical decision-making upon the product which is an even more creative and analytical job but at the same time requiring more diverse skills and much higher responsibility.

— Full-scope in-house product design goes much further than actual design tasks. It includes all the creative cycle, with complex of tactic and strategic plans, ideas on commercialization and promotion, budgeting and content marketing, product philosophy and full-scope branding, and so on and so forth. It means that the team will need diverse specialists that will establish a solid foundation of specific skills strengthening design and bringing an effective product into life.

— In in-house product design, the creators are the stakeholders. This certainly means deeper involvement of all the participants into the creative process and at the same time more responsibilities.

— Product design accomplished in-house is the domain of higher financial and creative risks. In outsource design, especially when the process is already tuned and clear, the earnings can be more predictable and flexible in the budget planning of the company.

— Product design accomplished in-house suggests a deep concentration on one project and one aim for a long time while outsourcing projects can be different and support the feeling of refreshment. Should be said, none of the ways is better or worse, they are just different, and sometimes what is one designers’ meat is another designer’s poison according to the individual peculiarities of nature and creative approach.

To sum up, in outsource design you are a vital part of the product creation and support while in product design you are actually in the heart of all the processes being not a part but the whole story. In outsource design you are a sort of hired executive while in product design you are a stakeholder with all the responsibilities of this not-so-easy job.

Originally written for Tubik Blog

Сообщение Outsource vs In-House Design. Brief Review появились сначала на Design4Users.

Task

Design of a logo for the logging platform uniting the efforts of Swift and Objective-C developers, UX designers, app analytics experts, and product owners.

Tools

Pencil sketching, Adobe Illustrator, Adobe After Effects

Process

As we mentioned in a case study on UI and UX design, SwiftyBeaver is a native Mac application presenting the integrated logging platform for Apple’s Swift programming language. It is aiming at developers as its basic target audience. The product supports all the devices belonging to the Apple device family.

The design practice of previous projects accomplished by studio designers, such as Saily App or Passfold, proved that tight interconnection of design solutions on branding and user interface for the same product features a higher level of efficiency. Both mentioned cases showed that in brand positioning and promotion, using the concept of strong corporate style and applying the elements of branding such as logo, lettering and illustrations consistently was the effective strategy. It is also important to remember that the user interface of an application or a website is not just a sort of static or moving images — it is the field of active interaction. Interaction with the product via the interface enhances much higher memorability potential of brand elements as well as general stylistic concepts. Following this approach for the SwiftyBeaver project, user interface designer Ludmila Shevchenko and logo designer Arthur Avakyan worked in tight collaboration to get the design solutions that will effectively support each other.

Naturally, the initial stage of the general concept search tried the variants of mascot. As the name of the product includes “Beaver”, in the first sketching set the designer presented variants of this animal as a key mascot. There was also a variant of the original presentation of “S” and “B” as two basic letters of the product name. In addition, this first set included a bit more abstract version based on the set of lines featuring the movement of a beaver’s tail.

The variant based on lines was accepted as the basic concept practically at once. Although the mascots can be a powerful tool of branding, this time the strategy was different. The target audience, as well as the nature of the product, is quite specific so a more abstract version of the logo could show more flexibility in its expressive potential. Founder and CEO of SwiftyBeaver Sebastian Kreutzberger was very attentive to details and open to discussions. He decided upon the variant with stripes because it made a logo meaningful as logs the app is based on like the logs of trees are stripes so it presented a strong visual metaphor. Additionally, he liked the colored stripes of famous 70s and 80s logos so he wanted to have a logo that would look vintage and at the same time super modern. So, this direction was developed further.

Moreover, this version got closer to the general visual design of the user interface for the application. As it was described in the previous case study, UI design widely used color lines as markers for categories of log entries, and the chosen concept of logo provided a strong connection between UI design and branding. Therefore, the next stage of the design process of elaborate and thorough work on the slightest nuances. Different versions of curves and length of the lines were tried and discussed in search of the most harmonic variant.

The color palette also echoed the colors chosen for UI design and supported them with smooth gradients. So, the user interface of the platform, landing page, and logo were conjoint via colored elements.

The original version of the logo was colorful, but the monochromatic version was also accomplished and tested to provide branding solutions with a high level of flexibility.

Another issue to consider was the choice of font for company name lettering featured with a logo image. Several options that could work effectively with the logo and correspond with the nature and general design of the product were offered and discussed. The set of potential variants included diverse variants from strict and straight to smooth and curvy. Finally, the font was chosen to provide a good combination with the fonts of the app interface. The client chose that particular font because found it appropriately curved and perfectly matching the curves in the logo.

The approved variant of logo image and lettering was also supplied with the design of the animated version. It was accomplished with the help of Tubik Studio motion designer Kirill. The designer and the client took a considerable amount of time and discussion optimizing the physics of the ball to look and feel as natural as possible.

And one more important task to move on with was the design of an app icon. To prove its efficiency, designers tested it on different devices and in different sizes to ensure that it didn’t lose its recognizability or didn’t get dirty in a smaller size.

Logo design for SwiftyBeaver was one more case proving that there are no unimportant details in branding. It was one more project full of elaborate sketching, thorough work on the slightest hues and gradients, numerous variants with different length, width, and placement of the elements to make a catchy, harmonic and stylish logo that will represent the nature of its product.

Useful Case Studies

For those, who are interested to see more practical case studies with creative flows for a logo and identity design, here is the set of them.

LunnScape. Identity Design for a Landscape Company
Binned. Brand Identity Design for Cleaning Service
Reborn. Identity Design for a Restaurant
Andre. Logo and Identity Redesign for Landscape Firm
SwiftyBeaver. Logo for Mac Application
Saily. Logo for Local C2C E-commerce Application
Creative Stages of Logo Design

Originally written for Tubik Blog

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

Task

Design of the user interface for the logging platform uniting the efforts of Swift and Objective-C developers, UX designers, app analytics experts, and product owners.

Tools

Sketch, Adobe Illustrator, Adobe After Effects.

Process

SwiftyBeaver is a native Mac application presenting the integrated logging platform for Apple’s Swift programming language, also supporting Objective-C. First of all, it is aiming at developers as its basic target audience. The product supports all the devices belonging to the Apple device family. User interface designers had to consider the basic and advanced needs of people involved in the developing process to make it easier, faster, and more productive. The assignment to work over design solutions was given to one of Tubik Studio UI/UX designers Ludmila Shevchenko who says that the project was really a memorable task totally different from everything she had accomplished before. To get a more detailed description of the product and its functionality, welcome to read its presentation on Medium. And now let’s look a bit closer at some steps of user interface design for the product.

In software engineering logging should be mentioned among key factors of developers’ routine. It is an integral part of the development process helping developers to understand the flow, logic, and state of an application. Log entries inform them about the state of the application as well as the issues of its actual operating. Therefore, the user interface for this sort of product needs to support a high level of visibility for changes, intuitive navigation, and presentation of big data bulks with a high level of readability and visual marking of key details. The basic objective was to design a platform that will be easy to use, informative, supporting broad functionality for professionals, and seamlessly integrated with any Apple device.

At the UX design stage the designer worked over layout and navigation design solutions concentrated around three basic issues:

• the way log entries should be shown in the stream, as a general feed or separated by filters
• the method log entries or the part of the stream history will be saved
• the channels of creating code or working over the existing code.

Obviously, this part of the design process, based on specific knowledge about the field, needed tons of discussions and tight collaboration with a client, the founder and CEO of SwiftyBeaver Sebastian Kreutzberger. Being a developer himself, he brought out the idea which was deeply user-centered and problem-solving in terms of application for developing process, thus his detailed explanations of the operations were helpful for setting convenient and efficient layout, transitions, and navigation of the interface at the UX wireframing stage. A thorough analysis of the target audience and the unique selling points of the product allowed paying attention to the practical aspects of the product’s functionality.

The UI design was concentrated around two major challenges: to present data efficiently in a way that will be quite traditional for developers but at the same time to make it a bit more engaging and stylish via non-distracting design elements and animation. Therefore, the design concept was based on using dark background common for coding platforms and software as well as bright color accents and gradients to add some style and make important accents noticeable.

So, the visual presentation was not the only thing about colored elements. Using common color marking recognizable for developers, the platform supported easy navigation and visibility of key elements. Colors marked types of logging entries both in the names of categories and the streaming feed. The designer offered four UI concepts on this basis, with different fonts and variants of visual marking entries and errors.

Having agreed upon the general stylistic concept with the customer, the designer moved on in course of layout simplification. The interface of the product is data-driven therefore it has to exclude any sort of distraction and avoid repetitive elements to prevent the interface from being cluttered. So, it was decided to exclude the copy featuring the type of log entry in the fields of messages. Only color marker was left becoming the central element of the connection between log entry and the categories whose names were provided in the upper part of the screen.

The provided set of screens featured different concepts for visual presentation of color markers and entries saved by the user. Understanding the importance of navigability for the interface of such high practical value and information intensity, the designer tried to use the maximum of conventions power. The markers using the colors easily decodable by developers were also supported by the star sign as a popular and clear marker of saving the object to favorites or elements needing further attention later.

Among all the versions, the final decision was made upon the most minimalist one. It used colored lines along the message body and a small yellow star for saved entries. All the colored elements, as well as the background color and shades of hovered elements, were carefully tested to get a high level of visibility and pleasant-looking efficient contrast.

One more key element of design that needed deep attention was a choice of fonts. Actually, in the design process around any interface, the choice of an appropriate font has a great influence on the general usability and presentation of the product. However, in such a specific interface as SwiftyBeaver, which is highly concentrated on textual material, the weight of font choice got even bigger. Moreover, the product is not rich in graphics materials such as icons or illustrations, so font becomes a major element of visual design for the product. The designer took her time to test various solutions and select the font which would be both beautiful and easily readable for users.

The background was accomplished in different shades of very dark blue which appeared to be more harmonic and smooth in creating pleasant contrast than black color. To make the entries text more readable, the background behind them is changing slightly in shades one by one: it marks the limits of every entry but without unnecessary distraction for the user. Hovered elements were highlighted while the others were dimmed. Slight gradients made the color markers look more stylish.

The aspect of entry length also was an object of deep consideration. There was such a way to go: the stream could show the fields of fixed height and if the entry was longer it could be hidden showing only a part of the message and opening full view on click. However, after research and testing, this solution wasn’t found effective. It was decided to show the full text of each entry as it was more user-centered and excluded additional operations and clicks. Therefore, the designer paid deeper attention to the slightest aspects of kerning and spacing of the lines and work with efficient copy placement.

The work on the landing page for the product was also an interesting and challenging design task as far as the product doesn’t offer a lot of visual material for user engagement and attraction. Therefore, the main accent again was made around the colored accents echoing the design solutions of the application interface layout.

In addition, Ludmila accomplished a graphic design task which resulted in illustrations presenting the features and benefits of the product.

Another design task accomplished by Tubik Studio for SwiftyBeaver was to work on the logo design for the app.

More Design Case Studies

If you are interested to see more practical case studies with creative flows for UI/UX design, here is a set of them.

UI Design Case Study: Mobile App for Ordering Burgers

Watering Tracker. Mobile UI Design for Home Needs

Big City Guide. Landing Page Design

Vinny’s Bakery. UI Design for E-Commerce

Health Care App. UI for Doctors

Slumber. Mobile UI Design for Healthy Sleeping

Kubrick Life. Educational Biography Website

Designer AI. Dashboard and Graphics for Fashion Service

Pazi. UX and UI Design for Vehicle Safety Mobile App

CashMetrics. UX Design for Finance Management Service

Originally written for Tubik Blog

Сообщение SwiftyBeaver. UX & UI Design for a Mac Application появились сначала на Design4Users.

Task

Redesign of UI for the mobile application for local user-to-user e-commerce.

Tools

Sketch, Adobe After Effects, Adobe Illustrator

Process

User Interface

To remind those who have missed our previous case study, Saily is a local community app allowing neighbors to buy and sell their used stuff. Although it is a sort of e-commerce app, it includes a strong feature of communication between users. One of the essential accents brought out by the Saily App team puts a deep focus on design and culture at the core of everything they do. User interface redesign of the app, accomplished by Tubik Studio designer Tamara, according to the client’s vision of the product needed to have a fun and entertaining feel and look. Bearing it in mind and setting the task to make the product trendy, clear, and easy-to-use, the designer created the new image for the Saily App, which presented a new visual concept and featured new functional points the clients wanted to add to the user experience.

Tubik Studio designer working on Saily App screens

In the process of research and analysis of the existing general concept of layout and transitions, the designer concentrated on UI solution which put bright accents at the most important features and provided fast and easy microinteractions. E-commerce is the process that a user needs to feel as clear and fast; in addition, the features should be informative and easily recognizable for quite a diverse target audience.

So, UI design points that must be thought out were the following:

• easily understandable layout and navigation
• recognizable icons
• graphic elements not creating an unnecessary distraction from the main points
• the process of inputting the data about the item, as simple and user-friendly as possible
• interface elements showing data about the item not looking overloaded but containing all the necessary information
• efficient communication available from any point of the application
• funny and entertaining graphic elements, all harmoniously supporting the same style concept and preferably original to create additional recognizability for the app.

The general stylistic concept, which was chosen to support the idea of a funny and uptown interface which should at the same time be informative and useful, moved around the light background and a lot of bright accents in navigation and notification elements of the interface. As it’s easy to see from the grand list above, due to this decision, the screens get a lot of air, and light background promotes good readability, which is essential in the case of an e-commerce app. Moreover, a light background gives an efficient field of presentation for any kind of item brought out to sales.

The search followed two directions: the search of the actual items and the search along with the requests that were made by other users. In requests, users left the information about the desired item. Also, the user could save the history of their own requests. Requests made by users gave the additional channel of easy matching sellers and buyers, letting them know what is actually on-demand at the time. Moreover, requests could be filtered by location, making the process of matching the buyer and the desired item even more efficient. The search field was hidden in the process of reviewing the content so as not to distract the user and open more space.

One of the decisions made to add some interesting visual features was the color highlighting of the content photos to make them look interesting and attract the user’s attention. Colors were used to visually support navigation via color-coding, creating conventions and increasing the level of usability. Categories in the navigation were represented with background photos and original icons.

All the icons for the app were unique and customized so that they could create harmony of visual perception with all the other graphic elements and, at the same time, add to the general originality of the visual design of the screens.

The tab bar includes the basic navigation elements enabling the user to activate feed, search, communication features, and add a new item or request.

All the items, as you can see, were organized along the cards. The card of the item showed all the necessary information about the thing for sale and enabled the potential buyer to connect with the seller at once. To visually present the item that users wanted to sell, they could upload and customize one to four photos, which the user could add from his/her own device gallery or take a photo right out of the app screen. The sharing function was transferred to a separate screen so as not to overload the card.

One more functional side of the application to mention is the features of chatting and planning. As the app is positioned as a highly social, simple and usable chatting feature was seen among the essentials and organized along the standard and common scheme of native chats without too much experimenting so that even the users without the frequent experience of communication via digital channels could feel comfortable with this chat.

Planning functionality was realized via “meetings” feature, which enabled a user to fix the time and day of meeting with the seller/buyer in the app calendar and see this information at the card of the item. In the “meetings” mode, the image of the item got smaller and moved to the field of the item description, while the bigger image featured the image of the meeting place and data.

So, the user’s feed could switch to three different modes and show the chats, meetings, and requests. In the own card of an item, the seller could also change the different status of the item to inform the users who could potentially get interested in it. Also, the application enabled the user to add some items to favorites so as not to lose their trace in the great bulk of items.

The user’s profile showed basic information like name, location, followers/following and also activation of the chatting function as one of the basics. The preview of the item card included the photo, the main description with the category color code, the price, and ability to add it to favorites right from the preview.

All UI solutions obtained via numerous discussions and iterations turned around the high level of usability and efficiency, which should be supported with all the visual elements available on the screen.

Illustrations

In the previous case study, we mentioned the Saily brand mascot, which is a funny little ghost having its own legend. The logo created for the brand by Tubik Studio designer Arthur Avakyan was just the start of the branding process, which continued with the next step of branding in UI design.

The mascot, as well as the other funny and user-friendly characters, were used in numerous funny illustrations, which presenting a sort of entertaining element, at the same time, became the tool of informing the user about the issues or problems demanding attention.

Also, the team of UI designer Tamara, illustrator Arthur, and motion designer Kirill created several animations that livened up the screens, supported a general cool style, and at the same time had the functions of informing the user about the state of processes such as pull-to-refresh animations or loaders.

Enable location animated screen

Enable notification animated screen

Pull down to refresh animation

Search Screen Animation

So, the Saily App project became a great and bright challenge for designers to make a trendy, funny, and attractive but highly efficient and informative application with a user interface aimed at a wide and diverse target audience and having a strong element of socialization.

Recommended Reading

If you are interested in seeing more practical case studies with creative flows for UI/UX design, here is a set of them.

Slumber. Mobile UI Design for Healthy Sleeping
Letter Bounce. UI Design for Mobile Game
Real Racing. UX and UI Design for Mobile Game
Manuva. UI/UX Design for Gym Fitness App
Cuteen. UI/UX Design for Mobile Photo Editor
Tasty Burger.UI Design for Food Ordering App
Home Budget App. UI for Finance
Upper App. UI Design for To-Do List
Health Care App. UI for Doctors
Toonie Alarm. Mobile App UI Design

Originally written for Tubik Blog

Welcome to read a case study on Saily Logo Design

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

In one of our previous articles, we have already mentioned the benefits of prototyping for designing a strong and positive user experience and reviewed one of the popular prototyping tools Pixate. Today we are going to continue this conversation by describing the other efficient software for prototyping called InVision.

General description of the tool

InVision is the comprehensive prototyping software supporting the process of designing user interfaces for mobile applications and other sorts of digital interactive products. Now it is one of the major players on the market, perhaps due to constant improvement and extensions of the functionality that the company adds to the product as well as the strong informative support via its Blog which shares diverse cases and articles on design.

The basic idea behind InVision is fast and easy to create a live prototype from static images of any fidelity level. The tool provides the ability to upload wireframes that can be more or less detailed and with the functional facilities of the software they are automatically transformed into the prototype of the app. It is possible to follow the necessary transitions, test the buttons, analyze the layout in the mock-up of the device interface.

Working over numerous projects on UI/UX design for mobile applications here in Tubik, we are usually keen to try different tools and software to increase productivity and – what is more important – efficiency of design workflow and communication with the customers. These are the reasons why the InVision prototyping tool has become popular here in cases of app design. Being simple and clear in its interface, it doesn’t scare clients who can be easily involved in the process; in addition, it provides numerous functions enabling designers to make the process of testing design faster and easier in terms of productive teamwork.

Why should you try prototyping?

As we have already mentioned plenty of times in our earlier blog posts, prototyping is the essential stage of the design process when the user interface for a mobile application or a website is created. Based on our practical experience, we can definitely say that prototyping is the stage when testing can save time, effort, and money.

Let’s see, how the process is going on here in the studio. After setting clear objectives for the product, conducting user and market research, and defining and analyzing the target audience designer starts working on the initial UX design solutions. This is the time when the living organism of the future product gets into its skeleton and all the elements that have to be included started functioning as a united system. The designer thinks over all the layout, forms the group of screens, decides on their functionality and transitions, and thinks over the most efficient variants of placement for interactive elements and CTAs. The result of this process, based on a great deal of thinking and analysis, is initially given out as a system of UX wireframes. This is usually the set of screens done in a limited color palette and its main goal is to set all the logic and functionality of the future application. And this is the high time when the team involved in the design process could apply a prototype to make a full analysis of design solutions before starting the UI design stage.

A lively and clickable prototype tested in the mock-up of an actual device screen you design for is a great and fast way to reveal any sort of problems influencing the usability of the product. It lets all sides of the design process – designers, managers, QA testers, and clients – have actual experience of interaction with the future product, to ensure that there are no missing parts or unnecessary steps in the process, to test if all the elements are logical and placed right.

The great advantage of the InVision tool is that due to its functionality it’s now rather easy to apply the technology of prototyping, in fact, almost at all the stages of the design process as it is not time-consuming to upload the static images of the screens and form the prototype with them. That means that it’s possible to start effective testing from the very first groups of screens to see how they provide the logic of the layout and transitions.

Moreover, in the case of using the tool, it is also possible to test all the UI decisions in the clickable prototype and see them actively used. The designer can apply animation and simulate gestures using tools’ native functionality to make the prototype feel even more realistic and the experience very close to natural.

The power of collaboration

What we especially appreciate about InVision software here in Tubik Studio is its strong and constant support of efficient collaboration in the design process. Knowing that fast feedback from the client is a vital feature of the effective and productive design workflow, the creators of this tool made it convenient and clear not only for designers and project managers who are usually fast in dealing with different tools and soft but also for those customers who are not really avid software users and it takes some effort for them to deal with the new tool. InVision has good navigation and is user-friendly for different types of users.

The tool enables creators to get a clickable prototype and at the same time to communicate on every smallest part of it. That means clients are able to set their feedback not only to a particular screen but even to a particular element of the screen such as a button or toggle, shade or shape, piece of copy, or graphic icon – anything. It provides the functionality of multiple threads and therefore designers, managers, and clients can discuss particular elements quickly and set a more productive workflow together.

Additional features

Except for the general functionality of the prototyping process, some important additional features of the tool should be also mentioned:

• Easy and fast integration with other design tools for efficient work, such as Sketch or Photoshop, for example, from which the wireframes can be directly uploaded to InVision.
• Supporting cross-platform experience: the tool provides the ability to set sizes and resolutions of different devices you design for. This feature is highly applicable in the process of responsive design and mobile adaptations.
• Easy control and marking of project statuses for efficient project management.
• Functionality for creating and presenting mood boards, brand boards, galleries, and style guides.
• Tools for direct live communication right from the project account. Especially appreciated by the teams working remotely.
• Saving versions history to easily compare several versions of design solutions.
• Diverse functions and features for creating high-fidelity prototypes that can be used for user testing before the stage of development.

So, the software has shown itself as an important tool for improving teamwork and the process of testing design solutions as well as tight collaboration with the customers. Those positions are among the key points of an efficient design process providing thought-out, high-quality, and user-friendly designs.

Originally written for Tubik Blog

Сообщение Design Tool Review: InVision появились сначала на Design4Users.