Tag Archives: optimization

Design is a job quotes

Design Is a Job. 30 Honest Quotes by Mike Monteiro

For plenty of people design is a synonym of art. And for some creative guys who do not make their living or their business that way, it perhaps is. However, for those who decide on making design their job solving problems and pains, it obtains other perspective and requires different approach. Sometimes it becomes a great discovery what a goal-centered activity design is and how many problems can be solved with it, far more than just aesthetic satisfaction.  It is vitally important to understand that from the first steps on the path to avoid disappointment and achieve access.

 

In one of earlier articles with tips to beginners in app and web design our first advice based on practical experience was rather simple. The first and really crucial thing may sound quite 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: 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.

 

For those who have made this vital decision, today we would like to recommend a useful and helpful book «Design Is a Job» by witty expert Mike Monteiro, the co-founder of Mule Design. The book reveals all the stages of design job, including communication with clients, organization of the process, drawing contracts, working in teams of colleagues and so on and so forth. The author doesn’t try to make the profession look like magic: he is deeply and sometimes sharply honest about not only the benefits but also pitfalls. In the foreword to the book, Erik Spiekermann says: «Contrary to popular belief, designers are not artists. We employ artistic methods to visualize thinking and process, but, unlike artists, we work to solve a client’s problem, not present our own view of the world.» The ideas shared by Mike Monteiro are highly practical in supporting this thesis. It is not about design process inside only, it is more about the outer part of the design world, full of clients, requirements, goals, metrics, iterations, presentations and discussions.

 

Here we would like to share a new set of design quotes which we grabbed from this book for Tubik Studio Quotes Collection. This time it will be fully loaded with honest and informative thoughts by Mike Monteiro. Join in!

 

Design is a job quotes

 

A designer requires honest feedback and real criticism, and that’s not going to happen in a realm where colleagues or clients are worried about crushing the spirit of a magical being. The sparkly fog of affirmation gets in the way.

 

Clients will always ask you to make their logo bigger, prescribe solutions, and ask you to do things that will make you smack your forehead. You can roll your eyes at how much they don’t understand about design or you can roll up your sleeves and begin practicing your craft by helping them clarify what they need.

 

If you can stand in front of a client completely confident and explain why you are worth the amount you quoted, you should charge it.

 

The general rule is to involve as many people as possible in early discussions, and make that number as small as possible once you go into review cycles.

 

Anyone who hires you because they thought you could do the job and then doesn’t let you do it has lost respect for either you or the design process.

 

Whether you are helping to launch a new business from scratch, or making incremental changes to an existing product, or something in between, any design task you undertake must serve a goal. It’s your job to find out what those goals are.

 

quotes collection design tubik studio

 

Successful design balances convention—familiar forms, terms, and interactions—and novelty—new forms to engage and delight the users, in the hope they will stick around a bit longer and maybe buy their pants here instead of somewhere else. As long as you remember that those new forms must serve the goals of the business. Otherwise, they’re just novelty.

 

A good client will trust your process as long as they have transparency into it, can see results, and you’re willing to bend a little here and there. Without breaking.

 

A designer who does not present his or her own work is not a designer. Presenting the work, explaining the rationale, answering questions, and eliciting feedback are part of the design toolkit. If you sit at your desk while someone else presents work to the client, you don’t get to complain about the feedback. The failure was yours.

 

Clients are the lifeblood of a healthy business. They are the oxygen in your bloodstream that keeps everything going. No matter how good you are at what you do, without someone willing to pay you for that service you will have to close your doors.

 

tubikstudio design quotes

 

If you’re trying to decide between two design firms that seem equally talented, the one that came with a referral has a solid advantage. And that vetting goes both ways—a client who is well-socialized and has a good reputation in a large network is more likely to be a great client. In most cases, you’re going to be as skeptical of a client who hires a designer from an ad as they are of the designer who answered that ad.

 

…you should aim to be pleasant to work with, as everyone would rather work with someone pleasant than with an asshole. But no one wants to work with someone who’s faking it. Doing good work often requires a few hard conversations.

 

The biggest myth ever perpetuated in the design field is that good design sells itself. (The second is that Copperplate is a legitimate typeface.) Design can’t speak for itself any more than a tamale can take off its own husk. You’re presenting a solution to a business problem, and you’re presenting it as an advocate for the end users. The client needs to know that you’ve studied the problem, understood its complexities, and that you’re working from that understanding.

 

Ultimately, your job is to make the client feel confident in the design. Confidence is as much of a deliverable as anything you’re handing over in the project.

 

There’s a difference between being enjoyable to work with and being “nice.” Being nice means worrying about keeping up the appearance of harmony at the expense of being straightforward and fully engaged. Sometimes you need to tell a client they’re making the wrong call.

 

design quotes tubik studio

 

Of course, being the most pleasant person in the world won’t help your cause if the work isn’t good. But don’t make the mistake of thinking the quality of your work by itself will be a shining beacon that pulls clients near.

 

You can do a lot to show a client how valuable time is in how you comport yourself throughout the project. Run your meetings and work sessions efficiently. Come in prepared. Don’t run over. Don’t hang out. Don’t train clients to think you’ve got extra time on your hands.

 

At the risk of sounding like a broken record, stay in good communication with your clients at all times. They will accept your process as long as you are showing them results. Make sure to set their expectations correctly as to what is happening when.

 

Over the years the one constant that we’ve been able to rely on is that how a potential client behaves in the business development process is exactly how they will behave during the project. Trust your gut.

 

design quote tubik studio

 

Never work for free. Any work you take on for free will get pushed aside for paying work. That does neither you nor the client any favors. Neither of you will respect each other’s time. If the situation merits it, work at a discounted rate. But submit a budget showing the actual rate, with the discount applied. Let the client know the value of what they’re getting.

 

Not knowing the design language doesn’t make someone a bad client.

 

Only you know the value of your time. (Hint: it is greater than $0.) But the value of your work to a particular client depends on what the client has to gain from that work. And the client is not buying time from you. They are buying work. The value of that work is what you need to charge them for.

 

As we tell potential clients when they ask us what their site will look like: “Oh, we have no damn idea. But we know what the process is for finding out.”

 

But much like the best umbrella is the umbrella you have on you, the best process is always the one you’re having success with. Don’t fall for trendy processes. If the one you’re using works for you, go with it.

 

tubik studio design quotes

 

You’re not going to ask for permission to do things your way. You’re going to convince clients that your way works by showing them how you will use your process to meet their goals. And you’ll back this up by showing them how many times it’s worked in the past.

 

Throughout a project you may have to remind a client multiple times that they agreed to follow your process. And throughout a project you will have to convince a client that your process is actually on target to get them the results they need. There will be hand-holding. There will be tough love. But above all, you will have to stand your ground and stick to what you know works.

 

…just make it a habit never to speak ill of your clients. They’re paying your bills. And putting their livelihood in your hands. They’re good people.

 

Working with other (talented) designers makes you a better designer, and is essential to your professional development, especially early in your career. There’s simply no better way to learn your craft than to watch someone else practice it.

 

Not only can a designer change the world, a designer should. This is the best job in the world! Let’s do it right.

 

tubik studio design quote collection


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

SwiftyBeaver ui by Tubik studio case study

Landing Page. Direct Flight to High Conversion.

Today we would like to discuss the topic which goes far broader than pure design issues. It lies on the crossroads of design, marketing, user research, psychology and other spheres dealing with people, their behavior and solving their problems. Today we are talking about landing pages. Let’s think over the most popular questions often asked about landing page design.

 

What is landing page?

 

Landing page in its basic wide meaning is the term used for analytics to describe any page where the user started his or her journey around your site, in other words, where a user lands on the website. However, today the other, more specific meaning is used much more often to define a landing page. Behind this term, people understand the special web page created for presentation of the specific product, service, features or options so that the visitor could get necessary information quickly and easily not being distracted.

 

That is why the analysts say a landing page is in most cases much more efficient than home page. Home page can have too many options and getting through all of them to find the particular product the user can get distracted from making the decision, lose interest or even get annoyed.

 

landing page animation Tubik studio

magic.co landing page concept by Ludmila Shevchenko

 

What is conversion and why is it important?

 

Talking about the sphere of design for businesses and products, especially in terms of their marketing and promotion, the word conversion is perhaps the most popular and widely used. In its most general definition, conversion means transformation, and depending on the field this words is applied for, it will be used for different objects.

 

Initially in terms of e-commerce, where landing pages have perhaps the widest field of application, conversion is the index showing how many visitors actually moved to the end of the way they were offered actually buying a product. So, for e-commerce conversion transforms visitors (users) into buyers.

 

However, nowadays landing pages go far beyond e-commerce, therefore understanding of conversion also gets broader. In modern terms of comprehensive and numerous functions and needs, which users are able to fulfill with online resources and digital products, conversion is the rate of cases when visitors did the action they were called to. And that can be not only buying something.

 

In terms of landing page, conversion can be also fixed in case of:

— moving to direct use of a product

— subscription

— transition to the other page

— downloading an app or a file

— providing some information

— answering the question in the survey

— starting free/discounted trial use of a product

— browsing a library

— reading more detailed description of the product or service etc.

 

Tubik studio landing page design

 

Here we can see a concept of a landing page designed by Konst. It presents a website of a rock group. Different blocks of the page provide different calls to action not overloading the user with the information. Therefore, a visitor needs split seconds to scan the page and find the necessary section that enables to see more about the topic of a particular interest.

 

website animation tubik studio

 

Conversion means that your page transforms passive users into active. They don’t just observe the information given to them, but also do the action which is offered by this page. So, conversion is one of the most important indices of the page efficiency which is vital for business. Landing pages are focused on engaging visitors with data performance and stimulating them to make the action which in vast majority of cases is a part of a business plan.

 

Jeff Eisenberg, a successful businessman and head of an advertising agency, gives a brilliant thought about the importance of conversion: «It’s much easier to double your business by doubling your conversion rate than by doubling your traffic». His words are proved by practice of numerous businesses that direct target users to landing pages providing specific data and saving their most precious resource — time.

 

Why is landing page needed?

 

As we mentioned in the case study about designing a landing page, it is easy to answer this question with a little metaphore. Imagine, you are going to visit, let’s say, New York to walk around Manhattan. That is the dream of your life. Finally you find the service which offers to take you to New York City fast and cheap. Great, isn’t it? You pack your bag, you charge your camera, you get up full of admiration as the dream of your life is going to get real. And then you are taken by those amazing people who offered you the realization of your dream to the entrance point of New York City. They leave you there to find Manhattan or any other place you want by youself. How do you like it now? Who knows, perhaps you will be not so happy after exhausting journey around the huge city looking for the place you want. Wouldn’t it feel great to be taken right to the destination, fresh and ready to admire and absorb positive emotions? Wouldn’t you as a customer be happier to reach your goal faster and easier? Sure, yes.

 

That is actually what a landing page does. When a person obtains the information from the outer source about the specific product, feature, information or service and clicks through the link to its provider, sure, he or she doesn’t dream to spend a lot of time looking for desired product or page among all the links and information provided on your homepage. The user wants to «land» directly at that very place which will make possible for him or her to get what they want as fast as possible and getting enough (but not too much) information to support their decision-making process. So, creating a well-thought-out landing page is really vital to strengthen marketing strategy and increase conversion rates.

 

Tubik studio UI animation

 

As a practical example, here is the design concept Museu by Ernest Asanov. It presents a landing page promoting art exhibitions. The idea behind it is to make this sort of promotion aesthetic and unobtrusive for the user as well as highly informative. The balance of minimalism and utility appealing is kept by means of style, color and motion.

 

In the book «Landing Page Optimization: The Definitive Guide to Testing and Tuning for Conversions» by Tim Ash, Maura Ginty and Rich Page, the authors provide concise set of rules which designers and marketers should remember about creating a digital interactive product. It’s high time to remember them now:

 

The Rules of Web Awareness:
- If the visitor can’t find something easily, it does not exist.
- If you emphasize too many items, all of them lose importance.
- Any delay increases frustration.

 

These thoughts make the solid ground for using landing pages in case when you need to concentrate user’s attention on something important, to make it noticeable and easily available. Landing page is a tool to emphasize one item, to make it quickly found and to reduce delays in cases when target user seeks for specific operations, services or items. As the author of highly informative article «The ultimate guide to designing landing pages that convert» Cameron Chapman mentions, «One of the biggest mistakes a marketer can make is sending traffic from any kind of advertising or PR campaign to their home page. Your home page likely has little direction or direct connection to the campaign sending traffic to it. That can leave visitors confused.»

 

What does a landing page consist of?

 

Actually, landing page is a field for broad creativity and depending on the target audience and objectives behind it, it can be very different. There isn’t a single guide for the fixed scheme and construction of a landing page, but there is a basic thing that should be provided by any landing page. It doesn’t matter what size is the page, how many parts it includes, how many visual elements it uses, the most important thing for any page is that it should provide VALUE.

 

In general, typical landing pages often have:

 

1) General idea of the presented object (product, service, activity etc.) with call-to-action element. Users need to be provided with basic description of the benefits, preferably not too detailed but concise and useful. The aim of this element is to inform the user and provide a clear and noticeable oportunity to actively use this information via call to action element which can be presented with a button, link, contact form, subscrition field etc.

 

2) Testimonials and signs of trust. People usually tend to trust more to what is already used or tried by other people and recommended as worth attention. Therefore, testimonials from clients, considerable numbers of followers in social networks, awards and certificates can have a great impact on conversion rate.

 

3) Description of the main features. This block of information can be used as an additional information supporting description of basic functionality. It supplies a visitor with more details about the product or service, its abilities and technical characteristics, its influence on life and productivity and the like. It certainly makes the landing page longer and requires more attention from users so applying this block should be always thoroughly analyzed.

 

Tubik studio landing page design

 

The example provided above is a concept of landing page accomplished and presented on Dribbble by Sergey Valiukh. As you can see, it involves all the elements mentioned above.  The aim of the page is to promote a shop of organic food. It is composed in several blocks presenting the name of the shop, products, highlighting some important aspects of service, call to actions and testimonials. The designer sets the purpose to make it informative but not overloaded, appealing but not aggressive. To make the experience more attractive and engaging, the process of scrolling the page was livened up with animation and the visual elements were selected to support the general theme and provide immediate visual perception of basic idea.

 

Landing Page Animation Tubik Studio

 

What are important aspects of an efficient landing page?

 
— Target audience analysis
 

No landing page should be designed without a solid basis of research and analysis. Landing page is not an object of pure art, it is a part of promotion and presentation strategy. Designer working on a landing page should keep in mind that any marketing campaign comes from definition of the goals and target audience. So, a landing page should be designed as a virtual bridge connecting target customer with a product or service. For a webpage with high conversion rates, design decisions have to be based on analysis of target audience’s preferences, abilities and psychological characteristics. Design of a landing page that will work for everyone is utopia, standing far from real business achievements and results.

 
— Market and competition analysis
 

One more aspect designer should dedicate time and effort for is analysis of the competition. Earlier we have already considered the connection between UI/UX design and advertising basics in the article «10 advertising basics to apply in web and app design» and one of the points was devoted to the aspect of competition analysis. As far as landing page is actually an active part of marketing process, the analysis of the market is inevitable for good result. Knowing the competitors, you will be able to create original ideas of presentation that will not get lost among other numerous products and services.

 
— Copy
 

Famous guru of advertising David Ogilvy said: «Every word in the copy must count.» This is a simple but unavoidable truth if you deal with a landing page. Decision on the amount of copy used on the page should be the aspect of thorough research and testing as it directly and highly influences conversions.

 

However, it doesn’t mean that every landing page should contain minimal number of words. If it presents a famous company product or service or informs about special offers, sometimes short and concentrated copy is enough to encourage users. However, if a new unknown product or service is presented, it is important to provide users with more information persuading them to follow call to action.

 

Tubik studio landing page ui

 

The provided example shows the design concept of a landing page for a non-profit organization accomplished by Polina. It uses considerable copy blocks and supporting visual elements to set the understanding of the club activity.

 

tubik studio landing page design

 

— Branding elements

 

It is obvious that elements of branding such as a logo, corporate colors and typefaces, slogan and other identity traits should be strongly presented on a landing page. They should provide strong connection of a presented product, service or activity with the company or brand visual and verbal identity. This improves efficiency of general marketing strategy.

 
— Visuals
 

As it was explained previously in the post about visual perception in UI, people in general have incredibly broad abilities to perceive visual marks, recognize and proceed data even transformed in images of high level of abstraction. In vast majority of cases people fix and percieve pictorial elements like icons and illustrations faster than words. Great proportion of users are visually-driven creatures by nature. As it is shown in all the examples provided higher, using attractive and informative graphics in landing pages enables users to catch the idea and scan the page much faster and saves their time as well as involves their aesthetic perception in the process.

 
— USP and CTA
 

These are two magic words to make a landing page efficient. USP (Unique Selling Point) is the most important benefit (or set of benefits) people can get with your product. CTA (Call to Action) has to encourage people to realize the conversion. Effective landing page quickly informs a user about unique selling points and provides noticeable, clear and easily-available calls to action. Design solutions and techniques for actionable CTA are worth the separate detailed discussion which we will start here in Tubik Blog soon in our next articles.

 
Short loading time
 

One of the aspects influencing design solutions for landing pages should be reasonable time of page loading. Users do not like to lose their time, and landing page is not a piece of unique something that will be an exception. Don’t make the visitors wait. All the design solutions should be thought-out carefully not to overload the page and prolong its time of loading unnecessarily.

 
— Video Presentation
 

Video presentation can become a very good way to present a product without making users read long copy blocks. It involves all the sences of perception into process. Video can make the page active and interesting. However, there is a pitfall to remember about: video has a considerable impact on page loading time. So, it should be really worth watching to become a design element of an efficient landing page.

 
— Responsive design
 

Several years ago one of the articles on Think with Google provided interesting facts and statistics about the importance of resonsive design for web products. Among them, we can learn that:

  • 61% of users said that if they didn’t find what they were looking for right away on a mobile site, they’d quickly move on to another site
  • 79% of people who don’t like what they find on one site will go back and search for another site
  • 50% of people said that even if they like a business, they will use them less often if the website isn’t mobile-friendly.

 

Perhaps, today those numbers are even higher as more and more people are using mobile technologies on everyday basis. Neglecting this aspect may negatively influence conversion rates.

 
— Absence of distraction
 

As it was mentioned above, landing page should concentrate people’s attention around a particular object. So, it should get rid of any elements that can distract user’s attention and highlight the parts directly influencing the conversion. The less additional links are used, the better. Call to action elements should get the fastest and highest level of attention. In this case user will get the best navigation to the goal.

 

tubikstudio swiftybeaver landing

 

Here is a landing page for SwiftyBeaver native Mac application whose design was accomplished by Ludmila Shevchenko. As we can see it is designed in minimalistic manner and concentrates users’ attention on short copy about the product’s functionality and CTA enabling to request a free beta access. Although the page provides other important links, they are designed in a way not distracting from the main elements providing conversion.

 

Why should you test your landing page?

 

In one of our earlier articles «Basic Grammar for Designers. Must and Mustn’t in Design» as well as in practical case studies we have already mentioned the importance of testing. Experts in usability say and practice proves that it’s impossible to be fully objective about the project you work on, especially if it’s a long-term one. Moreover, designer is not a magician turning into anyone who will use the product to understand the best way of doing anything. Therefore, creating the idea is not enough. You should test it to grab the real practical data and improve your product.

 

Let’s also remember David Ogilvy, who said: «The most important word in the vocabulary of advertising is TEST. Never stop testing, and your advertising will never stop improving.» Testing landing page enables to understand users’ behaviour and fix the solutions that are not effective and user-friendly.

 

Studies based on practical landing pages testing prove that even such a small change as color of a CTA element or placement of logo on the page, let alone the copy of the headline and CTA or length of general informative copy blocks, have a huge impact on conversion rates. Collecting statistics and analytics data and their careful analysis is a good way to effective design solutions providing high conversions and sales.

 

Recommended materials

 

Diverse issues of applying landing pages have been an object of professionals’ attention. In terms of design issues, we could recommend the following articles for those who would like to know more:

 

Landing Page Optimization: The Definitive Guide to Testing and Tuning for Conversions

 

Landing Page Conversion Course (9 parts)

 

Classic landing page mistakes you’re probably still making

 

The ultimate guide to designing landing pages that convert

 

What Happens When You Analyze 100 Landing Page Examples?

 

10 great landing page designs

 

10 Key Landing Page Features That Draw in Prospects

 

7 Landing Page Call-to-Action Formulas for Higher Conversions

 

Want Conversions? Start with User-Friendly, Useful Landing Pages


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

invision prototyping tool tubikstudio review

Design Tool Review. Prototyping with InVision.

Prototyping is one of the important stages of efficient UI/UX design process as it allows trying design solutions and test them practically before moving to high-fidelity design polishing as well as product development.

 

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

 

General description of the tool

 

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

 

invision prototyping in tubik studio

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

 

tubik studio design

 

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

 

Why should you try prototyping?

 

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

 

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

 

tubikstudio UX design

 

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

 

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

 

invision prototyping tubikstudio

 

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

 

The power of collaboration

 

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

 

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

 

invision prototyping tool tubikstudio review

 

 

Additional features

 

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

 

— Easy and fast integration with other design tools for efficient work, such as Sketch of Photoshop, for example, from which the wireframes can be directly uploaded to InVision.

— Supporting cross-platform experience: the tool provides the ability to set sizes and resolutions of different devices you design for. This feature is highly applicable in the process of responsive design and mobile adaptations.

— Easy control and marking of project statuses for efficient project management.

— Functionality for creating and presenting mood boards, brand boards, galleries and style guides.

— Tools for direct live communication right from the project account. Especially appreciated by the teams working remotely.

— Saving versions history to easily compare several versions of design solutions.

— Diverse functions and features for creating high-fidelity prototypes that can be used for user-testing before the stage of development.

 

invision tool tubik studio review

 

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


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

copywriting tubik studio

Copywriting in UI. Words that Make Design Go Round

Here in Tubik Blog we have discussed a lot of diverse aspects of design, including UX wireframing, layout, color pallete, typography, appropriate animation and UI visuals etc. However, there is one vital element which was not discussed in detail, being, however, a great tool of success. The tool which is as ancient as humanity is. The words.

 

Words are well known as the universal mechanism of incredible functionality. In terms of user interface of any kind, being supported with all the other visual features mentioned before in our blog, text becomes one of the key features to successful performance.

 

The essence of copy

 

Not to mess up with the terminology, it has to be mentioned that in the field of design (as well as advertising and journalism) content written in text is called copy whenever big or small it is. The only single word you write on the call-to-action is already a piece of copy which, even being so small, can become encouraging or vise versa — confusing.

 

Although in terms of design we can get more concentrated on visual elements such as illustrations, icons, buttons, animations, colors and shapes, neglecting the aspect of copy while creating the interface can bring out great disappointment in final result. Words cannot be fully replaced with the graphics whatever amazing, high-quality and professional they are going to be. Therefore, copy should be thoughtfully analyzed and created in a way supporting general design concept and enhancing positive user experience via successful interaction.

 

tubikstudio library widget

 

 

Copy is the integral part of UI

 

Taking into account the fact that web page has rather limited while mobile application screen has highly limited amount of space that can be used for interaction elements, copy should witness elaborate and professional approach. That is actually amazing when designers are able to do all the work on the interface by themselves – obviously, that’s always great to have a unicorn on-board. However, they are not obliged to do it. Moreover, in many cases being great professionals in design they have difficulty tackling the issue of correct and appropriate copywriting for the screens.

 

This job as well as any other needs special skills and knowledge which designers need to master additionally. It has to be said that a great number of them really go this way, carefully studying the techniques and methods of creating copy that will be informative and engaging for users and at the same time will support all the visual design solutions applied for the screens or pages.

 

The other way to sort out this problem is to engage the professional copywriter in the process. Any way you go, the most important thing in this aspect is to find the way of creating copy for the interface that makes every single letter count. As copy is the integral part of UI design, we believe it should support the same philosophy as any other part of a layout: everything put on the screen or page has to be functional and purposeful. Everything should work for the user.

 

Tubik Studio UI sketches

 

Functions of copy in the interface

 

Copy belongs to perhaps the most comprehensive and multifunctional ways of interaction and engaging the user, especially when it is created on the basis of psychology and linguistic knowledge as well as deep analysis of target audience and product’s purpose. Efficient copy has a number of general functions, which can be presented altogether in one piece or in different combinations depending on the aim of the copy created. Let’s take a look at the most basic of them.

 

Copy implemented in an application or a website can and should:

— inform

— communicate

— enable interaction

— enhance navigation

— appeal to feelings

— engage emotions

— create tone and voice

 

Good piece of copy rarely covers only one of the presented positions. In vast majority of cases both designers and copywriters are keen to implement the copy which supplies several functions at the same time improving usability and speeding perception of all the content on the screen or page.

 

tubik studio web ui design

 

Copy is visual

 

One more thing that designers creating interfaces of any kind should always bear in mind is that copy is one more visual element of design. As well as the icons, fields, buttons, illustrations, toggles and the like, it literally occupies the part of the screen or web-page as any other graphic component and influences general stylistic presentation of the app or website. That means that both its informative content and visual presentation significantly affect efficiency of copy. This is the sort of mutual support of outer and inner side.

 

It’s also important to remember that success of the efficient copy directly depends on such design solutions as choice of types and fonts, background, placement of the copy. All the mentioned aspects greatly affect the level of readability, so when they are done inappropriately the copy even being highly meaningful will lose the chance to get all its potential applied.

 

So, let’s see what is the short bottom line here. Copy, which contains useful data but is poorly presented, will not work. Copy, which is visually presented in amazing way but shows the lack in meaning and purpose, will not work. Keep the balance to make everything go round properly. Make meaning and appearance support each other and both aspects will get more powerful in terms of usability.

 

good_sign_app_tubikstudio

 

 

Stages when copywriting is involved in design process

 

According to everything above mentioned, there are some stages of design process when professional copywriter can become a great help in the process:

 

— creating copy presenting user personas and use cases – done by professional copywriter on the basis of information obtained from user research, they can be more efficient as the text will get concentrated and can be more efficient, especially in terms of teamwork;

-creating copy for call-to action elements;

— creating copy for intro-screens, tutorials and tooltips;

— creating instructions and notifications for screens and webpages;

— creating the copy for sets of catalogue and menu positions;

— creating enganging copy for landing pages;

— creating templates for item descriptions etc.

 

product_design_tubik studio

 

The list is not a sort of cure-all here – it’s just a recommendation on the points to consider. On the basis of our studio experience, we can say that, in particular, it is useful for design teams which are keen to optimize and improve production so that all the professionals involved in design process could get deep into the work they do best of all and not get distracted with the tasks that are not directly in their skills scope. This sort of strategy usually brings high level of performance. As for freelancers in UI/UX design, working alone, our thoughts can be helpful to consider this sort of aspect and perhaps master some new skills in supporting visual solutions with effective copy.

 

This article is just a start of discussion of the copywriting aspect in the sphere of user experience design. In future posts we will get more in details about all the general aspects mentioned today.


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

tubikstudio ui ux design

UI/UX Design Glossary. Steps to Usability.

Practice shows that structured data is a great way to work optimization and that is one of the reasons why old good stuff like phone directories, dictionaries, vocabularies and glossaries, databases and sets of formulas are still applicable and convenient for everyday use. Order and organization make it easy and fast to find everything needed. And today we decided to make a step to this sort of optimization and provide the first set of definitions for some basic terms in the field of UI/UX design.

 

No doubt, today there are many various publications and online resources providing helpful and informative support for designers and explaining the necessary terms. In our previous articles we also get involved in this global process while describing practical cases of design. Today we would like to systematize some of the explanations here concentrating on UI/UX design issues enhancing usability and support the definitions with the links to the articles where we gave more details on the topic. So, let’s move on!

 

UX (User Experience)

 

It is the general attitude and emotional feedback that user has on different stages of using the product. In terms of digital products, such as websites or applications, UX is a comprehensive term involving all the possible stages of user engagement. UX is based on several key factors such as usability, utility, desirability, attractiveness, speed of work etc. If all the logic and possible issues of product implementation into real life are analyzed and designed properly, it forms positive user experience which means that users are able to satisfy their needs in fast, easy and pleasant way. Positive user experience is one of the strongest factor of retaining users.

 

UX Wireframing

 

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

 

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

 

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

 

UX design Tubik Studio

Read more on this topic in our previous article

 

UI (User Interface)

 

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

 

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

 

After the UX part is tested by prototype, agreed upon and the concept of layout, transitions and features are accepted, the designer starts the UI design part. This is the time when a newborn heart and brain of your product is clothed with its skin and bones. Here the product gets its real color scheme, forms and features of the layout details, styles, animated elements and so on.

 

All the UI solutions directly influence the positive or negative user experience, so the processes of UX wireframing and UI design should mutually support each other and follow the same strategy otherwise the efficient solutions of one stage will not work on the other.

 

Here are some of fresh UI design examples for different types of products from Tubik Studio portfolio on Dribbble:

 

tubik studio web ui design

Birds of Paradise Encyclopedia by Vladyslav Taran

 

home page landing tubikstudio

Comics Shop Home Page by Dima Panchenko

 

tubik illustration interface

Simple Blog App by Sergey Valiukh

 

Read more on this topic in our previous article

 

Prototyping

 

The original concept behind the term ‘prototype’ is the sample model of the product that gives the ability to test it and see if the solutions and decisions made about the product are efficient. Prototypes should not be seen as the analogue of the final product as they aren’t those. Their main aim is to enable a designer, a customer and a user to check the correctness and appropriateness of the design solutions.

 

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

 

Considering the fact that a lot of customers see the prototype as something very close to the final version of product design aka “UI in action”, in practice this approach is not effective. Prototyping is much more efficient and useful as the step between UX design and UI design. So, the workflow should have such a sequence: UX – prototype – UI.

 

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

 

Read more on this topic in our previous article

 

Icon

 

An app or desktop icon is an image which having a kind of symbolic and metaphoric potential becomes the element of navigation in the process of interaction. In deeper explanation, icon is the visual symbol representing some action, thing, person, real or virtual.

 

Tubik studio icons

 

In many cases icons are able to stand up for the text, and this ability makes them so popular in the world of modern design. If you replace the stretch of copy with an icon, it saves the place for other elements of interaction on the app screen or webpage therefore making it more functional without being overloaded. Also, it makes the interaction faster as in most cases people need less time to see and understand the icon than to read and understand the piece of text. Moreover, the icons efficiently move the limits as they enable people who have the problems of copy perception and recognition, such as those who suffer from dyslexia or close problems, to interact with the product. And finally, icons can successfully combine the functions of navigation and explanation with being the aesthetic element of the visual representation of the product, supporting the general style and having their own character.

Read more on this topic in our previous article

 

Microinteraction

 

Microinteraction is one particular case of user’s interaction with the product completing one particular task. For example, when you press the “like” button (anyhow it looks like) and see that your like has been counted (the number has changed, the button changed the color or became inactive, the copy on the button informed you that you have done the action, the copy under the button or other interactive element informs that you are in the list of those who liked, and so on), that is the case of microinteraction. When you fill in the proper text field with the search request and send it to the system, that is one more case. Microinteractions happen when we follow or unfollow someone in a social network, rate the blog post or set the timer – hundreds of things we do, in most cases not willing to think over those simple steps too much. Microinteractions in most cases aren’t even consciously fixed by the user – and that is actually one of the important tasks for a designer to make them as natural, clear and fast as possible.

tubikstudio ui design

BuonApp by Ernest Asanov

 

Read more on this topic in our previous article


 

The first set of our design glossary is ready for those who need it and we are going to continue this practice before long. Don’t miss the new sets. If there are any specific terms you would like to see explained, described and illustrated, feel free to contact via direct message in our Facebook page or Twitter as well as our Quora representative. New definitions are coming soon!


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

Welcome to read us on Quora

tubik studio quote collection

30 Quotes on User-centered Interaction Design

Inspiration and wisdom absorbed from the best professionals in the trade have always been the great source of motivation and consideration of the basics. Today we add the new set of our favorite wise thoughts and ideas to Tubik Quotes Collection. They are all based on great practical experience of well-known experts in the sphere of design and this time are concentrated on the important issues and tips of user-centered interaction design. Let’s get inspired from the masters!

 

tubik studio quotes

 

«People should never feel like a failure when using technology. Like the customer, the user is always right. If software crashes, it is the software designer’s fault. if someone can’t find something on a web site, it is the web designer’s fault… The big difference between good and bad designers is how they handle people struggling with their design. Technology serves humans. Humans do not serve technology.» (Joshua Porter)

 

«Your app might be a technological marvel, but don’t forget that it’s people who need to interact with it.» (UXPin team)

 

«People ignore design that ignores people.» (Frank Chimero)

 

«Feedback is the heart of interaction. If user interaction is a conversation between your user and the product, then your product better participate in a friendly, interesting, and helpful manner.» (UXPin team)

 

Tubik quote collection

 

«In an ideal world, a user would remember every function after only a single use, but we do not live in idealism. The reality is that familiarity and intuition must be consciously designed into the interface.» (UXPin team)

 

«Our opportunity, as designers, is to learn how to handle the complexity, rather than shy away from it, and to realize that the big art of design is to make complicated things simple.»  (Tim Parsey)

 

«It is easy to fail when designing an interactive experience. Designers fail when they do not know the audience, integrate the threads of content and context, welcome the public properly, or make clear what the experience is and what the audience’s role in it will be.» (Edwin Schlossberg)

 

«Good design is a lot like clear thinking made visual.» (Edward Tufte)

 

Tubik studio quote collection

 

 

«HCI draws on many disciplines, as we shall see, but it is in computer science and systems design that it must be accepted as a central concern. For all the other disciplines it can be a specialism, albeit one that provides crucial input; for systems design it is an essential part of the design process. From this perspective, HCI involves the design, implementation and evaluation of interactive systems in the context of the user’s task and work.» (Alan Dix, Janet E. Finlay, Gregory D. Abowd, Russell Beale)

 

«To design is to communicate clearly by whatever means you can control or master.» (Milton Glaser)

 

«Don’t make something unless it’s both necessary and useful. But if it is both necessary and useful, don’t hesitate to make it beautiful.» (Josh Porter)

 

Tubik studio quote collection

 

«The details are not the details. They make the design.» (Charles Eames)

 

«Good design is design that changes behavior for the better. I think it needs to take into account the context of the environment, of the human condition, the culture, and then attempt to make the things you do—make us do them better, make us do better things. It encourages us to change the way that we live.»  (Jon Kolko)

 

«It’s not enough that we build products that function, that are understandable and usable, we also need to build products that bring joy and excitement, pleasure and fun, and yes, beauty to people’s lives.»  (Don Norman)

 

Tubik studio quotes collection

 

«Good UI design gives users a comprehensible sense of power that consistently helps them feel in control.» (Jim Nielsen)

 

«In situations of stress, people will be less able to cope with complex problem solving or managing difficult interfaces, whereas if people are relaxed they will be more forgiving of limitations in the design. This does not give us an excuse to design bad interfaces but does suggest that if we build interfaces that promote positive responses – for example by using aesthetics or reward – then they are likely be more successful.» (Alan Dix, Janet E. Finlay, Gregory D. Abowd, Russell Beale)

 

«When we interact with computers, what are we trying to achieve? Consider what happens when we interact with each other – we are either passing information to other people, or receiving information from them. Often, the information we receive is in response to the information that we have recently imparted to them, and we may then respond to that. Interaction is therefore a process of information transfer. Relating this to the electronic computer, the same principles hold: interaction is a process of information transfer, from the user to the computer and from the computer to the user.»  (Alan Dix, Janet E. Finlay, Gregory D. Abowd, Russell Beale)

 

«Interaction is the essence of all user experiences. It is the conversation between your product and your user, and if the conversation is boring, your user will leave and talk to someone more interesting.» (UXPin team)

 

Tubik studio quotes collection

 

«Interaction design isn’t about how interfaces behave, it’s about how people behave, and then adapting technology accordingly. It’s a two-part challenge: first, you must know your target users on a level that reveals what they like and what they expect; second, you must figure out how to satisfy those needs given your technological constraints.» (UXPin team)

 

«To our human minds, computers behave less like rocks and trees than they do like humans, so we unconsciously treat them like people…. In other words, humans have special instincts that tell them how to behave around other sentient beings, and as soon as any object exhibits sufficient cognitive function, those instincts kick in and we react as though we were interacting with another sentient human being.» (Alan Cooper)

 

«If we want users to like our software we should design it to behave like a likeable person: respectful, generous and helpful.» (Alan Cooper)

 

Tubik studio quotes collection

 

«A powerful tool in the early stages of developing scenarios is to pretend the interface is magic. If your persona has goals and the product has magical powers to meet them, how simple could the interaction be? This kind of thinking is useful to help designers look outside the box.» (Alan Cooper)

 

«User-centered design means understanding what your users need, how they think, and how they behave — and incorporating that understanding into every aspect of your process.» (Jesse James Garrett)

 

«As much as we may want to withdraw into a world of pure problem solving, we have to acknowledge that the most successful architectures are the ones you can actually convince someone to implement.» (Jesse James Garrett)

 

«Designers shooting for usable is like a chef shooting for edible.» (Aarron Walter)

 

Tubik studio quotes collection

 

«Problems with visual design can turn users off so quickly that they never discover all the smart choices you made with navigation or interaction design.» (Jesse James Garrett)

 

«Good design, when it’s done well, becomes invisible. It’s only when it’s done poorly that we notice it. Think of it like a room’s air conditioning. We only notice it when it’s too hot, too cold, making too much noise, or the unit is dripping on us. Yet, if the air conditioning is perfect, nobody say anything and we focus, instead, on the task at hand.» (Jared Spool)

 

«Get closer than ever to your customers. So close that you tell them what they need well before they realize it themselves.» (Steve Jobs)

 

Tubik studio quotes collection

 

«Beauty and brains, pleasure and usability — they should go hand in hand.» (Donald A. Norman)

 

«To design an easy-to-use interface, pay attention to what users do, not what they say. Self-reported claims are unreliable, as are user speculations about future behavior.» (Jakob Nielsen)


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

Tubik Studio Year Review

Tubik Studio 2015. Year in Review.

It’s hard to believe, but 2015 is almost over. For Tubik Studio this year was dynamic, bright and rich in meetings, shots, interesting projects and non-stop professional growth.

This year, being active on Dribbble, we have published around 140 shots. Here we offer you to look through the set of top positions in the categories of UI/UX design, illustration and animation. Following the links, you will be able to see all their detailed descriptions and full-size attachments.

 

Top Twenty UI/UX shots

 

Tubik studio traveller app UI

Traveller App by Ludmila Shevchenko

 

tubik studio social network ui

Social Network by Sergey Valiukh

 

Tubik Studio UI design

Analytics App by Ludmila Shevchenko

 

tubik studio UI app

Skydeck App by Konst

 

tubik studio design ui

Calendar App by Ludmila Shevchenko

 

tubik studio ui design

Book Review by Sergey Valiukh

 

tubik studio ui app design

Task Management App by Ludmila Shevchenko

 

tubik studio ui design ipad

Octopus Bar iPad App by Sergey Valiukh

 

tubik studio music_app

Music App by Ludmila Shevchenko

 

tubik studio app design

GIF for Sport App by Sergey Valiukh

 

tubik studio design ui ux

Sea Schedule by Valentyn Khenkin

 

tubik studio dribbble shot

Sea Schedule Mobile by Valentyn Khenkin

 

tubik studio app ui

Time Management App by Tamara

 

tubik studio graphic ui

Travel Notes App by Ludmila Shevchenko

 

tubik studio blog app

Blog App by Ludmila Shevchenko

 

good_sign_app_tubikstudio

Good Sign App Concept by Polina Makarevych

 

app design tubik studio

 ECHO App v2.1 by Sergey Valiukh

 

artgallery ui tubik studio

Art Gallery App by Ludmila Shevchenko

 

app interface tubik studio

Emotional App by Daria

 

dribbble shot tubik studio

Eventflow App by Dima Panchenko

 

Top Twenty Animated Shots

 

tubik studio motion design

GIF for the Timeline App by Sergey Valiukh

 

tubik studio button ui

GIF of the Tap Bar Concept by Sergey Valiukh

 

tubik studio tapbar ui

GIF of the Tapbar Interactions by Sergey Valiukh

 

ipad interaction tubik studio

GIF — Portrait vs Landscape by Sergey Valiukh

 

tubikstudio motion design

GIF of Dynamic Scroll by Sergey Valiukh

 

tubik studio_social_network

Gif For Social Network by Sergey Valiukh

 

app design tubik studio

 GIF for the ECHO App v2.1 by Sergey Valiukh

 

tubik studio pull down

GIF for Pull Down — Space Ship by Tamara 

 

hamburger button tubik studio

Hamburger button by Kirill

 

ui concept animation tubik studio

UI Navigation Concept by Ludmila Shevchenko

 

calendar-app animation tubik

Calendar App Animation by Kirill

 

 preloader animation tubik studio

Preloader by Kirill

 

ipad interactions animation

iPad App Interactions by Sergey Valiukh

 

ui concept animation design

UI Animation Concept by Alla Kudin

 

add button animation

GIF for the Add Button by Sergey Valiukh

 

landing page animation

Good.co Animation by Ludmila Shevchenko

 

sport_app_motion ui

Tubik Studio icon design

Iconic Simplicity. The Vital Role of Icons

They are small but vital for the efficiency rate of any application or website. They look simple but take loads of time and effort to feel that way. They follow you on any step of interaction with a product although users rarely – say never – think how important they are for the success and speed of this interaction. They have the power to do anything with a user: help, support, engage, encourage, clarify, simplify or vise versa confuse, annoy, disorient and so on and so forth. They are iconic in effective user interface. They are icons.

 

The vital role of icons is not a secret for web and app designers now, it is mentioned in numerous articles and books on design, presented in workshops and webinars, shown in numerous case studies. We decided to add our two cents to this bulk of knowledge about icons, as this theme seems really constant and demanded.

 

The Essence of an Icon

 

Basically, app or desktop icon is an image which having a kind of symbolic and metaphoric potential becomes the element of navigation in the process of interaction. In deeper explanation, icon is the visual symbol representing some action, thing, person, real or virtual.

 

In many cases icons are able to stand up for the text, and this ability makes them so popular in the world of modern design. If you replace the stretch of copy with an icon, it saves the place for other elements of interaction on the app screen or webpage therefore making it more functional without being overloaded. Also, it makes the interaction faster as in most cases people need less time to see and understand the icon than to read and understand the piece of text. Moreover, the icons efficiently move the limits as they enable people who have the problems of copy perception and recognition, such as those who suffer from dyslexia or close problems, to interact with the product. And finally, icons can successfully combine the functions of navigation and explanation with being the aesthetic element of the visual representation of the product, supporting the general style and having their own character.

 

Being so multifunctional and comprehensive, icons of the apps and websites can be:

    • interactive, i.e. directly representing buttons, controls and any other elements of interaction
    • clarifying, i.e. visually explaining some functions, categories, actions, not being the direct element of interaction themselves
    • decorating and entertaining, i.e. having lower functionality and higher aesthetic potential, providing decorative addition to general style, for example featuring some seasonal celebrations etc.

tubik studio ui concept

The example of interactive icons: Veggie App Concept by Polina Makarevych

 

tubik studio product design

The example of clarifying icons: Passfold project by Tamara

easter icons tubik studio

The example of decorative icons: Easter and spring themed icons by Arthur Avakyan

 

The Features of Icons

 

Some basic features of efficient icons include being:

  • meaningful

As it has been mentioned above, icon is graphic element which has high symbolic potential. It means that creating the icon, first of all a designer should define what is its role and meaning as the separate element and as the part of general layout. Talking about more earthy things for a kind of metaphor, the best chefs always say that everything that is put on the plate should be edible. According to the latest trends, we support the same idea when it comes to icons as well as the other elements of layout: everything that is put on the screen should be functional. Therefore, any icon used in the interface should have its meaning and function. Without it, an icon is just a kind of empty stub, making the layout of the screen or web page dirty with the unnecessary elements.

 

  • clear

Behind the clarity here we mean making the icon understandable. That is one more feature supporting icon’s being meaningful. In fact, what it the point of being meaningful if nobody except the creator understands this meaning? For the icon, lack of clarity is the death knell. Instead of speeding up and easing the process of interaction, such icon will confuse the user and bring out poor user experience.

 

  • simple

Simplicity of icons is still a kind of debatable issue. Actually, designers agree that icons should be simple but still argue about where is the level of simplicity needed. Anyway, here in the studio we support the idea that any icon should be as simple as it is required for its particular aim and function and the designer working on it should stand on the foundation of following the existing guides for icons design and omitting any unnecessary details that can overload the image. However, at the same time it’s important to remember about the general style and other elements of visual representation of the whole app or website concept. Successful consideration and combination of these factors will result in efficient icons.

 

tubik studio st valentine icons

Valentine’s Day icon set by Arthur Avakyan

 

  • recognizable and unique

To make the icon recognizable, the designer needs to become a researcher before starting with the task. Taking the time for exploration and analysis of the existing icons and thorough investigation of the competition can create the significant basis of making the icon easily remembered and catchy. If a designer finds the way to make the icon recognizable not losing its main meaning, it will become the first step of attracting the user in conditions of active competition as well as will provide positive feature for user experience as the user won’t be annoyed losing the time on looking for the necessary icons which aren’t recognizable at once.
The feature of uniqueness mentioned here doesn’t mean creation of absolutely unique stuff every time you need the icon, but thinking on some even slight flavour of uniqueness via small changes or details can make the icon more recognizable both in the AppStore or PlayMarket and on the screen of user’s device.

 

  • aesthetic and attractive

For sure, remembering that icon is a visual representation of the meaning, it’s important to take the graphic and aesthetic side of the issues into account. Visual appeal is the first step to encourage the user get into the meaning you represent behind the icon and at the same time it is the important element making the product regarded as attractive, beautiful and stylish. Following the principles of coloristics, proportions and other features making the result of graphic design successful is always very helpful in creation of great appearance for the icon meaning.

icon logo tubik studio

Saily ghost icon version by Arthur Avakyan

 

  • flexible

As nowadays more and more various sizes and resolutions get into the game, flexibility and scalability is included into the list of key features making icons efficient. Good icon should be seen, readable and recognizable in different sizes and environments therefore it is one more process that should be thoroughly considered while creating icons.

 

  • consistent

Icons as well as the other elements of layout have to feel consistent as they often become the most powerful conventions and signifiers. For instance, if there are several icons in the app – as it usually happens – they should follow the same style, concept and correspond to the general design solution for the app, supporting the harmony of visual representation and interaction instead of breaking it with non-consistent elements.

media icons tubik studio

IT Office Icons Set by Polina Makarevych

 

Creating icons for various design projects in Tubik Studio, we try to keep the principles mentioned above carefully combining them with every piece of unique design we work on. Except creating handcrafted icons for projects, we have also presented several packs of icons on Dribbble, Behance, Creative Market, Envato as well as our own online shop for designers Tubik Lab. There you can find the sets of seasonal icons such as the ones devoted to St.Valentine’s and Easter theme, and more universal ones such as Office and Multimedia icon sets.

 

tubik studio animation icons

Multimedia Icons Presentation by Valentyn Khenkin

 

In our next posts we are going to tell you about the process of designing icons in more detail, from the rough sketching to polishing digitized version.


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

Welcome to Tubik Lab

Tubik Studio Dribbble shot

Tubik Monthly Review. October.

New month has come bringing new ideas, new projects and new hopes. Nevertheless, as usual, we start it reviewing what was done in October to sum up a bit of our efforts and present them in our Tubik Monthly Review. So, let’s remember together what this month was full of except hard and inspired work on current projects.

 

In October we enriched Tubik Studio Dribbble page with new shots. Here is the full collection of Tubik Studio shots, which can be checked full size with the attachments if you follow the links.

 

tubik studio website

Basic Grammar for Designers by Marina Yalanska

 

tubik studio character illustration

BIGGIE & 2Pac by Arthur Avakyan

 

hamburger_menu tubik studio

Hamburger Menu Animation by Valentyn Khenkin

 

ribbet animation tubikstudio

Ribbet Collage by Kirill

 

tubik studio ui design passfold

Case study: PassFold by Marina Yalanska

 

tubik studio ui concept

Veggie App Concept by Polina Makarevych

 

tubik studio design ui

Calendar App by Ludmila Shevchenko

 

passfold logo tubikstudio

Case study: PassFold Logo by Marina Yalanska

 

ribbet animation tubik studio

Ribbet Collage 2 by Kirill

 

passfold logo design tubik

Passfold logo options by Arthur Avakyan

 

illustration tubik studio

Night Work… by Ildar Aleksandrov

 

icon logo tubik studio

Saily ghost icon version by Arthur Avakyan

 

tubik studio sticker design

Halloween Sticker (Freebie) by Ildar Aleksandrov

 

Also we have published new articles here in our Blog. October brought our readers two new case studies about the PassFold project, in which we told about UI design and logo design for the mobile application. Both posts are packed with bright images showing the design flow to our readers. Also we published a new set of Tubik Studio Quote Collection: this time it gathered 30 quotes by famous design experts. Two other articles were concentrated on the ways of optimization and improvement of design process: one post told how to optimize the process of resizing mockups for different screen sizes in Photoshop, while the latest post in the blog was concentrated on the essence and benefits of prototyping for UX design by example of work with Pixate tool.

 

No doubt, in October we published tons of photos showing studio daily life and design processes on our Instagram page

Tubik Studio designer

 

…and were happy to share our articles on our Medium page.

Tubik Studio on Medium

 

So, turning over the October page of Tubik Studio life, we are moving full of inspiration to create something new, useful and bright to share with you in our next monthly review. Happy November to everyone!


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

Tubik Studio prototyping with Pixate

Benefits of prototyping for UX design with Pixate

The process of user experience design for any mobile application is a very responsible stage on the way to the final product, which will satisfy the user. In our previous articles we have already mentioned that UX process is the basis for successful UI as it develops the whole logic of the application, makes possible to think over the efficient transitions and layout as well as consider all the ways to make user experience as positive as possible.

 

The important way to check out and test all the solutions made on the stage of UX design is prototyping. Here in Tubik Studio we are keen to try different tools of prototyping to test the efficiency of UX. Earlier we promised to share our experience of work on prototypes and discuss the benefits of different tools in more detail. So, this post is going to be the first in the set and this time we would like to consider main benefits of prototyping and tell you about the tool for this aim called Pixate.

 

The essence and role of prototyping

 

The original concept behind the term ‘prototype’ is the sample model of the product that gives the ability to test it and see if the solutions and decisions made about the product are efficient. Prototypes should not be seen as the analogue of the final product as they aren’t those. Their main aim is to enable a designer, a customer and a user to check the correctness and appropriateness of the design solutions.

 

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

 

tubik studio motion designer

Tubik Studio designer Kirill, always keen to try the best options for prototyping

 

Tubik Studio motion designer Kirill, having extensive experience of work with prototypes, defines them as the step of vital importance in the process of creating successful UX. Considering the fact that a lot of customers see the prototype as something very close to the final version of product design aka “UI in action”, he says that in practice this approach is not effective. Prototyping is much more efficient and useful as the step between UX design and UI design. So the workflow should have such a sequence: UX – prototype – UI.

 

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

 

The first and most important role of prototype is to check and test the functionality rather than the beauty and appearance of the product. Practice shows that testing UX with prototype enables to make the stage of UI design less time and effort consuming. It’s easy to ground: if you test UX solutions with prototype, you are able to reveal and fix the basic bugs and problems before you start working on UI tasks. If you don’t, the risk to devote a lot of time to UI design which will be not so efficient and so will have to be changed is much higher. Redesign of the complete UI is more difficult and long process than testing the design at UX stage with a simple prototype.

 

tubik studio design testing

Prototyping lets the designer check UX solutions with the experience close to real use

 

The simplest prototypes have been the paper ones and even they are highly efficient in understanding the main concept of layout elements and transitions. Nowadays, the variety of different tools and services for digital prototypes is incredible and gives designers the opportunity to choose those, which are more appropriate for their work and task. They really improve matters in the process of design, especially in the sphere of app design as the modern tools of prototyping create the prototypes very close to native apps and therefore user experience can be tested deeper and closer to reality.

 

A bit of practice: Pixate

 

Pixate is one of the various modern tools creating prototypes for mobile applications.

 

prototyping pixate tubikstudio

 

It provides the wide range of functions to create efficient prototypes, which are animated and look very close to the native apps. Pixate was one of the pioneers adding native animation to make prototypes more efficient.

 

Pixate prototyping tubikstudio

 

Pixate has a clear and simple functional scheme and layout that doesn’t require a lot of time and effort from the designer to study how to create a prototype. This is a very important trait for such a tool as most designers highly appreciate any opportunity to save their time when possible and use the tools which are clear, intuitive, fast and highly efficient.

pixate prototype tubik

 

Pixate can also be described as a flexible tool whose features provide various opportunities to present the content in the created prototype. Moreover, Pixate allows separating layers and embedding interactions such as Tap, Double Tap, Drag, Scroll, Pinch and others. No need to say, how happy the designer can be to use all this things creating the prototype close to real product.

Pixate prototyping tubik

 

As the functional potential of the tool is very close to real app appearance in presentation of UX solutions, it makes the process of testing UX quick and easy. You can intitally customize the prototype to your target device.

Pixate prototype ui tubik

 

It is not a secret that in UX design process attention to details and thinking-out the ideas to make operation of the app easy and pleasant for the user are essential. Prototype made with Pixate on this stage gives the chance of testing all the elements of layout and the process of screen transitions. Sometimes the smallest details which are missed in the general scheme of app design cannot be revealed from the wireframes easily, but are easily seen in the process of testing the prototype. So, prototype provides the prompts to the designer and allows feeling the real experience of transitions, using buttons, understanding the propriety of all the elements placement in the layout and the role of every element in real experience.

Tubik Studio prototyping with Pixate

 

The benefits of prototyping

 

Summing up, by example of work with Pixate, we can conclude upon the basic benefits of prototypes.

 

Benefits for designers:

  • Clear and intuitive tool, not requiring much time and effort to study how to use
  • Flexible in the ways and methods of content presentation in the prototype
  • Contains customized animation and provides the prototypes which feel and look as native apps
  • Efficient in testing UX solutions and sharing it for testing with the customer or tester

 

Benefits for customers:

  • Simple and intuitive features of the tool make easy to understand how to use the prototype.
  • It doesn’t require any specific knowledge or skills to test the prototype
  • It doesn’t need special devices or technical characteristics of the devices on which the prototype can be used
  • It provides high level of feeling the real experience as the prototypes looks and feels very close to real app.

 

All the mentioned features are highly valuable especially for the customers who are non-designers and have never had experience of working with wireframes and understanding UX-schemes and flows.

 

In our next articles we will share the practical workshop on all the flow of prototype creation and also will tell you about other efficient tools helping designers to improve their work and make both customers and users happy.


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