Tag Archives: user interface

CTA_buttons_design_tips_tubik_blog

Call for Attention. Powerful CTA Button Design.

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

 

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

 

mobile interaction design tubik blog

 

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

 

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

 

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

 

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

 

ux_design_practices_article

 

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

 

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

 

choice of color in UI design

 

What makes a powerful CTA button?

 

Size

 

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

 

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

 

burger_app_ui_animation_tubik

 

Color and shape

 

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

 
Color meanings:
 

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

 
Shape meanings:
 

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

 

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

 

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

 

dating_app_landing_page_tubik

 

 

Placement

 

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

 

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

 

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

 

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

 

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

 

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

 

gourmet_herbs_website_design_tubik

 

Microcopy

 

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

 

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

 

bright_vibe_calendar_app_ui_tubik

 

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


Welcome to see designs by Tubik on Dribbble and Behance

color_glossary_in_design_tubik_blog

Design Glossary: Color. Terms and Definitions.

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

 

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

 

web and app UI design

Add the Color Illustration

 

Color

 

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

 

Color properties

 

Hue

 

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

 

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

 

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

 

color-glossary-tints-tones-shades

Source

 

Value

 

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

 

Chromaticity

 

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

 

Saturation

 

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

 

color theory design tubik

 

Color wheel

 

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

 

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

 

color theory design tubik

Source

 

Color types

 

Primary colors

 

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

 

Secondary colors

 

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

 
RGB:

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

 

CMYK:

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

 

RYB:

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

 

Tertiary colors

 

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

 

Cool, warm and neutral colors

 

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

 

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

 

weather app design UI

 

Color systems

 

RGB

 

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

 

RYB

 

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

 

CMYK

 

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

 

color theory design tubik

Source

 

Color schemes

 

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

 

Monochromatic

 

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

 

business cards design

Deetu Business Cards

 

Analogous

 

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

 

binned logo animation design

Binned Logo Animation

 

Complementary

 

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

 

home budget web interface

Home Budget Dashboard

 

Split-Complementary

 

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

 

financial_service_website_tubik

Financial Service Website

 

Triadic

 

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

 

dating_app_landing_page_tubik

Dating App Landing Page

 

Tetradic/Double-Complementary

 

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

 

business_card_app_animation_tubik

Business Card App

 

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

 

Recommended reading

 

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


Welcome to see designs by Tubik on Dribbble and Behance

design trends review tubik blog

Review of Popular Interface Design Trends in 2017

The new year 2018 is closer and closer, so stepping into a phase of fresh challenges and new horizons, we would like to look back and remember what the ending year has been marked out with. Here we’ve gathered the collection of trends which won the big place in web and mobile interfaces of 2017 supporting most of them by designs from Tubik team.

 

Functional minimalism

 

Quite a big number of mobile applications and websites continued and evolved design solutions based on the principles of minimalism. Minimalist interfaces are characterized with thorough attention to visual elements, not numerous but always transferring a particular message.

 

Major features often mentioned in terms of minimalism approach include:

  • Simplicity
  • Clarity
  • Expressive visual hierarchy
  • High attention to proportions and composition
  • Functionality of every element
  • Big amount of spare space
  • High attention ratio to core details
  • Typography as a significant design element
  • Eliminating non-functional decorative elements

 

Surely, the list can be continued but even the given positions show that minimalism in UI appears to be a user-friendly trend. Applied wisely, it helps to see the core elements of the interface and makes user journey intuitive and purposeful. Moreover, minimalist interfaces usually look sophisticated and uncluttered bringing aesthetic satisfaction as one of the factors of desirability in UX.

 

UI animation wine app

 

Brutalism

 

The trend of brutalism in digital design started rocketing last year and got even brighter expressions in 2017. It is often described as a style that aims at breaking standards and predictable design techniques. The websites created in this manner are a sort of rebellion to sophisticated designs with thought-out symmetry and harmony, complex layouts and accents of aesthetic visual performance. In contrast, brutalism is based on simple and raw appearance, in most cases not loaded with many visual details and sometimes even close to a plain HTML page. Being used thoughtfully for the appropriate goals and audience, it features the high level of originality and gives the unique look to a digital product. It may be liked or disliked, but it is never left unnoticed.

 

Typography integrated into images

 

Bold and catchy typography also kept its high presence both in web and mobile layouts. This year it got a new breath with a widely spread technique of cutting or inscribing the title keyword or a headline into the visual elements on the page. The approach strengthens the harmonic integrity of the layout elements and makes typography felt tightly united with everything in the interface.

 

web ui design city guide

 

Animated hero banners

 

In web design, hero banners are big images catching user’s attention in the first seconds of interaction with a website. They usually contribute much to the attractive visual presentation of the main content. Hero banners proved themselves as highly effective in setting the mood or transferring the message. Moreover, as well as any other striking graphics on web pages, this is a kind of content which is both informative and emotionally appealing. Prominent hero banners can satisfy multiple goals such as:

  • catch users’ attention
  • transfer the message visually
  • support the general stylistic concept
  • set the needed theme, mood or atmosphere
  • demonstrate the core benefits or items effectively.

 

This year they were often strengthened with original animation breathing life into images and making them even more engaging.

 

dance academy landing page animation

 

Custom theme illustrations

 

Accomplished in different styles and complexity level, custom illustrations are actively covering more and more space on web and mobile UI, adding the quick perception of the information and setting the solid ground for originality. Web and mobile interfaces apply custom mascotsicons and  illustrations to enhance the looks of a page or screen as well as boost usability and intuitive navigation. In addition, images improve the accessibility of UX design pushing the limits of perception for users who have natural problems with text recognition such as, for instance, the dyslexic or non-reading preschoolers.

 

The highest diversity here, perhaps, was featured in theme illustrations supporting websites and apps. They appeared to move to the next level, becoming more complex, sophisticated, stylish, and metaphorical.

 

financial_service_website_tubik

 

Unframed layout

 

Big background images or patterns without any frames have been observed quite frequently in the web interfaces this year. It allowed users to feel the layouts more airy and spacious while the background image deeper and stronger not breaking the interaction with the feeling of boundaries or limits.

 

Big City Guide tubik

 

Variety of interface animation

 

As well as in the previous year, 2017 didn’t experience any loss in the issue of interface animation. Not only does it add life and motion to the interaction process but also significantly improves usability. User experience becomes more informative and engaging while manipulations with the elements of interaction get more clear and respond to the user in an understandable way. So, this year designers worked well on a variety of buttons, tabs, charts, preloaders and scroll animations.

 

watering_tracker_app_ui_tubik

 

UI-friendly branding

 

2017 could be definitely mentioned as the year of rebranding: a big number of global and local companies, products and brands changed their logos mostly towards simplification of forms and details. One of the reasons for the trend was striving for better usability and navigability of brand elements as more and more businesses competed for the higher online presence. So, both new and redesigned logos were created to be more UI-friendly and effectively perceived on a variety of digital devices and layouts. Furthermore, animated logos became a trend making symbols more interactive and strengthening brand awareness.

 

logo_animation_tubik_design

 

 

 

 

Monochrome UI

 

Growing interest in minimalistic design for maximum functionality resulted in a considerable presence of monochrome UI solutions. These layouts usually look stylish, harmonic and non-distractive. However, designers have to invest much time and effort to make them not boring while the core elements of interaction instantly visible.

 

jewellery ecommerce app UI

 

Progress of dark backgrounds

 

Mobile and web interfaces applying color palette with dark background have not only saved but also grown their presence. In particular, they are often applied in the digital products based on visuals rather than copy. Dark backgrounds are traditionally associated with grace and prestige, they deepen the perception of images and can make the interface less contrast and more natural to see in different environments. Moreover, this approach now corresponds to preferences and expectations for quite a broad target audience who like this style.

 

cinema app interaction UI

 

Light space for copy

 

Another trend got especially popular for interfaces based on the dark background scheme. It featured one more approach to proper readability in them which is often the issue of debates: applying boxes or spaces with light background for core data blocks, designers solve this problem and add elegant contrast to the screen or page.

 

watering tracker app design tubik

 

Sophistication and contrast in fonts choice

 

With numerous new fonts created around, user interface designers have a broad field for creative experiments. Today typography is seen as not just the means of communication and sending a message to the user but also the integral part of all the design concept. So, professionals pay much attention to the choice and combination of fonts. This year we experienced new approaches to setting contrast with serif and sans-serif fonts making them work for strong visual hierarchy and appealing beauty of the interface.

 

web design UI tubik studio

 

Experiments with grids

 

With over a billion of websites coming into play, designers have to be more and more creative to make them both attractive and original. So, experiments with grid also won their place in the list of general design trends of the leaving year. The custom grid is the way to save the feeling of harmonic layout and placement of the elements with a higher level of flexibility and originality. However, this sort of creativity requires thorough research while the effective result often comes via several iterations tested and analyzed in terms of usability and visual perception.

 

Variety of landing pages

 

No doubt, this year landing pages have witnessed the new lap of their development and diversity. Businesses and social projects tend to use them regularly for effective presentation of special services, sales, offers or issues striving for focused user’s attention. Landing pages also have proved themselves as an effective method of promotion for native mobile apps. Based on user and market research as well as testing, they can be defined as a user-friendly trend, providing necessary information and interactions in clear and accessible way saving users’ time and effort. From the business perspective, they also work well, giving companies the flexible tool for original and effective communication with better targeting.

 

design agency landing page

 

Creative parallax

 

With more accessible and improved tools for motion design,  scroll animation saved its positions of broadly applied technique both for in web and mobile. Creative and original parallax enhances scrolling experience making it natural for human eye and adding grace for such a basic operation.

mood messenger landing page

 

Promo videos for web marketing

 

Different types of promotional videos were boosted to appear on screens and pages. No wonder as they serve efficiently for marketing goals and increase brand awareness. A creative and catchy video is a good way of attracting customers’ attention and the proven method of informing them quickly and brightly. A video activates several channels of perception — audio, visual, sound — simultaneously and enhances them with a power of storytelling. All the mentioned factors tend to make the presentation via video strong and memorable especially if based on high-quality graphic design and animation. People are daily overloaded with tons of information of all kinds, so most of them aren’t ready to devote much time learning about products or services, especially the new ones. In these conditions, videos have become the way of communication which is dynamic, informative and attractive. However, the issue of loading speed for a webpage moves forward and should be tested carefully for on different devices.

 

 

Gamification mechanics supporting UX

 

This year has witnessed growing interest to gamification applied in a variety of interfaces, not only for entertainment but also for utilities and business products. In the tech world, the word “gamification” stands for the technique of exerting game mechanics into the non-game environment, such as websites and mobile applications. Challenges, rewards, points, badges, leaderboards and other stuff of this kind help designers to think over the ways of effective user motivation and retaining.

 

upper app UI design case study

 

Boxes and cards as layout elements

 

One more trend in UX design of 2017 moved around the diversity of cards and boxes in web and mobile layouts. They played their essential role in setting visual hierarchy and making the pieces of information quickly scannable. Moreover, they successfully contributed to the general harmony and shapeliness of a page or screen. 

 

bikers website blog

 

Geometric elements as a part of style

 

Supporting the previous trend, geometry vibes got featured in many interfaces this year. Variety of simple and complex shapes, patterns, lines and curves has been found in numerous design solutions on both traditional and innovative combinations.

 

wedding_theme_website_ui_design_tubik

 

Experimental color palettes and combinations

 

The trend of color probes hasn’t lost its popularity, bringing out new original combinations. No wonder, color is one of the most powerful ways to add quickly perceived message and mood to an interface as well as make its looks original and attractive. Anyway, effective color experiments are not just pure creativity: even the most creative and surprising combinations are based on the knowledge of color theory, color psychology and virtuosity of user interface designers. 

 

book swap app interaction design

 

No Lorem Ipsum

 

This year has continued the increasing attention to content quality and performance. In user interfaces, content and design and interconnected: creators have to make them successfully support each other instead of fight for users’ attention. That’s why today more and more designers prefer real content instead of well-known Lorem Ipsum, even in cases of initial ideation for design concepts. It gets designers, clients and content makers closer to real experience and natural feel of interactions.

 

dating_app_landing_page_tubik

 

No doubt, 2017 was the year of diversity in interface design — and this can be called one of the most user-friendly trends. Every day millions of users, having different tastes and preferences, various favorite styles and characters, particular feelings of what is comfortable and looks nice for them, use simple and complex apps and websites as a part of their routine. The more variants of looks and features will be designed, the wider range of diverse options that endless global community of technology users will get to find the one which fits their specific needs and wishes. Anyway, soon we’ll see what the next year will bring out and what new creative challenges it will set for UX designers.


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

UI design for photo editor

Picture Perfect. UI Screens for Photo Editors.

Designers know so much about graphic editing art, so it seems like a pleasure and honor for them to take part in the creation of photo editing services. There are many photo editors both web and mobile but all of them stand for the quality photos. They can be not only an independent digital product but also a part of the applications or websites with the wide functionality such as Instagram. Realizing how complicated the process of image edition can be, design experts try to create an effective instrument which would make things easier. The article describes common UI screens for photo editing services. For graphic support, we used here some screens from our design project for Ribbet

 

photo editor interface design

 

Home screen

 

Home screen, or main screen, is a core part of any user interface since it’s a place where users start to interact with a product. Its content and structure can vary depending on the type of a photo editing service.

 

Web photo editors along with desktop applications usually apply home screen as one and major page where users can reach all the features. Traditionally, a photo is placed at the center of the layout so that users could see it in the details. Due to the size of web and desktop page, designers can put the key functionality into a single page. They are often placed into the left sidebar which allows controlling the space effectively and makes the interactions easier and faster. Moreover, if a photo editor isn’t oriented to the professional designers or photographers and provides only the essential features, the instruments can be presented as minimalistic icons.

 

Mobile photo editing apps are not that simple to create and require deep attention to the structure planning. Considering the fact that mobile devices have small screens, a mobile photo editor can’t include all the tools together, so designers need to separate them.

 

Ribbet ui by Tubik studio

 

Let’s see the detailed description of the interfaces introducing the major tools.

 

Photo editing

 

The number of features in photo editors varies depending on the target audience. Some of them are created for experts in this field which means the services need to provide a wide range of instruments so that professionals could do complicated transformations. On the other hand, there are many digital products which allow making photographs beautiful even if you don’t have special skills.

 

Traditionally, mobile editors are oriented to the non-expert audience so they usually don’t provide many tools at once. There is a list of image editing tools which are essential for this kind of application. Let’s look at the common functions and UI solution helping to represent them effectively.

 

photo editor interface design screens

 

Cropping

 

One of the basic features is cropping. It often happens that there is too much unwanted space around the object on a photo and we need to remove it. Cropping is a quick way to get rid of unnecessary space on the photo which takes minimum efforts. Designers usually present a tool in a shape of a rectangle which users can scale and move. The spare area is darkened so that it could be easy to distinguish. Even if an app is oriented to users with a very basic level of tech literacy, it may be a good idea to add the information about the size of a photo on the screen. It can be shown in pixels or inches allowing users to see the size the image after the operation. The action of cropping, as well as the other functionality, should be confirmed to avoid accidental changes.

 

Alignment and rotating

 

Taking photos we don’t always have a chance to build a perfect composition since we often need to catch some important moments immediately and an image may look not as good as we wish. That’s why photo editing apps need to provide the possibility to align images. The alignment screen requires some guides assisting to see if visual elements are placed even so it usually contains a grid. To make the process effortless, designers place the horizontal scale with a slider in the middle of it. Users can move the slider to the left or right to bring the balance into a composition. In addition, a slider can be followed by the degree showing how much you inclined a picture.

 

If a photo is taken in a hurry, there is a chance it would be upside-down. Rotation feature may not always be presented as a separate screen. The tool can be combined with another one in a single layout since its functionality doesn’t take much place. It usually takes one or two icons in a shape of a rounded arrow which indicates the direction. Commonly, it’s combined with alignment or cropping screen.

 

photo editor interactions UI design

 

Saturation and exposure settings

 

Color is a major factor influencing visual perception. To make photos more pleasant for the eyes, it’s vital to set the colors appropriately. The settings UI usually includes several horizontal scales with sliders. Each scale is responsible for a particular aspect which includes brightness, contrast, highlights, shadows, and lights. Also, photo editors often allow enhancing or decreasing certain colors. There are three common ways to present saturation settings. First is a long horizontal scale which applies all basic colors and can be chosen with a slider. Another option includes applying color wheel with a wide range of colors. It helps users accurately choose proper shades. And the third way is presenting several horizontal scales which consist of two colors each. The color pair applies two opposite colors so that users could easily decrease the unnecessary dominating colors.

 

case study ribbet logo branding design

 

Filters and effects

 

Some users can’t stand bothering with color settings because it may take some time before they reach the desired outcome. That’s why photo editing apps provide a great spectrum of filters and effects. People can make a black and white or vintage photo within a tap and it makes the process effortless even for the most impatient users. Filters and effects UI is simple. A photo is placed at the center of the layout and the filters are presented via miniatures at the bottom of the screen. Miniatures give an idea of how the filters and effects look so that users wouldn’t be forced to check all of them.

 

Frames

 

Photo frames existed long before the digital photography and they don’t lose the actuality. However, today people mostly use them as the decoration for digital images. The layout of frames interface is similar to filters and effects — the example of frames are shown as miniatures at the bottom. Also, the screen requires a tool which will help to regulate the width of frames such as scale.

 

Collage

 

Collage is known as a collection of photos that are combined to make a single picture. Along with photos, a collage can usually include frames, stickers, text or custom background. This screen differs from the others because it applies several photos. Photo editor apps need to help users quickly create a pretty collage so the key part of the layout is different templates.

 

Collage samples vary by the number of photos as well as the structure. Users can choose the perfect template and then download chosen pictures. The templates can be shown differently. Web photo editing services often apply a sidebar showing samples via clickable icons. As for mobile applications, the templates can be put on a separate screen so that users could see them well. When people choose a collage sample the application leads them to the editing interface where the creative process starts.

 

ribbet-collage

 

Effective UI for photo editing services helps non-designers make beautiful photos without significant efforts. Designers’ task is to organize and present all the features that way so that everyone could do the editing intuitively.

 

Recommended reading

 

Mobile UI Design: 15 Basic Types of Screens.

Feel the Beat. UI Design for Music Streaming Services.

Spectacular Design. Elements of Cinema App UI.

Keep Fit. UI Design for Fitness Apps.

UX Design for E-Commerce: Principles and Strategies.


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

strategies for ecommerce ui design

11 Profitable Strategies for E-Commerce UI Design

Ratings of e-commerce are booming and rocketing. People are getting more and more confident in buying things online. The report by BigCommerce on customers buying habits in 2016-2017 shows really interesting stats about online shopping:

 

  • 51% of Americans prefer to shop online
  • 96% of Americans with internet access have made an online purchase in their life, 80% in the past month alone
  • E-commerce is growing 23% year-over-year, yet 46% of American small businesses do not have a website
  • Online orders increase 8.9% in Q3 2016, but average order value (AOV) increased only 0.2% — indicating that transactional growth is outpacing total revenue.

 

The numbers above still haven’t stopped their increasing. That wouldn’t be reasonable for any business to ignore such global trends having a great impact on profits and reaching customers. For the last couple of years here in Tubik we see the obvious and logical growth of interest from big and small businesses in establishing their presence online via websites and/or mobile applications. Based on our experience and the research of the sphere, today we offer you the article telling a bit more about strategies and best practices in UI design for e-commerce.

 

So, let’s start with the 11 points which are important to consider when you are designing e-commerce user interfaces.

 

ux design for ecommerce tubik blog

 

1. Make the branding instantly visible

 

From the business perspective, branding is a crucial thing: it enables to provide a product, company or service with a recognizable face and personality.  In general terms, branding means a sort of image created via a set of distinguishing features and promoting awareness and recognizability of the product or service on the market.

 

Branding tends to be essential in an e-commerce user interface design, especially if stakeholders want to use the digital product as the additional flow of customer attraction. Moreover, identity integrated thoughtfully into the interface is the effective way to increase brand awareness. The time taken for proper market and user research, target audience definition, competition analysis and development of brand identity on the basis of all that data by a professional designer is a worthy investment. If that’s done before launching the process of UI design, the product gets higher chances of becoming recognizable faster and easier.

 

In this case, UI designer working on the interface, its color palette, shapes, types and fonts, illustrations and icons, will consider design solutions appropriate and corresponding to the general branding concept of the product that will make them mutually supporting each other. It provides more natural and harmonic feeling of the brand in general and the particular interface as an integral part of this brand.

 

There are numerous ways to add branding to the interface, still some layout zones and elements which have the highest potential in this issue:

 

Headers. In the article about website header design, we showed in detail that headers present the area of high visibility. So putting strategically important elements of branding in it is a good way to strengthen its memorability.

 

Splash screens. In mobile applications, splash screen or welcome screen is the first screen seen by a user while the application is loading and starting. It’s a good idea to use a logo, mascot or any other thing setting the instant visual connection with a brand. Moreover, adding a bit of wow-effect with slight stylish animation, it’s easy to make the sign even more attractive and memorable.

 

Preloaders and pull-to-refresh indicators. These are the elements which show the flow of the current loading process on the app or website. Branding applied elegantly in them can add much into the consistency of both UI and identity design.

 

MascotsMascots are images, usually personified, which often represent the brand, product or service identity and can be its symbolic convention in all the application or website. Mascots push the limits of personification and give the chance to create the unexpected combinations of elements or make fantastic and non-existing characters alive. A mascot becomes the element of identity and inter-connector between the user and the product. In many cases, it is the basic element of communication and interaction delivering the necessary message to the user.

 

jewellery ecommerce app UI

 

2. Set clear and easy navigation as the core task

 

In the article on UX design for ecommerce, we stated: whatever an amazing website or app is, whatever the stylish and trendy design and breathtaking images it features, its success will be measured not by the number of «wows». The efficiency is analyzed simply — by the number of complete purchases. If users don’t buy, design means nothing while stakeholders lose their money. Clear intuitive navigation plays the premier violin here. At every step of interaction, users need to understand clearly plenty of simple things, like:

  • what company or brand they are dealing with
  • what page they are at
  • where the menu is
  • how they can get back to home page or catalog
  • where the search and filters are
  • how long the page-loading process is going to take
  • how they can see the detailed information about the item
  • how they can choose between the option for the same item (color, size etc.)
  • how they can pay for the item
  • how they can save the items they would like to get back to later
  • how they can contact the seller
  • how they can see the rating and reviews of previous buyers etc.

 

gourmet_website_interactions_tubik

 

3. Check the scannability of the page or screen

 

As it was already mentioned, users don’t usually read and observe all the content on the page or screen from the starting point: instead, they start from quick scanning to understand if it contains something they need or want. Knowing the eye-tracking models, Gestalt principles and laws of visual hierarchy, designers and information architects can put the core data and interaction elements to the zones of high and natural visibility.

 

Calls to action (CTA), in particular, should be instantly seen in the first seconds on the page or screen. In the interfaces for e-commerce, CTA elements are the core factor of effective interaction with the product playing the crucial role in usability and navigability and therefore in getting profits. When all the path of interaction and transitions is built clearly for users but CTA element is not thought-out, placed or designed well, users can get confused and will need to take additional effort trying to achieve their goals. That increases the risk of poor conversion rate and general user experience.

 

4. Minimize user’s efforts whenever its possible

 

The respect to the customer lies not in pouring out your thanks. The real respect is in saving users’ time and effort day in and day out. Here are some design practices which can make the interface effort-saving:

 

Show related products. Seen on the item page as recommendations close to the features of this particular product can make the process of search and browsing much faster for users. However, it’s vital to check together with developers that this section really works according to the algorithm which shows suitable items, not random ones.

 

Strive for a minimal number of clicks. If going from page to page or jumping from screen to screen is not a part of the journey into the sales funnel, save every users’ click possible. Too many operations are tiring and annoying which is a kind of negative emotion. And emotions have a huge influence on user experience and make retaining users much harder.  Minimize the number of clicks on the way of choosing and buying whenever it’s possible — this way you respect user’s time better than politest words of thanks.

 

Simplify the sign-in process. Imagine the situation when you got to the amazing website selling the goods of your dream, and they are presented in such a stylish way that you want to buy them at once. But when you click the button «Buy», you are taken to the huge long from which you have to fill in to register on that website. That will cool down your hot wish to buy everything right here, right now, isn’t it? You change from the state «Take my money, give me that» to «Really? 20 points to fill in before I can buy?» in split seconds. Not all the users will survive that transformation and the website or app will lose a part of buyers. So, it’s necessary to make the sign-in/log-in process as simple as possible.

 

User shape and color marking to group the items or types of content. Color and shape codes enable designers to apply Gestalt principle of similarity not only on one screen or page but on the whole app or website. Color or shape markers simplify navigation and keep the consistency of design enabling users to remember the prompts and find the content they want easily. For e-commerce platforms which are usually full of numerous items, it can make the interface much more user-friendly.

 

Check that perception of the layout is natural and harmonic for the human eye. There are numerous things that have an impact on decision-making, and harmony is one of them. Eye-tensing color combinations, unreadable or not combining fonts, aggressive background, intrusive pop-ups or animations, annoying sounds or pages loading for ages — any point of that stuff can spoil the experience quickly and move users away.

 

Bakery website design case study tubik

 

5. Don’t go too far experimenting

 

There are many articles and videos calling creative people to hear their heart, trust their guts and think out-of-the-box. However, design is not just pure creativity striving to show all the power of original solutions. First of all, it the way to solve the problem and make users happier. So, it’s vital to look at the interface from user’s perspective and find the way to make interactions that will provide the smooth and easy way to conversion. In the article on home page design strategies we mentioned: the website is made not for creative contests or gallery of fame but for real users. The positive impact of habit in terms of user experience can be stronger than the wish of revolution. Surely, the dose of uniqueness is needed, but not so much to knock down the user. In e-commerce UI design, often aimed at quite a diverse target audience, too much of revolution might confuse and scare: do I really need to buy this thing, a user may think, if it’s so hard to get it? Study the interaction patterns and typical products for that particular target audience to make their habits their power. And don’t forget to check that all the icons on the screen don’t have a double meaning. Strive for the balance between innovation and traditions.

 

6. Use landing pages for specific purposes

 

For business aims and profits rate, this tip may bring crucial changes. E-commerce UI design principles are usually based on dealing complex websites or apps which are filled in with a variety of information. So, the approach of directing all the traffic from outer sources to the home page can be a step killing profitability and reducing conversion rates. Users might get overwhelmed, distracted or even annoyed with the amount of data they have to process finding what they need, especially if they are focused on a particular narrow goal presented in the source they come from. Using landing pages when you need to concentrate user’s attention on something specific can solve this problem efficiently. Landing page is focused on one item, to make it quickly found and reduce delays when target user seeks for specific operations, services or items. This is the issue of especially high importance in the case of e-commerce websites when unwise design solutions bring to poor user experience and financial losses.

 

web design UI tubik studio

 

7. Make the homepage informative

 

Home page can satisfy multiple functions: it’s a card of invitation, a starting point of the journey around the website, a storage of the vital links and data, and a strategic asset for marketing goals. In the majority of cases, it is the first visual and emotional touch to the website. Certainly, design is one of the core ways to make this touch gentle, smart and helpful. With all the progress the World Wide Web has witnessed, this position doesn’t change: home page often defines if a user goes further around the website, not only by beauty and style but first of all by information which is looked for. Making it accessible, noticeable and clear, designers grow the chances of positive user experience.

 

In general, home page can include the following data:

  • the nature of the website
  • brand or company identity elements
  • internal search
  • links to the core interaction zones
  • contact data and links to social networks
  • signs of trust (testimonials, reviews, big numbers of presence in social networks etc)
  • for e-commerce websites, it can be visual presentation of bestselling and/or exclusive items, for example, specific books, toys, clothing, equipment etc.

 

The solution which of the mentioned points are going to be included and how they are going to be spread on the layout should depend on the goals set for the website and the research of target audience.

 

bookshop website animation

 

8. Apply high-quality images giving the message

 

Images take a big part in usability: as the vast majority of users are visually driven, images become the hook points of getting basic data about the website or app. They present the part of the content which is both informative and emotionally appealing. The level of detail and functionality allow classifying the images in user interfaces into types, among which:

 

— photos: theme photos creating the appropriate mood and setting the message, demonstration photos, photos of the items, title photos for blog articles and pages of special offers etc.

— illustrations: custom illustrations in graphic interface design can look both informative and original allowing the design to stand out of the competition.

— hero banners: applied mostly in web design, they are big images which are usually the first visual element catching user’s attention in the initial seconds of interaction; they usually give the attractive visual presentation of the main content of the resource.

— icons: these are small but meaningful pictograms which are informative and support data exchange between the informer and addressee. Icons play the key role in providing clear and intuitive navigation, but they should be checked on proper clarity and the absence of double meanings.

— mascots: images, usually personified, representing the brand, product or service identity.

— visual identity elements: various visual signs of branding like logos, custom lettering for brand name and/or slogan etc.

florist shop website design

 

 

9. Think about promotional videos of different kinds

 

There are several common types of promotional videos:

 

  • introduction video (the first insights on the company, product, or brand showing its benefits for users)
  • product presentation videos (details about product’s features and advantages, special steps of interactions and the problem-solving potential of the product)
  • landing page videos (strengthening the message driving users to a particular call-to-action offered on the page)
  • video testimonials (the reasons and signs of trust and loyalty to the company, brand or product)
  • entertaining and educational videos (rising emotional appeal and often presenting the material for viral marketing).

 

All the mentioned types can serve efficiently for marketing goals and increase brand awareness. A creative and catchy video is a good way of attracting customers’ attention and the proven method of informing them quickly and brightly. A video activates several channels of perception — audio, visual, sound — simultaneously and usually do it in a way of telling a story. People are daily overloaded with tons of information of all kinds, so most of them aren’t ready to devote much time learning about products or services, especially the new ones. In these conditions, video can become the way of communication which is dynamic, informative and attractive. However, the technical side should be double-checked so that the video was integrated correctly and didn’t overload the page.

 

10. Let the user contact the duty holders from any point of interaction

 

The most popular placement for contact information is footer, the bottom part of the page. However, if any kind of contact data is core for conversion, it’s logical to put in the pre-scroll area or even a header. For example, on an e-commerce website, presents the online shop, users may want to call more frequently and this ability will have a direct impact on conversion rate. Anyway, the contact data should be available at any point users may need it. Among others, it is one of the factors influencing the level of trust to the website.

 

Contacts can be presented in various formats. They can reveal the data such as a phone number and location, emails, links to messengers, contact forms and instant chat window. Making the phone numbers clickable is supportive as many users now browse from their smartphones and may want to call right from there. The address can be also clickable opening the screenshot or map showing how to find the location. The solutions have to be based on thoughtful user research setting target audience’s expectations, level of tech literacy and ways of contact which are the most convenient for them. For instance, if your target audience is teenagers, just giving the phone number may be not effective as they really stick to messengers and social networks. At the same time, if your users are elderly people, social networks may not work in comparison to a phone number.

 

11. Add gamification

 

Gamification integrated into digital products is a great way to stimulate users’ extrinsic motivation, which is mostly a seek of reward, which can be tangible (money, prizes, diplomas, certificates, trophies, medals etc.) and intangible (praise, support, recognition etc.). So, challenges, leaderboards, rewards for loyalty and big orders, discounts, badges, coupons, stickers and all the other stuff of that kind can become great stimuli for users to not only start interaction with a website or app but also stay there and buy regularly.

 

badges illustration tubik studio

 

The offered e-commerce UI design examples and strategies, for sure, do not cover the whole scope of issues to consider in this fields. However, they can serve as a useful checklist or a source of UI design inspiration for those who aim at creating user-friendly platforms supporting business goals. No doubt, best UI design for e-commerce website is the one which leaves a buyer happy and brings profits to the stakeholders. 

 

Recommended reading

 

UX Design for E-Commerce: Principles and Strategies.

The Role of Branding in UI Design

Business-Oriented Design. Know Your Target.

Short but Vital. Key Abbreviations in Design for Business.

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

Two Types of User Motivation: Design to Satisfy.

Sell Like Hotcakes: UI Designs for E-Commerce.

Feel Homey. Handy Tips for Home Page Design.

Landing Page. Direct Flight to High Conversion.


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

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

fitness_app_ui_design_article

Keep Fit. UI Design for Fitness Apps.

A professional athlete Billie Jean King once said: “Sports teaches you character, it teaches you to play by the rules, it teaches you to know what it feels like to win and lose — it teaches you about life.” Sports has become a part of our routine a long time ago. Even more, today a healthy lifestyle is a top trend which constantly grows its popularity across the world.

 

Fitness apps are the key helpers for people who strive to get fit. Their functionality gives a lot of opportunities and makes keeping fit easier. Understanding the significant impact of these applications on users’ everyday life, designers do their best to activate the problem-solving potential of fitness apps. Today’s article describes common screens and essential UI elements for fitness apps.

 

sport app motion ui tubik studio

Sports App Interactions

 

Sign-in and profile screen

 

Fitness app is something like a pocket instructor telling you what to do and gives a feedback on your achievements. To make it more comfortable and personalized, designers need to create an effective profile UI.

 

Before users obtain their profiles they usually go through the sign-in process. Fitness apps, as well as the other ones, can allow logging in via social networks still there are some aspects which users have to fill in to create a personalized profile. The applications usually require the personal data including age, gender, weight, and height which helps to define users’ physical condition. Profile creation is often similar to filling in an application form. This way users can easily provide the needed information to make a profile more personalized.

 

The major objective of a fitness app is to help users in their self-improvement, the reason why profiles should contain not only the personal data but also the user’s achievements such as the number of burnt calories or personal records in sports. It’s important to not to overload the profile screen with the unnecessary information otherwise user interface may look chaotic.

 

Home screen

 

It’s a core element for any type of apps. Home screens serve as the main point where users start the journey within a product. Creating UI for home screen designers need to think of it as a center of navigation and make sure users will be able to operate it easily. 

 

First of all, home screen should provide access to the other parts of the app. Designers can choose various ways of the presentation from a sidebar with minimalistic icons to the clickable subheaders leading to the different sections of app content. The choice often depends on the number of features provided by the product as well as the platform which it is meant for.

 

Activity screen

 

People who aim at getting fit always have to do various physical activities. Fitness apps provide users with the feature which helps to track how active they are during a day. To make a sufficient UI for activity screen, designers include different kinds of activities and sports. Traditionally, fitness apps provide tracking time spent on sports as well as measuring the distance which users cover during a day. The distance can be calculated in two ways: walking is measured by the number of steps and running is usually measured in miles (kilometers).

 

The information about users’ activity is often presented via diagrams of various forms. Such presentation contributes the effective visual perception of the data which includes many numerals. Also, designers often apply custom icons representing each kind of activity. This way the screen looks clean and neat even if users have a really active life.

 

fitness_app_ui_landscape_tubik

Fitness App

 

Heart rate screen

 

The heart is an engine which lets our body live and function, so it’s important to follow its condition daily. Many fitness apps can be connected to the various devices such as fitness wearables which allow measuring pulse. The applications usually transfer the data gathered with devices on a heart rate screen.

 

User interface representing the feature should be simple with the minimum of elements so that it could be easily operated. Since the process of pulse measuring takes some time it may be a good idea to supply the UI with sufficient animation which will show the loading process. For example, motion designers can animate an illustration of the heart showing it beats. Custom illustrations along with motion design can make UI look more proficient and make the process of the pulse measuring more interactive.

 

Sleep tracking screen

 

Nice sleep is a guarantee of the human health. Sportspeople know it better than anyone else and always try to control the time and quality of their sleep. Fitness apps show the gathered information during a night which includes the time and stages of sleep. There are four stages of sleep: the first and the second are called light sleep, the third is deep sleep and the fourth is rem sleep. The applications track these stages and in the morning users can see the statistics. The data on sleep is often shown as graphs.

 

Calories screen

 

They say that fitness people are obsessed with calories. Well, there is truth in the words because if you want to get fit it’s vital to control what and how much you eat. As we said above, fitness applications show the information on the number of burnt calories based on the activity results. The calories data can be displayed on the activity screen as well as on the personal profile. However, it may be an effective solution to create a separate screen to provide users with the expanded information on the lost calories.

 

Sport app UI design

Sports App

 

Progress screen

 

To stay motivated and continue self-improvement, it’s important to know that the hard work gives results. The progress screen shows the statistics about users achievements along with failures. Here the graphs will be the best choice. If people have the progress, they see that their results are getting better and the scales on the graphs go higher.

 

Schedule screen

 

There can be many sports activities in different time and different places so the schedule seems to be essential in this situation. The screen of schedule is standardized, but to make it unique and original, designers can add some interesting icons representing various sports directions.

 

Goals screen

 

Goals move us to achieve more and more, especially if we talk about fitness. People start doing sport because they have some goals like losing weight or shaping up. In fitness applications, users set maybe a bit less radical goals but easier to achieve on a regular basis. They often include walking a certain number of steps per day or week along with burning the fixed amount of calories.

 

The screen of goals can be presented as a sheet divided into categories: to do, doing, done. This way users will see how much they have managed to achieve and what they need to strive for. In addition, designers can settle the system of awards which will help users be even more motivated. We’ve already described awards as effective gamification tools which contribute increasing user engagement. You can find detailed info in our previous articles.

 

tubik_studio_bebright_app

BeBright App

 

The sport requires persistence and fortitude and so does the creation of sufficient UI design. Learn the basics, add some inspiration and you can surprise yourself. Stay tuned!

 

Recommended reading

 

If you want to learn more about common screens for various mobile apps, here is the list of helpful articles revealing tips on mobile UI design and its components.

Mobile UI Design: 15 Basic Types of Screens.

Feel the Beat. UI Design for Music Streaming Services.

Spectacular Design. Elements of Cinema App UI.

 

fitness_app_ui_design_article


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

ux_design_practices_article

Get Professional. Useful Habits for UX Designers.

To become a UX expert, designers need to work hard on the daily basis. Constant self-improvement and love to what you do are two key factors helping to become a master of your craft. Of course, all UX experts have their personal secrets of the success still they have something in common. There are certain characteristics which differ amateurs from the real professionals. The new article describes habits which expert UX designers possess.

 

They listen to users

 

The success of a product is defined by several points including the level of satisfaction which it brings to the users. To make a website or an application meet users needs, you have to know what exactly users require. So, before creating UX for a digital product, the professionals always go user researching.

 

The process of user research applies collecting and analyzing the information received from the potential users. The obtained outcome helps designers go deeper into details of the target audience as well as comprehend their preferences and psychological peculiarities. Applying user research UX experts actually can step into the users’ shoes and find the effective solutions for a user-friendly product. UX design built on empathy has the great chances to meet users needs and draw attention to a product.

 

usability testing

 

They conduct usability testing

 

Usability is one of the key factors influencing the quality of a digital product. So, to see if a website or an app is usable and to distinguish possible problems in UX, designers need to apply the technique of usability testing.

 

The level of usability is defined by five aspects: learnability, satisfaction, efficiency, memorability, and errors. Learnability stands for how easy users can attain tasks during the first usage and satisfaction is if the usage process feels pleasant. Efficiency is determined by users’ ability to accomplish a task quickly while memorability depends on time which people need to re-establish their proficiency after a period of not using a product. And finally, designers track the number of errors users make and how easily they can learn from these mistakes.

 

Usability testing is usually conducted at the UX building stage before a project goes to the development team. It allows changing inefficient solutions easier than in a complete product. Moreover, usability testing allows watching the users’ reactions while a product is used and estimate how much they like it or don’t. This technique is helpful for gathering the essential information for the effective user-centered design.

 

interface testing UI design tubik

 

They pay attention to the information architecture

 

In one of our previous articles, we defined the information architecture as a science which strives at organizing and structuring content so that users would easily adjust to the functionality of the product and could find everything they need without big effort.

 

Many UX experts learn the IA principles since they believe the information architecture is a foundation of the effective design. If the content is badly organized, users may have difficulties with navigation, so they can get lost and feel annoyed. That’s why even compelling content elements and powerful UI design can fail without appropriate IA.

 

Some may think that it’s impractical to devote much time to IA building but the effective information architecture is crucial for powerful user experience design. It helps users quickly navigate through content and find everything they need without striking a blow.

 

information architecture for designers

 

They strive for clarity

 

A quality digital product has to give a quick access to the features which users come for. The main objective for designers is to help people easily reach the desired functionality and make the process of usage pleasant and clear.

 

While planning problem-solving UX, professionals should work out which of design elements will be helpful and which of them will distract users. Unneeded functionality makes a product complicated and has the bad influence on the user experience. What’s more, it’s important to keep mental models which include common UI patterns for specific types of products. The thing is that design is often built on the elements which are already familiar to users. Such an approach makes navigation much more intuitive and simple.

 

tubik_photo_app

 

They consider real-life context

 

Being an idealist is not always a good thing, especially for UX masters. It may happen that some designers just forget to consider all the life factors which have the significant impact on UX.

 

A product is often built and tested in comfortable conditions, but people do not always have a chance to use apps in such pleasant environment. The modern world is too rush and people often have lots of tasks to do per minute. However, despite all the circumstances websites and mobile applications need to be enjoyable. Designers have to consider possible disturbances and create UX that way so people could manage everything even without being 100% engaged with a product, especially a mobile application.

 

home budget app case study

 

They are open to new tools

 

Being a profound user of Photoshop or Sketch is a great advantage for a professional still it’s always a good idea to try new tools. It may seem as time waste for some designers so they don’t see a point in it. However, you may be surprised how advanced the new technology can be and what functionality it provides. Learning new tools you’re are not obliged to apply them as the major instruments but you can use them as additional helpers which will be useful in certain situations.

 

They never stop learning

 

UX design is a field which never stays still. Each day brings new ideas and opportunities which designers willingly share around the world. Today there are so many techniques and methods which UX experts apply for creating quality products and it may be hard to keep up with all of them. Nevertheless, for a UX professional, it’s vital to learn as much as they can because this kind of knowledge only improves the professional skills.

 

In addition, designers shouldn’t concentrate only on the design aspects. Learning the wide spectrum of sciences which somehow relate to the design can be extremely helpful in the creative workflow. For example, it is recommended to learn psychology which helps to understand users and their needs as well as learn some basics of programming so that you could have the better vision of product development.

 

tubik-studio-free-ebook-on-design

 

They stay up to date

 

Digital technologies evolve pretty fast and UX experts have to follow the updates. It would be difficult to create the proper design without knowing the peculiarities of the devices it’s meant for. Moreover, the trends in design field are also changing quickly so UX designers need to know what’s on the top now and which solutions step aside.

 

They don’t forget to get inspired

 

Some people may think that UX design is a complex science with the strict rules which doesn’t have a room for creativity. However, it’s a false thought since UX masters never forget to let the imagination out of control. Many original and unique solutions are born due to designers’ open-mindedness and inspiration. That’s why designers always have to charge their creative power with the help of their favorite activities.

 

Book tubik design inspiration

 

To sum up, let’s remember Sean Covey’s words: “We become what we repeatedly do.” Work hard, improve yourself and you will be able to become a master in your field. Stay tuned!

 

Recommended reading

 

FAQ: Do UX Designers Need to Know Programming and Computer Science?

How Human Memory Works: Tips for UX Designers.

FAQ: Diversity of Design Job

6 Tips How to Apply Information Architecture in UX Design

7 Key Motives to Invest Time and Effort in UX for Digital Product

Gamification in UX. Increasing User Engagement.

User Research. Empathy Is the Best UX Policy.


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

tips on visual hierarchy in design

9 Effective Tips on Visual Hierarchy

Sufficient visual hierarchy is a foundation of a successful digital product. It helps to organize UI elements in an effective way so that content would be easy to comprehend and pleasant to see. The presentation of visual elements has a great impact on user experience. If the components are organized wisely, users navigate and interact with a product without efforts and enjoy the process.

 

So, what makes powerful visual hierarchy? Of course, different kinds of products require different methods of building it still there are some common solutions helpful for UI content organization. Today’s article provides useful tips on creating the compelling visual hierarchy for web and mobile products.

 

Keep business goals in mind

 

There are often business goals standing behind a digital product. To achieve them, creative team needs to work out which UI elements are more important and prioritize them according to their roles. For example, all the elements on e-commerce websites perform the tasks of various levels. The item images are usually the main eye-catchers since they have to encourage customers to consider it. A heading goes after the image explaining what it is and the next important stage is a CTA button calling people to buy an item. By considering business and marketing goals set for the website or app, the creative team can effectively prioritize visual content and make a product stand out the crowd.

 

design agency landing page

Design Agency Landing Page

 

Consider scanning patterns

 

In our previous articles, we mentioned that before reading a web page people scan it to get a sense of whether they are interested. Different studies, including the ones by Nielsen Norman Group , have revealed several popular scanning patterns among which “F” and “Z”-shaped.

 

F-pattern appears mainly on digital pages or screens with the big amount of content such as blogs, news platforms etc. Users’ eyes move in F-shape: first, they scan a horizontal line on the top of the screen, then move down the page a bit and read across the shorter horizontal line, finishing with the vertical line down on the left side of the copy where people look for keywords in the paragraphs’ initial sentences.

 

Z-shaped pattern takes place on the pages which are not so heavily concentrated on copy or those which don’t require scrolling down. The pattern is the following: people first scan across the head of the page starting from the top left corner, searching for core information, and then go down to the opposite corner at a diagonal, finishing with the horizontal line at the bottom of the page from its left to right.

 

Knowing these patterns designers organize content putting all the core UI elements on the most scanned spots to draw users’ attention.

 

Functionality first

 

The visual hierarchy may seem to be oriented only to the aesthetic aspects but it’s not like that. First of all, by structuring and organizing visual elements designers need to make sure a product is clear to use and the navigation works right. The visual hierarchy which is built exceptionally on aesthetics can’t work effectively. User interface with the badly structured content leads to the bad UX. So, while building visual hierarchy designers need to consider functions of UI elements and a role they play in the navigation process.

 

landing page UI design tubik studio

Seafood Recipes Landing Page

 

White space is a visual element

 

White space, or negative space, is not just an area between design elements, it is actually a core component of each visual composition. It is a tool able to make all the user interface elements noticeable to users’ eyes. Designers can group or separate UI components so that they could create the effective layout. Moreover, negative space helps to emphasize particular elements which require deep attention from users. White space is an effective instrument for creating visual hierarchy so designers need to work on its balanced usage.

 

landing page web design

Colony Landing Page

 

Apply the golden ratio

 

We devoted one of our latest articles to the golden ratio applied in design. It is a mathematical proportion of the elements of different sizes which is thought to be the most aesthetically pleasing for human eyes. The proportion equals 1:1.618 and it is often illustrated with seashell-shaped spirals which many of you could have probably seen.

 

Designers often apply golden ratio at the stage of wireframing. It helps to plan a structure for the layout placing and sizing user interface elements in the right proportion which will be pleasant for users.

 

golden ratio in ui design

Tracking Widget

 

Use a grid

 

A grid is one of the key tools applied at the different stages of the creative process and visual hierarchy is not an exception. A grid helps to structure all the components and put them into the appropriate sizes and proportion. What’s more, designers can effectively work with the negative space since a grid shows if the elements are placed proportionally and even.

 

Add some colors

 

Color choice and combinations are essential for visual hierarchy as they help users to distinguish the core elements. The thing is that colors have their own hierarchy which is defined by the power of influence on users’ mind. There are bold colors such as red and orange as well as the weak ones like white and cream. Bold colors are easy to notice so designers often use them as the means of highlighting or setting contrast.

 

Moreover, applying one color to the several elements you can show that they are somehow connected. For example, you can choose a red color for purchase buttons so that people could intuitively find them when they need.

 

financial_service_website_tubik

Financial Service Website

 

Pay attention to the fonts

 

Visual hierarchy includes a core subsection called typographic hierarchy which aims at modifying and combining fonts to build the contrast between the most meaningful and prominent copy elements which should be noticed first and ordinary text information. The fonts can be transformed by regulating sizes, colors, and families as well as their alignment. Different fonts can divide copy content into different levels so that users could perceive the information gradually. However, designers are recommended to keep the number of fonts within three since too many fonts look messy and make the design inconsistent.

 

Three levels for web, two for mobile

 

As we mentioned above, different fonts form typographic levels which consist of such elements as headlines, subheaders, body copy, call-to-action elements, and captions. There are three typographic levels: primary, secondary, and tertiary. The first one includes the biggest type and aims at drawing people’s attention to the core information on the screen. The next level provides copy elements which are easily scanned and help users navigate through the content. The tertiary level usually applies body text and some additional data which is presented via relatively small type.

 

In many cases, web products include all three levels since they are more likely to provide the big amount of content. On the other hand, designers are recommended to keep the number of layers within two while creating typography for mobile. The small screens don’t provide enough space for three levels so the elements of a secondary level such as subheaders have to step aside to make mobile UI look clean.

 

UI animation wine app

WineYard App

 

Effective visual hierarchy is not only about aesthetics. It aims at providing problem-solving navigation and interaction systems as well as friendly user experience. To create a sufficient visual hierarchy, designers need to organize all UI elements considering the functionality and business goals.

 

Useful articles

 

The topic of visual hierarchy is wide and complex, so we gathered some helpful articles revealing various aspects.

 

Visual Hierarchy: Effective UI Content Organization.

Golden Ratio. Bring Balance in UI Design.

Take It Easy: Tips for Effort-Saving User Interfaces.

Tips on Applying Copy Content in User Interfaces

Information Architecture. Basics for Designers.

Typography in UI: Guide for Beginners.

 


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

psychology of shapes in design tubik article

Knock Design into Shape. Psychology of Shapes.

The success of any visual composition highly relates to how people perceive it. There are many factors influencing human perception and the significant part goes to psychology. In one of our articles, we’ve already discussed the role of psychological principles in design and described how useful they can be on the way to understanding users.

 

The aspect which we want to cover in today’s article is called the psychology of shapes. Let’s see what this direction studies and how it can help designers in the creative process.

 

Psychology of shapes

 

All the visual objects can be analyzed in terms of shape. For example, an average house may be perceived as a rectangle with a triangle on the top and the sun is often presented like a circle with lines around it. People may not always notice what figures and shapes surround them still they have a great impact on our consciousness and behavior. The science studying the influence of shapes on people is known as the psychology of shapes.

 

The study claims that each shape has its own meaning and influences our mind and reactions differently. There are many psychological tests which are used to define the personality or mental condition via shapes. For example, a favorite figure can tell about person’s character traits, a quickly chosen shape can show what’s on the mind.

 

Many years of research and tests have helped professionals to define what meaning each shape typically brings and how it can influence human perception. Let’s take a closer look.

 

animated tutorial

Social network tutorial animation

 

Geometric shapes meaning

 

Hearing the word shape most people think about geometric figures first. There are plenty of geometric shapes which people see daily including squares, circles, rectangles and others. But what do they mean? Let’s see.

 

Squares and Rectangles

 

These two shapes are thought to be the most commonly used. We see them many and many times per a day. The walls and furniture, books or monitors, cell phones and cameras as well as many other everyday things have square or rectangular shape. Straight lines and right angles of these two shapes give a sense of reliability and security. People strongly associate squares and rectangles with buildings the reason why they bring the feeling of trust and authority.

 

Common meanings:

  • discipline
  • strength
  • courage
  • security
  • reliability

 

tubik_photo_app

Photo App

 

Triangles

Triangle is an energetic and dynamic shape which is always associated with motion and direction. The lines are placed that way so our eyes automatically move to the top of a triangle or in the direction it is placed. Triangles can have different meanings. An upright triangle brings the feelings of stability and balance but the reversed one looks risky and ready to fall giving people a sense of tense.

 

Common meanings:

  • excitement
  • risk
  • danger
  • balance
  • stability

 

Circles, ovals, and ellipses

 

The first and foremost meaning of this shape is the eternity since they have no beginning or end. The circle has a long association with the sun and Earth as well as other cosmic objects while ellipse is similar to the whole universe. That’s why round shapes may give the feeling of magic and mystery. In addition, unlike the previous shapes circles don’t have angles so it makes them softer and milder.

 

Common meanings:

  • eternity
  • female
  • universe
  • magic
  • mystery

 

tubik_art_courses_app

Art Courses App

 

Spirals

 

These shapes can be often seen in nature, for example, shells and some flowers, the reason why it’s often associated with the circle of life and growth. Also, in some cultures, spirals may represent the knowledge or information. In modern society, they are seen as a sign of creativity and a fresh mind.

 

Common meanings:

  • growth
  • creativity
  • calmness
  • intelligence

 

Big City Guide Madrid tubik

Big City Guide

 

Natural shapes meaning

 

All the things created by mother nature have their unique shape. Leaves, flowers, trees, animals, and many other representatives of flora and fauna become the source of inspiration for artists and designers. Natural shapes have clear meanings of the plants and animals which they symbolize. They often bring the feeling of refreshment and unity with the natural environment. In addition, animals and plants can also have their own characteristics and symbols. For example, a rose is a flower of love and passion, while a lion is a symbol of pride and bravery but this is another topic to discuss.

 

Common meanings:

  • originality
  • organic
  • balance
  • refreshment

 

andre landscape tubik studio logo design

Andre landscape logo option

 

Abstract shapes meaning

 

They are usually visual symbols of abstract ideas or simplified versions of natural shapes. Some abstract shapes can be too difficult to recognize because they are stylized and only small details give a hint to what it is. One abstract shape often has both direct and figurative meanings.It is often used in graphic design, especially for logos and icons. Abstract shapes are an effective way to transfer a message quickly without text.

 

Common meanings:

  • the duality of meaning
  • uniqueness
  • elaborate.

 

wedding_theme_website_ui_design_tubik

Wedding theme

 

How designers use psychology of shapes

 

Shapes are essential elements in all design directions. They can serve as components of a visual composition as well as a content organizing tool which divides or connects design elements into groups. To make the sophisticated design, experts need to consider the meaning of shapes and the impact which they have on users’ mind.

 

Graphic designers often deal with small but meaningful elements such as logo and icons. A powerful logo needs to convey the right message which would serve as the brand voice. If the shapes are chosen appropriately for a logo, they will assist to convey the right mood without additional words. For example, in case of a logo for a financial company, one of the approaches can be applying to apply the shapes which convey the feeling of trust and balance such as square or triangle.

 

Various shapes are often found in user interfaces of digital products. They can be used as buttons or icons as well as applied to organize the content on the layout. For instance, text blocks are often gathered in a rectangular or square shape which allows users to quickly scan copy. Using different shapes designers can create effective information architecture for a product. The elements of the layout may be structured in certain shapes so that make users’ eyes easily find core information. For example, if we place the content in a triangular shape placing the vital component on its top, people’ eyes will automatically go to the peak.

web design UI concept tubik studio

The Big Landscape

 

Psychology of shapes plays a big role in typography. There is a great number of typefaces and all of them have their individual impact on visual perception. Some kinds apply round shapes as a dominant and they seem more feminine and mild unlike those with straight lines and sharp angles which are more formal and sometimes aggressive. That’s why it’s important to pay attention what shapes are dominant in a chosen font to avoid a conflict between the context and visual presentation.

 

The human mind is full of secrets and it’s often hard to predict possible reactions. However, the science of psychology helps designers be prepared and comprehend how our brain works, at least at some basic level. Knowing psychology of shapes designers are able to create proficient logos along with problem-solving user interfaces for web and mobile products.

 

Recommended reading

 

Color in Design: Influence on Users’ Actions.

Psychology in Design. Principles Helping to Understand Users.


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

ux writing tubik article

UX Writing. Let User Interface Speak.

During the last two years digital design community has been discussing a brand new trend called UX writing. The term appeared suddenly confusing many people, even some design professionals. Some think it’s a new name for UX design, others see it as copywriting related to the UX topic. In this article, we’ll figure out the meaning of UX writing and why tech world talks so much about it. Also, we’ll provide some practical tips on effective UX writing.

 

What’s UX writing?

 

The term may be new but the process has existed for a long time. UX writing is the practice of crafting copy which is directly used in user interfaces to guide users within a product and help them interact with it. The major aim of UX writing is to settle communication between users and a digital product.

 

Copy created by UX writers is also known as microcopy. The name tells for itself and stands for the small components of text which serve as hints for users. To be more specific, microcopy includes buttons and menu copy, error messages, security notes, terms and conditions, as well as any kind of instructions on product usage.

 

tubik studio page 404

Page 404

 

Why is UX writing needed?

 

Microcopy has always been a part of digital products, so why have people started to call the process of its creation UX writing? Let’s get it straight.

 

One of the first reasons leading to UX writing appearance is growing attention to the role of copy in UI. Marketing and design specialists have agreed that copy content is a significant element influencing both UI and UX. Bad-written copy can ruin even a really good-looking user interface. As for the microcopy, various user tests have shown that it affects user experience as well as the information architecture and navigation system do.

 

If we look at a product from users’ perspective, we’ll see how useful small copy hints are for them. When people start their journey in new software, short text tips make the process of adaptation fast and easy. Moreover, if menu copy is written professionally, the navigation system is much more clear to use.

 

Considering the positive impact of microcopy on user experience, the new direction appeared in copywriting. At this point, we can expand the essence of UX writing and say that it’s a process of building microcopy elements which aim at improving user experience of a website or app.

 

tutorial_design_tubik_studio

Shauts App Tutorial

 

Who has to do UX writing?

 

We defined the essence of UX writing still one question remains open. Whose duty is it?

 

The direction couldn’t be formed by itself, so, obviously, there are specialists standing behind it. A job of UX writer grows its potential and today we can see more and more offers from companies. They are writers specializing in creating microcopy which aims at boosting pleasant user experience and improving navigation system.

 

UX writing is still a green direction, the reason why the task of microcopy creation often lays upon marketers and copywriters. These professionals have been writing microcopy long before a term of UX writing appeared and they continue doing it as one of the parts of their work.

 

However, it’s not only writers who can create copy for UX. Designers also often try themselves in UX writing. They may not be the specialists in copy creation still they know everything about the information architecture and navigation system of a product. Moreover, UI/UX designers research the target audience peculiarities, so they know how to present visual information for user perception.

 

Copywriters and designers can do UX writing separately but to improve outcome it’s always a good idea to collaborate and share the experience. Together IA professionals, designers and copywriters can successfully create UX copy content and this is how it is often done by many companies today. However, if a company handles many projects which involve much of UX writing, it is reasonable to consider hiring a UX writer to gain maximum productivity for all the team.

 

gourmet_website_interactions_tubik

The Gourmet Website

 

What makes efficient UX writing

 

Some may think that UX writing takes a few minutes to be done since it includes only small pieces of text. However, creation of a powerful phrase for a CTA button sometimes can take much more time and effort than writing of a whole body copy.

 

Microcopy usually can vary from one word to short sentences which should perform numerous functions. So, if we say that in UX writing every word counts, it won’t be an hyperbola. A single word should both help users to get oriented as well as encourage them to stick around. Moreover, there is often a business goal standing behind CTA buttons, so this factor should also be considered during UX writing.

 

The sufficient UX copy needs to be clear and consistent. Users don’t have to figure out what you mean. Copy should be simple so that people could interact with product intuitively. If users don’t notice they’ve been guided, UX writing has been done well. In addition, UX writing, as any other copy content, should be based on the context and the target audience.

 

In addition, we need to say that copy is a design element the reason why its effectiveness highly depends on the visual presentation. UX writers need to make sure it looks good and fits the design composition. Such a condition creates constraints for a writer about the amount of copy and its appearance.

 

web_ui_design_tubik

Digital Agency Landing Page

 

Practical tips on UX writing

 

The experts are still working on developing the direction to set the best techniques and methods of the effective UX writing. However, there are some sufficient tips helping to make sure UX copy will work well.

 

Step into users’ shoes. If you want to create useful copy, you need to understand where users need help. User research assists to learn the target audience and knowing their specialties you can assume what hints people need.

 

Don’t use complicated vocabulary. As we said above, one of the major characteristics of effective UX writing is clarity and simplicity. Copy should be easy to perceive that’s why difficult words may not work well.

 

Write short and then cut it into half. Microcopy received its name not by coincidence. It has to be short but meaningful so that it wouldn’t draw too much attention, only slightly guiding people from one point to another.

 

Test the copy on various users. You can be a guru of writing and UX design still user testing never hurts. If you don’t have anyone who would match the target audience, at least test copy on your co-workers or friends and ask them what they feel about it.

 

Be creative. Microcopy typically includes only short informative messages but it doesn’t mean you have to make it boring. Try to be creative and bring some positive emotions. For example, writing an error message you can use some polite jokes. It breaks tension which may appear if users do something wrong and encourage them to stick around. Just remember to make sure your creativity doesn’t go too far and the target audience will react appropriately.

 

Add images. In case of error messages or onboarding instructions, it can be a good idea to supplement them with funny and pretty images. You can use photos as well as custom illustrations which will strengthen the right message of a copy.

 

Reflect brand voice. Don’t forget that instructions which a product gives to users are always perceived as a voice of a brand. So, before you write copy you need to learn about brand nature so that microcopy would sound accordingly to the brand image.

 

web design tubik studio

Page 404

 

UX writing is a new direction which is full of potential. UX professionals need to consider it as an another essential tool on the way to the improved user interaction and boosted satisfaction from a product.

 

Recommended reading

 

10 UX copywriting tips for designers

5 Ideas for Better UX Writing

UX Writing: How to do it like Google with this powerful checklist

Copywriting in UI. Words that Make Design Go Round.


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