This time we will be concentrated on some purposes that can make the designer think about animated interface elements as the sort of a design solution improving interaction and providing a positive user experience.

Purpose is a key

As we mentioned in our previous article, today interface animation is a great way to retain users as it makes their user experience pleasant and enables solving their problems faster. However, the designer should deeply analyze its potential for increasing usability, utility, and desirability of the product before making a decision to apply any sort of motion design. The animation should be used thoughtfully and always have a clear purpose. The advantages and usefulness of its application in the interaction process have to be obvious and outweighing the possible disadvantages. The animation should become the icing on the cake, not a fly in the ointment. The purpose is a key opening the door to efficient design solutions.

Therefore, the first thing to decide on is the purpose of why animation could be applicable in the interface. Here is the list of possible purposes.

Purpose: Showing that the process is progressing

One of the important and essential positive features of interface animation is communication with the user. Animated interface details are able to instantly inform the user about processes he is involved in. Therefore, one of the aims of motion design in UI is to inform the user about the stage of progress.

As we mentioned in the post devoted to animated microinteractions, this is probably one of the most widely-used types of interface animation. It lets the user instantly understand that the process is going on and even show what stage of the process is actual now. The biggest advantage of this animated interaction is providing assurance for the users, making them calm and confident in the process of using the product. Confident and happy user in the vast majority of cases means positive user experience and provides good ground for high conversion rates.

Certainly, it is not the magic wand and usability of this trick should be supported with all the other thought-out design elements. However, this particular kind of animated interaction really needs to be considered in terms of creating an efficient user interface informing the user quickly.

Preloader 

Dynamic Scroll 

Pull To Refresh

Timeline App 

GIF for Pull Down — Space Ship 

Purpose: Showing that the action is done

One more popular purpose of using interface animation is somehow the next step of the interaction. It doesn’t show the process, it shows its finalization. Again, it’s one more way to inform the user which means that the importance of such interaction is high. At every step of interaction with the product, the user needs to understand clearly and quickly if the action was done and the system responded to it. No wonder, the usability of the product design really suffers if this sort of feedback is not provided as fast and obviously as possible. Various sorts of animated elements from simple ticks to complicated animated mascots or illustrations can serve this need.

Nevertheless, the matter of simplicity for this sort of animation is also a point to consider. Complex animation can overload the page or screen or take too much time for such a simple operation, so it should be properly analyzed. On the other hand, original animation can become both informing and attractive, it can entertain the user which is also an important feature for some applications and websites. Knowing the target audience and its potential preferences is extremely helpful here.

Switch Control Animation 

Hamburger button

Add Button 

Purpose: Grouping the data

One more potential aim is providing groups of any kind with a big base of typical data. Animation in this case can liven up the process, especially in terms of the transition from one group to the other. There can be cards with personal data, separated conversations, and chats, data about items and products, information about transport, and tons of other options. Motion added wisely here creates the illusion of physical contact with the data cards or groups and can provide a good reason for feeling this experience as positive.

Blog App 

Cards Animation 

Boat Station App 

Purpose: Drawing attention to specific elements

This sort of animation is used to highlight something important that users can possibly miss while shouldn’t. Being animated, the element of the layout gets much higher chances to be noticed even if it’s quite small. However, this sort of animation should be used carefully, otherwise, it can distract the user’s attention instead of concentrating it. If this type of animation is applied, preferably only one element of the layout should be animated in terms of one interaction in order to achieve the highest attention ratio.

Cafe Coupon App 

Purpose: Providing a prompt to the user

This sort of animation is actually very close to the previous as its initial general aim is to draw attention to the particular element by means of motion. In this case, the trick is used to give users a clue what sort of interaction can be accomplished in places where this interaction is not obvious for everyone. Small unobtrusive interface animation provides instant communication with the user and shows the necessary direction to move one, simplifying the process of dealing with the interface. This kind is really helpful in terms of providing intuitive navigation and therefore usability, crucial for a positive user experience.

Contact List Concept 

Purpose: Supporting general style and branding

One of the cases, when the slight animation is applicable, is adding some motion to the elements of branding which are used in the layout to support brand awareness. In one of our articles, we have mentioned that the strategy of a consistent using elements of branding in the interface, especially applied directly in the process of interaction with a product, can be an effective method significantly strengthening brand image. Animation can enhance this effect, draw attention to specific branding elements and increase the general recognizability of the brand.

Animation for Saily App

Purpose: Keeping consistency of transitions

This sort of animation is mostly used in web design, frequently in the process of scrolling the page. The effect of well-known and widely-used parallax or other sorts of animated transition has not only the aim of entertaining and creating immediate WOW-effect as it often seems. The deeper function of such a technique is creating the feeling of consistency that makes transitions smoother and more natural. Thus it can create a positive feeling in the process of interaction and if necessary keep elements requiring more attention always in view. Nevertheless, the effect of style and aesthetic pleasure which can be raised by this sort of animation, also shouldn’t be underestimated as it is a good way to attract attention and tickle user’s curiosity.

Birds of Paradise Encyclopedia 

Museu 

Animation for Recipes and Cooking

Purpose: Shock and awe

Perhaps, you remember the episode of “Hitch” comedy where the guy wishing to attract the girl he loved was instructed that the first step to this is to “Shock and awe!” Somehow, it is one of the techniques to work out in design also because users actually start interaction with the product at the moment they notice it and get curious to try. Sometimes, animation can become the feature instantly grabbing their attention and giving a positive feeling of engagement from the very start. Even a simple splash screen with interesting animation can serve this purpose. Again, this sort of motion design on the screens or web pages can provoke many debates like the one with the least practical value. However, practice shows that practical issues are not the only thing people want to get from the products they choose. Aesthetic pleasure, entertainment, gamification and challenges, fun and cuteness, style, and amazement can also be strong features in favor of your particular product among the others on the market.

Landing Page Animation 

Calendar App Animation 

Capitoledge — Free Screensaver 

Useful Reading

Here’s a set of handy articles for further reading on the theme of UI animation:

What Is Conceptual Animation and How It Works in UX Design

How To Use Animation To Improve Mobile User Experience

Mobile Motion. 20 Creative Concepts of UI Animation

Interface Animation: Eye-Pleasing, Problem-Solving

UI Animation. Microinteraction for Macroresult

Interface Animation. The Force of Motion

Animated Logos: When, Why, and How to Use

Originally written for Tubik Blog

Сообщение Animated Interactions. Motion on Purpose появились сначала на Design4Users.

Most of the designers working in Tubik Studio have tried in practice both workstyles, which are typical for today’s designers in the sphere of web, app, and branding design: most started their path as freelancers before getting into the team. So, using the advantage of real-life experience, we would like to discuss the high and low sides of freelance or work in the studio or agency. Obviously, a lot of things have already been discussed in numerous articles on this topic, but perhaps our thoughts can also become useful for those who are considering the theme.

Freelance

No doubt, due to the new technological horizons a couple of decades ago, freelance became the new and broad perspective of organizing work routines. It opened wide opportunities for talented people who could not leave their homes, such as the disabled or parents of babies and toddlers. This kind of workstyle brought easy solutions for a lot of problems and let the people realize their abilities against all the odds, so very soon, it was taken over and improved by a huge number of professionals in different spheres. The accents moved a bit: a lot of people made the choice of freelancing not because they didn’t need to go to an office but first of all because they could work for themselves and be the only people responsible for their own decisions, choosing the partners or customers and depending on themselves. Freelance workstyle gave them the feeling of freedom.

Benefits

• You are free to choose the projects and customers you want or do not want to work for;
• You make your own choice of place and time of work;
• You do not depend on other people and are able to estimate your own productivity;
• You decide what kind of tools to use for any stage of the project you work on;
• You don’t spend money on transport and other costs obvious for those who work in the office;
• You control your workload and decide on the flow and priorities of projects;
• You are totally responsible for your creative decisions and are free to stop working on the project whenever you want.

Drawbacks

• Less (or absent) guarantees of successful payment;
• Less (or absent) guarantees of steady workload;
• No support for creative blocks and problematic issues;
• A great amount of time is spent on communication with customers, which can be not only time-consuming but also highly stressful);
• Work under pressure of responsibility 100% of the time;
• Absence or lower amount of live communication with colleagues on a regular basis;
• No financial support in cases of sickness or holidays.

Responsibilities

• You are the person responsible for communication at all levels;
• You are the person in the business controlling the financial flows, income, and expenses;
• You set the deadlines and have to control them by yourself;
• You work from home or any other place and should control the influence of the conditions on your productivity;
• The scope of work you can supply is limited by your personal abilities and talent;
• You have to be strong-willed and highly organized to efficiently separate your work time and personal time.

Bottom line
This way of work demands a high level of total and absolute responsibility in case the person wants to become really successful rather than just make a living. In the sphere of design, you have to become a “Jack of all trades,” being able to organize an efficient workplace, have fast and easy communication, keep deadlines, control finances, and improve as a professional all at the same time.

Teamwork

Talking about the design sphere, teamwork usually means that you become a part of a design studio or agency. Certainly, this style of work is different from the one described above, not only in terms of workflow itself but also in terms of process organization.

Benefits

– In most cases, a team consists of diverse professionals in design, and this gives a broad space of creativity and high chances of getting involved in complex design projects;
– Working in a team has a higher level of stability in workload, planning time, and finances;
– In many cases, it gives a faster way of successfully presenting yourself as an international design community as a result of the accumulated efforts of all the team members;
– Teams include not only designers but also managers who are a real and important support in terms of communication with customers, including the cases of solving conflicts and misunderstandings that are unavoidable in full-time creative work; moreover, it saves your time, which you are able to devote to pure creativity instead of organizational and communication issues;
– Team has a great advantage of brainstorming and collective mind that can become very supportive, especially in case of creative block or complex task;

– Team can take big and complex design projects, splitting the parts of it to the designers who are the most capable of producing final results good for all the team productivity;
– Team provides regular communication both with designers and managers, which is good for self-improvement and building social relationships;
– You have a clear separation of your working space and personal space, which is a vital condition of personal comfort for many people;

– You have a feeling of somebody to back you up that can give you more confidence;
– The team has more variants of promotion and presenting its members. In the case of the design sphere, it is sometimes a less time-consuming and faster way to get involved in the community and take the support and popularity of being a part of the team;

– The flow of information exchange and circulation is much faster and more efficient increasing the level of general team productivity and problem-solving potential;
– Team can bring good friends into your life as well as inspiration and live energy absorbed from the other people around.

Drawbacks
– You have to organize your routine according to the schedule of work with a team, whichever flexible could be the variants offered to you;
– You have to get ready to be a part of a group. It’s vital to know that even presenting yourself as a designer, you are working in the team and for the team;
– You are working in a set of restrictions, and in many cases, you are assigned the projects, not choosing the tasks but getting them for your consideration and accomplishment.

Responsibilities
– You have to be aware that you are part of the team, but as well the team is an integral part of your image;
-You are always involved in more or less active communication flow, which is natural for any kind of work. That means that you should take into account the interests, habits, characters, and thoughts of other people around you;
-You have to consider not only your personal interests and prospects but also the interests and prospects of the team.

Bottom line
Teamwork has its own responsibilities and seems more than freelance, although in most cases, it is an illusion. Teamwork provides the chance of taking the best from delegating responsibilities between the people who are the best for the role, so a designer has more time for pure design and creative work as well as professional self-improvement, not bothering so much about management and organizational issues.

Conclusion

Definitely, none of the benefits or drawbacks are absolute: as all people are different, the methods of workstyle for their best productivity should also be various. No secrets or tricks; just one man’s loss is the other man’s gain. Some of us are amazing team players, while others prefer full responsibility and decision-making only on their own shoulders. None is bad or good; all those things are extremely individual.

Inside the studio, we have gathered people who are consciously keen and able to take all the advantages of teamwork. It never ever means that any of them has lost their freedom, as all people in the studio have enough of their own private space and the chances of work not being disturbed. However, this kind of freedom is always supported with all the team who are invisibly behind you and ready to back up any moment it’s needed. So, we think 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.

Originally written for Tubik Blog.

Сообщение Design Workstyle. Freelance VS Teamwork появились сначала на Design4Users.

Tubik Studio designers working

Tip 1. Strong determination and clear ambitions

The first and really crucial thing may sound rather primitive: you should make sure that you really want to make it your job. There are lots of people who, being great artists, deeply creative and inspired, get broken by the necessity to work systematically with strict deadlines and loads of requirements and wishes (sometimes illogical or not-too-professional) from the customers. Clear up the nature of your job: the designer is not a pure artist free of obligations and fully devoted to creativity. Nope. In different stages of your project, you’re also going to be a researcher, an analyst, a time-manager, and so on and so forth. Bear in mind all those things from the very start of the way.

CEO of Tubik Studio Sergey Valiukh, whose working day is always full of everything

Tip 2. Get experience from the best artisans

That is a sort of eternal advice working in the sphere of web design as great as in any other field of creativity. First, you study from the best stars in your trade and, if you are industrious and hard-working enough, one day you will be able to create something purely original, something of your very own. However, this day comes when you ARE ready and well-armed. So, don’t forget to study from the best. Look through the shots by the most popular teams and designers on Dribbble, Behance, and any other resources for designers.

One more way to absorb their experience and get some great advice from specialists is to take any chance of a live meeting. All the platforms aimed to present portfolios by designers and supply different aids and useful stuff, regularly hold meetings with speakers well-known in the world of modern design, so in any country, you are able to listen to experienced professionals, ask them questions, sometimes present your works and get them evaluated. Therefore, make visiting various meetups and workshops more or less frequent part of your routine and, be sure, it will pay back very soon.

Sergey Valiukh as a speaker

You may like recognized designers more or less but remember: they ARE already well-known and successful. That means there always exists something you can learn from them. Analyze, get inspired, try to copy the best features so that you could get the technique. It was effective hundred years ago in traditional art schools and it still works now. Believe us, we’ve checked.

Tip 3. Share, share, share

There are a lot of designers who don’t hurry to share their works. Some of them are not confident enough and think they have to be much more experienced and skilled to present their creation anywhere to other designers or potential customers. The others are afraid that their ideas are going to be stolen by other designers as soon as they turn up in the Net. Actually, those thoughts and fears may be rather fair and grounded, BUT … You should realize that they are really high-quality brakes for the process of making your name in the sphere of web and app design. While you are boiling in your hesitations, other people are moving on sharing there works and getting feedback from designers and users and thus improving their creations and practicing their skills. If you want to move on in this sphere, it is essential to share. That is why Dribbble, Behance, or any other way of presenting your work in the Web will make you somehow stronger and more competent in your job. Moreover, it would be fair to not only analyze and study someone’s efforts but also make it possible for others to do it with your work.

The set of shots by Tubik Studio

Tip 4. Keep theory and practice in the same basket

Well, we all know the saying that it’s not a good idea to keep all the eggs in the same basket. However, design has nothing in common with eggs. Here you really need to keep all the things together and theory should be always strengthened with practice. Don’t just analyze someone’s works — try to figure out main practical features, test using different tools yourself. Then you not only get valuable knowledge of software and sites helpful for your work but also study how to plan your time using those tools and have an opportunity to choose those resources and software, which are the most convenient and efficient for you personally.

Test, use, keep positive!

Tip 5. Good old self-education

Ezequiel Bruni, a web/UX designer and blogger living in Mexico in his article The ultimate guide to getting started in web design says “The moment designers stop learning new things about web design is the moment they cease to be relevant. The Internet is all about relevance. Seriously, if your website looks too dated, chances are that many visitors won’t stick around to see what you have to say. Perception is everything”.

Well, it’s vital to say he is absolutely right. You have no choice: in the sphere as changeable and dynamic as an app and web design you MUST study all the time. The good thing is that studying this craft now is much easier as tons of books, manuals, and guides have already been brought out and this process never stops. There are also loads of webinars, workshops, and e-books allowing you to get more aware of major issues in the field you have chosen for your career.

Tip 6. Keep your head above the design ocean

If you want to create something that is going to be both useful and popular, you should always keep yourself alert. It’s really important to feel the ray of the day, to be aware of the most important and required features and demands to stay trendy and relevant. Again, looking through blogs and sites devoted to design is helpful to keep you up-to-date. Again all kinds of meetups, seminars and workshops should be mentioned, as they give you the chance both study but and — that is sometimes even more important — make new friends, get acquainted with colleagues from other cities and countries, communicate with other designers in both formal and informal atmosphere. That is always really positive, inspiring, and useful experience.

Communication is a part of the job: meeting with colleagues at different events

Behance Portfolio Reviews in Dnipropetrovsk, Ukraine hosted by Tubik Studio

Tip 7. Live the job, don’t just do it

As it has been already mentioned above, one of the fundamentals of creating an efficient product is keeping theory and practice together. However, don’t think that it’s only about YOUR particular product. It is also about the products by others. You should live your job all the time, you should practically know and use the most trendy stuff of your trade, otherwise, you risk to lose the feeling of reality and link to your user. To understand your user, you should BE a user. Actively use social networks and applications, don’t forget to update your soft, try the newest features of mailing, instagram your life and work. Feel every step of using various products so that your own success and failures could tell you how to avoid bugs and drawbacks in your designs.

Always keen to use, have fun and share

Hope, these tips will help you somehow and sincerely wish you good luck with every step you’re going to make on your design path.

Useful Articles

Creative Jobs: What Graphic Designers Do?

Seven Simple Tips for a Beginner in Web and App Design

Design Workstyle: Freelance vs Teamwork

Design Career: How to Get a Dream Design Job

Time Management for Creative People

How User Experience Designers Bring Value to the World

Originally written by Marina Yalanska for Tubik Blog

Сообщение Seven Simple Tips for a Beginner in Web and App Design появились сначала на Design4Users.