Tag Archives: product design

design navigation UI UX tubik studio

UI/UX Design Glossary. Navigation Elements.

One of the basic features of product usability is thoughtfully created navigation. It doesn’t matter if the visual performance is creative, stylish, original, catchy and so on and so forth, in case the users don’t know where they are and how they could reach their goals with the website or app. Whatever is the reason that brings users to your digital product, the high level of respecting them means letting them know what is going on and where they are going at every step of interaction with it. Earlier we have already published the Glossary posts with key terms for the topics of usability and web design as well as business terms and abbreviations. This time the perspective will get focused on navigation aspect: let’s check out what parts and elements of the interface are responsible for this vital issue. 

 

Dribbble shot Tubik Studio

 

Navigation

 

In its basic meaning, the word navigation names the sphere of human activity responsible for enabling a vehicle to get from one place to the other, controlling and supporting this process. According to etymology dictionary, the term has deep roots and comes from the Latin word navigare «to sail, sail over, go by sea, steer a ship,» which in its turn is based on two words: navis «ship» and agere «to set in motion, drive, drive forward». So, to navigate is to make possible for someone or something to cover the planned route. This is the foundation from which the numerous meanings of this word took the start and adjusted in many other spheres.

 

In terms of user experience design, the concept of navigation is one of the basic notions setting the usability. Navigation in this case could be generally defined as the set of actions and techniques guiding users throughout the app or website, enabling them to fulfill their goals and successfully interact with the product. The aspect of efficient navigation has a great impact on setting positive user experience: users start using apps or websites with particular aims and expectations, and that’s designers’ task to set the best and easiest route to solving users’ problems.

 

The aspect of helpful and seamless navigation in UI should be thought-out from the early stages of creating user interface. Users are navigated via interface with a number of interactive elements such buttons, switchers, links, tabs, bars, menus, fields and the like, some of which will be described more in details below.

 

Here in Tubik we support the workflow in which all the basic navigation issues, such as layout, transitions, elements placement and functionality, are set on the early phase of UX wireframing and then checked with simple prototype to make sure all the important operations and options are clear for users. Neglecting this essential aspect sets high risks that all the other effort on design can be just wasted, so it’s much more user- and client-friendly to start with the basics.

 

Tubik Studio UI sketches

 

Menu

 

Menu is one of the core navigation elements. It is a graphical control that presents the options of interactions with the interface. Basically, it can be the list of commands — in this case options will be presented with verbs marking possible actions like, for example, «save», «delete», «buy», «send» etc. Menu can also present the categories along which the content is organized in the given interface, and this can be the high time for using nouns marking them.

 

Menus can have different locations in the interface (side menus, header menus, footer menus etc.) and different ways of appearance and interaction (drop-down menus, drop-up menus, sliding menus etc.) Any solution, which designer makes about menu functionality, appearance and placement in general layout, should be based on thoughtful user research, analyzing not only potential wishes and expectations of target audience, but also their tech literacy and possible environments in which the digital product could be used. Well-designed menu can significantly speed up the process of achieving goals and satisfying needs that lays the solid foundation for positive user experience.

 

tubikstudio ui app design

 

Here is the example of mobile blogging app interface which features left-side menu presenting the categories of content. The copy describing positions in the menu is supported with icons presenting recognizable visual mark for the category.

 

mobile app design tubik studio

 

The presented app UI concept shows the type menu applying the effective technique of color marking: when users move to a particular category, the specific background color is used for all the content in it, which forms strong associations and quick perception of the nature and theme of data the user sees.

 

CTA

 

Behind the widely used abbreviation CTA, designers and content creators mean call to action. This is actually the word of phrase which stimulates users to interact with a product in a way and for the aim it is designed for. CTA elements are the interactive controls which enable users to do the action they are called to. Typical types of such interactive elements in the layout are buttons, tabs, or links.

 

In the interfaces of all kinds, CTA elements are the core factor of effective interaction with the product, which plays the crucial role in usability and navigability. When all the path of interaction and transitions is built clearly for users but CTA element is not thought-out, placed or designed well, users can get confused and will need to take additional effort trying to achieve their goals. That sets the high risk for poor conversion rate and general user experience. That’s why this navigation element should draw particularly deep designers attention. In any interface, it should be one of the most prominent and quickly noticeable parts to inform users how the product can be helpful or useful for them.

 

Contact List Concept Scrolls Tubik

 

As we mentioned in the article with tips on copy content in UI, some call-to-action elements may be represented with icons that don’t require copy using widely and instantly recognized images such as a telephone receiver for making a phone call or the envelope for opening received mail. The app interface presented above shows this case: the button with a receiver is the most prominent interactive element on the screen navigating user to achieving their goals with app quickly, and it doesn’t need the copy to let users understand what action can be done with it.

 

However, when the image of an icon is not so obvious or can be misleading, it is more effective to use double scheme, when the icon, button, or link is supported with the copy.

 

landing page UI design tubik studio

 

The example above features the landing page for a web platform devoted to cooking seafood. The headline of the page presents a call to action and immediately sets the theme by both verbal and visual means. Still, this call to action is not interactive. The active CTA elements are clickable buttons informing users that after clicking they can see more information on the particular topic or recipe. The bright color enhances visual hierarchy on the page and draws users’ attention to the key interactive zone.

 

Bar

 

Bar is a section of user interface with clickable elements enabling user to quickly take some core steps of interaction with the product or it can also inform user on the current stage of process. Among the basic types of bars, we could mention:

Tab bar — in mobile applications, it appears at the bottom of an app screen and provides the ability to quickly switch between different sections of an app.

 

tubik studio tapbar ui

 

Loading bar — the control informing user on the current stage of action, when the process is in active stage and user can see the flow via timing or percentage shown in progress.

 

tubik studio motion design

 

Progress bar — provides feedback on a result of the current process so far, for example, showing how much of the planned activity has been done.

 

juicy player UI Tubik Studio

 

Button

 

Button is, perhaps, one of the most popular elements of any interface. Button is the element which enables user to get the appropriate interactive feedback from the system along a particular command. Generally speaking, button is a control with which user directly communicates to the digital product and sends the necessary command to achieve a particular goal, like, let’s say, send the email, buy a product, download the data, turn on the player and tons of other possible actions. One of the reasons why buttons are so popular and user-friendly is that they efficiently imitate interaction with the objects in physical world.

 

Modern UI buttons demonstrate high diversity and can serve plenty of purposes. Typical and frequently used buttons which present an interactive zone, usually clearly marked out for visibility and having a particular geometric shape and often supported with the copy explaining what action will be fulfilled via this button. Designers usually apply considerable time and effort for creating effective and noticeable buttons that are harmonically added into general stylistic concept but are contrast enough to stand out in the layout.

 

tubik studio page 404

 

Besides, we could also mention several types of buttons with additional functionality, widely used in mobile and web interfaces.

 

Hamburger button — the button hiding the menu: clicking or tapping it, user sees the menu expanding. It is called so as its form consisting of three horizontal lines looks like typical bread-meat-bread hamburger. Nowadays it is a typical element of interaction, still highly debatable due to the number of pros and cons.

 

Most users who visit and use websites on the regular basis know that this button hides the core categories of data so this trick does not need additional explanations and prompts. Hamburger menus free the space making the interface more minimalist and full of air as well as allow massive saving place for other important layout elements. This design technique also provides additional benefits for responsive and adaptive design hiding navigation elements and making the interface look harmonic on different devices. Although hamburger menus still belong to highly debatable issues of modern web and app design, they are still widely used. The arguments against hamburger menu are based upon the fact that this design element can be confusing for people who do not use websites regularly and can get misled with the sign which features a high level of abstraction. So, the decision about applying hamburger button should be made after user research and definition of target audience’s abilities and needs.

 

tubik studio ice ui website

The presented website concepts uses hamburger button to hide the menu and support general minimalist approach to the visual performance of the layout.

 

Plus button — the button that being clicked or tapped presents the ability to add new content, be it a new contact, post, note, position in the list — anything user could do as the basic action with the digital product. Sometimes, tapping this button users are directly transferred to the modal window of creating content, in other case there is also a medium stage when they are given additional option to choose from and make adding the particular piece of data more focused.

 

tubik studio button ui

 

Here is the concept showing that plus button first enables a user to choose the category of the added content (image, video, text) and only then directs to the particular screen where it can be done. This practice takes seconds still makes experience more user-friendly as designers can present users with modified options of adding content for every particular case.

 

Share button — the button enabling a user to share the content or achievement directly to social networking accounts. In vast majority of cases, it is presented with icons which present a brand sign of particular social networks and are easily recognizable.

 

Switch

 

Switch is a control that enables users to switch the option on or off. Again, it is applied with the high level of efficiency and popularity in modern interface because it presents the direct imitation of switches people are accustomed to in real life. The important point of consideration here is that states of the switch should be visibly clear and brightly different, so that user could avoid applying effort to understand if the option is active or not. Various sorts of contrast and slight animation can make solve the problem making the experience simple and user-friendly.

toonie switch UI animation

Here is the switch turning on and off the alarm in Toonie app. Animation makes the interaction smooth and natural, while changed color of the tab and the toggle transforming into spinning sun let users instantly understand whether the alarm is active. If you want to see the full case study on how this animated element was designed and developed, welcome to check the details here.

 

Picker

 

As it becomes clear from its name, picker allows users to pick the point from the row of options. It usually includes one or several scrollable lists of distinct values, for example, hours, minutes, dates, measurements, currencies etc. Scrolling the list, users choose and set the needed value. This type of interactive element is widely used in the interfaces which have the functionality of setting time and dates.

 

toonie UI animation

 

Checkbox

 

Checkbox is graphical UI element which is used to mark a particular piece of content, usually setting the choice for the binary options. It is another element setting the bridge with the real world as it looks really similar to the process of filling in tests, questionnaires and other stuff of this kind when you put a tick or color the box to mark the option. Checkboxes and switches can be found in any type of user interfaces, especially in the sections of user, screen or page settings. Also, checkboxes present a common part of navigation in apps and websites with functionality of task managers, to-do lists, time trackers and the like.

 

todo list UI app tubik studio

 

Here’s the example of design concept for the mobile to-do app for complex tasks. Tapping the checkbox, users marks the task as done and it automatically gets faded, the copy is colored differently and the font gets bolder to support the contrast of this task with the one which are still in progress.

 


 

Today’s set of our glossary is ready for those who need it and we are going to continue this practice before long. Don’t miss the new sets — the next one will continue the issues of navigation with deeper insights into types of menus and buttons, tags, breadcrumbs and icons. If there are any specific terms you would like to see explained, described and illustrated, feel free to contact via direct message in our Facebook page or Twitter as well as our Quora representative. New definitions are coming soon!

 

Recommended reading

 

Here is the set of recommended materials for further reading for those who would like to get deeper into this topic and learn more on the theme.

 

iOS Human Interface Guidelines

 

Navigation patterns for ten common types of websites

 

3 essential rules for effective navigation design

 

Perfecting navigation for the mobile web

 

Understanding Web UI Elements & Principles

 

User Interface Elements

 

The Most Creative Mobile Navigation Patterns

 

Basic Patterns for Mobile Navigation


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

Welcome to read us on Quora

copy content in user interfaces UI design

Tips on Applying Copy Content in User Interfaces

Words are a powerful weapon. They can bring both success and failure depending on how you put them together. They can motivate or confuse, strengthen or weaken, call or push away. That’s why designing a digital product, it’s vital to remember that high-quality copy is as essential as the details of visual performance.

 

In one of our previous articles, we’ve already considered the big role of textual content in UI design, covering the definition of copy and its functions in graphic user interfaces. Important point to remember from it here is the words cannot be fully replaced with the graphics whatever amazing, high-quality and professional they are going to be. Efficient and engaging copy content in user interfaces is defined by two equally significant basic criteria: the quality of writing and the appropriate look. Words and visual elements should mutually support each other, exist in harmony and provide organic consistency. So, every single piece of copy should be thoughtfully analyzed and created in a way corresponding to general design concept and enhancing positive user experience via successful interaction. 

 

Could you imagine an interface containing badly-written copy with the same type sizes, fonts, and colors? The chances are big that it would cost users great effort to solve their problems or get needed information with the product, so they would simply choose other product that is more user-friendly and less time-consuming. Let’s check what types of copy content designers and copywriters deal with creating websites or mobile applications, and think over the points needing special attention.

 

copywriting tips

 

Visual hierarchy

 

To organize content in interfaces clearly for users, designers apply a well-known technique called visual hierarchy. It is initially based on Gestalt psychological theory and its main goal is to present the content on the carrier, be it a book page or poster, web page or mobile screen, in such a way that users can understand the level of importance for each element. It activates the ability of brain to distinguish objects on the basis of their physical differences, such as size, color, contrast, alignment etc. In the aspect of creating copy content for web pages and mobile app screens, there are two aspects important to consider: page scanning patterns and typographic hierarchy. 

 

Understanding the importance of visual performance and readability of copy in digital products and its impact on user experience, numerous usability experts explore this issue comprehensively and collect statistics providing valuable data for designers. Lots of studies have shown that before reading a web page people scan it to get a sense of whether they are interested. According to different studies, including the publications by Nielsen Norman Group as one of the pioneers of this field, UXPin team and others, there are several popular scanning patterns for web pages, among which “F” and “Z” patterns.

 

F-pattern is referred to as the most common eye-scanning pattern, especially for web pages with big amount of content. A user first scans a horizontal line on the top of the screen, then moves down the page a bit and reads 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. It usually occurs on text-heavy pages like blogs, news platforms, thematic editorials etc. How could designers employ this knowledge? First of all, placing the information of key importance or core interest on the most scanned spots and trying to use short catching headlines and bold headers to draw users’ attention.

 

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

 

website design tubik studio

The Big Landscape

 

Here we can see the design concept for a website which presents the online magazine «The Big Landscape». The interface is minimalist following the principles of clear visual hierarchy, good readability, intuitive navigation and aesthetic pleasure from visual perception. The designer followed Z-scanning-pattern placing vital elements such as the logo and CTA button in the corners of the top line while the bottom line informs users about the website creators and provides with the ability to contact via social networks instantly. 

 

Typographic hierarchy

 

Typographic hierarchy is a system that organizes copy content in the best way for users’ perception first of all via modifications and combination of types and fonts. It is aimed at creating contrast between the most meaningful and prominent copy elements which should be noticed first and ordinary text information. The contrast is created by regulating type fonts, sizes, and colors as well as their placement and alignment. Typographic hierarchy is presented with common types of copy content used in UI design.

 

Headlines

 

A headline is the first thing that users should see in any interface. It is a large, bold word or phrase which transfers and emphasizes the core informative message on the page. It’s essential for headlines to be catchy and short, so that they could draw users’ attention, and meaningful in order to inform users about the theme and benefits of the content of the page or screen. According to the research published by one of the popular social media sharing platforms Buffer, the ideal length of the headline is 6 words; Jacob Nielsen provides the study at which shows that headlines of 5-6 work effectively, not less than extensive headlines presenting a full sentence. 

 

Another point to remember: it’s good when headline is visually supported by other elements on the page or screen, still it also should be understandable and meaningful without such context.

 

website design for photographers

Photography Workshops 

 

Here is the landing page for a company organizing photo tours and workshops for photographers. Functional and stylish minimalism is the basic approach behind the web interface. The bold headline is placed on the left which makes it noticeable but the major accent still remains on the head picture.

 

landing page UI design tubik studio

Website on cooking seafood

 

tubik_studio_website_ui_bakery

Vinny’s Bakery

 

These are two examples of the websites concentrated on providing content around the same theme — food. They both have minimalist design with centrally located headlines. However, the headlines differ with the message they send to the users as well as nature of the websites differs in its core: one of them stimulates uniting users around the action (cooking seafood) while the other is focused in presenting the goods (bread and bakery). The first example presents a website collecting recipes of meals with seafood from all over the world, so its headline contains a CTA with a key element — action verb in imperative form “Let’s cook!”, which dynamically tunes users into the activity. On the other hand, we can see another concept — a website for a small bakery selling homemade bread. The lyrical headline makes users feel warm, sets strong positive emotional connection and lets them instantly imagine the smell of bakery products which are sold via the website.

 

Subheaders

 

It’s impossible to put all the significant information in a headline, that’s why you need subheaders. These are brief, concise and catchy phrases that are similar to headlines, although they typically mark out the key points in separate sections while headlines summarize the theme or message of the whole page. Following the principles of visual hierarchy, fonts chosen for subheaders are usually smaller than for headlines but bigger than the rest of the copy. Traditionally, they are also bold and short. 

 

Landing Page Animation Tubik Studio

Organic — landing page

 

tubikstudio travel gear landing

Travel Gear Landing Page

 

Subheaders play a big role in landing page design. These two concepts for landing pages above are good examples of how subheaders inform users about the data provided in different sections. Bold subheaders point out the main idea of body copy helping users find the information they need easily and quickly.

 

Body copy

 

Body copy is usually a part of text presenting the description or some essential information placed in a compact block, usually under a subheader or a headline. Fonts are thinner and smaller than in headlines and subheaders, sometimes they are presented in italic for even more prominent visual contrast.

 

There is no unified opinion about the best length of body copy. Some content creators support the approach that long copy is more informative and serious-looking, while the others claim that only short copy is effective because Internet users never want to read too much. Here in Tubik we support the approach that the length of effective and user-friendly copy depends directly on target audience: users as well as products are incredibly different, they have diverse preferences, goals and wishes when search for web resources or mobile apps. Both long and short copy have their own pros and cons, and each of them can be appropriate than depending on target audience of the product and its conversion goals.

 

Short copy is often effective for mobile interfaces and landing pages: their users are usually keen to see concise and highly informative copy content. Moreover, mobile interfaces have limited amount of space, so too much copy won’t look nice and will demand additional effort for reading, which can be the reason for poor user experience. Long copy is good for web resources that provide users with complex information on specific topics as well as presentation of the products which aren’t well-known for users and need additional informative support.

 

website design UI

Architecture Firm

 

Here is the example of a web page where long copy is useful. It’s a design concept featuring a website for architectural bureau following minimalistic and functional approach in creative practice and demonstrating it via website visual performance. The aim of such websites is to tell the company’s story, present professional level and achievements, so detailed copy works efficiently in this case.

 

tubik studio web ui design

Birds of Paradise Encyclopedia

 

This design concept also presents a website deeply based on copy: it’s an educational project setting the online encyclopedia about specific family of birds. Although it contains great amount of information presented in text, this type of content is logically divided into many brief and concentrated copy blocks supported with prominent headlines as well as bright and catchy illustrations. This approach makes interaction with the website more dynamic which is especially effective for a teenage part of target readers that presumably often perceive encyclopedias as boring stuff.

 

tubik toonie help screens interaction

Toonie Alarm tutorial

 

As we mentioned above, short copy is useful for mobile interfaces since they are limited in space. The interface of brief tutorial for Toonie Alarm app demonstrates the how copy is divided into short blocks in order to leave enough «air» on the screen and make copy readable.

 

Call-to-action elements with copy

 

The core elements that make UI interactive are those which contain a call-to-action (CTA). Some call-to-action elements may be represented with icons that don’t require copy using widely and instantly recognized icons such as a telephone receiver for a phone call or the envelope for mail. However, in cases when the image of an icon is not so obvious or can be misleading, it is more effective to use double scheme, when the icon, button, or link is supported with the copy.

 

The copy for call-to-action elements consists of one or two words or a linked phrase in a body copy. Verbs in the imperative form are one of the frequently applied mechanisms of engaging users.  Designers are recommended to use various techniques of creating contrast, first of all via color, in CTA elements, so that they could stand out in the layout and draw user’s attention quickly.

 

tubikstudio swiftybeaver landing

Landing page for SwiftyBeaver

 

travel agency website UI

Travel Agency Website

 

The CTA buttons on these two landing pages are both centrally located, although they employ different types of copy. The first one consists of the four-word-phrase, while the other applies only one word. However, both look good and work effectively since they both contain the verb in the imperative form and inform target audience about appropriate action solving their potential task on this website.

 

good_sign_app_tubikstudio

Good Sign App Concept 

 

This is a concept for an unusual Good Sign app that gives you a new sign to look for, and you make your wish every time you see it in real life. Such an extraordinary app has also unusual CTA buttons like “Make a wish”.

 

book swap app tubik studio

Book Swap App

 

There’s no need to create CTA buttons exceptionally in bright colors — their main task is to be easily noticeable in the general layout. If the interface is bright and colorful, why don’t you make the contrast with light background which will make bright copy even more prominent, like in a concept for the Book Swap app above?

 

Captions

 

Caption is the short text under a picture describing its content. In web interfaces fonts are usually small and often italic, and in mobile interfaces the sizes of fonts depend on a size of a picture.

 

gym landing page fragment

Gym Landing Page

 

Here is a concept for the landing page of a gym. The captions here have bold fonts that make them easy to read. They are shown only when the picture is hovered which makes interaction more engaging for the users.

 

Points to consider

 

All in all, creating a quality copy content isn’t that hard if you keep in mind the typographic hierarchy principles. And here are some basic tips of presenting the copy:

 

  • Create catchy headlines. They draw users’ attention and often become the point of decision whether user continues interaction with the page or bounces it.
  • Make headlines short, but keep them highly informative. 
  • Subheaders relate to separate section, so they guide users through the content in the interface.
  • Use brief concise copy for mobile interfaces and landing pages.
  • Consider using long copy for web resources aimed at providing informative content.
  • Use verbs in the imperative form to encourage people to actions.
  • Use contrast colors for call-to-action elements, so that they could draw user’s attention more effectively. However, don’t forget to test readability of the text on the CTA elements: it has a crucial impact on usability and conversion rates.
  • A caption should preferably describe or add the data that isn’t obvious from the image.
  • Give strong preference to present tenses in captions.
  • Always ground your solutions on preliminary user research and don’t neglect testing different options.

 

Recommended reading

 

Here is the collection of recommended articles for further reading in case you would like to read more on the theme.

 

The 5 pillars of visual hierarchy in Web design

6 principles of visual hierarchy for designers

On Visual Hierarchy

F-Shaped Pattern For Reading Web Content

3 Design Layouts: Gutenberg Diagram, Z-Pattern, And F-Pattern

Effective Writing For Your UI: Things to Avoid

The Ideal Length of Everything Online, Backed by Research

Copywriting in UI. Words that Make Design Go Round.

 

Our next publication will continue the comprehensive theme of visual hierarchy and its effective practices in web and mobile interfaces. Don’t miss!


 

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

wedding planner app UI design

Case Study: Wedding Planner. UI Design Concept.

Perhaps, everyone, who once tried to organize any public event, knows that this sort of job is no joke. Remember Mary Fiore, the main character of the well-known romantic comedy «The Wedding Planner»? She had to plan a great deal of things and organize a crowd of people to make everything work like a clock and result in a perfect wedding. No wonder, people pay so much attention to this sacramental day: it marks one of the most important life decisions and events. Still, organization of this event is surely a big pain, especially for those who don’t know what to expect and how many aspects should be considered.

 

Obviously, technology taking over at least a part of effort could be the great help. After organizing her own wedding and moving through all the path, Tubik designer Olga Popova decided to think over the interface solutions for the Wedding Planner app, a virtual assistant for those who would like to have the perfectly organized wedding. Having felt all the problems and wishes of the target audience for this sort of a digital product, she didn’t want to waste the experience and transformed it into a simple and functional UI concept. 

 

tubik studio UI designer

 

Task

 

UI/UX design for a simple and multifunctional wedding planner and task manager.

 

Process

 

Organizing such a big and important event as wedding, the participants of the process know that they should be ruled by cold and focused mind instead of romantic flare and butterflies in the stomach. Forgetting little details or planning the time wrongly can spoil all the celebration. That is the core idea behind the app user interface: it’s main aim is enabling users to plan the tasks and mark them easily and quickly. Moreover, the designer had to consider that the app could be used by people of different age, physical abilities and tech literacy, so the functionality and operability had to be based on simple and clear solutions.

 

wedding planner app UI design

 

As the content of the app is mostly presented with short copy blocks and readability is the core factor, light background was chosen as a basis. Colored sections also were accomplished in a color palette using tender pastel  colors and hues as well as applying gradients. This choice of color combinations set the appropriate mood of the general wedding theme usually associated with delicacy, softness and sophistication. Moreover, such a general palette enabled designer to add prominent and easily visible contrast for call-to-action elements: this is particularly important as the approach supporting fast visual perception of the core elements for the apps which are often used on-the-go.

 

The aspect of readability also determined the choice of clear and simple font instead of highly decorated and complex fonts that present a huge seduction for adding more romance. Still, looking proper and stylish on wedding cards or invitations, it could serve a dirty trick with the users of the app: the screens would perhaps look stylish and romantic, but copy blocks would transform into unreadable mess which is intolerable for a task manager. This was the case when simplicity had the edge over sophistication and decoration.

 

Let’s check out the basic screens of the app. Here you see the main screen of the task manager. It presents the tasks and plans organized by days in chronological order. Having finished the task users can mark them as complete by tick or put a negative mark if the task wasn’t accomplished. If the date already passed, the app marks the undone tasks by itself so that the user could easily see them scrolling the list. In the top right corner of the screen, users can see the easily recognized button that allows adding a new task to the list.

 

wedding planner app UI design

 

As you can see, time and date are not the only marker to organize the tasks along. Another important feature that makes this app different from general to-do lists and sets its link to the specific nature of planning weddings is the set of categories to classify the tasks and plans. Tapping the plus-button to add a new position, the user is offered to choose the category to which it sticks. Every category is marked with an icon, so reviewing the main screen with the list of tasks, a user can quickly scan what aspects they have to deal with that day, be it meeting a photographer, ordering flowers, making a menu etc. This approach enhances usability and sets the basis for positive user experience.

 

wedding planner app UI design

 

Setting the new task, users can add all the necessary details: locations, telephone numbers, special notes and simple memos. Then, reviewing the tasks, they can tap the icons and see the chronological schedule of all the positions planned for this particular category.

 

wedding planner app UI design

 

If the task includes involving responsible people, adding the contact, user gets the ability to call or text this contact right from the task position in the planner. It helps to speed up the experience making all the needed operation without the necessity to move to other apps or contact list of the mobile phone.

 

wedding planner app UI design

 

Therefore, this clear and simple app can be a real cure and reliable helping hand for wedding organizers. It’s usability is based on the non-distracting color palette, readable copy blocks, quick classification of the tasks and instant access to contacting people responsible for their accomplishment.

 
wedding planner app UI design
 

Don’t miss new case studies on UI/UX design, development, animation and branding here in Tubik Blog: lots of projects and processes are prepared to be unveiled for our readers very soon.


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

year in review tubik studio design

Tubik Studio 2016. Year in Review.

Bright, fast and furious, the year 2016 is over. For Tubik Studio it was dynamic, bright, rich in meetings, shots, interesting projects and non-stop professional growth. The company got bigger, more experienced and diverse. Traditionally, we start every new stage of our workflow remembering the most significant points of what has already been done, and today won’t be an exception. Let’s take a moment to turn back for a while and remember some outstanding things that marked 2016 for our team.

 

Being active on Dribbble, we published over 170 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 Twenty UI/UX shots

 

tubik studio web design

Page 404

 

tubikstudio travel gear landing

Travel Gear Landing Page

 

tubikstudio library widget

Library Widget

 

tubikstudio ui webdesign

Comics Shop Home Page

 

graphic design tutorial tubik studio

Singify App Tutorial

 

Christmas graphic design tubik studio

Magic Christmas App

 

tubikstudio homepage design

Event Agency Webpage

web design UI concept tubik studio

The Big Landscape

 

tubik_studio_website_ui_bakery

Vinny’s Bakery

 

health care app UI design

Health Care App

 

website design tubik studio

Adventure Agency Website

 

landing page UI design tubik studio

Website on cooking seafood

 

tubikstudio graphic design illustration

Ryiadh Tour Guide

 

tubik studio design

Weather App Concept

 

mobile app design tubik studio

Moneywise App

 

travel app tutorial tubik studio

Travel App Tutorial

 

snake battle app UI design

Snake Battle

 

toonie alarm UI design

Toonie Alarm

 

online magazine design tubik studio

Daily Bugle Online Magazine

 

book swap app tubik studio

Book Swap App

 

Top Twenty Animated shots

 

tubik studio web ui design

Birds of Paradise Encyclopedia

 

landing page animation Tubik studio

Magic.co landing page animation

 

 

tubik_studio_book_swap

Book Swap App

 

Landing Page Animation Tubik Studio

Organic — landing page animation

 

tubik studio healthy food animation

Healthy Food App 

 

tubik studio application recipes and cooking

Recipes App

 

tubikstudio ui design

BuonApp

 

website design UI

Architecture Firm

 

Tubik studio UI animation

Museu

tubik studio ice ui website

Ice Website

 

tubikstudio ui animation website design

Bjorn Website

 

ui animation cafe app tubikstudio

Cafe Coupon App

 

apple even animation tubik studio

Apple Event Animated Graphics

 

gym landing page concept by Tubik

Gym Landing Page

 

tubik studio animated illustration

Lowrider

 

tubik_toonie_help_screens_interaction

Toonie Alarm tutorial

 

animation design

Night Run Animation

 

Contact List Concept Scrolls Tubik

Contact List Concept

 

animated tutorial

Social Network Tutorial

 

motion design tubik studio

Rocket Animation

 

Top Ten Branding shots

 

business cards design

Deetu Business Cards

 

logo design music app tubik studio

Switch-up logo

 

logo design tubik studio

fOxygenic logo

 

andre logo design tubik studio

Andre logo 

 

logo design branding tubik

Pickitout logo

 

lion browser logo tubik studio

Lion browser logo icon

 

snake battle logo for game app

Snake Battle Logo

horsy logo design branding

Horsy Logo

 

logo design by Tubik studio

Elephun logo

 

logo animation tubik studio

Realli logo

 

Top Ten Illustration shots

 

Rio 2016 Illustration tubik studio

Rio 2016

 

graphic design illustration tubik studio

Californication Bus

 

tubikstudio space wallpapers

Free Space Wallpapers

 

character illustration tubik studio

Indian Dreamcatcher

 

Christmas graphic design tubik studio

Christmas Spirit Illustration

 

game character design tubik studio

Ulf the Viking

 

tubik illustration jazz tales book

Tales of the Jazz Age Book Cover

 

tubik studio illustration graphic design

Muscles Magazine

 

star-wars-rogue-one_tubik_studio_illustration

Star Wars Rogue One Illustration

 

badges illustration tubik studio

PukaPal Badges

 

Top Ten Articles in Tubik Blog

 

2016 brought a great deal of new posts in Tubik Blog to share our ideas, case studies and experience. Here is the list of some articles which got shared and read by big number of readers.

 

tubik blog article

Visual Perception: Icons vs Copy in UI

 

Tubik Studio Interface Animation

UI Animation: Microinteraction for Macroresult

 

toonie alarm time picker

The Ultimate Guide to Creating a Mobile Application

 

book swap app design

UI Animation: Eye-Pleasing, Problem-Solving.

 

lion browser logo tubik studio

Logo Design: Creative Stages.

 

tubikstudio ui ux design

UI/UX Glossary: Steps to Usability.

 

web design tubik studio

Home Sweet Home. Strategies of Home Page Design.

 

tubik studio ui design dark

Dark Side of UI: Benefits of Dark Background.

 

ios-developers-tubik-studio

Review of Popular Trends and Tools for Developers in 2016

 

UI design trends

Review of Popular Design Trends for Interfaces in 2016

 

Top Five Tubik News

 

Growing diversity of services

In 2016 we formed the full team of specialists able to create and maintain a digital product from scratch to release: today we are a comprehensive full-cycle digital agency, with experienced specialists in the domains of branding, UI/UX design for websites and applications, graphic design of any complexity, motion design, iOS and web-development, QA testing.

 

collaboration-process-app-design

 

Variety of outsource projects

2016 brought us the great bunch of outsource design and development projects for diversity of businesses and organizations. They established broad experience of collaboration with different customers, including big and well-known clients. One of the latest projects of 2016 was a «year-in-review» video for Opera.

 

 

In-house iOS application: Toonie Alarm

In 2016, to get closer to our outsource clients, we have set the purpose to create in-house studio products helpful for their target audience and adding some social value as well as giving us comprehensive experience of full path for creating and promoting digital products. In the domain of iOS app design, the product created and released by Tubik in 2016 is Toonie Alarm, entertaining and funny free alarm app for iPhones rewarding users for waking up with cute stickers. 

 


 

In-house content project: Design4Users

Design4Users is a blog devoted to diverse design issues solving users’ problems. It is organized via the basic categories such as «Branding» «Product» «Print» and «UI/UX» and plenty of more detailed tags in the mentioned domains. This resource was started with the aim to provide designers, customers and all those who are interested in this sphere of human activity with a wide variety of useful and interesting content supported with attractive and functional design. The blog is designed, developed and curated fully by Tubik studio team.

 

design4users blog

 

Free e-books by Tubik team

Additional big news was the start of Tubik Magazine, the set of free e-books from us about different aspects, approaches and tips on design and development. The first issue called Design for Business presented a variety of business points and terms important to consider for designers working over goal-centered design for companies and brands. The second ebook called Logo design was devoted to creative stages and strategies of efficient logo design. Both books are supported with practical cases. Welcome to read them or download totally for free.

 

tubik studio free ebook design for business

 

Bright moments of work, rest and creative search were traditionally shared with our followers on studio Instagram page. No doubt, we also didn’t miss the chance to share our ideas, news, tips and experience via Medium and Quora as well as kept everyone updated with studio news via Twitter, FacebookTumblr and Flipboard.

 

new-year-photo

 

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

 

 

Warm greetings for everyone from Tubik Studio, we wish you amazing and successful year 2017!

video speeches for ui ux designers

15 Must-See Expert Speeches for UI/UX Designers

The year is counting its last days. As we could see in the article devoted to design trends in 2016, it’s been a bright, dynamic and diverse year for global design community. In addition to new trends and interesting digital products, it strengthened one of the core features of creative and career growth in the field of UI/UX design for digital products: to be highly professional and flexible for new challenges of the modern high technology, designers have to learn and improve themselves in non-stop mode. 

 

The domain of user experience and user interface design is so young, but already well-established: that’s amazing to see how many people, who started their career when the positions of UI and UX designers didn’t even exist in the list of specialities of higher educational institutions, now have grown into experts able to open the stunning area of knowledge and practice. And that’s a real luck for professionals all over the world to be able to share their findings via both real and online conferences with a view to getting the global design community stronger and more flexible for the sake of creating user-friendly problem-solving problems.

 

Today we would like to share and recommend you the collection of videos featuring deep and informative speeches from recognized experts in the sphere of creating digital products. They are devoted to different aspects of design for users and will definitely bring helpful and useful professional tips to UI/UX designers working over websites and mobile applications. So, enjoy watching, absorb knowledge and get inspired!

 

Hooked: How to Build Habit-Forming Products

by Nir Eyal

 

 

Designing Meaningful Animation

by Val Head

 

 

The Top 10 Things You Need to Know about Perception

by Susan Weinschenk

 

 

Designing Emotional Experiences

by Aarron Walter

 

 

Mind tricks & 7 Secrets of Behavioural Economics for UX Designer

by Lanny Geffen

 

 

How product design can change the world

by Christiaan Maats

 

 

How to manage for collective creativity

by Linda Hill

 

 

The complex relationship between data and design in UX

by Rochelle King

 

 

The art of innovation

by Guy Kawasaki

 

 

Why UX is not only the Responsibility of the UX’er

by Janne Jul Jensen

 

 

The Cognitive Abilities of Human Beings — Why Some Things are so Darn Hard!

by Janne Jul Jensen

 

 

Building a Winning UX Strategy Using the Kano Model

by Jared Spool

 

 

User eXperience

by Jesse James Garrett

 

 

Designing Better Conversations

by Justin Davis

 

 

Empathy: your secret weapon in designing for the web

by Nathalie Nahai

 


Originally collected for Design4Users

Welcome to check out 20 TED-talks for Designers

UI design trends

Review of Popular Design Trends for Interfaces in 2016

The year is going away so fast: seems each day just melts away like a snowflake. Traditionally, before the holidays start, it is the high time to turn away and revise what deserves to be remembered.

 

We have already reviewed the most popular trends and tools for developers in 2016, today the theme will be continued with significant design trends that couldn’t be left without attention. No doubt, this design year was globally dynamic, creative, full of news and events. Having worked over diverse design projects and tasks as well as in-house studio products here in Tubik Studio, we prepared our list of trends in design for web and app interfaces, which got popular this year, illustrating some of the mentioned points with works by studio designers. Let’s get started.

 

Flat design

 

Flat design has significantly grown its presence and diversity this year, both in interface design and branding. The design approach is known for its minimalist and concise use of visual expressive means and has established itself as a style favorable for enhancing usability and visual harmony of user interfaces. The most prominent feature which actually has inspired the name of this direction is applying flat 2-dimensional visual details as the opposite to highly realistic and detailed skeuomorphic images.

The features of flat design supporting its steady popularity in interface design include:

  • simplicity of shapes and elements
  • minimalism
  • functionality
  • bold and highly readable typography
  • clear and strict visual hierarchy
  • close attention to details
  • thoughtful appliance of bright colors and contrast supporting quick visual perception
  • avoiding textures, gradients and complex forms
  • applying the principles of grids, geometric approach and visual balance.

 

ui animation cafe app tubikstudio

 

Here in Tubik we have checked high potential of flat design for interfaces on practice, with not only numerous outsource projects, but also the iOS app Toonie Alarm, designed and developed by studio team. Thoughtful integration of flat design via diverse interface elements, including icons, illustrations, buttons, tabs and the like, proved itself efficient for making UI bright, attractive, clear, intuitive and easy-to-use.

 

Toonie Alarm UI design

 

Moreover, this year flat design has set the strong link between branding and UI design, mutually supporting each other in digital products.  One of the fields broadly strengthening this trend was creating logos and app icons flat and simplified. This trend has featured itself not only in brand new projects, but also for well-established websites, apps, companies and products, which have presented new redesigned logos and corporate style visuals redesigned according to the principles of flat design.

 

Conversational UI

 

Another broadly discussed trend is conversational UI which has been the object for hot debates and theme for many speeches and case studies this year. Basically, the term «conversational UI» is connected with interfaces that enable users to communicate directly to the system in a way imitating conversation with people. In vast majority of cases, this sort of UI involves voice manipulation and recognition as the part of interaction.

 

More and more products are featuring this sort of functionality: some want it just because it’s trendy and fashionable while others find real ways to engage it for problem-solving objectives. Most often it is realized by chat-bots providing a flair of talk to the users. In automated dialogues of this kind, depending on the nature of the product and style of talk which is seen appropriate for the target audience, conversational UI can effectively involve both verbal (language) and non-verbal (emoticons, pictograms etc.) means of communication.

 

Among the advantages of conversational UIs, one of the frequently mentioned is automation of some basic and repetitive operations saving people’s effort for more creative and complex task. It can enhance usability of the product and even make it proactive, giving prompts to the user and improving interaction with the product. Still, there is the trap to overload the product with this sort of communication, based on standard situations and issues while missing non-typical cases or questions which need different solutions. Moreover, by far not all target users are ready to communicate in that way, so this design solution needs to be grounded on extensive user research and testing from the early stages of user experience design. Conversational UI can easily give zest to user interface. Yet, if it’s not analyzed and tested well, conversational UI can do the opposite and spoil user experience by poor interaction.

 

Anyway, this year UI designers have thought over new perspectives of applying conversational UI, in particular in combination with AI technologies, and this trend will definitely grow showing new rays of creativity next year. Conversational UI isn’t just another fad: it is the trend providing total or partial changes to certain areas of interaction design and giving alternative approach to problem-solving and decision making processes.

 

Minimalism

 

This year has given the great bunch of applications and websites designed on the principles of minimalism. They support positive user experience by providing clear and simple interfaces, full of space and air, focused on content and navigation. Minimalist interfaces are characterized with thorough attention to visual elements, not numerous but always transferring a particular message. Minimalist interfaces, both for web and app, also feature sophisticated work with typography and visual hierarchy supporting instant scanning and skimming the content of the page or screen. Moreover, interfaces of this sort usually provide high level of legibility and readability.

 

tubikstudio ui animation website design

 

Custom graphics

 

Desire of originality sprung out in UI design in the area of custom graphic design of all kinds. More and more interfaces apply custom mascots, icons and  illustrations that fulfill multiple goals: adding originality to the visual design concept, enhancing usability, strengthening navigation and marking out the content depending on its nature and functions. Graphic details play crucial role in usability and accessibility of the product and even the slightest changes can bring significant results, speeding up visual perception and understanding interface elements or transitions.

 

Visual perception is one of the most productive and quick ways through which people are able to obtain information and get it processed by the brain. It influences so many aspects of life that neglecting the issue while creating products for users would be extremely unwise. That is why the aspect of applying visual elements of high functionality in the interfaces such as icons and their impact on general efficiency of the product has been an actual topic in global design community for a long time. In addition, images push the limits of perception for users who have natural problems with text recognition such as, for instance, the dyslexic or non-reading preschoolers.

 

As for custom illustrations or icons, created for specific products, made according to the preferences and needs of the particular target audience and with a view at certain business goals, they are able to make the product work more efficiently solving users’ pains and satisfying wishes. Perhaps, that is one of the most popular reasons why this trend got so popular in 2016 presenting interesting interfaces with custom graphics of diverse styles and performance.

 

Tubik Studio Weather App

 

Another side of this trend is evolving field of wallpapers for desktops and mobile devices featuring original graphic artworks on a variety of topics. It also can be characterized as user-friendly trend giving users the choice of means for self-expression and satisfying personal aesthetic needs.

 

Animated microinteractions

 

Interface animation is one more hot and debatable topic of this year. Although there is a big army of those who find animation an unnecessary feature overloading user interface and making it more complicated, most users expect motion as an integral part of interaction experience. So, designers and developers work over more and more sophisticated methods to make animation pleasant-looking and problem-solving characteristic of modern apps and websites.

 

One of the frequent methods of adding motion to UI are animated details featuring microinteractions. Microinteractions supported by clear finalization via motion create fast feedback for the user and make the experience positive and efficient while navigation simple and intuitive. Animated buttons, switchers, toggles and other interactive elements inform user in split seconds activating all the potential of fast visual perception.

 

tubik studio button ui

 

As we mentioned in the earlier article, animation in the interface can create pleasant illusion close to natural interaction with physical objects which often doesn’t need too much cognitive process. For example, if you pull the object, press it, move out the tab, the movements should feel natural.  Most users won’t be able to see this sophisticated work accomplished by designers: they will take it for granted and the fact it makes them comfortable will be the biggest praise for design solutions.

toonie switch UI animation

Scroll animation

 

Scroll animation also got new vibes and perspectives of artistic realization. Thought-out movement of layout elements while the webpage is scrolled enhances user experience significantly and creates the harmonic feeling of one integral smooth interaction rather than perceiving several separate parts or blocks of the page. Moreover, this sort of interactions is aesthetically pleasant and engaging, and these emotions are a good factor of retaining users. This year, full of new updates in design tools and software, showed great practices of sophisticated work on scroll animation.

 

Landing Page Animation Tubik Studio

 

Animated tutorials

 

Tutorial is a vital part of onboarding users for most mobile applications. Certainly, wide variety of means and techniques are applied to make it clear, engaging and informative as it is a strategically important element of involving users into further interaction with a digital product. This year designers combined traditional techniques with new popular findings: in particular, custom illustrations and animation brought new vibes to app tutorials, making them more dynamic and enhancing their informative potential.

 

tutorial interface animation tubik studio

 

Diversity of landing pages

 

Surely, landing pages were discovered much earlier than 2016, still this year has brought the new lap of their development and diversity. More and more businesses and social projects take advantage of using them for effective presentation of special services, sales, offers or issues that need focused user’s attention. Landing pages have also grown their presence in the Net as the effective method of promotion for native mobile apps. Accomplished wisely and thoughtfully, grounded on user and market research and testing, broad usage of landing pages can be also seen as the other user-friendly trend, providing users with necessary information and interactions in clear and accessible way saving their time and effort. From the business perspective, they also work well giving businesses the flexible tool for original and effective presentation.

 

web design UI tubik studio

 

Brutalism

 

The trend of brutalism in digital design has rocketed this year getting more and more expressions and diversity. It is often characterized as a webdesign style aiming at breaking standards and predictable design techniques. The websites created in this manner are a sort of rebellion to sophisticated designs with thought-out symmetry and harmony, complex layouts and accents of aesthetic visual performance. Vice versa, brutalism is based on simple and raw appearance, in most cases not loaded with many visual details and sometimes even close to plain HTML page. Used wisely, for the appropriate goals and audience, this approach can bring high level of originality to the website and make it really stand out of the crowd.

 

Contact List Concept Scrolls Tubik

 

Custom grid

 

According to Internet Live Stats, there are over 1 billion websites in the World Wide Web today. This milestone was first reached in September of 2014, as confirmed by NetCraft in its October 2014 Web Server Survey, and first estimated and announced by Internet Live Stats. The number had subsequently declined, reverting back to a level below 1 billion due to the monthly fluctuations in the count of inactive websites before reaching again and stabilizing above the 1 billion mark starting in March of 2016. With more and more websites coming into play, designers have to be more and more creative to not only make them attractive and harmonic, but also give them a feel of uniqueness and original appearance. That is one of the reasons, why experiments with grid also won their place in the list of general design trends of the leaving year. Custom grid is the way to save the feeling of harmonic layout and placement of the elements with higher level of flexibility and originality. However, this sort of experiment requires thorough research and in many cases the final result comes via several iterations tested and analyzed in terms of usability and visual perception.

 

 

web design UI concept tubik studio

 

Bold and catchy typography

 

2016 could also be mentioned as the year of further rigorous practice on typography in global design community. It brought the world loads of new nice typefaces both universal and created with a view to particular objectives or products. Typography continued its progress as one of the crucial aspects of efficient web and app design, and one of the trends in this domain was practices of applying bold and outstanding typography for webpages, catching users’ attention and instantly informing them about the core message. In particular, this approach got its development in the sector of landing pages whose quick and dynamic presentation of core data to users has great influence on conversion rates.

 

tubik_studio_website_ui_bakery

 

Large thematic image

 

One more trend often found in various designs for interfaces is applying prominent images, which could be either photos or illustrations, as the central visual element of the general composition. Important thing is that the image is never just a placeholder of nice looks: it presents a powerful way to strengthen the informative potential of the page or screen, set the theme instantly and focus user’s attention at the significant details. Needless to say, it takes much designer’s effort to choose the one successfully transferring the necessary message and supporting general stylistic concept.

 

UI design trends

 

Handwriting lettering

 

Custom handwriting lettering also got popular as a design trend and is often used for marking out significant details and images in an original way. Special lettering made by professional designers looks fresh and unique, refreshing visual performance of the webpage or screen. On the other hand, being applied in UI design, it demands additional effort to be tested in the layout as it can happen that hand-crafted lettering looks great separately, but doesn’t work effectively in combination with other elements of the interface.

 

Real content instead of Lorem Ipsum

 

This year has featured growing attention to content, its quality and performance. In user interfaces, content and design and interconnected parts that should successfully support each other instead of fighting for users attention. That makes more and more designers prefer applying real content instead of well-known Lorem Ipsum, even in cases of creative stages or presentation of design concepts. It gets designers, clients and users closer to real experience and more natural feel of interactions.

 

landing page UI design tubik studio

 

Videos explaining or presenting products

 

Due to easy access to reviewing videos via YouTube, social networks and other platforms of product presentation, video explainers have quickly established themselves as a popular trend. Naturally, it wouldn’t be logical to neglect such a powerful source of connection with clients and users, so 2016 has brought a great variety of videos presenting the products, companies and services, explaining their benefits and special offers, showing engaging flow of interaction and connection. They took over the responsibilities of the picture which is worth a thousand words: video explainers quickly show the most important features of the product and let the users know what deserves their attention first of all.

 

Example of video explainer designed by Tubik Studio for Toonie Alarm

 

Example of promotional year-in-review video designed by Tubik Studio for Opera

 

Bright and dark color palettes

 

No secret, color is one of the most powerful and influential factors in UI design. One more trend in UI design deserving a place in the list of this year is great variety of color palettes designers choose for applications and websites. Diversity of new fonts and typefaces as well as research of usability studies allow going beyond standards and trying new combinations which will take advantage of diverse colors but with it won’t lack in usability. More and more creatives are discovering new horizons combining traditional techniques with innovative approaches in the domain of work with color.

 

tubik studio application recipes and cooking

 

To sum up, we can certainly say that in the sphere of UI design 2016 has been the year of creative search and experiments, still most of them were focused on usability and desirability of the final products. No doubt, 2017 will not lose its chance to polish these trends and open the new ones. 


Welcome to read the review of popular trends and tools for developers in 2016

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

tubik studio web design

6 Big Reasons to Start a Website

For centuries, people have found hundreds of ways to communicate and collaborate for both professional and personal aims. Still, since the time when the Internet came into play, these directions of human activity have witnessed really prominent progress. It got especially significant and impressive for the last decade, with broader availability of the Internet and development of new technology. Decent ten or twenty years ago having a website was seen a sort of luxury while today it is often a widely-used and important factor of personal, professional and business growth.

 

There is a great number of big and small goals standing behind the incredible variety of websites whose number seems to grow every single minute. According to Internet Live Stats, there are over 1 billion websites in the World Wide Web today. This milestone was first reached in September of 2014, as confirmed by NetCraft in its October 2014 Web Server Survey, and first estimated and announced by Internet Live Stats. The number had subsequently declined, reverting back to a level below 1 billion due to the monthly fluctuations in the count of inactive websites before reaching again and stabilizing above the 1 billion mark starting in March of 2016. In general, this is the sort story of the amazing path from 1 website in 1991 to 1 billion websites in 2014. 

 

No wonder, more and more people are thinking over the idea of setting their websites and they come to this decision along the different ways reaching various life destinations. Let’s review the most popular reasons that make people work over their websites either by themselves or hiring professionals for that job, and in some cases applying both of the mentioned options. The ideas will be supported with web design concepts accomplished by Tubik designers and corresponding to particular objectives.

 

E-commerce

 

Nowadays this reason would definitely take its place in the top. With better technical abilities of presenting goods and services as well as fast and secure payments enabled via the Internet, more and more people take opportunities of buying and selling online, right from their desktop. It can deal even with the case of personal websites, if people both communicate and sell the goods or services they produce via this website. So, getting real financial profit can be named among the prominent reasons of creating a website. Moreover, modern content-management systems support this aim with tools and features strengthening the website rates in search browsers. 

 

tubikstudio ui webdesign

Design concept of online comic bookshop

 

tubik studio UI design

Design concept of online auction

 

tubik studio design UI

Design concept of the randomizer for e-commerce platform

 

tubik_studio_website_ui_bakery

Design concept of the bakery enabling online orders

 

Business presentation

 

Another reason connected with professional activity and encouraging more and more people to start their websites is presentation of their business, whatever is its nature and volume. It can be anything, from simple one-page website giving basic description of the professional and contact data to complex web platforms providing the variety of business directions or extensive portfolio. The core distinguishing feature comparing to the previous position is that this website doesn’t provide full cycle of direct sales from order to payment and delivery, its 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.

 

tubikstudio homepage design

Web design concept for a company organizing open air events

 

website design tubik studio

Web design concept for a company organizing hot-air-balloon rides

 

website design UI

Web design concept for an architectural bureau 

 

tubikstudio ui animation website design

Design concept for the interior design studio

 

Sharing information

 

This is the reason why people set up diverse blogs and websites aimed at sharing information: these can be online magazines and newspapers, thematic collections and bloggers’ reviews etc. It is usually not aimed at direct communication, only providing users with fresh and actual information.

 

online magazine design tubik studio

Design concept of online newspaper

 

web design UI concept tubik studio

Design concept of the online magazine devoted to travelling

 

tubik web design

Web design for the blog devoted to design news and trends

 

Education

 

One more reason to start the website is the ability and wish to provide some materials and/or communication with educative objectives. These can be different stuff, from personal teacher’s blogs to interactive encyclopedias or platforms for online courses.

 

tubik studio web ui design

Web design for online encyclopedia

 

Communication

 

The Internet presents great and easily available opportunities for communications, so communication can be one more good reason for creating a website, like blogs with direct discussions, forums, social networks for general or special themes etc.

 

sport social network design tubik

Design concept of a social network for sport fans

 

Self-expression and practice

 

Sometimes, people create the website with the aim of getting a platform for expressing their creativity and trying particular skills, like, for example, creative writing. Again, complexity and quality of these websites can be very different, still the basic reason behind them is self-expression and growth.

 

tubik studio design

Design concept of a personal blog devoted to architecture

 

Surely, this list is not totally full, it mentions only some of the globally popular reasons for creating websites. Stay tuned and don’t miss the new articles analyzing all the mentioned directions in closer detail.


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

Welcome to read UI/UX glossary on web design

mobile application testing

The Brief Guide to Testing Mobile Interfaces

Mobile technology and smart devices have already brought massive and significant changes in human behavior, communication, way of thinking and lifestyle. In fact, the boom of apps popularity can be seen in plenty of industries, among which we can easily sort out some noticeable ones such as Media (magazines and newspapers), Travel (maps), Medicine (patient records), Finance (apps for real-time trading), Education (translators and dictionaries) and Social (games and social media platforms). With steady and obvious progress of the sphere, mobile and web apps are definitely going to become more critical for personal, professional and business success and efficiency. So, creating and launching a new application, all sides of its production should test the solutions and environment and well as practical quality of design and development outcome. Extensive practice we have got here in Tubik Studio proves that this is the well-lit way to providing users with positive experience and helpful products.

 

Testing is vital for product quality

 

In our previous article, devoted to the full cycle of creating a mobile application, we have already mentioned the great part of testing in providing high quality products, able to solve problems and improve lives. As it was outlined in general terms, testing is one of the crucial phases of the entire app design and development process: it helps to reveal bugs before the app is brought out to actual users. Practice shows that in the majority of cases, users abandon the app if it has functionality problems, no matter how promising and engaging it seems. Vise versa, even the simplest apps can be successful for commerce, business, advertising and other aims if they work correctly and efficiently, according to target audience’s expectations and solving their problems.

 

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

 

Peter Drucker once said “Quality in a service or product is not what you put into it. It is what the client or customer gets out of it.”  In the majority of cases, if users see that anything in the app is broken or it constantly takes large amount of time to load preventing them from quick accomplishment of the task at hand, the risk is really high that they will bounce it and never come back. That’s why testing phase is the hidden hero of mobile app development.

 

Today we are going to concentrate more on perspective of testing mobile apps, as websites testing has its own specific features worth another article. So, let’s review the basic steps and aspects important for effective digital product testing.

 

mobile app testing

 

Start with the type of the app

 

Mobile app testing has plenty of challenges based on multiple factors: there are some compromise decisions testers or developers need to consider and choices they need to make on combinations of different techniques and methods to be used. One of the aspects to think over is the nature of the app itself directly influencing the process and limits of testing. In this perspective, the following basic categories of the apps should be mentioned.

 

Native apps. The apps of this sort are created specifically for one platform, aka operating system of device. They can take full advantage of all the device features such as the camera, the list of contacts, the flashlight, the accelerometer, the compass or others, and are installed via an app store (Google Play, Apple’s App Store, Microsoft store, etc.).

 

Mobile web apps. They are mobile-optimized websites that look and feel like native apps, still they are run by a web browser.

 

Hybrid apps. This type representatives provide the mix of native apps and web apps. Like native apps, they are installed through app stores and can take advantage of the numerous features available on device. As well as web apps, they rely on HTML being rendered in a web browser.

 

Toonie Alarm UI design

 

The type of the app under construction directly influences all creative stages from UX wireframing to final check of all the code. Different operational systems set their own guidelines and recommendations on design solutions and performance, development tools and restrictions.  Neglecting those limitations and rules can bring to fail of submitting the app to open use and turn all the creative process into wasted time and effort.

 

Plan the testing levels

 

Starting actual work over the app, creative and production team needs to consider a testing plan combining different testing levels. Testing is not the process taken as one single stage or action: it is spreaded via different stages. Schematically, this process can develop in vertical and horizontal directions. Vertical dimension is presented with testing levels and usually deals with going deeper to the code and functionality from separate units to whole app, its connection with the server if its needed, and its technical correspondence to the requirements. Horizontal dimension deals with different aspects of app performance and user experience.

 

Taking the testing levels to account, their basis is variety of tests grouped according to the stages when they are used in the development process, or by the level of specificity of the test. The main task of testing levels is to identify missing areas and prevent overlap and repetition between the development phases. Let’s briefly describe the various levels of testing.

 

Unit testing. This testing is commonly done by the developers to make sure that their code is working correctly: they test the sections of code like classes, functions, interfaces, etc.

 

Integration testing. Integration testing is done when particular units are integrated with each other, with the aim to test the behavior and functionality of each unit after integration. This testing level is usually carried out by a software testing engineer. There are a few types of integration testing such as big bang integration testing, top down and bottom up.

 

System testing. Here the name says everything: at this level all the components of the app are tested as a system in order to ensure that the product at the pre-launch stage meets the specified requirements. As the app is almost ready, it can be tested in the environments really close to the actual in which users will get their experience once it is deployed.

 

Acceptance testing. The main objective of this testing level is to evaluate whether the app system complies with the user requirements and whether everything is ready for release.

 

ios-developers-tubik-studio

 

Define the types of testing

 

All aspects of the app usage should be tested. Designers, developers and testers will need to check it across different devices as the points like screen resolution, processors, battery life and memory are different and can significantly affect on the efficiency and performance of the app, functionality, handling and loading time, as well as UX and UI solutions.

 

Among the variety of types, applied to test the mobile app at different stages of its creation, we should definitely mention the following list.

 

Usability testing. It is carried out from the early stages of app creation to verify if the app fulfills the established objectives and tasks getting a good response from users. The primary focus of this testing is on easy and quick use of an app, simple on-boarding and user’s satisfaction with the entire experience. For higher efficiency and productivity of general creative flow, this type of testing should start much earlier than any single line of code will be written, from the first schemes and transitions put into UX wireframes.

 

Installation testing. At the initial stage on installation, the app should add required software to the device automatically. And uninstalling, it should remove all the available content and databases from the device which are used by the app. So, this type of testing checks that the install/uninstall flow goes properly.

 

Functional testing. It is the most basic test for any app to ensure that it is working according to the defined requirements and there are no functions missed in the process of interaction. Functional testing mainly includes finding possible specific bugs of the device or navigation issues of the app. This type of testing should be done at the primary stages of development. In enables developers or testers to check and measure database or network queries with response times, crashes and memory issues.

 

Performance testing. Rather stressful part of any app testing is performance test revealing the omissions which left unnoticed during functional and user interface testing. This testing is required to be done on actual device only so it means the whole app is coded t this stage. This type covers client-side, server and network performance. For example, it checks the performance specifications and behavior of the app under certain conditions such as low battery, bad network coverage, low available memory and etc.

 

Interruption testing. An app may face various interruptions being in active mode, such as incoming calls or network coverage outage and recovery. This kind of testing shows what the app will do in this variety of cases. The common types of interruptions are:

 

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

 

Memory testing. This type checks that each app maintains optimized memory usage throughout surfing. As mobile devices have definite limits of available memory, this testing is crucial for the appropriate product functioning.

 

Security testing. It checks vulnerability of the app to hacking, authentication and authorization policies, data security, session management and other security standards. The fundamental objective of security testing is to ensure that the app data and networking security requirements are met according to standards.

 

Tubik Studio iOS development

 

Don’t forget to test design

 

One of the huge mistakes that could be done about testing it planning this part not earlier than the development stage starts. Obviously, the product getting live via code presents wider perspective of testing its actual functionality and performance. Still, we should remember that any digital product is not just code — it is the set on user interactions which should be thought-over and designed thoroughly with target audience in mind. Therefore, testing should take its first steps at the stage of wireframing to check if all the elements take their places, communicate to users, provide them with feedback from the system and what is more, achieve the goals and solve users’ pains.

 

Numerous prototyping tools enable to simplify and speed up the process of testing user interface so that developers obtained the verified version of design not taking major design alterations in the process of development. This is the efficient way to optimize the general creative flow and provide maximum efficient outcome at every stage. Prototyping gets testing sides, be it client, designer or even potential users, closer to real interaction with the concept of the future interface. Prototypes should not be seen as the analogue of the final product as they aren’t those. Their main aim is to check the correctness and appropriateness of the design solutions way before they will be transferred to developers.

 

The most effective point to involve prototyping for testing design is the step between UX wireframing and UI design.  The prototypes on UI stage can also be created for presentation of application general looks rather than for testing and improving its functional features. Still, it crucial that usability should be thoroughly checked first of all at the UX stage, otherwise it will be much harder to change inefficient solution after having accomplished a lot of work on UI and then development.

 

All the numerous aspects of design testing are definitely worth a separate article which will continue this topic in our blog very soon.

 

InVision for UI prototyping tubikstudio

 

Check the code thoroughly

 

When the design is transformed into code, the developers and testers need to make sure that all the quality and performance nuances are considered and included. Pointers in this area are testing on actual devices and simulators. Testing on devices is proceeded on the actual handset where app is installed, run and tested. Testing in simulator applies the software that can accurately imitate a mobile phone.

 

Simulator testing is useful at the primary stages of development as it allows quick and efficient checking the app, but it doesn’t fully measures performance and usability which should have their healthy doze of actual human testing. Still, automated testing got really popular now because it is effective, cheap and quite reliable. iOS Simulator as well as testing tools such as Appium, Frank, Calabash and others are available to support moving the app through the testing process and point out the issues requiring attention.

 

Continuous testing at all stages lays the strong foundation for keeping small bugs from becoming major issues later on. The final testing is conducted on actual devices so that crashes and hangings could be identified. Testing on device is obligatory for every app as it provides developers with actual data on the app behavior in different environments.

 

Test and measure after launch

 

Another mistake that should be avoided is stopping testing after the product is launched. Vise versa: testing will get even more diverse and comprehensive as it will inform the sides maintaining the app viability and efficiency about behavior, problems and preferences of real users. This information is the direct route to product improvements providing users the updates they really need and want.

 

testing digital product

 

Mobile technology is transforming the way of using devices. Smartphones and tablets of all kinds are rapidly becoming the valid method of interaction between consumers and businesses. People use mobile apps to connect socially, find information, order and track goods, book places and set appointments and do hundreds of other operations improving their lives regularly. It is important to build an app with all features and functionality that are required. Without effective testing plan, users are likely to come across unexpected bugs and errors. In the modern world with tough and growing competition in this field, the risk is high that they will quickly lose interest to the app while thoughtful testing and analysis is the solid way to avoid this risk.

 

Recommended reading

 

Diverse issues of applying testing at different stages of creating digital products have been an object of professionals’ attention lately. Here is the collection of recommended sources on further reading for those who would like to read more on the theme.

 

Testing Strategies and Tactics for Mobile Applications

 

Mobile: Native Apps, Web Apps, and Hybrid Apps

 

Beginner’s Guide to Mobile Application Testing

 

Mobile Testing: Complete Guide to Test your Mobile Apps

 

17 Strategies for End to End Mobile Testing on both iOS and Android

 

Levels Of Testing

 

Software Testing Levels

 


Welcome to read The Ultimate Guide to Creating a Mobile Application