Tag Archives: tubik studio

color theory design tubik

Color Theory: Brief Guide For Designers.

Many people think the choice of colors for UI mostly depends on the designer’s taste and sense of beauty. However, the process of the color selection is more complicated than it seems and plays a significant role in design. In one of our previous articles devoted to color psychology, we’ve found out that colors have the great impact on our mood and behavior. That’s why the success of the product depends largely upon the colors chosen for the design. The research provided by Colorcom showed that it takes only 90 seconds for people to make a subconscious judgment about a product and between 62% and 90% of that assessment is based on color alone. So, the appropriately chosen colors can be useful on the way of improved conversion for your product as well as advance usability of the product.

 

To create good design and employ colors more effectively, you need to understand how colors are formed and how they relate to each other. That’s why students at art schools, colleges and universities study the science of color theory devoted to colors’ nature. Today, we offer you to remember (or maybe even learn) the basics of color theory about the color combination which can be effectively applied in your design creating process.

 

Color Wheel

 

If you had any lessons related to painting, you must have seen the circle consisting of different colors. It is called the color wheel which helps to understand how different colors relate to each other and how they can be combined. The color circle is usually built of primary, secondary and tertiary colors. The primary are those three pigment colors that can not be formed by any combination of other colors. Combining primary colors, we get the secondary ones, and the mix of the primary and secondary colors gives us the tertiary colors which usually have two-word names such as red-violet.

 

color-wheel-2

Source

 

The color circle was created in 1666 by Isaac Newton in a schematic way and since then it has gone through many transformations but still remains the main tool for color combination.The main idea is that the color wheel must be made that way so colors would be mixed appropriately.

 

Color models

 

Before you start mixing colors you need to understand that color has two different natures: the tangible colors which are the surface of objects and the others which are produced by light such as the beams of TV. These types create two color models by which color wheel is formed: additive and subtractive.

 

The additive color model considers red, blue, and green as primary colors so it’s also known as RGB color system. This model is the basis of all colors used on the screen. The combination of primary colors in equal proportions of this system produces secondary colors which are cyan, magenta and yellow, but you need to remember that the more light you add, the brighter and lighter the color becomes. Results obtained by mixing additive colors are often counterintuitive for people accustomed to the subtractive color system of paints, dyes, inks and other tangible objects.

 

The subtractive color model obtains colors by the subtraction of light. It consists of two color systems. The first is RYB (red, yellow, blue) also known as artistic system often used in art education, especially in painting. RYB was the basis for the modern scientific color theory which determined that cyan, magenta, and yellow are the most effective set of three colors to combine. This is how the color model CMY has been formed. It was mostly used in printing and when the photomechanical printing included black ink, the key component, the system was named CMYK (cyan, magenta, yellow, and black). Without this additional pigment, the shade closest to black would be muddy brown.

 

difference-between-RGB-and-CMYK

Source

 

Additive vs subtractive

 

You should remember the major difference between these two systems: additive is for computers and subtractive for digital screens. If the design project you are working on is meant to be printed, don’t forget the simple but crucial rule: colors you see on the screen never look the same in print. Additive color spectrum is wider than CMYK, which is the reason why designers are recommended to convert their projects to the subtractive system of colors before printing so that they could see the result close to what they would get. However, if you work with digital products, RGB color system is the wise choice because it allows creating amazing things with its wide color spectrum.

 

Color Harmony

 

The word “harmony” usually associates with something orderly and pleasing. The color harmony is about the arrangement of the colors in design in the most attractive and effective way for users’ perception. When colors are organized, viewers feel pleased and calm, while disharmony in design gives the feeling of chaos and disgust. The color balance is vital in design since users make their impression of the website or application by the first look, and colors have the big influence. Designers distinguished the basic color schemes that work effectively.

 

Monochromatic

 

It is based on one color with various tones and shades of it. The monochromatic harmony is always a winning choice since it’s hard to make a mistake and create the distasteful color scheme.

 

business cards design

Deetu Business Cards

 

Analogous

 

To create analogous harmony, you need to use colors located right next to each other on the color wheel. This type of color scheme is used for the design where no contrast is needed including the background of web pages or banners.

 

ui animation design tubik

Night in Berlin App

 

Complementary

 

The complementary scheme is the mix of colors placed in front of each other on the color wheel. This scheme is opposite to analogous and monochromatic since it aims to produce high contrast. For example, the orange button on the blue background is hard to miss in any interface.

 

buongiorno_roma_illustration_tubik

Rome Illustration

 

Split-Complementary

 

This scheme works similar to the previous one but it employs more colors. For instance, if you choose the blue color you need to take two others which are adjacent to its opposite color meaning yellow and red. The contrast here is less sharp than in complementary scheme but it allows using more colors.

 

bebright_app_animation_tubik_studio

Be Bright App

 

Triadic

 

When the design requires more colors you can try triadic scheme. It is based on three separate colors which are equidistant on the color wheel. To save the balance in with this scheme, it is recommended to use one color as a dominant, the other as accents.

 

halloween stickers toonie alarm

Toonie Halloween Stickers

 

Tetradic/Double-Complementary

 

The tetradic color scheme is for the experienced designers since it is the most difficult to balance. It employs four colors from the wheel which are complementary pairs. If you connect the points on the chosen colors they form the rectangle.The scheme is hard to harmonize but if you do everything right, the results may be stunning.

 

mobile app design tubik studio

MoneyWise App

 

Color theory is a complex science which requires more than one day to learn. However, it is vital to understand the basics so that you could create the effective design with the knowledge of what you’re doing.

 

Recommended reading

 

Here are some materials we could recommend for those who would like to get deeper into the topic:

 

Color in Design: Influence on Users’ Actions

 

Digital colour mixing explained

 

Color Systems — RGB & CMYK

 

Why Color Matters

 

Responding To Color


Welcome to see the designs by Tubik Studio on Dribbble and Behance

UI design Upper App

Time-Management Tips for Creative People

People often say that 24 hours are not enough to do everything they need. However, we can’t add a few more hours no matter how everyone wants. What we really can do is to use time properly. The process of organizing and planning your time is called time management. Today the appropriate use of time is more significant than ever before because we live in the world of strict deadlines and great demands. Time management helps us to be more productive and work smarter.

 

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

 

faq set by Tubik Studio

 

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. Here in Tubik, we know the value of time and how crucial the daily plan is for the efficient day. Recently, we launched our to-do list app Upper motivating users and boosting productivity. And it’s absolutely free for everyone.

 

upper app UI design case study

 

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 the positive effect to 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 the 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.

 

copywriting for digital products

 

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 the 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 which 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 good 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.

 

tubik studio design business

 

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 the 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 the 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 the positive energy and inspire you to do something new and wonderful. So, don’t forget to find the opportunity of having a good time.

 

tubik studio sketch photo

 

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


Welcome to read Seven simple tips for beginners in digital design

color psychology in design

Color in Design: Influence on Users’ Actions.

Every single day we’re surrounded by various colors from everywhere. If you take a closer look at the things around, they may surprise you with a number of colors and shades. People may not notice how colorful everyday things are but the colors have the significant impact on our behavior and emotions. Today our article is devoted to the science studying this issue called color psychology. Let’s define the meaning of the colors and review some tips on choosing suitable colors for the design.

 

tubik studio design

 

What is color psychology?

 

It’s a branch of psychology studying the influence of colors on human mood and behavior. The thing is that our mind reacts on colors while we usually do not notice it. The moment our eyes perceive a color, they connect with the brain which gives signals to the endocrine system releasing hormones responsible for the shifts in mood and emotions. These days a lot of research is conducted in order to study the peculiarities of these reactions and there are already many theories useful to learn. Color psychology is helpful in many industries including business, marketing, and design.

 

The success of the product depends largely upon the colors chosen for the design. The properly selected colors help put users in the frame of mind that compels them to take action. The research provided by Colorcom showed that it takes only 90 seconds for people to make a subconscious judgment about a product and between 62% and 90% of that assessment is based on color alone. So, the basic knowledge of color psychology can be useful on the way of improved conversion for your product. Moreover, accurately chosen colors can advance usability of the product.

 

Meaning of colors

 

To convey the right tone, message and call users to make the expected action, designers need to understand what colors mean and what reaction they evoke. In one of our previous articles, we’ve demonstrated you the list of colors with brief descriptions of their meanings. Today we have prepared a bit more expanded list of color meanings in common use and in design.

 

Red

The color usually associates with passionate, strong, or aggressive feelings. It symbolizes both good and bad states of mind and soul including love, confidence, passion and anger. In design, the use of red color is an effective way to draw users’ attention. Also, it’s recommended to use red sparingly to avoid the negative reactions.

 

toonie alarm mascot design tubik studio

Toonie Alarm app tutorial

 

Orange

It is an energetic and warm color bringing the feelings of excitement. Orange combines red’s power and yellow’s friendliness, so it may bring feelings of motivation, enthusiasm, and love to life. Designers use the color if they need to give the spirit of creativity and adventure.

 

logo design tubik studio

fOxygenic Logo

 

Yellow

This is the color of happiness which symbolizes the sunlight, joy, and warmth. Yellow is thought to be the easiest color to visibly see. What’s more, it has one of the most powerful psychological meanings. Users seeing yellow colors in the design can feel the inspiration and confidence. Although, you need to remember that too much yellow may bring negative reactions such as the feeling of anxiety or fear.

 

stardust_bikers_webpage_ui_tubik_studio

StarDust website

 

Green

It’s often called the color of nature, balance, and harmony. Green brings calming and renewing feelings. Also, it is a sign of growth and inexperience. It has more positive energy than most other colors but sometimes it associates with materialism. Design in green colors perfectly suits to the products connected with nature.

 

Big_city_guide_Stockholm_tubik

Big City Guide: Stockholm

 

Blue

It often represents some corporate images since the blue is the color of trust. It usually shows reliability, may give users calming feelings. However, as a cool color, it also associates with distance and sadness, so designers need to keep it in balance.

 

design_for_business_tubik_studio_book

Design for Business E-book

 

Purple

Long associated with royalty and wealth since many kings wore purple clothes, it’s useful for presenting some luxurious products. It’s also a color of mystery and magic. It mixes the energy of red and blue, so it has a balance of power and stability. A big concentration of the color may distract users’ mind.

 

night_in_berlin_event_list_ui_tubik

Night in Berlin App

 

Pink

It is the color of hope, sensitivity, and romance. Pink is much softer than red, so it creates the sense of unconditional love. Pink is associated very strongly with youthful femininity, so it may be an effective color if the target audience is mostly girls and young women.

 

tubik studio app design

Dating App

 

Brown

The color of security and protection like the mother Earth. Designers commonly use brown as a background color in a variety of shades, from very light to deep. It brings the feeling of warmth and comfort to the designs. Also, it may be used to show the experience and reassurance.

 

jewellery_e-commerce_app_concept_by_tubik

Jewelry E-Commerce App

 

Black

The color has a great number of meanings. It associates with tragic situations and death. It signifies a mystery. It can be traditional, modern, serious. Everything depends on how you employ it and which colors go with it. Black matches well with any other color, so it’s ideal for the background. Designers often use it to set contrasts.

 

Bakery website animation

Vinny’s Bakery

 

White

The color means purity and innocence, as well as wholeness and clarity. White often associates with a blank sheet of paper motivating people to generate new ideas. However, too much white can cause the feelings of isolation and emptiness. In design, white is commonly used as the background color especially for the resources for which readability is a vital part.

 

tubikstudio ui animation website design

Bjorn website

 

Color meanings in branding

 

Colors are a vital factor for not only the visual appearance of products but also brand recognition. Nevertheless, in branding, colors tend to have more direct meanings than in common understanding. They can be briefly described within a few words, so here is the list for you:

 

  • Red. Confidence, youth, and power.
  • Orange. Friendly, warm, and energetic.
  • Yellow. Happiness, optimism, and warmth.
  • Green. Peace, growth, and health.
  • Blue. Trust, security, and stability.
  • Purple. Luxurious, creative, and wise.
  • Black. Reliable, sophisticated, and experienced.
  • White. Simple, calm, and clean.

 

realli_logo_animation_tubik

Realli logo animation

 

Color Preferences

 

Visual perception is quite individual for everyone. Designers need to remember that the color effects may be different because of the factors such as age, culture, and gender. First of all, people’s preferences can shift during the life whatever the object is, let’s say, food, clothes, music, colors and plenty of other aspects. It is caused by both mental and physical changes that happen to us across the lifetime. For example, children like yellow color pretty much, but as we become adults it usually seems less attractive. Faber Birren explains it in his work Color Psychology and Color Therapy: “With maturity comes a greater liking for hues of shorter wavelength (blue, green, purple) than for hues of longer wavelength (red, orange, and yellow)”. One more difference between children’s perception and adult is that kids can change their favorite colors fast, while adult color preference is usually non-malleable.

 

Also, designers need to consider that there are many cultural differences and color perception is not an exception. Sometimes cultures define colors diversely, for example, in Western countries, white color means happiness and purity, while in some Asian countries it symbolizes death. You can find many examples of how different may the meanings be in countries but it would take a whole article to tell about it, so if you’re interested in the topic, follow our updates on the blog since the post on this issue is coming soon.

 

Another point on the color preferences is gender. Many color studies have been done over the years and a lot of them say that the color preferences of women and men significantly differ. The Color Assignment group has conducted a deep research on this topic and many designers already use the results in the creative process. We’ve defined the most notable things from the research to share with you.

 

Blue is the top color. Both men and women of all ages think of blue as the favored color.The shades of blue such as cerulean, azure, beryl, cornflower blue, and sapphire are popular among women.

 

Brown and orange are in dislike. The first one considered less favorable among men, the second — among women.

 

Cool colors are preferred. Men and women favor blue, green and their tints in general.

 

Women like tints. When men prefer pure or shaded colors, ladies are good with tints.

 

Men prefer achromatic colors. White, black and gray are neutral colors and men are keen to choose them.

 

Favorite colors

 

favorite color on gender

 

Least favorite colors

 

least-fav-colors-gender

 

Source of charts

 

It’s vital to consider color preferences of the target audience while creating UI and UX design since it helps to avoid negative reactions and associations.

 

Points to consider

 

Color psychology is rather complex to understand and learn. However, it may become an efficient tool in designers’ hands helping to understand users and their demands. Summarizing the article, here is the list of useful things to consider:

 

  • Choose the colors wisely. They have a deep influence on the users.
  • Make sure your design and its colors convey the right message and tune.
  • Learn your target audience. The color preferences and meanings depend on many factors including age, gender, and culture.
  • Some colors may look different on the screens of different devices. Additional testing never hurts.
  • It may be a good idea to test the UI colors with representatives of the target audience.
  • Try to make the color combinations wisely, in the best way for the users’ perception.

 

Recommended reading

 

Here are some books and articles we could recommend for those who would like to get deeper into the topic:
 

Responding To Color

 

Birren, Faber., Color Psychology and Color Therapy.

 

Color Theory for Designers, Part 1: The Meaning of Color

 

Color Associations

 

Why Color Matters

 

The Psychology of Color in Marketing and Branding

 


Welcome to see the designs by Tubik Studio on Dribbble and Behance

UI research web and app design tubik

User Research. Empathy Is the Best UX Policy.

Starting any project, which is not their personal presentation but a product for users, designers should be deeply aware: they work primarily not for self-expression, not for showing their creativity to the world, not for creating something revolutionary new that will make the world go round in opposite direction. They work to solve users’ problems, satisfy their wishes and achieve business goals.

 

That is why it’s vital to establish who the potential users of the future product are and which their wishes and needs could be met. This is the time when the designer turns into the researcher to get as much information as possible and analyze it for the sake of user-friendly solutions in design and interactions. In our earlier articles, we have already mentioned the significant role of user research in creating problem-solving user-friendly designs, and today we suggest getting deeper into its definition, methods, techniques and benefits in the process of creating a digital product.

 

web design tubik studio

 

What is user research?

 

Generally, the word «research», being quite universal for the diverse spheres of professional activities, roots into the Old French word recercher meaning «seek out, search closely»; first, it was the verb and later transformed into the noun of the same semantics. The modern definition of the noun according to Cambridge Dictionary state the meaning as «a detailed study of a subject, especially in order to discover (new) information or reach a (new) understanding». This sort of activity is widely applied in a variety of sciences and practical fields, including informational architecture and user experience design.

 

Basically, user research is the comprehensive and multilayered activity whose aim is to collect information about the potential target audience of the product. Via a number of techniques, user researchers collect and then analyze the information obtained from real users, and this outcome usually allows the design team to work on the optimal solutions which will make the product user-friendly and attractive.

 

Therefore, user research means getting deeper into details of 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. On this basis, visual design presumes to create the original and recognizable style that will make the product stand out of the crowd and draw potential customer’s attention.

 

User research is actually the way by which designer is able to step into the shoes of the user and go along his or her path feeling all the stones on the way. This is the way to create designs based on empathy — the ability to place yourself onto the place of the other person, to feel what they are feeling and see what they are seeing. This precious ability enables designers to create things which not only work well and look good but also do what the particular users need them to do.

 

web development

 

Why is user research needed?

 

Famous guru of advertising David Ogilvy emphasized the great importance of research for creating effective result: «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.

 

As we mentioned before, designers who start creating a product just at once when they get the task are quite risky guys. There are plenty of things to do before the designing process itself. Ignoring those things can give the interesting but not viable result. It’s important to analyze the competition, to understand the target market, to find out the sources of traffic and potential expectations of the users before setting off. Otherwise, you can waste much more time on loads of inefficient variants.

 

Toonie Alarm UI design

 

When is user research applied?

 

Describing the typical stages of product creation process here in Tubik, we have mentioned the set of the following stages: setting the task and initial scope of works; estimation; user/market research; UX wireframing; prototyping; UI design; animation; software architecture planning; development; testing; release; updates. Still, it doesn’t mean that all these stages go one-by-one in this order — some of them are interconnected and some of them are spread around the whole creative process. User research is applied at several different levels of creation, somehow changing the perspective and the goals on the data which should be obtained and analyzed.

 

We would mark out three typical stages when user research is a must-do essential for creating the efficient design.

 

Pre-design research: this is actually the initial stage of the creative process when designer working over the project is exploring the requirements of the stakeholders and collects the maximum information about the target audience.  As well as in a scientific project, the scientist collects and analyzes the heritage of the previous specialists involved in the sphere to make the product actual, the UX designer needs to do the same to offer the solutions correspondent to what users need and want.  This is the time to talk, read and analyze a lot. This is when the designer needs to dive into psychology and behavior, together with the stakeholder set the goals of the product and investigate the factors which influence choices in this domain. Certainly, with every next project and each next dose of experience, the designer can get accustomed to user research techniques and needs less time for them. However, there never comes the day when the designer doesn’t need any time for research as long as every project has its unique requirements and its own USP which should be enlightened by design.

 

In-process research: it is applied at different stages of the actual design process when, having the chances to interact with users, discuss their wishes, watch their behavior and analyze the problems they have, designers explore the offered solutions in action and on that basis can alter some positions of their research and add more efficiency to the user interfaces.

 

Real product research: this is the another level of research applied to actually existing digital product users operate with. Applying various techniques of user testing, designers collect actual experience, analyze it and make improvements in terms of real cases of the product usage in different environments and conditions.

 

UI design Upper App

 

What are the dimensions of user research?

 

Certainly, there are numerous approaches to the process of research. Among them, we would like to draw your attention to the dimensions outlined by Nielsen Norman Group, highly experienced in the domain of research and analysis and regularly sharing their findings in this sphere. They offer to view the methods of user research along a 3-dimensional framework with the following axes:

  • Attitudinal vs. Behavioral
  • Qualitative vs. Quantitative
  • Context of Use

ux-landscape-questions

 

As we can see from the scheme, attitude is what people say while behavior is what people do. In real life, they are often different things and aspects, due to numerous reasons like individual traits of character, temper, education level, age, gender, beliefs and so on. Another opposition presents qualitative analysis, which is usually measured by definite numbers (like «how many clicks the user makes before accomplishing the payment») and qualitative analysis («why user can leave the page without registration and how this problem could be fixed»). And the context of use analyzes all the additional factors which can influence the outcome of interaction with the product, for example, is the user goes along the preliminary given script or interaction is full improvisation.

 

Analyzing the data in terms of different dimensions, designers are able to take the comprehensive outcome enabling to make solid decisions about the interactions and visual performance.

 

What are the methods of user research?

 

Today, user experience design has already grown into a sphere with the considerable background of project and research cases, which have resulted in the extensive set of different research methods. Some methods are used on a regular basis, some are more rare and specific, yet it’s good for designers to be aware of a variety of them. Let’s briefly review the popular ones.

 

Interviews. Perhaps the most widely spread method when, having set the target audience of the product, people involved into the creative process interact directly with potential users and ask them questions to collect information. The quality of questions is the issue of high importance here. It’s effective to apply both close (yes/no) and open (giving the detailed answer) questions to let users provide diverse information.

 

Personas. The technique which has been applied in marketing and sales for a long time with client/buyer personas and now has transformed into a new perspective of user personas. With this technique, designer collects the data about the potential target audience, its psychological and behavioral preferences and habits and creates a bunch of imaginary users with these characteristic. On the ground of this data, the designer models users’ interactions with the product and possible issues that can arise in the process.

 

Sorting cards. This technique is effectively applied in cases when designers deal with the products presenting complex interfaces and variety of diverse content. The users are asked to categorize the content and set the hierarchies. In this way, the designers obtain the data showing how users see this sort of content and what way of its organization would be efficient for quick and easy navigation around the app or website.

 

Surveys. Another traditional method of scientific and social explorations when users are offered the set of questions. Answering them, users give the actual information enabling designers to understand their preferences and wishes deeper.

 

Focus group. Popular method presenting the moderated discussion of the product, its features, benefits and drawbacks within the group of people potentially close to the target audience. Altering some characteristics of the group, for example, age, gender, education level, tech literacy, researchers can receive the variety of data and see how these features can influence user behavior.

 

Task analysis. The method exploring the tasks and goals which users have interacting with the product. Understanding what users want to do enables designer to consider the fast and effective ways to achieve these goals.

 

Eyetracking. Special devices enable the designer to review which zones of the website or app users interact with more actively and use these zones in the most efficient and informative way.

 

Participatory design. Users are offered the set of elements for the layout and can suggest their own vision of the construction.

 

Clickstream testing. The analysis of the most clickable parts of the layout with the aim of designing clear interactions and reveal the problems.

 

A/B Testing. The users deal with one variant of design (version A) for some time and then another variant (version B) while the researcher collects the information along the necessary metrics and makes the conclusion about the efficiency of the versions.

 

Daily Reports. The user is asked to interact with a product for a particular period providing the reports on a daily basis. This helps to check the usability of the product in the perspective of long-term use.

 

Desirability testing. The users are usually offered visually and stylistically different versions and provide the feedback which version they would prefer and why.

 

design navigation UI UX tubik studio

 

What are the important points to consider in user research?

 

Collecting the data about user behavior and preferences via diverse methods and techniques, the designer has to take into account the following factors:

 

— the environment of use (the factors of using the product indoors or outdoors, the level of light, noise, available time and tons of other things can have an impact on design solutions)

— factors of intrinsic motivation (the internal personal stimuli moving the person to act)

— factors of extrinsic motivation (the outer factors of getting a reward or avoiding punishment that encourage people’s behavior)

— longevity of the product (based on the period for which the product is planned for use: if it grows together with the user or is applicable only in a particular age).

 

It’s should be remembered that removing the mistakes in design, even if its already high-fidelity level, is faster, cheaper and less painful for users than fixing negative issues with already launched and operating product.

 

The bottom line is simple. Don’t be lazy to research vital points of the project before you start designing. Don’t fancy doing the research? No problem, go to duck and dive in loads of baseless concepts instead of going along the solid path of understanding the user’s needs and wishes. Just don’t forget: it’s not you who decides that the product is successful, it’s not even other designers or stakeholders. It’s users. So, empathy is the best policy.

 

Recommended reading

 

Here are some articles we recommend for those who would like to get deeper into the topic:

 

Complete Beginner’s Guide to UX Research

 

When to Use Which User-Experience Research Methods

 

User Research Basics

 

Pareto Principle-Based User Research

 

How To Conduct User Experience Research Like A Professional

 

Open-Ended vs. Closed-Ended Questions in User Research

 


Welcome to see the designs by Tubik Studio on Dribbble and Behance

Bakery website design case study tubik

Case Study: Vinny’s Bakery. UI Design for E-Commerce.

Design for e-commerce platforms is a special field of knowledge and practice. On the one hand, there are more and more users with an average or high level of tech literacy, who trust this way of shopping and are open to buying online. On the other hand, the level of competition in the field is also becoming more diverse and comprehensive with the constantly increasing number of services and platforms for selling and buying via the Internet. 

 

In one of the chapters of our e-book «Design for Business», the success of e-commerce activity depends on several factors among which:

 

— the quality of the product or service offered

— the quality of the content presenting the offer to customers

— the quality of design for the electronic platform — website and/or mobile application — via which the sales are going to be delivered.

 

So, it’s easy to see that UI/UX design for digital products of this kind plays the vital role. Thoroughly thought-out logic and transitions, simple and clear microinteractions, fast feedback from the system, attractive product presentation, easy payment flow and plenty of other details and features can directly influence increasing profits for the business involved in such a popular e-commerce game. This is the field where designers and business experts can work as one team for good of everyone, first of all of the target user.

 

Today’s case study is all about this theme: it presents the UI concept for Vinny’s Bakery website. 

 

tubik studio landing page design

 

Task

 

UI/UX design of a website for a small elite bakery selling fresh hand-made bread.

 

Process

 

Designing e-commerce website or mobile app, designers should definitely consider the following aspects:

 

  • operational simplicity
  • strong branding
  • security of users’ data
  • effective use of visual elements
  • clear data presentation via menus, catalogs etc.
  • user’s ability to leave feedback about goods and services
  • easily available general and contact information about the business providing goods or services
  • design that supports the offer not overshadowing it.

 

Grounded on these general principles, Tubik designer Ernest Asanov studied the trends on the market and analyzed the potential target audience of customers who would actually buy the goods, not just watched the offers. On the basis of the obtained data, in UI design he followed the philosophy of minimalism which is user-friendly, attractive and informative.

 

tubik_studio_website_ui_bakery

 

The website promotes a small bakery selling homemade bread. The home page presents the service, providing the links giving more information about the company and the items it offers as well as links to social accounts. The designer was keen to activate different techniques of visual perception via headline, images, background and copy block so that users could get the basic information immediately and got the warm feeling of freshly baked bread. On the basis of the design solutions, it is easy to assume that this is the service positioning itself as a producer and seller of upmarket products which are exclusively hand-made and presumably because of that reason cost higher than average bread in the supermarket. Harmony is the style provided by the webpage: dark background, branding element as a central element of a header, strong and clear headline establishing positive emotional message, visual elements enabling immediate perception of the theme and setting strong visual association with tasty pastry, short text block describing basic benefits of the product and clear visible call to action.

 

Bakery website catalog design ui

 

The next webpage to look at is the catalog of the offered products: again, it supports the user with the prominent and high-quality photos of actual products with brief core information on every position. Users can also quickly review the rating of every item and its price. Horizontal scroll is applied for seeing more positions, that’s why the last item is shown not in a full view to let the user see that this is the direction of scrolling. Call-to-action button, via which the user can add the item to the cart, is designed with a different color comparing to all the other elements of the interface, and this technique allows making CTA prominent and seen immediately. Such an interface lets users add goods right from the catalog without the necessity to go to the page of this particular position. It’s a user-friendly way to go, especially for loyal customers who know well the quality and tastes of the presented bread and wouldn’t like to spend their time on additional transitions just to put the item into their cart. Still, if the user wants to know more about the particular item, it’s easy to do by just clicking or tapping on it in the list.

 

bakery website product page ui

 

Clicking on a particular item, users get the access to more detailed information about the bakery item, including the description, weight of the pack, nutritional rates, rating, price and CTA button. The photo of the item remains the only pictorial element of visual support which makes the interface concise and non-distracting. 

 

Bakery website animation

 

Here you can see the full set of the transitions: you can see that header and footer are fixed, the horizontal scrolling opens more positions in the catalog and strengthens the feeling of the minimalistic and focused interface. The interactions are supported with smooth and unobtrusive animation making the interface even more stylish via the imitation of interaction with physical objects in the real world.

 

Another aspect to mention generally about this web design concept is typography which presented on more object of the thorough creative search for the designer and resulted in the combination of fonts, that are effectively contrast and easily readable. Color applied for headings presented in bold and prominent font and applying uppercase letters echoes the color typical for the freshly baked bread, while the color of copy blocks sets the visual association with the flour on the baker’s table — the element which is used on the background imitating the cooking worktop. Therefore, all those elements get visually connected to each other and present the web interface which looks harmonic and consistent. These are the feelings playing the significant role in building up the positive user experience and attracting buyers to use the service again and again.

 

designers tubik teamwork

 

No doubt, new day will bring fresh challenges which will result in practical case studies for Tubik Blog readers. Stay tuned, have a tasty day and don’t miss the new posts!


Welcome to see the designs by Tubik Studio on Dribbble and Behance

psychology of design article tubik blog

Psychology in Design. Principles Helping to Understand Users.

Some people are used to thinking of design as a purely artistic job but there is much more standing behind it. The sense of beauty and inspiration are not enough to create the proficient design. That’s why designers should possess certain knowledge and skills of distinct sciences to do their job right. And it’s not only the art of design, it’s also about various fields of knowledge and practice which help them work efficiently and productively. One of the basic studies helping designers to understand users is psychology. Today, we will figure out what a big part psychology plays in design and what psychological principles are essential to remember during the design process.

 

tubikstudio ted-talks collection

 

The role of psychology in design

 

Today the tendency of user-centered design makes designers reconsider approach to their work and go deeper into the understanding of the target audience. Donald A. Norman in his book “The Design of Everyday Things” defines design as an act of communication, which means having the deep understanding of the person with whom the designer is communicating. In order to get better insight into people’s needs, designers are recommended to bear in mind the psychological principles of human behavior, aspirations and motivations.

 

The outcome of the work can be even more positive if a designer applies psychology in the creative process since the science gives the close understanding of the target audience. Psychology knowledge helps to create the design which will make users perform the actions they are expected to such as making a purchase or contacting the team.

 

Designers may see psychology as a complicated approach to improving the design and for that reason neglect this part of research and analysis. However, you don’t need to be a Ph.D. in psychology to use it at your work effectively. All you need to consider are the basic principles constantly presented in design. Based on our experience and the conducted research, we’ve defined six effective psychological principles often applied in the design process.

 

tubik studio quote collection

 

Gestalt Principles

 

This psychological theory is almost 100-year-old but it hasn’t lost its actuality. The word “gestalt” means «unified whole» so the theory explores users’ visual perception of elements in relation to each other. In other words, it shows how people tend to unify the visual elements into groups. The principles, on which users form the groups, include:

 

Similarity. If a user sees objects that look somehow similar, they may automatically perceive them as the individual elements of one group. The similarity between elements is usually defined with shape, color, size, texture or value. The similarity gives users the sense of coherence between the design elements.

 

Continuation. It is the principle according to which the human eye moves naturally from one object to the other. This often happens through the creation of curved lines allowing the eye to flow with the line.

 

Closure. It is a technique based on the human eye’s tendency to see closed shapes. Closure works where an object is incomplete but the user perceives it as a full shape by filling in the missing parts.

 

Proximity. When objects are placed in close proximity, the eye perceives them as a group rather than seen individually even if they aren’t similar.

 

Figure/Ground. This principle demonstrates the eye’s tendency to separate objects from their background. There are lots of examples of pictures that shows two faces depending on where your eye is focused the object or background.

 

website design for photographers

Photography Workshops  website

 

The Gestalt principles confirm in practice that our brain tends to make tricks with us, so designers should consider that fact during the creation process to exclude the possibility of misunderstandings.

 

Visceral Reactions

 

Have you ever had that feeling when you fall in love with the website after the first second when you’ve opened it? Or maybe an application has made you sick only with the quick glance at it? If yes, then you’ve already known what’s a visceral reaction. This kind of reactions comes from the part of our head called “old brain” responsible for the instincts and it reacts much faster than our consciousness does. Visceral reactions are rooted in our DNA, so they can be easily predicted.

 

How do designers use this knowledge? They aim at creating a positive aesthetic impression with the design. It’s not that difficult to guess what looks nice to people and what doesn’t if you know your target audience and their needs. So, the tendency of using the high-resolution beautiful photos or the colorful pictures at landing pages, websites or any other web and mobile products is not accidental.

 

jewellery_e-commerce_app_concept_by_tubik

Jewelry E-commerce Application

 

Psychology of Colors

 

A science studying the influence of colors on the human’s mind, behavior, and reactions is called the psychology of colors. Today we won’t go deep into the aspects of this study since it is complex so deserves to have a specialized post devoted to it (on which, besides, we’re already working). In a few words, the main idea of the study is that the colors have a great impact on the users’ perception. That’s why designers should choose the colors knowingly to make sure their work presents the right message and tune.

 

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

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

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

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

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

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

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

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

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

 

tubik studio web UI design

Slopes Website

 

Recognition Patterns

 

You may have noticed that website or applications united with one theme usually have common patterns in their design. The reason is the users’ psychology. The thing is that people visiting a website or using an application are expecting to see certain things associated with the definite kind of product.

 

For example, visiting a website of a barbershop, the users are not expecting to see bright colors or pictures with cats or anything like this because if they do see it, this will definitely make them think of a website as an untrustworthy resource.

 

However, not only the colors and pictures matter. Some obvious and common things such as a list of blog posts on the front page of a blog or the filters in the e-commerce website are also important for successful navigation. Users become accustomed to things quickly and their absence makes them feel uncomfortable.

 

todo list UI app tubik studio

To-do list concept

 

Scanning Patterns

 

In our article Tips on Applying Copy Content in User Interfaces, we’ve already mentioned that before reading a web page, people scan it to get a sense of whether they are interested. According to different studies, including the publications by Nielsen Norman Group, UXPin team and others, there are several popular scanning patterns for web pages, among which “F” and “Z” patterns.

 

F-pattern is referred to as the most common eye-scanning pattern, especially for web pages with the big amount of content. A user first scans a horizontal line on the top of the screen, then moves down the page a bit and reads along the horizontal line which usually covers a shorter area. And the last one is a vertical line down on the left side of the copy where they look for keywords in the initial sentences of the paragraphs. It usually occurs on text-heavy pages like blogs, news platforms, thematic editorials etc.

 

Z-pattern is applied to pages which are not so heavily concentrated on the copy. A user first scans across the top of the page starting from the top left corner, looking for important information, and then goes down to the opposite corner at a diagonal, finishing with the horizontal line at the bottom of the page, again from left to right. This is a typical model of scanning for landing pages or websites not loaded with copy and not requiring scrolling down the page, which means that all the core data is visible in the pre-scroll area.

 

Knowing these patterns, designers can place the elements in an effective way for users’ perception and help them perform expected actions.

 

Hick’s Law

 

The law states that the more options users are exposed to, the longer it takes them to make a decision. This means that the more options you give to users, be it products to choose or pictures to look at, the more time and energy it takes to make a decision about the next step of interaction. The possible result here is that the users make the choices but get unpleasant feelings after using the product, or in the worst case, they may not want to take such a significant effort and just leave.

 

That’s why designers are recommended to keep any options including buttons, pictures, pages to a minimum. Removing unnecessary choices, you make the usability of the product more effective.

 

ui animation cafe app tubikstudio

Cafe Coupon App

 

Psychology is an effective tool in design which makes the creative process more productive while the result is going to be more user-centered. We’ve told you about six useful principles but they are only the tip of the iceberg because there is much more to learn on the topic. Don’t miss our next blog posts continuing this useful theme!

 

Recommended reading:

 

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

 

Gestalt principles

 

The role of psychology as a design tool

 

5 psychology rules every UX designer must know

 

Emotional Design: Why We Love (or Hate) Everyday Things by Don Norman

 

The 5 pillars of visual hierarchy in Web design

 

6 principles of visual hierarchy for designers

 

On Visual Hierarchy

 

F-Shaped Pattern For Reading Web Content


Welcome to see the designs by Tubik Studio on Dribbble and Behance

opera video design case study tubik

Case Study: Opera. Year-in-Review Video Design.

A picture is able to tell a lot instantly. It can inform, call associations,  set the mood and atmosphere, give the insights and wake up curiosity, get people inspired or engage further considerations and do that all in a beautiful and attractive manner. Still, to spark all that amazing potential, the picture needs to be created by a professional, who knows how to do that magic via talent, skills and experience.

 

Having the whole set of such professionals on-board, we finished the last year with an interesting and challenging project. In December Tubik team got the chance of creative collaboration with Opera to work on the bright and catchy year-in-review video. You could already have seen the video and design process presentation in Tubik Portfolio, and today we invite our readers to take a deeper look at this design story in a new case study.

 

opera video graphic design case study tubik

 

Task

 

Design of a short animated video «Opera 2016: Year in Review» within a tight timeline.

 

Process

 

Introducing a customer, Opera is a web browser developed by Opera Software. According to Opera Software, it had more than 350 million users worldwide in the 4th quarter 2014. Total Opera mobile users reached 291 million in June 2015. According to SlashGeek, Opera has originated features later adopted by other web browsers, including Speed Dial, pop-up blocking, browser sessions, private browsing, and tabbed browsing.

 

The initial stage of project discussion with the customer showed that they needed an animated video accomplished in an attractive manner immediately setting the positive and cheerful mood. The video had to present the essential milestones of the year when Opera, one of the actively used web browsers around the world, presented fresh innovative features to its numerous users. Opera team enjoyed bright colors and lifestyle object compositions and the approach they wished to use for the video was to devote each composition to a specific month when a particular feature was delivered. It was agreed that the visual performance should feature the 3D flat style, minimalistic animations and lush colors — everything that Tubik team is strong at.

 

Meanwhile, the early stage of discussions on creative process also established the biggest challenge of the project: the timeline was extremely short. The team of designers had only 5 days for design and animation of 8 complex flat illustrations full of details, transforming the company message, looking bright and fresh and keeping visual consistency to look natural in one video. This was the type of project that proved the great power of teamwork when all the participants of the creative process worked like a clock.

 

Illustrations

 

The first creative stage of the project had to result in a set of flat illustrations presenting the prominent innovations of the year: Ad Blocker, Battery Saver, Video Pop Out, Personal News, VPN, Faster Startup, Currency Converter. All the illustrations had to present the interiors decorated with bright details close and clear for every user, and also set the atmosphere of the particular season and the visual element showing the presented browser feature. In this way, combined in the video and replacing each other, the illustrations would support the feeling of the year flowing. Here is the final set presented to motion designers who had to do further work on breathing life into the pictures.

 

opera video animation case study

 

This is the intro illustration opening the video, setting the cheerful mood and giving the strong link with the brand.

 

opera video animation case study

 

This illustration presents the feature of native Ad-Blocker, which Opera presented in spring, so the color palette corresponds to the shades traditionally associated with this time of the year.

 

opera video animation case study

 

The next illustration presents the feature of Battery Saver, which got active in late spring: the season is supported with general bright and sunny color palette, flowers in the vase and green trees outside the window.

 

opera video animation case study

 

Another illustration was designed to present the feature of Video Pop Out, enabling users to watch videos while browsing. Big window shows the green plants and blue sky and the diagonal light shadows let us guess the shiny sun, the table sets the scene with a couple of books and a glass of lemonade, and even the video on the screen shows the sea shore and people having fun — everything allows viewers to understand easily that this user-friendly innovation was added in summer.

 

opera video animation case study

 

The next artwork is associated with the feature of a personal newsreader. A bit darker sky, a bit longer shadows, some clouds, the cup of tea and red-ripe apples on the tree say: when users got the ability to read the news right from their browser, the summer had almost finished. 

 

opera video animation case study

 

The feature of built-in VPN enhancing the privacy of browsing was set up in autumn, which us immediately clear from the view with yellow trees outside, while the passport seen on the table sets the strong connection with the matter of privacy.

 

opera video animation case study

 

Next illustration featured the faster speed of start-up loading, so the key visual element of the composition is the speedometer shown on the computer screen. It immediately sets association with the issue of speed while the color palette chosen for this artwork enables users to feel the vibes of deep autumn.

 

opera video animation case study

 

The last innovation to present was the built-in currency converter enabling users to shop online faster and easier. Some details in the picture, like the calculator, the decorative recognizable model of a shop placed on the shelf, the delivery truck behind the window as well as the layout on the screen set the atmosphere of shopping, while the outside view and the gifts let us know it’s the busy time of buying Christmas presents. 

 

Having a full set of illustrations approved by the client, motion designers came into play and presented the variants of transitions, while graphic designers worked on the fonts for the short descriptions to be used in the video. The fonts had to look highly readable and correspond to the general stylistic concept.

 

opera video animation case study

The sample of animated transitions between the slides livened up with the natural movements of the details close to motion in real life.

 

opera video animation case study

The sample of the fonts used on the slide in combination with the illustration

 

Final video

 

Five days of hard and coordinated work of the design team resulted in the final video of about 40 seconds showing the full set of key innovations Opera presented in 2016.

 

 

In one of the previous articles, devoted to design processes and work styles, we mentioned: the studio experience lets us believe that teamwork organized wisely and thoughtfully doesn’t take away designers’ individual space or freedom — vice versa, it adds to it the power of solid support and prospective ways for bigger and more complex, therefore more interesting and challenging projects and tasks. The project for Opera became one of the convincing proofs.

 

opera video design case study tubik

 

In their testimonial to Tubik team, Opera Software team mentioned: «The loose storyboard and tight timeline we presented you with were undoubtedly a challenge but everyone is very happy with how well your team delivered on it!» No doubt, this project became not only a great and absorbing challenge but also the case of fruitful collaboration and bright finale for the extremely busy design year.


Welcome to check out the presentation of Opera project in Tubik Portfolio

Welcome to see the designs by Tubik Studio on Dribbble and Behance

upper app UI design case study

Case Study: Upper App. Coding UI Animation.

No doubt, animation of interfaces still belongs to the most debatable issues between designers and developers. Animated UI elements often set the challenge to developers, so to enhance usability of an app or a website, the motion should be grounded on user research and add its two cents to the positive user experience. Developers in Tubik are open to this sort challenges: earlier we have already shown the case on coding motion for Toonie Alarm, this time we are continuing the theme with a practical case of developing animated interactions for Upper App.

 

Back to Basics: Core Animation and UIViewPropertyAnimator

 

Supporting designers and developers in creating attractive and functional interfaces for iOS apps, in 2006 Apple presented Core Animation, a system for animating views and UI elements of the app. Basically, it is a graphics compositing framework used by MacOS, iOS, watchOS, and tvOS to produce user interfaces with motion. It is not a replacement for the app views: instead, it is a technology that integrates with views to provide support for animating their content. However, the animation is not the only part of this framework: Core Animation presents the infrastructure for compositing and manipulating visual content. The framework uses GPU to accelerate rendering screen objects. Core Animation divides the visual content into individual objects that are called layers and arranges them in a tree hierarchy known as the layer tree.

 

The fundamental class that represents these layout objects is the CALayer class. It looks similar to UIViews implementation. The CALayer class manages image-based content and allows performing animations on that content. The main task of the layer is to manage the visual content but it also has visual attributes that can be set such as a background color, border, and shadow. In addition to managing visual content, the layer maintains information about the geometry of its content (such as position, size, and transform) used to present it on the screen. Modifying the properties of the layer is the way to initiate animations on the layer content or geometry. The app runs an animation. Layout, Display, Prepare and Commit phases are performed once before the animation starts. At this time the model layer is updated. The animation itself is rendered in a separate process on the render server using the presentation layer.

 

iOS animation

 

Nevertheless, whenever developers would like to interact with the animation (for example, pause or restart), it most likely leads to a huge piece of work. iOS open source community offers 3rd party (HTML, CSS, JavaScript) frameworks that can take care of this problem, like Pop, Interpolate and other.

 

iOS 10 provides a new way to animate that is UIViewPropertyAnimator. UIViewPropertyAnimator was presented in 2016 and it provides more extensive functionality on operations with animated interfaces. Vital to mention, it can be accessed only via iOS 10+ and tvOS 10+. The class allows developers to animate changes to views and dynamically modify the animations before they finish. This means programmers can stop (pause) in-progress animation, restart it at a later date if they wish and even dynamically modify the animated properties, for example, change the animation end-point to the top-right of the screen when it was previously the bottom-left. Developers can simply call the startAnimation() function on this instance to start the animation or animations. Anything that can be animated by the previous UIView API is eligible to be used in a UIViewPropertyAnimator instance. Here are its options:

 

  • Frame
  • Bounds
  • Center
  • Alpha
  • Background color
  • Transform (as long as it is a transformation in the 2D space, for 3D only with CoreAnimation)

 

UIViewPropertyAnimator gives programmatic control over the timing and execution of the animations. Let’s sum up what are the core differences of UIViewPropertyAnimator from CAAnimation:
 

1. After the creation of the UIViewPropertyAnimator object, the object of CAAnimation isn’t created for the layer;

2. After starting UIViewPropertyAnimator (by calling method startAnimation()) CAAnimation is created and added to the layer for animated UIView

3. Animation exists until it’s completed or deleted

 

The big advantage of  UIViewPropertyAnimator is that it’s new and has been created on the basis of modern requirements and needs, taking into account the specific features of Swift.

 

runningPropertyAnimator

 

The comment in the API informs that Apple Company pushes this class as the default for creating animations on UIView. At the moment, it is recommended for creating animations in UIKit and it’s going to replace the methods UIView.animate(withDuration:)

 

Practical cases

 

Here is a simple example of using UIViewPropertyAnimator in practical case:

 

ball UI animation

 

 

 

For comparison, here’s an example of code for the same animation, but accomplished with CoreAnimation framework:  

 

 

Now let’s look closer how animation was created with UIViewPropertyAnimator for Upper App application, a simple and elegant to-do list for iPhones: here we present the case of interactions with the menu.

 

Sample 1

 

upper app ui animation development

 

 

Sample 2

 upper app ui animation development  

 

 

UIViewPropertyAnimaton is really helpful in the process of iOS development: it simplifies the way for creating quite complex animations saving time and effort. Keep and eye on new posts: they will present fresh practical cases.


Welcome to download Upper App via App Store

Welcome to read more articles on iOS and web development

UI design product management

Managing Success. The Role of Product Manager.

In our user-centered world, people’s requirements are extremely high and companies have no other option than trying to give only the best products to them. But how can the companies define if their product responds to the requirements of its target audience and make sure it’ll be successful? Who’s responsible for this key part of the workflow? The answer is a product manager.

 

Even though product management is a core part of the workflow in many companies, meaning behind this position can get people confused. First of all, it may be difficult to understand the essence of the “product” part. We are used to seeing “products” as something that is sold to people, so product managers may be confused with merchandiser, sales manager or other person responsible for purchases. Moreover, it may be mistaken for a job of project manager because sometimes they do have similar responsibilities. Today, in our article, we’ll clear up the essence of a product manager and their role in the workflow of web and mobile development and design companies.

 

wordpress theme design tubik

 

Who’s a product manager?

 

Typically, it is a person who is in charge of the general success of the product. A product manager makes sure that all aspects including business model, positioning, branding, and marketing of the product come together and, what’s more importantly, they ensure it meets users’ needs. Their primary concern is the target audience of the product, the business needs and measurement of the future success.

 

However, the role of product management varies depending on a size and a type of a company. For the web and mobile companies, a product manager is the one who builds the extensive network of relationships between customers and all the parts of the team including development, design and marketing departments to identify the goals, roadmaps and the requirements for the product. Their responsibilities include setting the strategy, the communication with customers, and defining the set of basic features. The main objective of a product manager is to create a product that users will love.

 

Product manager vs Project manager

 

It is sometimes thought that these two jobs are identical: they can be mistaken because people don’t see the differences between a product and a project. Let’s figure it out. A product is what a company provides to the users and it doesn’t matter if it’s a tangible thing or a service that they provide such as design. And, speaking of a project we usually mean a plan that includes work stages, expected outcome, responsible parties, fixed terms and budget. The project is accomplished when the outcome is provided, while the product keeps existing (hopefully) far long after the project is complete. In many cases, product is the result obtained from a particular project.

 

tubik studio manager designer

 

According to this, we can say that the prior objective of a project manager is managing the team of specialists to complete all the stages of the project on time and under budget, while a product manager aims at managing and creating the competitive product that will work after the project is complete.

 

You can find more detailed information about a job of project manager in our article Project Management. Design Process Backstage.

 

Why do IT companies need a product manager?

 

Today the importance of product management is higher than it’s been ever before because of the focus on creating user-centered products. Nevertheless, many companies doubt whether they need to hire a product manager or it would be enough to have a project manager who will lead the team. For better understanding of the key role of a product manager in a workflow, we suggest looking closer at the tasks and responsibilities that a product manager usually takes on.

 

User/market research and analysis

 

In one of our previous articles, we’ve already discussed the role of user and market research in the process of mobile application development. User research means getting deeper into details of core target audience to understand their preferences and psychological peculiarities, the influence of different factors like colors and creative performance ways which could engage users and make them active. Marketing research means exploring the market segment, primarily in the perspective of creative solutions used by competitors. The success of final result depends on how these stages were worked out, so it may be useful and beneficial if they are accomplished by the professional product manager.

 

tubik studio design business

 

Product strategy

 

Product strategy is a plan that organizations follow to achieve desired outcomes.It helps to structure the goals and the ways to achieving them. The product strategy usually consists of a set of chosen activities and milestones to be complete which are typically illustrated as a phased timeline that starts with the current stage and goes to the specific point in the future. The aim of a product manager is to create a solid product strategy that will help organize activities, establish the connection between the product and the company strategy, and clearly identify the steps that should be taken to achieve the business goals.

 

Features for MVP

 

Just to remember, MVP is a product with the set of minimal functions and features which are logically completed and sustainable providing the most important and basic functions for the core target audience. This means that the basic version of the product, able to fulfill key operations solving target audience’s problems, is created as live and starts real functioning as soon as possible.

 

Product manager’s responsibilities include setting priorities in all the processes of creating a product. Based on the research results, they need to choose only necessary features that respond to the actual needs of core target audience at the moment.

 

design navigation UI UX tubik studio

 

Communication with clients

 

At the early stages, product managers build communication with the clients in order to identify their goals for the future business. When the product is being created, product managers usually write short reports daily which may be filled with graphs, charts, or updated suggestions. In this way, you can build trustworthy relationships with your clients and create the competitive product. Certainly, in some companies these are the responsibilities of project managers. Nevertheless, a product manager knows more about the specific features of the product, that’s why it may be more effective if the reports on the product development (not a project’s progress) are made by product managers.

 

Presentation

 

Research and analysis process aren’t over after a product has been developed. Product managers keep searching for new ideas and the updates on the target market. That’s why regular meetings and presentations about the findings may be quite useful for the successful outcome.

 

Design Studio Tubik

 

We should note that in many digital agencies, UI/UX designers carry out user and market research by themselves to get deeper understanding what they need to do. Nevertheless, global product strategy planning can be hardly related to the field of designers’ specializations. Marketing, business strategies, economics and communications are forte of a product manager who may know little about design but be able to maintain the product presentation and promotion effectively.

 

As you can see, product management can make the connection of the product to the clients and users tight and efficient from the earliest stages of its creation. However, in any case the decision on involving a product manager into the process is highly individual. It depends on numerous factors, including the budget, complexity of the product and the goals behind it.

 

Recommended reading

 

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

Behind Every Great Product. The Role of the Product Manager
 

Who Needs Product Management?
 

Why Companies Need Full-Time Product Managers (And What They Do All Day)
 

Transitioning from User Experience to Product Management
 

The User Experience Guide Book For Product Managers


Welcome to see the designs by Tubik Studio on Dribbble and Behance