Tag Archives: human-computer interaction

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

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

web design interactions tubik studio

Web of Life. Creative Web Design Concepts.

Nowadays, World Wide Web could definitely be named the web of life. It connects people from all around the world whatever their aims and wishes are about. Personal and professional communication, ordering and delivery of goods and services, education and mentoring, searching for new information, advertising, watching films, tracking everyday stuff and accounting finances, and so on, and so forth—seems, there’s no sphere to which the Internet wouldn’t add its own two cents. No doubt, there are both advantages and disadvantages brought by technology and new ways of broader and faster communication of all kinds. Still, today we are going to focus more on the variety of perspectives for positive influence of the web on people’s lives of global society.

 

In the design glossary issue devoted to key terms of web design we mentioned that as a domain of human activity it lies on the crossroads of many sciences and practices. Among them the following should be mentioned:

  • drawing and composition
  • painting and coloristics
  • logic and schematism
  • analysis and statistics
  • visual arts
  • programming
  • user research
  • psychology
  • copywriting
  • branding and marketing etc.

 

Covering diverse aspects of a website functionality and appearance, some designers work in teams every member of which specializes in a particular sphere while the others can work out different of the mentioned aspects individually. Anyway, in vast majority of cases web design is the sphere of digital products which have to be functional and user-centered. As famous American designer Charles Eames said “Design is a plan for arranging elements in such a way as best to accomplish a particular purpose” and his words totally reflect the idea of modern web design.

 

Working over a website, designers have to concentrate on such aspects as:

usability (the website is convenient, clear, logical and easy to use)

utility (the website provides useful content and solves users’ problems)

accessibility (the website is convenient for different categories of users)

desirability (the website is attractive and problem-solving, it retains users and creates positive experience which they are ready to repeat).

 

Here in Tubik Studio we have felt all the power of web, both from the perspective of professional growth and positive user experience. If you take a virtual trip around Tubik Blog, you’ll see the case studies and articles devoted to the theme of creating websites solving users’ problems, providing natural and effective flow of human-computer interaction and positive experience. Being a team knowing the inside-out of web design and development, today we are going to continue the topic with the collection of practical design concepts presenting design solutions for the variety of websites with different objectives, target audience and visual style. Here you’ll find the concepts for particular web pages, animated web interactions, ideas for landing and home page design and the like. So, let’s get started!

 

Website on travel destinations in Iceland

 

tubik studio ice ui website

Presented concept features the set of interactions with a website devoted to the theme of traveling around Iceland. Working over the color palette, the designer chose the light background featuring the theme of Iceland and a contrast bold headline. Images are used in the scheme one-per-page so that they could support the theme but not overloading the page or distracting the user. Thorough attention was paid to typography and composition as key sides of user-friendly minimalism enhancing usability, navigability and visual harmony transferring the spirit of the presented place. Navigation features the right side menu with titles placed vertically still easily readable due to the choice of font, the rest of the navigation links are hidden in extended menu behind the hamburger button. Animation shows transitions between pages to give the feeling of general design consistency.

 

Design concept for online magazine

 

online magazine design tubik studio

 

The design concept of an online magazine features the page of a particular article presenting a famous person so an image showing the personality becomes the center of composition still doesn’t take too much attention from the text as the bearer of information. All the design is concentrated on user-friendly solutions around readability and stylish non-distracting looks as well. So, the concept is based around clear visual hierarchy applied in general layout of elements and also copy blocks. As for navigation, the page features the header including the title of the website as a central element of the top part composition, two active links to basic categories of publications, link to live mode and search field marked with a magnifier icon.

 

Web design for architecture blog

 

tubik studio design

 

Another concept full of light and air for readable text and stylish visuals. Animated interactions demonstrate the consistency of the flow while scrolling the page with the smooth move of visuals elements, headlines and copy blocks, imitating movement of physical objects while pulling. The presented design of a website has a fixed header which doesn’t hide while the page is scrolled. However, it follows minimalist principles featuring brand name lettering as a center of composition, magnifier icon marking search functionality and hamburger button hiding links to navigation areas.

 

Corporate website for an architectural company

 

website design UI

 

This concept is also devoted to the theme of architecture, still it has different objectives and core target audience: it is the corporate website for a company presenting the variety and potential of its services. The general performance of the webpages is following minimalist and functional approach. The layout is accomplished on the basis of priorities in presenting this particular business field. Taking into account that the nature of the company activity is deeply visual especially in terms of presentation to new clients, the designer selected the background and fonts that have to leave the immediate impression of style and sophistication. The key words brought out in capital letters become the integral part of stylistic concept being also informative and quickly setting the company ideas and approach to work. The visual effects are supported with smooth animation.

 

Landing page for the website of seafood recipes

 

landing page UI design tubik studio

 

This example presents a landing page for a website collecting recipes of meals with seafood from all over the world. As well as in the previous case, dark background is chosen to make the images of meals look even more delicious and also create stylish appearance for general visual presentation of the layout. The landing quickly provides general understanding of the website purpose and content featuring different sections that could be interesting for users.

 

website UI design

 

Website on Swedish ski resorts

 

tubik studio web UI design

 

Obviously, traveling is the great way to get inspired and we really believe it’s true. This concepts adds one more example on this theme. Here is the set of animated interactions for a website Slopes presenting Swedish ski resorts and enabling users to get full scope of information about them. Home page features the video background immediately setting the theme, and color palette based on strong contrast and concise color combinations also visually supports the idea of active winter holidays. The basic points are shown in header for quick availability while all the other variety of content categories is hidden behind the hamburger button to support minimalist design approach.

 

Web interface for design blog

 

design4users blog

 

This case shows the web interface for Design4Users, a content project created, designed and developed by Tubik Studio team. Design of the webpages is accomplished with a view to effective presentation of both copy and visual materials featured in wide variety.

 

webdesign tubik studio

design blog web UI

 

Web design for an online magazine about traveling

 

tubik studio web design

 

Here’s the design concept for a website which presents the online magazine «The Big Landscape». Its target audience is primarily people keen on traveling and learning more about the world. The interface is minimalist following the principles of clear visual hierarchy, good readability, intuitive navigation and aesthetic pleasure from visual perception.

 

Website for a design studio

 

tubikstudio ui animation website design

 

It is a promotional webpage of the particular product by design studio. Its purpose is to present the design object via descriptions and visual details providing users with the link to this item in online shop. Thus, this page, which is actually the part of a sales funnel for the e-commerce website, is in charge of attracting users and informing them about the product. Minimalist design full of air makes visual accents noticeable and engaging while general layout presents the actual direction of company services. Broader aim was to transfer the atmosphere and spirit of the brand by means of design solutions.

 

Web platform for an encyclopedia

 

tubik studio web ui design

 

This case realized the idea of web encyclopedia devoted to the theme of birds-of-paradise. The designer concentrated on main aspects of usability and utility of such a resource for readers and at the same time set the goal to make it attractive and giving clear message of the site features with general stylistic concept. Animated transitions make  scrolling interactions engaging and add style to general performance.

 

Web design for photography workshops service

 

website design for photographers

 

Here is the landing page for a company organizing photo tours and workshops for photographers. Functional and stylish minimalism is the basic approach behind this web interface, visual elements inform users and provide quick harmonic perception of the nature of the services while animation is provided to show the transitions between content blocks.

 

Landing page for coffee delivery service

 

web design UI tubik studio

 

It’s not a secret that drinking coffee is the daily habit, sometimes even obsession, for many people, and different services speeding up the process of getting a cup “on the go” are getting more and more popular. This example shows you a design concept of a landing page which presents an experimental service «Coffee Wings» providing coffee delivery by drones. Landing was created in the manner combining traditional visual elements setting positive associations with coffee and images of innovative technologies involved to this user-friendly service. Copy blocks are not overloaded so that visitors could get the idea and benefits of the service quickly and clearly and obtain more information, if they want, following the calls to action.

 

Design concepts for 404 page

 

web page illustration

 

There are tons of design solutions for 404 webpage, which is strategically important for any website, and still this design object is always actual. This sample shows web design accomplished with some artistic approach featuring the original illustration of the penguin directing everyone back from the Pole where nothing can be found.

 

tubik studio web design

 

Another concepts shows different stylistic approach and features a page 404 for e-commerce website. It is based on harmonic interconnection of the background and actual layout elements such as header, CTA button and copy.

 

Today’s list is over but studio practice is full of many other interesting examples of design concepts for different purposes and needs of modern users. Don’t miss new presentations in our future posts.


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

tubik studio web development

Front-End Development. From UX Design to Code.

User interface serving the aims of positive and problem-solving user experience is one of the key aspects of creating digital product, still it’s web development that enables users to get real and live surfing experiences. With the course of time, more and more businesses are going online, so there appear some loose ends that need to be cured through user experience. In business struggle, everyone wants to please their customers and engage them to return again. Today, businesses realizing the value of thought-out and professionally built user experience are able to take the best from digital technologies and products. Full-cycle UX design gets its live version via web and mobile development transfroming step by step from subtle idea to real digital product.

 

Getting down to cases, online businesses are all about user experiences and of course the products and services they are selling. Have you seen websites like Amazon, eBay, AliExpress? They are convenient and helpful for their users even being huge websites that offer millions of products and thousands of services. The value of thought-out UX and efficient UI is irreplaceable. How could this result be achieved? This is the point when the power of front-end development comes into play to not just enhance the look and feel of website but also take the major role in increasing the level of user experience.

 

Tubik Studio design team

 

What is front-end?

 

All websites consist of structure, data, design, content, and functionality. Creating user-facing functionality is the task of front-end developer. Using a combination of markup languages, design, client-side scripts and frameworks, they create everything that users see and interact with: content, layout, and functional elements.

 

Three main parts of every website are: the client, the database, the server. The client is simply the web browser a person is using to load a site, and it’s where client-side technology is unpacked and processed. In a general way, a server is a computer, a device or a program that is dedicated to managing network resources and data. The server is at a remote location anywhere, it is holding data, running back-end of a website, processing requests, and sending response to the browser. The client is anywhere the users are loading a site: mobile devices, laptops, or desktop computers. Server-side scripting is executed by a web server; client-side scripting is executed by a web browser.

 

front end develoment tubik studio

 

Let’s have a closer look at this process.

 

The Server — this part of website is responsible for holding data, running the website’s back-end architecture, processing requests, and sending response to the browser.

 

The Client — requests pages from the Server, and displays them to the The User. In most cases, the client is a web browser.

 

The User — uses the Client in order to surf the web, fill in forms, watch videos online, in other words and interact with webpage.

 

web development server

 

To see how it works in practice, let’s take the flow of interactions with Tubik website for example.

 

The User opens his/her web browser (the Client), then loads http://tubikstudio.com/. The Client (on the behalf of the User) sends a request to http://tubikstudio.com/ (the Server), for our home page. The Server then acknowledges the request, and replies the client with some meta-data (called headers), followed by the page’s source. The Client receives the page’s source and renders it into a human viewable website. The User types «Case Study» into the search field, and presses ‘Enter’. The Client submits that data to the Server. The Server processes the data, and replies with a page matching the search results. The Client, once again, renders that page for the User to view.

 

Processes running in web browser are the following: when the page is in process of loading, scripts are embedded within and interact with the HTML of a site, selecting elements of it, then manipulating those elements to provide an interactive experience. Next, scripts interact with a CSS file that styles the way the page looks. It dictates what work the server-side code will accomplish and returns data that’s pulled from the site in a way that’s readable by the browser.

 

For example, when we open home page of Tubik Studio website, the back-end is built to pull specific data from the database to Client, while front-end scripts render this data into readable for human view webpage.

 

Front-end languages

 

Widespread client-side languages which front-end developers use regularly and have to know include:

 

JavaScript: With its frameworks and libraries, it’s the core of front-end development, and beyond. It is called the first client-side language and is still the most common client-side script on the web.

 

HTML: Every front-end developer has to know this language. It dictates a site’s organization and content and all interaction. HTML elements can annotate footers, headers, how text is displayed , how media and images are appeared, and more.

 

CSS: Cascading style sheets (CSS) is broken into modules and comprises the code for every graphic element—from backgrounds to font—that make up the look and feel of a website.

 

programming languages fron-end

 

Front-end frameworks

 

A framework is a hierarchical directory that encapsulates shared resources, such as a dynamic shared library, nib files, image files, localized strings, header files, and reference documentation in a single package. Here are some popular frameworks that are usually used.

 

AngularJS: This framework and several other JS frameworks, like Backbone.js, Ember.js, Express.js or ReactJS demonstrate the capabilities of JavaScript.

 

jQuery: It is a fast, small, JS object library that streamlines how JavaScript behaves across different browsers.

 

Bootstrap: This leading mobile-first framework includes HTML, CSS, and JavaScript to facilitate rapid responsive app development. With Bootstrap, website is compatible with all modern browsers and looks great on any size screen, from tablets to phones, from laptops to desktop computers.

 

Foundation: Responsive front-end framework is used by sites like Facebook, Yahoo!, and eBay.

 

Semantic UI: It is a development framework that helps create beautiful, responsive layouts using human-friendly HTML.

 

Yeoman: It is a generic scaffolding system allowing creating of any kind of app.

 

Pure.css: It is the set of small, responsive CSS modules that you can use in every web project.

 

Skeleton.css: As Skeleton’s developers stated: “A dead simple, responsive boilerplate.” It is the set of small and easy, responsive CSS modules that can be used in every web project.

 

web development framework

 

The next posts about web development are coming soon for those who are interested and in them we are going to tell you more details about different aspects of the job: the closest ones will tell about specific features and tools for back-end, web developers work flow, and trends for front-end development. Don’t miss!


Welcome to read the article about basic terms and tools of web development

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

Toonie Alarm UI design

Case Study: Toonie Alarm. App UI Design.

Designing a product for everyday use, it is vital to ground it on the thorough market research, thought-out design presentation and deep analysis of the target audience. No wonder: the stuff like note-apps, alarms, to-do lists, calculators, calendars and the like surround users in their everyday life, help in common situations and sometimes add color to the routine. We have checked that well and now would like to present you the first case telling the design story of the brand new alarm app for iOS called Toonie Alarm which today is featured on Product Hunt and has reached top-5 in the category Tech in 4 hours after featuring.

 

Toonie Alarm UI design

 

Task:

 

Full-cycle UI/UX design for the simple and engaging alarm app for iPhones.

 

Process:

 

The design process for this case was different from typical ones in the studio as before it we had worked more on outsource projects which means that creating initial product concept and setting the task was done mainly by the client’s side. The process for Toonie Alarm took the other direction and gave us what it was set for: the feeling of full product creation process from the very first steps. We had to set the idea and test it competitive potential, establish its USP and marketing plan, branding and usability foundation and all the other stuff like this.

 

Initially the idea behind the app was to create a simple alarm clock with attractive design and consistent element of motivation and support for such a basic and often far-from-pleasant process as waking up. The basic brand image was set as fun, cute, bright and cheerful, and marketing research supported this concept with the analysis of competition and ideas on adding original features to the app.

 

User research and analysis enabled the team to form the USP for the product on the basis of the following set of key features:

  • All the features of the app free for everyone
  • Simple, clear and intuitive navigation
  • Bright and pretty interface
  • Huge set of beautiful stickers
  • Achievements and rewards for waking up
  • Eye-pleasing interactive animation
  • Animated time picker
  • Instant sharing achievement with friends.

 

Let’s look over the details of UI created by Tubik designers.

 

Cute Mascot

 

In one of our previous articles we have already mentioned the great role of mascots in branding and UI design. As for Toonie Alarm, the idea of applying the mascot was set almost instantly as mascot is not only a sort of communicator between interface and user, but also a great representative of the brand able to enhance its recognizability. Moreover, it has a great impact on easy establishing the voice and tone of the product, creating the feeling of natural communication and supporting the mood. That was the point when Toonie was born to be a funny cheerful bird, whose mission is to make the world  brighter and help users to interact with the alarm. It informs users about news, rewards, errors and just adds some fun and color to everyday life.

 

Toonie Alarm mascot design

 

toonie alarm mascot design

 

App Tutorial

 

App tutorial is an important part of the interface which helps users to get informed on the basic interactions. In Toonie Alarm it consists of three screens that tell the user about the functionality of the app. Small concise copy blocks are supported by smooth and pleasant animation of transitions to create the feeling of integrity and cheerful mascot featured as the consistent element and the center of the screen graphic composition.

 

Toonie Alarm Tutorial design

 

Home Screen

 

The home screen shows the alarms which user already set for particular time and days and the tab with funny stickers already collected for waking up. Active alarms toggles feature the animated sun. Left swipe opens active options for the particular alarm.

 

Toonie Alarm UI design

 

Stickers Screen

 

Various stickers become the reward for waking up at the particular period. Moreover, waking up several times at this time, users can level up their stickers and enrich their collection. All the stickers can be shared to social networks to mark users’ achievements.

 

toonie alarm stickers

 

Toonie alarm stickers screen

 

Time Picker

 

Another prominent feature of the app is the animated time picker. The app has simple navigation and nice motion makes it even more intuitive. Picking time for the alarm, users can enjoy animated march of night and day.

 

Toonie Alarm time picker screen

 

Animated Stickers

 

Animated stickers make interaction even more lively and enjoyable and also enhance user experience making the interface attractive and playful.

 

toonie alarm stickers

 

Logo Style

 

Logo design keeps style of lettering associated with fun and entertainment and creating harmonic link to the fonts typical for cute cartoons.

 

Toonie Alarm logo

 

Product Video

 

To catch more details and see the interactions with the app in real, welcome to review the video guide on Toonie Alarm.

 

 

You can also review the presentation of Toonie Alarm design on Behance or check full pack of the details via Toonie Press Kit


Welcome to see full presentation on Product Hunt

Welcome to download Toonie Alarm via App Store

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

book swap app design

UI Animation: Eye-Pleasing, Problem-Solving.

Animation applied in user interfaces is the topic drawing high attention and provoking hot debates nowadays. 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.

 

Why do users love motion so much? Mostly, because animation supports the essence of actual and real interaction, it creates the level of feelings and perception close to what people have when they are interacting with a physical object in real life. This sort of feeling can boost user experience rate of positiveness really high as the more natural user feels, the less effort is needed to deal with the app or a website and the more clear it is how it works. Certainly, it makes users satisfied. No secret, satisfaction and pleasure are among top things encouraging people to use the product again.

 

Like everything that is put into the interface and process of interaction with it, animation must be a functional element, not just a decor. Considering motion elements while planning user journey around the digital product, designer should deeply analyze its potential for increasing usability, utility and desirability of the product before making a decision to apply it in the layout or transitions. Animation in UI requires thoughtful approach and always needs to have a clear purpose set behind. Advantages and utility of using it in the interaction process have to be obvious and outweighing possible disadvantages. Animation should become icing on the cake, not a fly in the ointment.

 

Tubik Studio

 

Define the problem

 

One of the best approaches to make animation functional not only attractive is to reveal the problems that it potentially can solve. It can be done at all the stages of design process:

 

user research will let you know who the target users are, what’s their age, preferences, level of tech literacy, environments and conditions at which the product will be used, and plenty of other factors from the users’ side that can influence user experience;

 

marketing research will give the insights of existing products, their strong and weak sides as well as methods of forming user loyalty, which is the good basis for defining USP solving particular users’ problems as well as original ways of the product presentation and performance;

 

UX wireframing stage will enable to think over the logic of interaction, layout and transitions and get the first assumptions of the points which can be strengthened with animation;

 

prototyping stage will reveal new aspects of live interaction with the screens;

 

UI design stage will provide the complex of visual presentation for the product scheme and system setting a new perspective of applying animation into the app or website;

 

 user testing will show if the decisions made about animated elements were correct and their benefits really outweigh possible pitfalls.

 

tubik studio work

 

At every stage, if designer sets the goal to reveal possible big or small problems users can have, animation as well as any other design element can take the role of problem-solver for the case.

 

Let’s review some typical problems that can be solved by means of interface animation.

 

Problem: I want to know the action is done.

 

This is one of the problems that can be easily and quickly solved by animated details applied in UI. 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.

 

switch animation tubik studio

Switch Control Animation

 

hamburger_menu tubik studio

Hamburger Menu Animation

 

hamburger button tubik studio

Hamburger button interaction

 

tubik studio button ui

Tab Bar interaction

 

add button animation

Add Button interaction

 

pageindicator tubik studio

Rubber Indicator

 

Problem: I want to know that action is in progress.

 

This is also a huge area of application for diverse motion design potential. When users interact with a digital product, they want to know what is going on at every single step. Making users wait in uncertainty is the risk of losing those users. Still, when users are informed, waiting can be not so annoying and stressful. So, this aspect should always be taken into account and there are many ways to support it via interface animation. This is the high time for pull-to-refresh indicators to come into play and show their best.

 

pull_to_refresh tubik studio

Pull To Refresh

 

preloader animation tubik studio

Preloader

 

pull to refresh animation tubik

Pull to refresh

 

pull-down animation tubik studio

Pull Down — Hourglass

 

tubik studio pull down

Pull Down — Space Ship

 

Problem: I can’t see the progress and don’t understand how long it will take.

 

Quite often it’s not enough just to let users know that the process is going on. They often want more: to see how fast it is progressing and how long it will take. Again, interface animation can be a great helper here. Load bars and progress bars, animated timelines and other dynamic elements can kill several birds with one stone:

 

— they inform user about the level of progress

 

— they can become the entertaining element blunting negative experience of waiting in the process of interaction

 

— designed and animated in an original way, they can become a viral feature which users will want to share with others and engage more users into action.

 

tubik studio motion design

GIF for the Timeline App

 

tubikstudio motion design

GIF of Dynamic Scroll

 

Problem: I don’t want to make my screen a mess.

 

That is really a vital thing to think over in the interface design. If the screen or page looks like mess overloaded with tons of data which is not clearly organized, it will require additional effort from the user to understand how it works and where the needed information can be found. The more effort, the higher chances are getting that users will go away in search of simpler solution. In vast majority of cases users wish to have apps and websites that will simplify and improve their life, perhaps even will do some job for them rather than will take additional effort and time on interaction. Animation can be a good way to enhance interaction with various data blocks and sections and make everything feel organized even in highly data-saturated and complex interfaces.

 

sport app motion ui tubik studio

GIF for Sport App

 

tubik studio motion design ui

Cards Animation

 

UI Design Interaction Tubik Studio

Boat Station App

 

tubikstudio blog app ui animation

Blog App

 

Problem: I want to see the key things first.

 

Visual hierarchy and clear navigation are always a great concern for designers creating interactive digital product. Users’ attention should be immediately drawn to the key element of interaction according to its goal and conditions. Animated interface elements present great supportive force for this aspect, enabling faster and more distinct visual marking of important elements in the layout.

 

tubik studio tapbar ui

Tapbar Interactions

 

tubik studio behance weather app

GIF for the Weather App

 

App screens by Tubik Studio

Resto App 

 

Problem: I want to feel the interaction natural.

 

This is the problem that most users will not be able to formulate, still it has a great influence on user experience. If users say something like «I’m not sure what’s wrong but there’s definitely a thing», try thinking over more natural interaction. 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.  Again, 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.

 

tubik studio_social_network

GIF For Social Network 

 

tubik_studio_book_swap

Book Swap App

 

Dribbble shot by Sergey Valiukh

GIF for Restaurant Menu

 

This sort of problem is also popular in interaction with web interfaces. Thought-out movement of layout elements while the webpage is scrolled can enhance user experience significantly and create the feeling of one integral smooth interaction rather than several separate parts or blocks of the page. All in all, it’s pleasant and engaging, and these emotions are a good factor of retaining users.

 

Landing Page Animation Tubik Studio

Landing page animation

 

landing page animation Tubik studio

Landing page animation

 

landing page for capitoledge by TUBIK

Capitoledge — Free Screensaver

 

tubikstudio ui animation website design

Bjorn Website

 

 

Problem: The screen/page is boring.

 

Obviously, talking about interfaces, people often move functional side and usability to the foreground, as key or sometimes even the only aspect requiring consideration. And that’s right and logical, still it cannot null the fact that people are driven not only by logic. There are also such big factors as emotional and aesthetic satisfaction able to influence user experience greatly. Thoughtful balance of utility and usability on the one hand with emotions and aesthetics on the other can bring user-friendly product. And animation is a great booster in this perspective of interface design. It can mark out the beauty of colors and gradients, breath life into layout, make movements dynamic or vise versa smooth, strengthen the power of UI elements with motion and original transitions.

 

calendar-app animation tubik

Calendar App Animation

 

ui animation cafe app tubikstudio

Cafe Coupon App

 

Contact List Concept Scrolls Tubik

Contact List Concept

 

tubik studio application recipes and cooking

Recipes App

 

juicy player UI Tubik Studio

Juicy Player

 

So, definitely, animation in user interfaces has massive potential in solving diverse problems of interaction. Still, even the slightest piece of motion added into UI requires thoughtful approach analyzing not only advantages but also possible drawbacks. Animation should support the user, that is its main goal in the interface.

 

Tubik quote UI animation

 

Recommended reading

 

Diverse issues of applying animation in UI design have been an object of professionals’ attention for a considerable period. Here is the collection of articles for those who would like to read more on the topic.

 

Interface Animation. The Force of Motion.

 

Animated Interactions. Motion on Purpose.

 

UI Animation. Microinteraction for Macroresult.

 

UI in Action. 15 Animated Design Concepts of Mobile UI.

 

How to Use Animation to Improve UX

 

Functional Animation In UX Design: What Makes a Good Transition?

 

Experience Design Essentials: Animated Microinteractions In Mobile Apps

 

The ultimate guide to Web animation


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