Tag Archives: user experience

case study fitness app tubik blog

Case Study: Manuva. UI/UX Design for Gym Fitness App.

The mobile app industry is one of the biggest on the digital market. There is no surprise, since many businesses both small and big aim at creating their own mobile app. A powerful application can help to set connection with potential customers as well as bring new solutions to enhance services.

 

UI and UX design is vital for the app performance. Every year people’s expectations about mobile applications grow. They want a mobile app to be fast and easy to use due to delightful interaction and navigation system. Moreover, UI design should be appealing and original so that an app could catch users’ interest, make them stay and discover the functionality. Today, we share a case study showing the creative process of UI and UX design for a fitness app. A designer assigned to this project was Tania Bashkatova.

 

tubik studio ux designer

 

Task

 

UI and UX design for a mobile gym fitness app.

 

Process

 

The client was Manuva Group company from South Africa. They made a request to design a new product called Manuva — a mobile application for fitness professionals and gym members. The app was aimed at helping people to find personal trainers in various gyms and book a session without being a member of a particular gym. Users would be able to browse for nearest available trainers, gyms, or group classes via a map or a list sorted by distance and closest start time. Moreover, the app could be useful for fitness instructors as a tool for managing clients. The specific feature of Manuva app was expected to have an in-app payment for a session.

 

Manuva Group wanted the design for their app to be dynamic and youthful supported with original user onboarding tutorials. In addition, they asked to pay attention to the navigation so that users could find trainer connections fast and without efforts.

 

UX design

 

When all the requests were considered, the designer went to the stage of wireframing. A wireframe is a simplified and schematic visual representation of a layout for app screens and transitions. It is a fast way to plan the information architecture and ensure that developers and clients get a clear understanding of the project structure. Furthermore, in case the client wants to make some changes, a wireframe is much easier to reshape.

 

Here are the wireframes created for Manuva app. The designer planned the basic layout including login and home screens.

 

user experience design fitness app tubik_1

 

The client asked to include an original feature into a login user interface which would allow users to discover Manuva without registration. That’s why the designer added a button “Discover Manuva” right under the login button providing a choice for users. In addition, to make a profile more personalized the login process also contained a screen where people could choose their goals.

 

user experience design fitness app tubik_2

 

Home screen contained two sections: the list of fitness instructors and the map. This would help users to find trainers conveniently. Also, UI included a tab bar making navigation in the app approachable and clear.

 

All in all, the wireframing stage helped to outline visual and typographic hierarchy of Manuva user interface as well as set the interactive zones and elements and plan transitions and interactions.

 

UI design

 

When the structure was approved, the designer started working on the presentation of the UI elements. One of the tasks was to find an effective color palette for the interface. The thing is that color has a significant influence on our visual perception and the first impression from a product. Inappropriate colors may affect some of the usability aspects such as readability of copy elements and user satisfaction. Moreover, it’s important to consider the preferences of the target audience: people perceive colors differently depending on their age, gender, and culture.

 

The designer provided the clients with several options so that they could see their app from different perspectives. There were examples with dark and light backgrounds as well as cold and warm color palettes. Let’s see some of the suggested UI concepts.

 

user interface design fitness app tubik_1

user interface design fitness app tubik_2

 

The client chose the UI concept with white background and two contrasting colors — blue and pink. They were expected to be major colors of user interface elements. Moreover, the blue tones corresponded to the colors applied in Manuva logo which would contribute to better brand recognition. Here are the final UI designs of the fitness app.

 

UI design fitness app tubik_2

 

One of the registration screens offered users to choose their favorite sports directions which were followed by the images of sportspeople. Since the Manuva app was an African product, the client asked to apply the majority of photos featuring people of typical African appearance.

 

UI design fitness app tubik_3

 

To make the user interface look clear and original, the designer created a custom set of vector icons. Simple and aesthetic icons help users get quickly oriented in the navigation system of the app.

 

Custom illustrations for onboarding tutorials

 

The clients also requested to pay attention to the design of onboarding tutorial screens. Just to remind, tutorials appear to users who launch a mobile app for the first time helping them get oriented within unfamiliar features and controls. Onboarding tutorials usually contain short but clear info describing the benefits of the product which make it useful and engage the user to try it.

 

To make the tutorial UI entertaining and captivating, the client and the designer agreed to add custom illustrations. This task was given to graphic designer Marina Solomennikova. The illustrations were created in a flat style and the colors corresponded to the common color palette applied in UI. Let’s see the result.

 

Onboarding fitness app UI tubik

 

Summing up, no matter how many apps exist, there is a way to make yours stand out from the crowd. Innovative features, sufficient user experience, and pleasant UI design can be an effective foundation for a mobile application.

 

case study fitness app tubik blog

 

More case studies

 

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

 

Colony. Landing Page Design for Collaboration Platform.

Watering Tracker. UI Design for Home Needs.

UI Experiments: Options for Recipe Cards in a Food App

Home Budget App. UI for Finance.

Night in Berlin. UI for Event App.

Big City Guide. Landing Page Design.

Vinny’s Bakery. UI Design for E-Commerce.

Upper App. UI Design for To-Do List.

Health Care App. UI for Doctors.

Wedding Planner. UI Design Concept.

Toonie Alarm. Mobile App UI Design.

SwiftyBeaver. UX/UI Design for a Mac Application.


Welcome to see designs by Tubik on Dribbble and Behance

big list ux design tools tubik blog

Design Process: Big List of Tools for UX Designers

It is said that a real professional doesn’t mind which tools to work with. If you know your craft well, you can do things appropriately in different conditions. Probably, this is a true statement still one question remains. Why would anyone torture themselves if there are so many opportunities and innovations around?

 

The tech world continues to evolve providing people with problem-solving tools for different fields. UX designers are often under pressure and need to provide high-quality outcome within strict deadlines. That’s why it’s important to have a set of effective tools which would advance the workflow. In this article, we gathered the list of useful tools for UI and UX designers based on our experience and additional research. Let’s see what they are.

 

Tubik Studio UI UX designer

 

Wireframing and prototyping tools

 

Sketch

 

Sketch app is by far the most demanded tool among interface designers. The biggest advantage Sketch provides to its users is a simple and clear functionality. It can be used as a prototyping tool as well as the software to create icons and illustrations. The program is vector-based and gives the opportunity to work with layers and shapes which can be easily manipulated via the tools panel.

 

Moreover, the tool provides effective guidelines, for example, you can see dimensions of the components and spacing between them only by holding the alt key. Due to the concise functionality, the program is light, so it works much faster not overloading the computer which saves time (and nerve!) for designers. Yet, there is one specific feature about Sketch: it works only on Mac and there are no exceptions. 

 

Adobe XD

 

New approaches in UI and UX design encouraged software developers to upgrade their products and even create new ones focused on specific tasks such as layout structuring. Adobe group wasn’t an exception so they launched their newest product Adobe XD (experience design) in 2016. It came as an alternative to Photoshop and Illustrator for UI and UX designers and managed to receive quite high ratings.

 

This program is specially meant for UX designers creating wireframes, interactive prototypes, and vector design. It is a good chance for Adobe fans to come back to the familiar tool with the significant upgrades focused on the user interface design. For those who are new to web design, XD interface may seem a bit difficult to figure out. Adobe XD is now available for both Mac and Windows 10 operational systems.

 

Figma

 

It is one of the most trending design tools today which brings innovative solutions and opportunity for UI designers. First of all, it is the professional design tool which is based on the web enabling design teams to collaborate in a real-time working on one page. Also, designers can even export CSS right inside the program which enhances the communication with a development team. Figma allows for creating wireframes, prototypes, and vector icons for free just by signing-up but it works only for individuals and teams need to pay for it. In addition, the app is available for various operating systems.

 

Lunacy

 

Lunacy is not a tool for creating wireframes, but it helps much in the process. It is especially helpful for the teams whose members work on the computers with different operating systems as it enables Windows users to open and manipulate Sketch files. Therefore, for different stages of processes, it may be the way to make the flow more productive and friendly to all the participants — designers, developers, clients and managers.

 

information architecture for designers

 

Interactive prototyping

 

Marvel

 

Marvel is a free cloud-based tool for interactive prototyping which requires no coding skills. You can download wireframes from Sketch and Photoshop or even take a photo of a sketch made on a paper and then create realistic prototypes of a mobile app or website. Marvel offers to create unlimited projects for free with commenting on your first 3 projects. Also, you can get a paid premium plan with unlimited projects and comments along with removed Marvel branding and more additional features.

 

InVision

 

It is a free tool for creating interactive prototypes. InVision got the popularity since it enables to import files easily files from Sketch or Photoshop and build animated design. Interactive prototype in InVision looks like the real-life project because designers can link the pages simulating the usage of a real website or mobile app. Moreover, InVision helps to improve feedback process allowing to provide comments right on a prototype.

 

One more special feature is organizing UI components in different columns showing the status such as to-do, in progress, or approved. This way both a client and designer can control the workflow more efficiently.

 

Principle

 

This is a simple app which aims at creating animated UI design. The significant feature of Principle is that it can work even offline so your work progress doesn’t depend on the quality of the Internet connection. Interactive prototypes can be easily converted into a GIF or video and be shared in a portfolio on Dribbble or elsewhere. The interface of this tool is quite similar to Sketch app, so it would be easy to use for many designers. Also, an interesting feature is that you can preview designs on iOS devices. And here comes a pitfall. Principle software is only available for the iOS system, so Windows fans need to look for alternatives.

 

UXPin

 

The UXPin team is known as experts in user experience design field who constantly share their knowledge in various books and articles. Their product, UXPin editor, is a web-based tool for prototyping which can be used for creating wireframes along with high-quality mockups and turning them into interactive prototypes. Also, designers can download their wireframes from Sketch or Photoshop for prototyping in UXPin. In addition, the software can automatically generate style guides and specs for developers.

 

InVision for UI prototyping tubikstudio

 

Color choice tools

 

ColorHexa

 

This is a free web-based tool helping to generate effective color schemes. You just need to enter a color value into the search field and you get detailed information: tints, shade and tones as well as the alternatives and suggested color schemes. One of the biggest privileges of this tool is that it shows how a color will be perceived by people affected by a color vision deficiency. This way designers can make sure that their design will look good for users with colorblindness too. In addition, ColorHexa provides alternatives of a color in different formats.

 

Paletton

 

Paletton is a free web tool assisting to pick color harmony for user interfaces. It is the software which UI designers have been using for color choosing for a long time. Paletton has a simple functionality: people need to choose a color on a color wheel or enter its value and the tool generates beautiful schemes. Also, users can choose a type of a color scheme and see similar schemes in different tones.

 

Flat UI Color

 

The flat design direction keeps being popular so a tool for choosing flat colors is a must-have. Flat UI Color is a website providing sufficient flat color schemes. All colors contain the HEX codes which can be copied right into the main software like Photoshop or into a style guide. The app has a narrow focus but it’s extremely useful for those who often work with flat design.

 

Material Design Color Tool

 

Color Tool is a free web-based app which is a part of Google’s material design resource which many of you may be familiar with. The app is focused on mobile design providing material color schemes. Users can try schemes on mobile templates which are also available in Color Tool. In addition, you can find the data on the accessibility of the chosen color schemes and adapt it if needed.

 

Pictaculous

 

To find color inspiration many designers go searching for beautiful photos. Pictaculous helps to analyze colors presented on images and output similar color schemes. You just need to upload a photo from a computer and you get exact colors with the HEX codes right at your disposal. In addition, the suggested color schemes can be saved as Adobe Swatch file.

 

color theory design tubik

 

Typography tools

 

Google fonts

 

Typography is one of the basic parts influencing user experience of digital products. That’s why it’s important to have handy tools helping to create effective typography.

 

Google fonts is a popular free web application featuring over 600 font families. Each of them can be previewed in different size and within a custom text. Also, you can see the loading time of each font so that you could make sure it wouldn’t take too long. Google fonts provide the data on embedding specific fonts into a product. You can just copy the code generated specifically for the chosen font in the right section of HTML document.

 

Typekit

 

Typekit is a time-tested tool with a library of fonts. Here you can find the variety of fonts from the classic one to the brand new choices. To use Typekit you just need to subscribe and get the access to all fonts. The tool has a clear interface with all the essential data about fonts including weight and style. Even more, it allows for seeing each font in different sizes and some colored backgrounds.

 

Fontjoy

 

One of the biggest dilemmas in typography creation is font pairing. There are thousands of fonts and it can become an endless process of choosing a perfect match. Fontjoy is a handy tool for font pairing integrated with Google fonts library. You can just choose fonts setting the right characteristics like size and weight.

 

This free tool pulls a full library of fonts straight from Google Webfonts and curates them together on one page. Then you choose which font(s) you’d like to test including the size, weight, and line height on the page and wait for the match. In addition, you can regulate how contrasting or similar you want a pair to be just by using a slider on the top of the app.

 

Typetester

 

Sometimes we can’t decide which font of the two chosen suits better. Typetester is a quick solution helping to test and compare fonts. It provides previews of multiple fonts on one page with their parameters including leading and tracking. Fonts can be chosen from different sources such as Google fonts or Apple Mac defaults and tested by adjustment of their size, alignment, as well as with customized text and backgrounds.

 

Calligraphr

 

Custom fonts is an effective way to add originality to a product. Calligraphr can create fonts based on handwriting. You need to download a template with your writing and the tool will generate it into vector fonts. After they are generated you can edit the details to polish your custom font.

 

typography in UI design web mobile

 

Icons tools

 

Icons8 app

 

Icons8 is an app for Windows and Apple containing more than 65,000 professional icons for digital products. Even more, every day new icons are added to the library. The app guides you through the library helping to find the right pack of icons by categories. Here you can find icons for iOS, Android and Windows platforms which are available in various formats. The selected pack can be copied right into Sketch, Figma, and others. Moreover, all icons can be recolored and resized in your editor. Icons8 allows downloading PNG icons on 100×100 for free. If you want to get an access to all the icons in different formats, you can get a paid license.

 

Free Icon Maker

 

If you don’t like any of the icons found on the Web you can make them by yourself. Icons can be created in one of the visual editors such as Sketch, Illustrator, and Figma, or you can apply some free web-based tools. Free Icon Maker allows for creating and editing icons online. When you register there, you are free to use all the features such as downloading icons from the SVG files to modify them in this tool.

 

IconJar

 

Designers often download hundreds of icon packs and then it becomes hard to find the right one. IconJar is an effective organizer providing folders for specific icons. For example, if you need to find a “home” icon, you can search for it by the name and the tool will show you the icons from all sets. IconJar is available only for MacOS but soon there may be a Windows version. The program is paid but it has a free trial.

 

UI icons in interface design tubik blog

 

Collaboration tools

 

Trello

 

Our personal preference for projects monitoring as well as in-studio information flow is Trello. This tool is simple, effective, clear and intuitive. This tool for communication provides clear systems of boards and cards which have a gear deal of features. It makes possible to split any task into sprints and enables to carry out the project providing constant updates and presenting images. It is easy to set deadlines (due-dates), delegate specific tasks to specific people, create checklists and mark out the most important and urgent tasks. It also has one more really precious feature. Trello has not only thoroughly thought-out website, but also efficient and smart applications for iOS and Android. This gives an additional opportunity for fast feedback so it saves time, efforts and makes management of the projects very comfortable for the customers. Trello is a great option for creating the spot where designers, project managers, and customers could together make the fast and effective workflow.

 

Zeplin

 

A successful design project is built upon effective communication of the creative team and clients. Zeplin is a platform enhancing the collaboration between designers and developers. The major feature is a detailed style guide generator which makes sure design elements are implemented appropriately. Designers can upload wireframes from Sketch adding them to project folders in Zeplin. This way developers get all the data about designs including sizes, colors, and CSS suggestions for UI components.

 

Presentator

 

Presentator is a free web-based collaboration tool enabling to share designs with team members, developers, and clients. You can download a file and decide on permissions to it. For example, some may have a full access with the ability to leave comments while others may have read-only access. The biggest advantage of this tool is that it’s absolutely free for everyone.

 

trello used by Tubik Studio

 

A useful tool works effectively only for those who know what they are doing. Don’t forget constantly learn something new and improve your professional skills. Stay tuned!


Welcome to see designs by Tubik on Dribbble and Behance

landing page design case study tubik

Case Study: Colony. Landing Page for Collaboration Platform.

A sufficient landing page plays a vital role in a successful web marketing campaign. It presents a specific product or service so that the visitor could find the needed information quickly and without distractions. The effective landing page draws potential customers’ attention to an offer and makes them take certain actions contributing high conversion. To make it work appropriately, it’s important to create a landing page design according to the target audience preferences.

 

But what if the target audience is quite broad and includes different personalities? Today we share a new case study showing creative stages of a powerful user interface design of a landing page for a collaboration platform. The designer assigned to this case was Ludmila Shevchenko.

 

web design case study ux designer tubik

 

Task

 

Landing page design with custom illustrations for a digital collaboration platform.

 

Process

 

The client is a British company Collectively Intelligent Limited from London, the curator of a digital collaboration platform called Colony. The platform enables people all over the world to build companies together online. Communities can coalesce around a project and collaborate together, collectively controlling funds, and sharing in the project’s revenue — all without trusting, or even knowing, the people with whom they are collaborating.

 

The client made a request for a landing page design which would convey the value of their proposition in a simple and approachable way. Colony is a sophisticated, complex product, so the major task was to help people to understand how it works and what benefits they can get from it. After considering all the aspects designer moved to the creative process.

 

Landing page design

 

Some may think: if a landing page includes all the possible details about a product, the customers will be more likely to get interested in it. Nevertheless, the major task of an effective landing page is to concentrate users’ attention on the specific offer. It is usually managed via minimalistic visual presentation which is focused on the several UI elements like CTA buttons and application forms.

 

To create a landing page design with the appropriate central points, the designer has planned the structure of a layout divided into several sections which would prioritize UI elements. An effective visual hierarchy helps people receive the information gradually.

 

Custom illustrations are often applied in a landing page design as UI components helping users comprehend the idea of a product and its features. So, when the structure of a landing page was chosen, the next task was to find the style for the theme illustrations seen which would be applied in the hero section. To broaden the number of options, graphic designers, Arthur Avakyan and Denis Boldyriev, were engaged in the brainstorming and creative search. The designers experimented with the theme for illustration to show — the Earth with users who collaborate or the heroes in the space accomplishing the super space missions. Here are the results.

 

colony_illustration_style_direction_search_tubik

Style offered by Ludmila Shevchenko

 

colony_web_design_tubik

Style offered by Arthur Avakyan

 

graphic design for web tubik blog

Style offered by Denys Boldyriev

 

The designers showed illustrations in different styles and color schemes so that the user interface design combined friendly, approachable and consumer solutions, also transferring the feel of a thoroughly competent product from a company that only accepts excellence. The illustrations were focused on the objective of showing how Colony helps people around the world to communicate and successfully collaborate.

 

The client has chosen the direction applying the light background and smooth lines as it looked closer to the business style. Considering the chosen direction, Ludmila created the variants of illustrations which would suit user interface elements of a landing page.

 

landing_design_case_study_style_search_version

Worldwide connection

 

landing_design_case_study_style_search_version_2

Connect the Earth

 

landing_design_case_study_style_search_version_3

Space mission

 

landing_design_case_study_style_search_version_4

Universal connection

 

When the illustrations were presented to the clients, they asked to combine visual presentation of the fourth variant with the idea of users illustrations as in the third picture shown above.

 

After all the changes were made, we received the final version. UI elements are combined in a harmony with the theme illustrations which show the Earth with users who collaborate at the significant distance. The color palette includes several bright colors — periwinkle color is used as the major one with the pink, yellow, turquoise and violet accents.

 

 

landing_design_case_study_final_main_page

 

Features illustrations

 

The next task was to create custom illustrations for features presentation. To make a holistic landing page design, the features were illustrated in the same style and color palette. The major aim was to present the features in a simple and clear form so that users could quickly comprehend the essence of this product. Also, the illustrations were planned to be followed by microcopy revealing the basic description of the features within one sentence. That’s why the designer worked on the typography which would have suited the graphics and UI as a whole. Let’s see the results.

landing_design_case_study_llustration_2

 

As you can see, all illustrations have a lot of white space and the subtle elements reflecting the sophisticated principle of the company. Thanks to the colors used in graphics, the interface looks friendly and appealing. Typography components work in a harmony with the graphics and other UI elements.

 

To make a consistent interface, the designer also created the illustrations for a product story — a brief description of what it is and why people need it. The story is a good way to catch the attention of the potential customers and the beautiful custom graphics increase the chances of the pleasant impression from it. Here are the illustrations created for this aim.

 

landing_design_case_study_illustration_4

 

landing_design_case_study_illustration_1

 

Token sale page

 

Colony is a kind of a unique network with its own rules and money. Every colony has its own token. To distribute the ownership, users earn tokens by doing work. The more tokens they hold, the more of the colony they own. Tokens let staking your ownership on your good judgment when proposing tasks or claiming someone should be paid.

 

To catch people’s interest and inform them about the beginning of the token sale, the client wanted to create a page showing countdown to the special date. The designer applied the same style and colors as in the landing page design to increase brand recognition. The countdown showed days, hours, minutes and seconds which were presented in colorful circles. Here is the final version of the sale page design.

 

landing_design_case_study_countdown_page

 

The presentation of a new unique product can become a challenge for designers. It’s important to catch people’s attention and show all the facets of the product. The powerful landing page design helps to gain visibility and gather user base even before the product launch as well as tell the story which would interest potential customers.

 

Recommended reading

 

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

Watering Tracker. UI Design for Home Needs.

UI Experiments: Options for Recipe Cards in a Food App

Home Budget App. UI for Finance.

Night in Berlin. UI for Event App.

Big City Guide. Landing Page Design.

Vinny’s Bakery. UI Design for E-Commerce.

Upper App. UI Design for To-Do List.

Health Care App. UI for Doctors.

Wedding Planner. UI Design Concept.

Toonie Alarm. Mobile App UI Design.

SwiftyBeaver. UX/UI Design for a Mac Application.


Welcome to check the detailed Behance presentation of Colony project

Welcome to see designs by Tubik on Dribbble and Behance

ui desing interface food app recipe list

UI Experiments: Options for Recipe Cards in a Food App

Good food is good mood — for most people that has been true for decades and centuries. Taking up the big part of human time and activity, no wonder food became one of the hot topics in tech progress. There is a whole bunch of mobile and web interfaces solving a diversity of problems connected with food: websites and applications for cafes and restaurants, recipe apps and social networks, food ordering and food delivery apps. Whatever is the goal behind UI design for a food app, that’s cool when it’s not only helpful but also delicious and attractive.

 

Earlier we have already shared numerous ideas on interface design for this theme. Today let us present a fresh food app design case study, this time concentrated on several recipe card concepts. In this project, Tubik designers Anton Morozov, Ernest Asanov and Vlad Taran took a chance of UI experiments and analysis for a variety of approaches to content and navigation of recipe cards.

 

information architecture for designers

 

Project

 

UI design of a mobile application on cooking and recipes

 

Introduction

 

In general terms, the designers got the task to design a food app for users who love cooking. It included the recipe database which was constantly updated. Also, the application had a supplies manager. To make UX more extended, it allowed users to find the recipes on the basis of the supplies they currently had at home or create a shopping list to buy ingredients that were missing.

 

According to the brief which presented the client’s preferences, the food app design had to include the following functionality.
 

Required Features
 

1. Search bar
2. Filter button (Information about the number of results and applied filters)
3. Recipe cards (Recipe picture + Title)

 
Optional Ideas
 

• Ratio of ingredients you have to the total number the recipe requires
• Cook time
• Calories
• X button to hide that recipe and show fewer recipes like that
• Add to shopping list button
• Like / save button
• Recipe author and his/her profile picture
• Review score
• Favorite count
• Main ingredients
• Share
• Direct link to view the recipe source
• Consider what type of layout for the recipe feed will work best, grid vs single column.

 

Problem

 

The client provided the team with a lot of information and ideas on the main screen. The designers had to analyze and prioritize all the points, as there was a high risk of overloading the screen. On the basis of research and analysis, the user scenarios were created to determine which information about the meal in the recipe is found the most important.

 

Solutions exploration: benefits and pitfalls

 

The designers worked out several options for recipe cards presentation which would effectively present the core data on the limited space of a mobile screen. Considering that the recipe card presented the key element of interaction in this app, the final decision had to be grounded on the balance of logic and emotion, effective navigation and aesthetic satisfaction. Having tried different directions, the designers defined three various options of content and controls placement in the layout.  Among them, the creative team had to choose the variant corresponding to target audience expectations. Here are the options.

 

а) Recipes shown as a list

 

Benefits: more content can be shown on the screen.

Pitfalls: the photo content looks too small.

 

ui desing interface food app recipe list
 

 

b) Recipes shown as cards (like Pinterest)

 

Benefits: the dynamic height of the cards allows for placing photos of any layout metrics and headlines of any length

 

Pitfalls: the column for notes and additional elements is too narrow. Card manipulations such as adding ingredients into the shopping list, hiding the similar recipes and sharing the recipes to social networks led to applying the long press/force touch which was not the most obvious solutions for users.

 

recipe card UI design food app
 

 

c) Big recipe cards

 

Benefits: photo content attracts maximum attention
 

Pitfalls: the screen features only one recipe, the additional functionality still isn’t obvious for users.

 

recipe card UI animation

 

Final solution

 

The creative team preferred the emotional variant. Coming out to the market, the product has to be ultimately attractive. That will enable to collect the feedback and analytics data which can be used as a basis for the next stage of the creative search for solutions enhancing user experience. Unobtrusive and elegant animation during the first interaction will prompt about the additional functionality that is hidden under the card and available on swipe down.

 

Additional details: filters placement

 

The filter panel allows a user to sort out the list of recipes. The user can apply pre-sets: for example the preset “cook” shows only the recipes based on the ingredients currently available for the user. Also, the filters can be manually customized. The panel is placed in the bottom part of the screen to add more convenience to the operations with the app by one hand.

 

recipe card animation tubik

 

Bottom line

 

In Apple, they say: “…the first thing we ask is what do we want people to feel?” Not everyone considers the issues connected to users’ feelings and emotions before they start creating a new digital product. Today most designers strive for functionality. However, when people’s feelings and emotions become a priority, the product gets the features and details which let the users love it.

 

Recommended reading

 

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

 

Watering Tracker. UI for Home Needs.

Home Budget App. UI for Finance.

Night in Berlin. UI for Event App.

Big City Guide. Landing Page Design.

Vinny’s Bakery. UI Design for E-Commerce.

Upper App. UI Design for To-Do List.

Health Care App. UI for Doctors.

Wedding Planner. UI Design Concept.

Toonie Alarm. Mobile App UI Design.

SwiftyBeaver. UX/UI Design for a Mac Application.


Welcome to see designs by Tubik on Dribbble and Behance

steve krug usability quotes and videos tubik blog

Don’t Make Me Think: 20 Thoughts on Usability by Steve Krug.

Design, as well as many other fields, is built upon the works and discoveries of the great professionals. Everyone who wants to be an expert in their craft often seeks for the guidance to learn how to do things right. Various books and articles written by gurus are now in a free access on the internet so those striving at knowledge can find the essential instruction without efforts.

 

We often share quotes and wise thoughts from the best experts in the digital design field in Tubik blog. You can find the short insight into Design Is a Job by Mike Monteiro, Designing for Emotion by Aarron Walter, as well as the set of wise thoughts from typography master Erik Spiekermann. Continuing Tubik Studio Quotes Collection, here’s a fresh set of quotes from the well-known book “Don’t Make Me Think” by Steve Krug.

 

The first edition was published in 2000 and then it was revisited in 2014 making it relevant and useful nowadays. Steve Krug sets some basic principles on the usability of interfaces and shares them with professionals working in this field which makes the book one of the top essential resources recommended for UX designers. “Don’t Make Me Think” describes the key points, examples and insights which are important to know about website usability. The major idea is to create designs with which users wouldn’t need to think too much how the interface works — this way it becomes not only problem-solving but also easy to use. Here are 20 quotes reflecting some key points from “Don’t Make Me Think”.

 

mobile interaction design tubik blog

 

If something requires a large investment of time—or looks like it will—it’s less likely to be used.

 

Making every page or screen self-evident is like having good lighting in a store: it just makes everything seem better.

 

design quotes Steve Krug 01

 

A lot of happy talk is the kind of self-congratulatory promotional writing that you find in badly written brochures. Unlike good promotional copy, it conveys no useful information, and it focuses on saying how great we are, as opposed to delineating what makes us great. Instruction must die.

 

Accessibility is the right thing to do. And not just the right thing; it’s profoundly the right thing to do, because the one argument for accessibility that doesn’t get made nearly often enough is how extraordinarily better it makes some people’s lives. How many opportunities do we have to dramatically improve people’s lives just by doing our job a little better?

 

Another needless source of question marks over people’s heads is links and buttons that aren’t obviously clickable. As a user, I should never have to devote a millisecond of thought to whether things are clickable—or not.

 

design quotes Steve Krug 02

 

In the last few years, making things more usable has become almost everybody’s responsibility. Visual designers and developers now often find themselves doing things like interaction design (deciding what happens next when the user clicks, taps, or swipes) and information architecture (figuring out how everything should be organized).

 

A person of average (or even below average) ability and experience can figure out how to use the thing to accomplish something without it being more trouble than it’s worth. Take my word for it: It’s really that simple.

 

Usability is about people and how they understand and use things, not about technology.

 

design quotes Steve Krug 03

 

The main thing you need to know about instructions is that no one is going to read them—at least not until after repeated attempts at “muddling through” have failed.

 

The more you watch users carefully and listen to them articulate their intentions, motivations, and thought processes, the more you realize that their individual reactions to Web pages are based on so many variables that attempts to describe users in terms of one-dimensional likes and dislikes are futile and counter-productive. Good design, on the other hand, takes this complexity into account.

 

The fact that the people who built the site didn’t care enough to make things obvious—and easy—can erode our confidence in the site and the organization behind it.

 

design quotes Steve Krug 05

 

In reality, though, most of the time we don’t choose the best option—we choose the first reasonable option, a strategy known as satisficing.

 

The problem is there are no simple “right” answers for most Web design questions (at least not for the important ones). What works is good, integrated design that fills a need—carefully thought out, well executed, and tested.

 

design quotes Steve Krug 07

 

Get rid of half the words on each page, then get rid of half of what’s left.

 

Designers love subtle cues, because subtlety is one of the traits of sophisticated design. But Web users are generally in such a hurry that they routinely miss subtle cues.

 

design quotes Steve Krug 06

 

If there’s one thing you learn by working on a lot of different Web sites, it’s that almost any design idea—no matter how appallingly bad—can be made usable in the right circumstances, with enough effort.

 

Your primary role should be to share what you know, not to tell people how things should be done.

 

design quotes Steve Krug 08

 

Your objective should always be to eliminate instructions entirely by making everything self-explanatory, or as close to it as possible. When instructions are absolutely necessary, cut them back to a bare minimum.

 

Faced with the prospect of following a convention, there’s a great temptation for designers to try reinventing the wheel instead, largely because they feel (not incorrectly) that they’ve been hired to do something new and different, not the same old thing. Not to mention the fact that praise from peers, awards, and high-profile job offers are rarely based on criteria like “best use of conventions.” Occasionally, time spent reinventing the wheel results in a revolutionary new rolling device. But usually it just amounts to time spent reinventing the wheel.

 

If you want a great site, you’ve got to test. After you’ve worked on a site for even a few weeks, you can’t see it freshly anymore. You know too much. The only way to find out if it really works is to test it.

 

design quotes Steve Krug 04

 

Bonus: Video Talks with Steve Krug

 

Do-It-Yourself Usability Testing with Steve Krug

 

 

Steve Krug Discusses Usability

 

 

Usability: Just One More Thing You Don’t Have Time For? Steve Krug at NextStep 2013

 


 

Welcome to check the quotes by Mike Monteiro from «Design Is a Job» and by Aarron Walter from «Designing for Emotion«

Welcome to check issues of Tubik Quotes Collection on brandingusabilityuser-centered design and content strategy

Welcome to read or download Tubik Magazine free books on logo designdesign for business and problem-solving web design

faq on web and mobile ux design

FAQ: Does a Small Business Need a Website?

Being a field of diverse directions and numerous purposes, design has always brought up a lot of issues on the crossroads of professional activities and sciences. It’s time for a new set of answers covering the frequently asked questions in the domains of web, mobile and graphic design: having given a big bunch of answers on Quora recently, we would like to share our ideas with Tubik Blog readers as well. So, today we are briefly covering the following topics:
 

  1.  Is it important for a small business to have a website?
  2. How can UI/UX design strategically influence a company success?
  3. What motivates mobile-app start-ups to hire UX designers?
  4. Who buys graphic design services?

 
Let’s get started!
 

creative_ux_design_illustration_tubik

 

How important is it for a small business to have a website?

 

In short: if you can reach your customers via the Internet, it IS important to think about a website for your business.

 

Going deeper, we can face a lot of pathetic expressions saying the main and only reason is that everything is on the Internet now. I wouldn’t be so categorical on that. Real life still exists, and some businesses, especially small local ones, effectively operate without websites in their own vision of success. Not all the businesses strive to conquer the world — and it doesn’t leave us right to tell they aren’t successful or helpful or effective or profitable. Let’s say, you live in a quite small village and supply local citizens with home-made cheese. You have your own range of clients and you have no reasons to move further as all the cheese you may produce with your capacities is bought like hot cakes. The profits you get are enough for your vision of peaceful and successful life. Is it a small business? Yes, sure. Does it need a website? According to the stakeholder’s goals, no, it doesn’t.

 

However, the Internet really revolutionized the way of running businesses. With devices cheaper, more accessible and easy-to-use, more and more people turn to buying, selling, marketing, communicating and getting information from the internet resources. So, today it’s one of the top reasons why people make a decision on starting a website: they have an offer which may be potentially interesting to other people on the Web and bring the profits to the entrepreneur.

 

financial_service_website_tubik

 

This way to go is really reasonable, and there is a huge variety of approaches to websites for business use. It can be anything, from a simple one-page website giving the basic description of the professional and contact data to complex web platforms providing the variety of business directions or extensive portfolio. It may be a small e-commerce platform, with a full cycle of direct sales from order to payment and delivery, or it may be a corporate website whose aim is to present the services or goods as well as the ways of getting them. This can be the reason for not only fully packed websites of broad functionality but also landing pages fulfilling the same need.

 

usability_interfaces_ux_design_tubik

 

Having a website, the business gets a broader perspective and becomes closer to users, who are often used to googling as the fastest way to find everything they need, from basic goods to special services. If your potential clients can be caught in this process of browsing, you definitely have to try it and a company website is a primary step. Nevertheless, it’s important to remember that the website will become another item in your budget: time, effort and in all likelihood money will be invested in the website creation and maintenance. For big and well-established businesses it may be not a pinch of a problem but for a small business, it is a concern demanding to weigh all pros and cons. So, on the stage of decision-making, it’s cool to discuss the issue with experts and other businessmen, read the case studies and reviews to know what the possible further scenarios may happen, how important they are for the business growth and what you would better start with.

 

Landing Page Animation Tubik Studio

 

The reasons, which might get you hesitate if you need your own website being a small business, can be the following:

  • the specific nature of the business doesn’t make it possible and viable to reach your clients online
  • the expenses on the website aren’t reasonable and do not open real perspectives on the business growth
  • the small business has another alternative platform for its activity which is profitable for its aims (for example, you make hand-crafted toys which are successfully bought via Etsy-shop and it creates the strong online presence for the business).

 

Anyway, if the business strives to transfer from small to medium or big and isn’t going to spend ages for it, the website is a worthy investment.

florist shop website design

 

How can UI/UX design strategically influence company success?

 

There are several aspects to consider, first of all depending on the type of business activity and relations. Among the cases when web and mobile UX design can significantly influence company performance, we could mention the following ones.

 

1. The company gets its profits via a digital product

 

In this case, UX/UI is definitely one of the core issues influencing growth, progress and success of the company. Thoughtful UX (logics, transitions, the flow of user journey and interactions) and effective UI (visual performance, typography, visual hierarchy, emotional appeal and aesthetic satisfaction) lay the solid foundation for achieving business goals set behind the digital product and therefore profits of the company.

Why is it so? Because UX/UI design:

  • strengthens brand image and enhances brand awareness
  • enables users to solve their problems with the product demonstrating a high level of usability
  • supports efficient sales funnel and educates a user about the product
  • applies visual hierarchy to make navigation through the interface intuitive and in this way grows the level of conversion
  • transforms tone and voice of the product as well as a flow of interactions which are appropriate for a particular target audience.

 

cinema app interaction UI

 

As it was mentioned in the book Design For Business, the offer is the key. Design is an actionable and helpful tool on every stage of launching, presenting and promoting the product, informing users about it and selling it in the fast and easy way. Nevertheless, if the product is of poor quality, successful design isn’t going to make it better. Think about the product and its user first, only then the design will give it the chance to beam at full.

 

2. The company presents an e-commerce platform

 

Obviously, the success of e-commerce activity depends on several factors among which:

 

— quality of the product or service offered
— quality of the content presenting the offer to customers
— quality of design for the electronic platform — website and/or mobile application — via which the sales are going to be delivered.

 

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

 

jewellery ecommerce app

 

3. The company uses the digital tools and services for communication of its personnel and data analysis

 

Nowadays there are more and more companies that use apps or websites for productive communication inside the team: some of them apply external stuff, while the others create the apps which correspond to their specific needs. In this case, UX again is a strategically important direction to invest time and money in: it enables employees to work more productively while managers to analyze data in fast and precise manner. These factors directly influence the rates of general profits and expenses of the company.

 

health care app calendar tubik

 

Here we’ve mentioned only three of possible directions when UI/UX contributes to general company performance, still, there are many of them. Working on different design projects here in Tubik, we’ve checked how different can business goals be but definitely, design opens numerous ways to support them.

 

What motivates mobile-app start-ups to hire UX designers?

 

The step of hiring a UI designer for a mobile-app start-up is a very logical thing to do: thought-out design of a digital product is the solid foundation for the nice introduction to the market. Among the factors of impact on this decision, we would mention USP and MVP which build up the bridge between business and design perspectives.

 

USP

 

A mobile app is a product which means it has its USP (Unique Selling Point). User interface design is the way to strengthen it and present in the correct way.

 

If USP is defined at the pre-design stage that means that all design solutions can be made to support it. That is a good foundation for efficient branding supported by recognizable and consistent interface design which enhances better interaction and memorability. USP directly influences:

 

  • integration of brand identity into the interface to enhance brand awareness
  • building up principles of interaction and user experience in terms of efficient presentation and providing benefits of USP
  • creating problem-solving user interface that clearly reflects USP and provides fast and easy way to getting it
  • creating and selecting content which will support general design concept and show users the advantages of the product and corresponds to target audience expectations
  • design of a landing page that will have the structure and content directly presenting USP to target audience
  • applying design tactics that increase conversion of the app screens etc.

 

As a practical example, we can remember the story of creating UI design for Saily App, a local service of user-to-user e-commerce. The customers defined its USP from the very start: it is a local community app allowing neighbors to buy and sell their used stuff, so it provides people with the ability to sell their own things or quickly search for the needed ones sold in their location. This idea became the solid basis for all the design solutions around branding and user interface of the app, setting bright experience and friendly communication. If you are interested to read the details and see visual design process, welcome to read case studies on logo design and UI design for the app.

 

saily UI screens tubik studio

 

MVP

 

Many startups follow the path of MVP (Minimum Viable Product) which is a product with the set of minimal functions and features which are logically completed and sustainable providing the most important and basic functions for the core target audience. This means that the basic version of the product, able to fulfill key operations which are solving target audience’s problems, is created as live and starts real functioning as soon as possible. The approach is opposite to the strategy of creating a full design and comprehensive functionality for all the product features for the broader target audience and only afterward launching it on the market.

 

MVP approach has several benefits:

 

— as it starts from the simple and basic version of the product, it doesn’t take a long time to provide design and development and makes possible to start playing on the market faster. It’s especially actual for diverse technological ideas and concepts as they are always at risk to outmode by the time all the design, development and testing cycle is finished;

 

— it enables designers, testers, analysts, managers and marketing specialists to collect data of real users’ interaction with a product, reveal the bugs, understand their wishes and pains deeper and use all that information in design and presentation of further, more complex versions of the product. Although testing should be done at the stage of development, it is impossible to predict all the potential problems of interaction with a product before real users start this interaction. MVP enables to do it faster and make next versions more efficient;

 

— if thoughtfully made and carefully presented, MVP can play the role of bait attracting target customers and allowing its creators to see if the target audience was defined properly and analyzed deeply enough;

 

— next versions of MVP usually present quite massive functional additions so depending on the target it may work as the way of positive and dynamic user experience, different from slight changes in the products whose functionality was fully developed before the launch.

 

Therefore, in terms of design MVP is the strategy of step-by-step movement on the market, when every next step is based on the analysis of the previous one from the actual data collected from real users. That means that designer should also apply the strategy of gradual design, carefully applying only core features which are really vital for the MVP as the start of the journey. It greatly influences the number of screens and content on them, necessary transitions and notifications which users really need at this stage of using the product, level of complexity and sophistication of graphic materials and animation etc. UX/UI designers should remember that MVP always has a definite core target audience and the solutions to interactions, experience, visual perception etc. Knowing these core users makes the design task more particular and the result will be more customer oriented thus efficient. Next versions of the product will provide broader functionality and in this way will broaden the circle of users, but it will work in the case when core target audience is caught by MVP.

 

Successful MVP is directly connected to the USP of the product. Here USP plays an even bigger role as it enables to make the product user-centered and in this case the chances of making it efficient and attractive to users get much higher. Presenting the product solving particular problems of a particular group of people in many cases proved itself as an effective strategy with the perspective of further growth of both functionality and audience. This strategy works especially well for various startups which start with limited budget used wisely for practical presentation of the vital features of the product: if MVP is thought out properly, at this first stage they already start monetization of the product, attract users and at the same time apply practical data analysis in further stages of design. It’s easy to see that the role of UI/UX design here gets even higher as MVP is actually the chance of making a good first impression. Spoiling it with bad design can have a crucially bad result for product’s promotion as well as good design can build up a solid foundation for product growth.

 

upper app UI design case study
Upper App which started as an MVP

 

The mentioned ideas present good motives for hiring a UI designer for creating a brand new app.

 

Who buys graphic design services or products?

 

First of all, let’s quickly review what stands behind the notion of graphic design services. Basically, graphic designers do the job of communication to others by means of graphic (visual) elements such as images of different style and complexity, types and fonts, pictograms, shapes and sizes, colors and shades, lines and curves etc. A graphic designer makes all those elements of visual perception transfer the message, so he makes them functional. Therefore, we could say that graphic designers are artists applying their talents mostly not in pure art, but communicating and purposeful art.

 

illustration_design_in_progress_tubik

Modern graphic design broadly covers all spheres of human life which deal with visual communication, from books and posters to sophisticated mobile applications or 3D animation. Let’s look into directions in which graphic designers can express their creativity for the sake of solving problems and satisfying needs, in particular, it includes:

 

  • editorial and book design
  • illustration
  • identity (logo and branding) design
  • icons and pictograms
  • typography
  • interface graphics and elements
  • print advertisements
  • big print items such as posters and billboards
  • signs
  • infographics and mapping
  • packaging etc.

 

cinema_fan_illustration_graphic_design_tubik

 

Therefore, anyone interested in getting a graphic outcome for the mentioned purposes is a potential buyer of graphic design services, in particular:

 

— businesses from very small to major, in need of branding, rebranding or creating the extensive corporate identity
— people who need special original graphics to present their personal brand
— book publishers
— publishers of periodical mass-media
— advertisers
— product design teams or customers who need custom graphics for their websites and mobile applications
— diverse agencies and organizations who need posters, stickers, labels and the like for their events, campaigns, offices etc.
— educational institutions for creating various graphics with educational objectives (classroom posters, printables, handouts, toys and games images etc.)
— cartoon and game creators.
Certainly, the list can be continued, still even now its clear that there are many variations who can become the potential customer for a graphic designer.

 

Today’s brief FAQ review is over, but new answers are coming very soon, stay tuned!

 

most popular design articles in tubik blog


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

Welcome to read us on Quora

design for business tubik blog

UX Design for B2B: Businesslike Strategies and Tips.

User experience design for business is getting more and more expressions today. A great diversity of companies make an important decision to come into play and fight for online presence. Various services are now available and executed online. In these conditions, designers working on the projects in this perspective, have to keep in mind the variety of business relations to offer the solutions corresponding the specific client’s goals. Continuing the theme of creating web and mobile products, today we suggest discussing the issues of design for the sphere of B2B services.

 

What is B2B?

 

B2B is the term used in business, marketing and economy to mark the relations of the sides in the business process like «business-to-business». B2B means that one company provides products or services aimed at the other companies’ business activities. The target audience of the offer is not individual customers but businesses. The nature of relations has a direct impact on business process, strategy, promotion and therefore any design stages involved in this scope. Not going far, if we are talking about outsourced design and development services, they are a direct example of B2B.

 

To get this example deeper, let’s imagine the company which sells physical goods to end consumers, let’s say, casual clothes. They need a website which will provide quite broad functionality for a big amount of users. The stakeholders monitor the market for web services and find out that hiring an outsource company for design and development is cheaper and more convenient for them than creating an in-company department for this purpose. This is the start of B2B relations as a digital agency provides their services for another business — a clothes shop — so that it could start e-commerce activity.

 

People involved in the design process for products and services have to consider the types of relations chosen for the particular project. Actually, the type of business scheme initially defines the target audience and nature of interactions which are key factors for efficient and user-friendly design solutions. Designing for business should supposedly involve methods of visual and content presentation which are different from the one presented directly to end users. It’s easy to see by examples of numerous landing pages: the ones aimed at companies use content, language, visual and graphic elements, placement of data blocks different from those which are targeted at individual buyers or users.

 

Neglecting the aspect of business relations increases the risk of creating the design which will not provide high conversion rate even being sophisticated, stylish and attractive visually. The psychological background behind design solutions has to support a particular business schemes or strategy. Here in Tubik, we have had broad experience of design for all the mentioned schemes so below you will find some ideas we would like to share on the basis of that practice.

 

design for business

 

Aspects to consider in design for B2B

 

Designing for B2B, it’s important to remember that:

— design solutions should consistently strengthen branding and company policy. The quality of design says much to the potential clients which the interface has to attract. A good dress is a card of invitation, a good mind is a letter of recommendation — it worked years ago and it still works now. Quality of design created for a website of B2B service is actually an integral part of their image and therefore profits. Remember, that B2B differs from B2C: the stakes, as well as the expenses, are higher, the number of leads can be limited with the specific nature of services, the decisions about the deal may take weeks and even month before they are agreed upon. The website or app design must present the company or service as highly-professional from the first seconds of the interaction and visual perception.  It should build a reliable bridge between the sides looking for collaboration. That’s why businessmen in this sphere are recommended to involve professional designers into the process while designers have to do their best to understand the business goals and research target audience.

 

— people become more and more open and sociable, not only in personal but also in professional aspects, and social networks present the great ground for that aim. Implementation of design elements in social network marketing of B2B company, using the same style, voice, corporate colors and graphics, specially designed branded items and the like is one more way to strengthen brand awareness by means of design. Design has to be consistent whenever the B2B company is presented: headers and banners, logos, style of photos in social network account and on the website need to feature the same stylistic approach. In this way, design makes branding more recognizable, comprehensive and solid.

 

— consistent and a thought-out content strategy combining visual and textual material with the careful selection of visuals and copy is able to fulfill all the stages of sales funnel and bring better conversion of the website, landing page or application of B2B company;

 

— concise and minimalistic solutions in design and copywriting work efficiently in most cases because they save time and effort of busy stakeholders and entrepreneurs. The effective variant of scenario can take place when they are given concise core information at the first stage of interaction but always have the chance to read more if they are interested (as well as avoid reading huge copy blocks if they don’t want). Certainly, this solution should be based on thorough user research, but it has a high potential to make user experience positive;

 

— business is done differently in different countries. It should be always considered together with the nature of business relations as the factor making a considerable impact on the level of trust and wish to collaborate. Selection of graphic content and layout of the elements on the screen or page should go under analysis in this perspective as some graphic elements, photos, gestures, word combinations, color choices which are efficient and clear for one region or culture can be totally unacceptable or even offensive for the others. Creation of several landing pages targeted locally can be an effective solution;

 

— the aim of a website or other piece of design presenting B2B company is not to grow a huge flow of traffic but to engage and direct leads which belong to the target audience and are potentially open to take part in business collaboration or partnership good for both sides. It’s important to keep in mind that retaining customers, in this case, plays not less role than involving them in the game.

ux_design_practices_article

 

Design strategies for B2B

 

The strategies mentioned below may work not only for B2B but for any kind of interfaces aimed at business. Still, in B2B their role in getting profit may be more significant.

 

Get CTA elements seen instantly. Call-to-action buttons should be perfectly visible. Doesn’t it work that way for any kind of website, not only B2B? Yes, you are right. But in B2B the price of a click is much higher while visitors are often horribly busy and don’t tend to spend much time looking for a button on the page. Apply color, shape or orientation contrast, test the most effective placement and think over the copy on it — all that stuff may have a crucial effect on conversion rates.

 

Make value proposition noticeable. Getting to the website, the visitors should immediately understand why it is beneficial to them. Don’t make them search for the reason to cooperate with this B2B service — they won’t do it. Use the catchy slogan or tagline which will express the value proposition briefly and clearly, and take care of its visual performance. Typographic hierarchy will help user’s eye to catch it first, appropriate fonts will add the mood and style to the message.

 

Don’t overwhelm users with information: prioritize content. There is a big temptation for a business to show all its strong sides at maximum. However, it may lead to the website with a huge amount of data which might get the visitor confused, annoyed or frightened. It is especially hard in the cases when visual hierarchy isn’t thought-out and tested properly: the pages risk transforming into a mess which cannot be scanned quickly. So, prioritization is both designer’s and user’s friend here: apply design techniques and layout which will strengthen the visual performance of the core information.

 

Make copy blocks digestible. The debates around the theme of copy blocks are still hot and actual: which copy is better, long or short? Actually, both may be effective. As we mentioned in the article devoted to landing pages, a decision on the amount of copy has to be based on thorough research and testing as it directly and highly influences conversions.  For example, if it presents a famous company product or service or informs about special offers, sometimes short and concise copy is enough to encourage users to buy or know more. However, if a new unknown product or service is presented, it may be important to provide users with more information persuading them to follow the call to action. Whatever is the decision, the copy content should be given in scannable blocks which aren’t too big so that the user didn’t think reading will take too much time. Scanning the blocks allows for faster understanding if the copy brings useful information.

 

Keep core data available from the pre-scroll area. Users usually decide on staying on the website or leaving it very quickly. It is really a matter of minutes or even seconds. That is why all the key information would better be seen in the pre-scroll area, including the value proposition and ability to contact the duty holders. 

 

Activate the power of color psychology. Colors present the great support in sending the right message. Being attentive to target audience’s preferences, designers can select the colors not only on the basis of their nice looks but also color psychology which explains associations people have with colors.

 

Apply catchy visuals sending a message. A picture is worth a thousand words — and that’s not just because it’s more appealing or beautiful but also because in the vast majority of cases, it is perceived faster than words. Moreover, the attractive visual content, be it a photo, illustration or poster may become another source of informing the user about the value proposition provided by the company.

 

Consider promo video content. Promo videos present the popular trend in business schemes now as they enable to inform users about the value propositions and benefits in the fast and original way. However, it may influence the loading speed of the page so this decision needs to be well-weighed.

 

Apply landing pages for special offers. Landing pages allow for focusing user’s attention on the specific information instead of making them search for it around the website. It is especially important is the sales funnel starts out of the website.

 

Don’t forget about the testimonials and signs of trust. Word-of-mouth is the best advertising, especially in the B2B sphere. Making a decision on collaboration, people tend to consider references, testimonials and other signs of trust from the previous clients as positive factors. So, make sure they are available and easily found.

 

Let users contact duty holders from any point of their journey. Contacts can be presented in various formats. They can reveal the data such as phone number and location, emails, links to messengers, contact forms and instant chat window. Making the phone numbers clickable is supportive as many users now browse from their smartphones and may want to call right from there. The address can be also clickable opening the screenshot or map showing how to find the location. The solutions have to be based on thoughtful user research setting target audience’s expectations, level of tech literacy and the most convenient ways of contact for them. 

 

usability_interfaces_ux_design_tubik

 

Hopefully, the mentioned strategies will help not only designers but also entrepreneurs who want to know more about design issues influencing profitability. Soon, we will share more posts devoted to other numerous aspects of design for business.

 

Recommended reading

 

UX Design for E-Commerce: Principles and Strategies.

The Role of Branding in UI Design

Business-Oriented Design. Know Your Target.

Short but Vital. Key Abbreviations in Design for Business.

Business Terms in Design for E-Commerce. Sales Basics.

Two Types of User Motivation: Design to Satisfy.

Sell Like Hotcakes: UI Designs for E-Commerce.

Feel Homey. Handy Tips for Home Page Design.

Landing Page. Direct Flight to High Conversion.

11 Profitable Strategies for E-commerce UI Design


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

Welcome to read or download free e-books about Design for Business and Problem-Solving Web Design

CTA buttons design tips tubik blog

Call for Attention. Powerful CTA Button Design.

An effective interaction system of a digital product consists of small elements which have their tasks and functions. To make the sufficient system, it’s vital to pay attention to all the details.

 

Buttons are core interactive components of user interfaces which play a significant role in the quality UX as well as conversion rates of websites and applications. UI buttons vary according to their features and can be divided into different types. A new article is devoted to the type called call-to-action (CTA) buttons covering their essence, role in the intuitive navigation and the importance of business goals. Let’s see what makes CTA buttons stand out from the crowd learning from the best practices.

 

mobile interaction design tubik blog

 

What’s a CTA button and why is it important?

 

A call-to-action (CTA) button is an interactive element of any user interface both web and mobile: its major aim is to induce people to take certain actions that present a conversion for a particular page or screen, for example purchase, contact, subscribe etc.

 

Traditionally, CTA buttons are easy to notice, even more, designers intentionally create them that way so that people couldn’t resist to clicking it. That’s why they are usually bold buttons containing microcopy with a particular call-to-action (e.g. “Learn more” or “Buy it now”) which encourages us to push it.

 

Lead generation and purchase rise are the basic business goals which calls-to-action can be created for. When a button design is compelling enough to immediately attract the attention of potential clients, it can entice them to click and go to the next stage such as filling a short contact form or making a preorder of a product.

 

ux_design_practices_article

 

This way website visitors and app users can be led through a sales funnel from one stage to another helping them to learn the details about the product or service. Even professionally worked out content may not guarantee the high level of user engagement. Without CTA buttons people are more likely to scan content quickly and just leave it untouched.

 

Some may think that a sufficient call-to-action button design applies only a big size and bright color to accomplish all its objectives. Still, there are much more aspects ensuring the effectiveness of CTAs. Let’s see what they are along with the practical examples of their appropriate usage.

 

choice of color in UI design

 

What makes a powerful CTA button?

 

Size

 

Size is one of the most common tools helping to divide UI components according to their importance. The bigger an element is, the more noticeable it becomes. Since CTAs’ prior goal is to draw users’ attention, designers usually try to make them stand out among the other buttons on the screen, especially via noticeable size.

 

Large buttons have high chances to be noticed and clicked still you have to keep some limits. A compelling call-to-action button is usually big enough to be quickly found but not too big so that the visual composition and hierarchy of the layout wouldn’t be spoiled. Market leaders often provide recommendations on the effective sizes of buttons in their guidelines. For example, Apple says that CTAs in mobile UI should be at least 44Х44 pixels, while Microsoft recommends 34Х26 pixels.

 

burger_app_ui_animation_tubik

 

Color and shape

 

Visually attractive size is only one aspect of a powerful CTA. To make the buttons even more noticeable it’s vital to choose sufficient color and shape. The thing is that human mood and behavior highly relates to the visual surroundings. Our mind reacts to colors and shapes while we usually do not notice it. The moment our eyes perceive a color, they connect with the brain which gives signals to the endocrine system releasing hormones responsible for the shifts in mood and emotions. Psychology science has specific branches devoted the influence of different colors and shapes on our consciousness. In our previous articles, we described the role of this impact on the design solution. Here are brief guides on the common meaning which colors and shapes have.

 
Color meanings:
 

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

 
Shape meanings:
 

  • Squares and rectangles meanings: discipline, strength, courage, security, reliability.
  • Triangles meanings: excitement, risk, danger, balance, stability.
  • Circles, ovals, and ellipses meanings: eternity, female, universe, magic, mystery.
  • Abstract shapes meanings: the duality of meaning, uniqueness, elaborate.

 

Traditionally, CTA buttons look like horizontal rectangles since people got used to perceiving this shape as clickable buttons. In addition, it is recommended to design CTAs with rounded corners because they are thought as they point inside of the button drawing attention to the copy.

 

Color choice depends on various aspects which make the process more complicated. Designers need to consider such factors as the basic color of the composition as well as potential preferences and psychological peculiarities of the target audience. There is one condition which is vital to keep in mind while choosing colors for CTA: buttons and background colors should be contrasting enough so that CTAs would stand out from the other UI components.

 

dating_app_landing_page_tubik

 

 

Placement

 

The placement of CTA buttons is crucial for their capability. If they are located in the areas where users’ eyes can’t catch them, other visual aspects such as color and size might not work efficiently. But how to understand what placement is more prosperous?

 

Lots of studies have shown that before reading a web page people scan it to get a sense of whether they are interested. Considering this fact, designers may learn the most prominent scannable areas and place call-to-actions within the user’s path.

 

According to different studies, including the publications by Nielsen Norman Group, UXPin team, and others, there are several popular scanning patterns for web pages, among which “F” and “Z” patterns.

 

F-pattern is the most common for web pages with big amount of content such as blogs, news platforms. A user first scans a horizontal line on the top of the screen, then moves down the page a bit and reads across the horizontal line which usually covers a shorter area. And the last one is a vertical line down on the left side of the copy where they look for keywords in the paragraphs’ initial sentences.

 

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

 

These patterns allow designers to place CTAs in the spots of highest attention, such as top corners and put the other points requiring attention along the top and bottom lines. Also, it is a good idea to place CTA buttons at the center of the layout, especially when it isn’t overloaded with other UI elements.

 

gourmet_herbs_website_design_tubik

 

Microcopy

 

Microcopy plays a significant role for the efficiency of call-to-action. It is defined as the small components of text which serve as hints for users. To be more specific, microcopy includes buttons and menu copy, error messages, security notes, terms and conditions, as well as any kind of instructions on product usage.

 

CTA microcopy is actually a call which tells users what action they will take if they click the button. The powerful CTA microcopy is usually short but consistent so that it could quickly catch users’ attention.

 

bright_vibe_calendar_app_ui_tubik

 

Call-to-action buttons are one of the most powerful sales tools in e-commerce and an influential factor of good conversion of a page or screen. Designers need to understand the importance of CTAs and pay deep attention to all the details having an impact on their performance. Follow Tubik Blog to get more tips on CTA design.

 

Recommended reading

 

UI/UX Design Glossary. Navigation Elements.
UX Design Glossary: Interface Navigation Elements. Set 2.
7 Tips to Enhance Mobile Interactions
3C of Interface Design: Color, Contrast, Content.
9 Effective Tips on Visual Hierarchy
Take It Easy: Tips for Effort-Saving User Interfaces.


Welcome to see designs by Tubik on Dribbble and Behance

color glossary in design tubik blog

Design Glossary: Color. Terms and Definitions.

Color is one of the fundamentals which design is built of. It can be a powerful tool in the expert’s hands affecting numerous factors which are vital for the compelling visual perception. Color has a significant impact on our mind. It changes the way we feel about an object within a few seconds as well as makes people react and even take certain actions.

 

At first sight color science may seem not that difficult to master but diving into the details it’s obvious that there are many peculiarities which demand to be comprehended. In the article Color Theory: Brief Guide For Designers, we touched upon the basics of the science helping designers in their craft. Today we gathered a handy glossary with the essential terms of the color theory which will help graphic and UI designers get the better understanding of how color works.

 

web and app UI design

Add the Color Illustration

 

Color

 

Before we step any further, it’s important to figure out the essence of color itself. The Merriam-Webster dictionary defines it as a phenomenon of light (such as red, brown, pink, or gray) or visual perception that enables one to differentiate otherwise identical objects. Simply put, color is a quality of an object which is caused due to the light being reflected or emitted by this object. Color can be verified visually by measurement of its properties such as hue, saturation, chromaticity, and value. To gain proper awareness of color meaning let’s define its characteristics.

 

Color properties

 

Hue

 

The term hue is often mistaken for the color so it needs to be cleared out. First, we should understand that “color” is a general term which people use to name all the hues, tints, and tones. On the other hand, a hue is exactly the thing we mean asking “what color is it?”. Basically, it is a family of twelve pure and bold colors presented on the color wheel.

 

A hue serves as a basic material which can be transformed in three different ways — tinting, shading and toning. Depending on the applied technique, a hue is modified into tint, shade, or tone.

 

They are easy to distinguish. A tint is created by mixing a hue with white, while a shade is a mix of a hue and black. Toning is a more delicate process because it requires adding both black and white the reason why the results may seem more natural than shades and tints.

 

color-glossary-tints-tones-shades

Source

 

Value

 

As we said above colors have certain characteristics by which they can be recognized. Value is a property telling how light or dark a color is. The characteristic is defined by the level of whiteness. The more white has been added to a hue, the higher value it receives.

 

Chromaticity

 

Chroma, or chromaticity, shows the purity of a hue. The characteristic is measured by the presences of white, grey, or black in a color. Twelve basic hues described above have the highest level of chromaticity since they don’t contain any additional elements. Colors with high chroma usually look bold and vivid.

 

Saturation

 

This characteristic has much in common with value and chroma, so sometimes they may be mistaken. Still, it’s vital to understand the differences. Unlike two previous properties, saturation doesn’t apply mixing hues with any other colors. It is about how a color looks under different lighting conditions. Saturation describes how bold or pale a color is according to its look in the daylight and weak light. The property is also known as the intensity of a color.

 

color theory design tubik

 

Color wheel

 

If you had any lessons related to painting, you must have seen the circle consisting of different colors. It is called the color wheel and helps to understand how different colors relate to each other and how they can be combined. The color circle is usually built of primary, secondary and tertiary colors which are also known as hues.

 

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

 

color theory design tubik

Source

 

Color types

 

Primary colors

 

They are three pigment colors that cannot be formed by any combination of other colors. The primary colors serve as the basis of a whole system.The primary colors vary depending on the type of color system. A subtractive system is based on cyan, magenta, and yellow, while red, green and blue colors form the additive system. And the painting system RYB includes red, yellow and blue.

 

Secondary colors

 

These colors appear by the combination of two primary colors. Since each system has different basic colors, the secondary colors vary too. Here is a schematic explanation of secondary colors appearing in each system.

 
RGB:

  • green+red=yellow
  • red+blue=magenta
  • blue+green=cyan

 

CMYK:

  • yellow +magenta=red
  • magenta+cyan=blue
  • cyan+yellow=green

 

RYB:

  • yellow+red=orange
  • red+blue=purple
  • blue+yellow= green

 

Tertiary colors

 

The mix of the primary and secondary colors gives us the tertiary colors which usually have two-word names such as red-violet or yellow-orange.

 

Cool, warm and neutral colors

 

All the colors we described above can also be divided into three types: cool, warm and neutral.

 

Cool colors are the ones on the green-blue side of the color wheel. They are called cool since they bring the feeling of cold. Warm colors are opposite to the previous due to the warm associations which they possess. Yellow, orange and red are the hues relating to the warm type. Last but not least, neutral colors are absent on the color wheel including gray, brown and beige.

 

weather app design UI

 

Color systems

 

RGB

 

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

 

RYB

 

RYB (red, yellow, blue) is also known as painting color system often used in art education, especially in painting. It served as a foundation for the modern scientific color theory which determined that cyan, magenta, and yellow are the most effective set of three colors to combine. This is how the color model CMY has been formed.

 

CMYK

 

The system CMY has been modified with the appearance of the photomechanical printing. It received the key component meaning black ink and the system was named CMYK (cyan, magenta, yellow, and black). Without this additional pigment, the shade closest to black would be muddy brown. Today this color system is mostly used in the printed design.

 

color theory design tubik

Source

 

Color schemes

 

The color balance is vital in design since users make their impression of the website or application by the first look, and colors have the big influence. Designers distinguished the basic color schemes, aka color harmony, which work effectively.

 

Monochromatic

 

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

 

business cards design

Deetu Business Cards

 

Analogous

 

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

 

binned logo animation design

Binned Logo Animation

 

Complementary

 

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

 

home budget web interface

Home Budget Dashboard

 

Split-Complementary

 

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

 

financial_service_website_tubik

Financial Service Website

 

Triadic

 

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

 

dating_app_landing_page_tubik

Dating App Landing Page

 

Tetradic/Double-Complementary

 

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

 

business_card_app_animation_tubik

Business Card App

 

Let’s sum up with the prosaic quote by RyPaul: “The whole point is to live life and be — to use all the colors in the crayon box.” Learn how to use colors effectively both in your life and work and the results will please you.

 

Recommended reading

 

Color Theory: Brief Guide For Designers.
Color in Design: Influence on Users’ Actions.
Color Matters. 6 Tips on Choosing UI Colors.
3C of Interface Design: Color, Contrast, Content.
Color in UI Design. Look on the Bright Side.


Welcome to see designs by Tubik on Dribbble and Behance

design review tubik studio

Tubik 2017. Bright Year in a Big Review.

Full of productive work and a wide variety of creative challenges, the year 2017 is almost over. For Tubik it was dynamic, bright, rich in meetings, shots, interesting projects and non-stop professional growth. The company got bigger, more experienced and diverse. And again, we start the new stage of our workflow remembering the most significant points of what has already been done, so today won’t be an exception. Let’s take a moment to turn back for a while and remember some outstanding things that marked the year 2017 for our team.

 

Keeping our active position on Dribbble, we published over 120 shots. Welcome to look through the set of top positions in the categories of UI/UX design, animation, branding and illustration. Following the links, you will be able to see all their detailed descriptions and full-size attachments.

 

Top Ten UI shots

 

bright vibe calendar UI design tubik

Bright Vibe Calendar

 

financial_service_website_tubik

Financial Service Website

 

dating_app_landing_page_tubik

Dating App Landing Page

 

design agency landing page

Digital Agency Landing Page

 

web ui design city guide

Big City Guide

 

home budget app mobile interface

Home Budget App

 

bikers website blog

StarDust Biker Website

 

underwater world encyclopedia design tubik

Underwater World Encyclopedia

 

music streaming app design

BeatSync Music Streaming App

 

Homey app smart home UI

Homey App

 

Top Twenty Animated shots

 

watering_tracker_app_ui_tubik

Watering Tracker App

 

jewellery ecommerce app

Jewellery E-commerce App

 

loading_animation_iphonex_tubik

Loading Animation for iPhoneX

 

home budget web interface

Home Budget Dashboard Animation

 

burger_app_ui_animation_tubik

Tasty Burger App

 

californication_bus_animation_tubik

Californication Bus Animation

 

dance academy landing page animation

Dance Academy Landing Page

 

cinema app interaction UI

Cinema App

 

upper_app_ui_design_tubik_studio

Upper App

 

Upper App Animation

Upper App Landing Animation

 

business_card_app_animation_tubik

Business Card App

 

gourmet_website_interactions_tubik

The Gourmet Website

 

bookshop website animation

Bookshop Website

 

car app interface

Car Stats Animation

 

mood messenger landing page

Mood Messenger Landing Page

 

Animated stickers mood messenger design tubik

Animated Stickers for Mood Messenger

 

navigation_in_ui_animation_tubik

Navigation in UI

 

mobile_game_interactions_tubik

Mobile Game Interactions

 

tubik_photo_app

Photo App Interactions

 

menu_interactions_ui_animation_tubik

Menu Interactions Concept

 

Top Ten Illustration shots

 

design_party_graphic_design_tubik

Design Party

 

star_wars_stickers_fanart_tubik

Star Wars Fan Art Stickers

 

creative_ux_design_illustration_tubik

Creative UX

 

halloween_pumpkin_animation_tubik

Creative Pumpkin

 

opera video animation case study

Opera Video: Summer Heat Illustration

 

illustration_design_in_progress_tubik

Design in Progress

 

add_color_illustration_tubik

Add the Color

 

building_ui_illustration_tubik

Building UI

 

business_graphic_design_tubik

Business Teamwork

 

golden_ratio_ui_design_illustration_tubik

Golden Ratio in UI Design

 

Top Five Branding Shots

 

binned logo animation design

Binned Logo Animation

 

logo_animation_tubik_design

Whizzly Logo Animation

 

brand identity design case study

Reborn Business Cards

 

lunnscape_branding_case_study_tubik

LunnScape Branding

 

forcecop_logo_design_tubik

ForceCop Logo

 

Top 5 tubik.arts shots

 

tubik_arts_character_animation_hagrid

Character Animation: Rubeus Hagrid

 

tubik_arts_flickids_pirates_character_animation

Character Animation: Flickids Pirates

 

tubik_arts_orks_vs_aliens_nagari_cg_design

Character Design: Sorceress Nagari

 

tubik_arts_orks_vs_aliens_nazmordul_illustration

Character Design: Orc Nazmordul

 

tubik_arts_thorin_character_illustration

Character Design: Thorin Oakenshield

 

Top Ten Articles in Tubik Blog

 

The year melting away has been really fruitful for Tubik Blog: we shared around 100 articles and case studies with our readers and subscribers. Here’s the top ten of them (the extended list of the most popular articles can be found here).

 

Psychology in Design. Principles Helping to Understand Users: the post about general principles of psychology which can help designers know users better and create user-friendly web and mobile interfaces.

 

Best Practices for Website Header Design: the set of insights on the definition, structure, and composition of a website header as a strategic part of the website with a variety of examples and approaches.

 

UI/UX Design Glossary. Navigation Elements: another set of UI/UX Design Glossary, explaining terms in the field of user interface design. Focused on navigation elements: buttons, menus, switches, icons etc.

 

Color Theory: Brief Guide For Designers: the article concentrated on the basics of color theory and color combinations in design. Learn more about the color wheel, RGB, CMYK and models of color harmony.

 

Color in Design: Influence on Users’ Actions: considerations devoted to the issue of using various colors in user interfaces and branding design, associations and the influence of color choice on user behavior.

 

Mobile UI Design: 15 Basic Types of Screens: mobile applications evolve with user’s needs offering new functionality, still, there are screens common for many apps and they are the focus of this article.

 

Gestalt Theory for Efficient UX: Principle of Similarity: the article considering Gestalt theory application in interface design: this time it’s focused on similarity principle of effective content grouping in UI.

 

Gestalt Theory for UX Design: Principle of Proximity: the second post in the series devoted to applying Gestalt principles in design of user-friendly web and mobile interfaces, today about the principle of proximity.

 

How Human Memory Works: Tips for UX Designers: insights into the ways human memory works and the factors of its influence on UX design solutions for websites and mobile apps.

 

Information Architecture. Basics for Designers: the article providing insights into the basics of information architecture for designers and setting the link between IA, UX and UI for websites and applications.

 

most popular design articles in tubik blog

 

Top Six Tubik News

 

Upper App Launch

 

At the beginning of 2017, following the successful launch of Toonie Alarm, Tubik team we rolled out another iOS application for everyday use called Upper App. It is a simple and elegant to-do list designed in minimalistic manned and aimed at easy task tracking. The application got itself the App of the Day on Product Hunt and once again allowed us to go through all the process from the initial idea of the product to branding, design, development and marketing of our own product. No doubt, this kind of experience was highly helpful for our work on outsourcing project.

 

upper app UI design case study

 

tubik.arts launch

 

One more big news was establishing tubik.arts department focused on creating CG, characters and environment for various games, book illustrations and complex motion design.

 

tubik_arts_cg_orc_nazmordul_animation

 

Behance Portfolio Reviews

 

In 2017 Tubik hosted Behance Portfolio Reviews events twice in Dnipro, Ukraine. These creative meetups let the local design community get one more platform for communication on professional issues and allowed novice designers to get useful tips and recommendations from experts.

 

behance portfolio reviews

behance portfolio reviews dnipro

behance portfolio reviews dnipro tubik

 

Full Cycle for Product Creation

 

This year our team has grown to add not only the designers but also web and mobile developers, therefore the range of services which we can offer to our clients has broadened significantly. At the moment we are able to accomplish the creation of any digital product from scratch. Research, branding, graphic design, UI/UX design, motion design and video production, iOS, front-end and back-end development as well as copywriting for slogans and brand names — in 2017 we successfully dealt with all those positions and even more custom ones.

 

Tubik Academy

 

The year has also been marked with the first group of UI/UX designers who have completed the intensive course of UI/UX design in Tubik Academy — and two of them are already going through their internship in the studio.

 

tubik academy ui ux designers

 

Problem-Solving Web Design — Free Ebook

 

In 2017 we shared one more issue of Tubik Magazine: a free ebook Problem-Solving Web Design devoted to design of user-friendly and goal-oriented websites and landing pages.

 

problem solving web design free book

 

Bright moments of work, rest and creative search were traditionally shared with our followers on studio Instagram page. And as usual, we also didn’t miss the chance to share our ideas, news, tips and experience via Medium and Quora at which we got the positions of top writers in the domains devoted to design. Also, we kept everyone updated with studio news via TwitterFacebookTumblr and Flipboard.

 

new year tubik studio team

 

Even this quite concise review makes obvious that 2017 was full of everything for us. And we are ready for new challenges, perspectives and projects which will definitely open many new unforgettable creative pages.

Warm greetings for everyone from the Tubik team, we wish you the amazing and successful year 2018!


Welcome to read the Review of Popular Interface Design Trends in 2017