Tag Archives: graphic design

Articles about graphic design for mobile applications and websites, brand identity, creating illustrations, characters and mascots, logo design, typography and lettering.

design for business tubik blog

UX Design for B2B: Businesslike Strategies and Tips.

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

 

What is B2B?

 

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

 

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

 

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

 

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

 

design for business

 

Aspects to consider in design for B2B

 

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

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

 

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

 

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

 

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

 

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

 

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

ux_design_practices_article

 

Design strategies for B2B

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

usability_interfaces_ux_design_tubik

 

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

 

Recommended reading

 

UX Design for E-Commerce: Principles and Strategies.

The Role of Branding in UI Design

Business-Oriented Design. Know Your Target.

Short but Vital. Key Abbreviations in Design for Business.

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

Two Types of User Motivation: Design to Satisfy.

Sell Like Hotcakes: UI Designs for E-Commerce.

Feel Homey. Handy Tips for Home Page Design.

Landing Page. Direct Flight to High Conversion.

11 Profitable Strategies for E-commerce UI Design


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

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

typography tips for designers

20 Wise Thoughts by Typography Master Erik Spiekermann

Good design is often based on a careful mix of tradition and innovation. And revolutionary inventions are solidly based on the findings by previous generations of professionals. So, whatever a domain of creative work you have chosen as your job, it’s important to sometimes stop and look back, listening to wise and experienced voices of people being in that job for years.

 

Earlier we have already shared numerous expert quotes, tips, video talks and books worth reviewing to support our readers with useful resources. In particular, you could check the insights into Design Is a Job by Mike Monteiro and  Designing for Emotion by Aarron Walter—the books belong to the series A Book Apart for designers offering the diversity of expert tips, case studies, and resources. Today continuing on this way, we are sharing a new set of quotes by Erik Spiekermann, a famous German typographer, designer and writer, an honorary professor at the University of the Arts Bremen and ArtCenter College of Design. Having passed the long way in graphic design from 1970s, being an author of books and articles as well as awards winner, he is justly recognized as a guru of typography and avidly shares his experience and expertise. So, here we will save a bunch of 20 useful expert tips for Tubik Quotes Collection — we got them from his blog, his interview for 99U and other published writings.  Join in and let’s look into his thoughts together to know a bit more about the master.

 

erik spiekermann photo

 

I’m very much a word person, so that’s why typography for me is the obvious extension. It just makes my words visible.

 

Inher­ent qual­ity is part of absolute qual­ity and with­out it things will appear shoddy. The users may not know why, but they always sense it.

 

These days, information is a commodity being sold. And designers—including the newly defined subset of information designers and information architects—have a responsible role to play. We are interpreters, not merely translators, between sender and receiver. What we say and how we say it makes a difference. If we want to speak to people, we need to know their language. In order to design for understanding, we need to understand design.

 

Erik Spiekermann Quotes Design 06

 

The materials shape your idea.

 

I learned that a brand isn’t a logo. There has to be implementation. You can design anything, but if the rubber doesn’t hit the road, you’ll be remembered as a great strategist but the client won’t call you again. You have to have a strategy, and you also have to be able to visualize it—one doesn’t go without the other.

 

Erik Spiekermann Quotes Design 05

The attention someone gives to what he or she makes is reflected in the end result, whether it is obvious or not.

 

I’ve always designed typefaces for specific solutions. In other words, a problem. Everything has always been done for a specific purpose. As a designer, you work for somebody else. That’s not negative. I work for a client, and I solve their problems. I bring my artistic vision to it, my creativity, whatever you want to call it. But essentially, I’m being paid to blow somebody else’s trumpet.

 

You are what you are seen to be.

 

Erik Spiekermann Quotes Design 04

 

The function has to be the brand. If it works well, it has to be branded at the same time.

 

If a design project is to be considered successful—and success is the true measure of quality—it must not only add an aesthetic dimension, but solve the problem at hand.

 

I mean, everyone puts their history into their work.

Erik Spiekermann Quotes Design 02

 

When I do typography, it’s 150 percent effort.

 

I know a lot of advertising agencies that thrive on overtime because they have a dozen interns who work for free and they spend their weekends doing free pitches. We don’t do free pitches because we don’t have any free time. Our time is valuable, and I’m not giving away ideas to some prospective client. That’s giving away the most valuable resource you have.

 

Work is gas. Work will fill any given volume.

Erik Spiekermann Quotes Design 03

 

 

Clients need to understand that they’ve hired us to do something they are not good at. And that they need to pay us for our knowledge, skills, experience and, yes: attitude.

 

 

My advice, now and always, is learn, learn, learn—starting right here.

 

Contrary to popular belief, designers are not artists. We employ artistic methods to visualize thinking and process, but, unlike artists, we work to solve a client’s problem, not present our own view of the world.

Erik Spiekermann Quotes Design 07

Being a designer is all about attitude. Sure, you have to know your craft, but as we both found out, you can pick most of that up over time if you’re prepared to listen, watch, and learn. Without the right attitude, however, you’ll always be a vendor to some people, a crazy artist to others.

 

So what’s new? The present generation of UI/UX designers may think that they invented a new way of designing, but we’ve had these issues forever. Trying to fit a lot of text onto the how-to page inside a pharmaceutical package is probably more difficult than doing the same on a screen. There’s no zoom on that paper, so it has to be really well done just for that one version and circumstance. My method? Think. Consider. Sketch. Think again. And look around you. It’s all been done before, albeit with different code.

 

Inspiration. From real life. I open my eyes and I travel and I look. And I read everything.

 

Erik Spiekermann Quotes Design 01

 

Bonus: video talks with Erik Spiekermann on design, typography and life lessons

 

Typographic Design in the Digital Domain

 

 

Erik Spiekermann: Typomaniac

 

 

Erik Spiekermann – Type Is Visible Language

 


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

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

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

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

most popular design articles in tubik blog

20 Most-Read Design Articles by Tubik in 2017

The year melting away has been really fruitful for Tubik Blog: we shared around 100 articles and case studies with our readers and subscribers. Striking the balance of 2017, today we have collected here the list of posts which were most-read, shared and liked during the year. They are devoted to the variety of design issues in the domains of UI and UX, information architecture, logo and branding, design for business and marketing. So, welcome to review them together to check what themes have been found the most actual.

 

home page design article

 

20 most popular articles

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

Tips on Applying Copy Content in User Interfaces: considerations on some essential points on the effective use of text in web and mobile user interfaces: visual hierarchy principles for copy content.

 

Gamification in UX. Increasing User Engagement: the post is centered on the aspect of gamification applied to mobile applications and websites for engaging UX design and user-friendly interactions.

 

Typography in UI: Guide for Beginners: In design, every layout element plays its role. This post presents the insights into the basics of typography for web and mobile UI to make the copy powerful and effective.

 

Case Study: Upper App. UI Design for To-Do List: the case study about UI design created by the Tubik team for Upper App, simple and elegant free to-do list, motivating users and boosting productivity.

 

Case Study: Vinny’s Bakery. UI Design for E-Commerce: the design case study that looks and feels tasty: check the details of UI/UX and animation for a website presenting a small elite bakery selling home-made bread.

 

Lean and Mean: Power of Minimalism in UI Design: dive into cases when less is more: the definition, history, features and benefits of minimalism applied in UI design for websites and mobile applications.

 

Knock Design into Shape. Psychology of Shapes: the psychology of shapes is helpful for creating user-friendly interfaces. The post features the meanings of different shapes and their influence on design solutions.

 

UX Design for E-Commerce: Principles and Strategies: the general insights on design for e-commerce websites and mobile applications in business, UX and UI perspectives: tips and strategies to consider.

 

Feel Homey. Handy Tips for Home Page Design: the set of effective tips enhancing usability of home pages for various websites. Check the design strategies for information, interaction and appearance.

 

Golden Ratio. Bring Balance in UI Design: The article devoted to golden ratio as an effective technique for web and mobile user interfaces: check how it brings balance and aesthetics into UI design.

 

Bonus: Free ebook and the review of 2017 design trends

 

Problem-Solving Web Design. Free E-Book by Tubik: the free e-book by the Tubik team presents the overview of theory, practices and design cases for user-friendly websites and landing pages.

 

Review of Popular Interface Design Trends in 2017 — traditional year-in-review post observing the most popular trends of 2017 in user interface design for websites and mobile applications: UX approaches and examples.

 

most popular design articles in tubik blog

 

Wishing you great holidays and productive new year, we are already working over a new plan to write content which is helpful and useful for the global design community. Huge thanks to all our readers for support and loyalty and best regards from all the Tubik team!


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

logo_design_tips_tubik_blog

Shape and Color in Logo Design. Practical Cases.

Paul Rand said that design is the silent ambassador of your brand. Continuing his thought we can add that a logo design is a heart of a brand identity which presents a personality of a company or a product. If you want to set the connection with the target audience and tell the story of a brand, starting with a logo would be a good choice.

 

Today we describe visual components of a logo which are vital for compelling visual perception and also show practical cases of applying psychology of color and shapes in design for branding.

 

Psychology in logo design

 

To make an effective logo, designers have to consider the tiniest components which it is built of and think about the influence they will have on potential clients. The science studying the impact of various factors on human’s mind and behavior is known as psychology. Knowledge of psychological principles helps to understand human aspirations and motivations which means designers can predict the possible users’ reactions to the certain solutions.

 

People may not notice but mind often reacts to visual objects affecting the emotions and behavior. In our previous articles, we described two psychology branches which study the impact of shapes and colors on people’s visual perception. In short, each color and shape tends to be perceived with its own meaning, so when we look at a visual object our brain receives the certain message and reacts according to what we see.

 

Comprehending the role of the color and shape psychology, design expert can control the meaning a logo contributes. Each component chosen thoughtfully helps people read the meaning of the logo right.

 

logo design

 

Color in logo design

 

The research provided by Colorcom showed that it takes only 90 seconds for people to make a subconscious judgment about a product and between 62% and 90% of that assessment is based on color alone. That’s why the success of the brand strategy depends largely upon the colors chosen for the logo design.

 

Colors are a vital factor for not only the visual appearance of products but also brand recognition. In the article Color in Design: Influence on Users’ Actions we described the meanings of common colors in branding and here is a short sum up.

 

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.

 

The color choice shouldn’t be based on the common meaning alone. Visual perception is quite individual for everyone so the color effects may be different because of the factors such as age, culture, and gender. For example, children like yellow color pretty much, but as we become adults it usually seems less attractive. Moreover, there are many cultural differences in color definition. To make sure the color will work effectively for a brand strategy, it’s vital to consider the preferences of the target audience.

 

andre logo design by tubik

 

Shape in logo design

 

As we already mentioned in the article devoted to the psychology of shapes, all the visual objects can be analyzed in terms of shape. People may not always notice what figures and shapes surround them still they have a great impact on our consciousness and behavior. 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.

 

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
Spirals meanings: growth, creativity, calmness, intelligence
Natural shapes meanings: originality, organic, balance, refreshment
Abstract shapes meanings: the duality of meaning, uniqueness, elaborate.

 

Creating a logo, designers should work on the shapes applied as well as pay attention to the typeface chosen for the wordmark.

 

passfold-logo-tubikstudio

 

Practical cases

 

Tubik designers have great experience in creating compelling brand signs. Let’s see the logo design examples applying color and shape psychology.

 

LunnScape

 

The logo was created for LunnScape company specializing in landscaping services to commercial properties like office and courtyard spaces, parks etc. A brand sign is presented with a mascot of a dragonfly. LunnScape company is based in Florida and the creature is a perfect representative of a regional fauna. Moreover, a logo with an insect helps customers understand the nature of the services.

 

The dragonfly illustration has a simplified style so its wings look like flower leaves. The logo consists of several colors. Turquoise circle with a dragonfly gives a solid stamp effect and brings calming feelings. Also, the color is associated with refreshment and energy, so it creates the right mood around the brand. The wings of the dragonfly combine yellow and pink colors. Together these colors symbolize joy, warmth and a bit of sensitivity making a dragonfly look playful. The wordmark typography complements and also unveils the core brand services of the company due to the thin and elegant font.

 

lunnscape_logo_final-version

 

Andre

 

One more identity design project connected to the theme of landscape and nature was logo for Andre Landscape. The final choice was made on the combination mark presenting the mascot in clear simple forms and elegant lettering echoing the rounded shapes. Symbol resulted in a new shape combining the visual concept of a bird and of a leaf in one image based on the circle. The rounded shape is easily associated with universe and eternity, quite positive stuff to transfer the idea of professional land care. Color combination is also connected with the nature of the offered services with vibes of green and natural background.

andre logo design by Tubik

 

Binned

 

This is the brand sign for trash bin cleaning service called Binned. A logo is presented with a lettermark featuring capital B as it associates with the brand name. The lines in the letter take the shape of waves evoking a sense of water and cleanliness. The logo is followed by the wordmark of the entire brand name. The chosen font is simple yet bold which makes it look neat and reflecting the mood of a brand.

 

The color palette includes tints of blue and green which give string associations of cleanness and refreshment. In addition, the blue color often represents some corporate images since the blue is the color of trust. It usually shows reliability, may give users calming feelings.

 

binned logo animation design

 

Reborn

 

The logo presents a self-service Chinese restaurant Reborn. The major philosophy of a brand is bringing in the modern way of automated ordering food in the restaurant industry and setting the link between traditions of healthy food and innovations. To transfer all these ideas and create the effective brand image, the red silk ribbon was featured as the initial letter in the wordmark.

 

The ribbon creates spiral shapes which bring the feeling of creativity and innovation. Moreover, it features the slight movement showing the restaurant as a modern business which moves with times.

 

Red is a traditional Chinese color so a logo lets customers understand the specifics of cuisine served at the restaurant. Also, red color demonstrates the confidence and youth of the service as well as contributes to better brand awareness due to its brightness.

brand identity design case study

 

Motion

 

This is a logo concept for modern dance studio called Motion. The company participates in multiple directions of the dancing sphere like organizing classes and workshops, events and tournaments.

 

The brand sign has a shape of a circle. Originally, this shape symbolizes eternity since it has no beginning or end. This way, a logo highlights the diversity of company services. Moreover, one of the common meanings for circles is motion so it perfectly reflects the brand’s name.

 

This logo concept provides the variety of color performance showing the flexibility of general brand strategy. The presented options include yellow, green, and blue colors. Yellow is a principal color which brings the warm and playful emotions. Green and blue colors symbolize balance and harmony.

 

motion_tubik_studio_icon_logo_branding

 

OrBeat

 

Another round logo was designed for OrBeat, the online platform for sharing digitized sound material like music, speech and specific sound sets on the Internet. In addition, the service has the functionality of a social network so the shape sets the association with the circle of friends. Users can create their unique playlists, leave comments, listen to the tracks online and share their sound collection with friends from other social networks.

 

So, setting the connection with the themes of music adding dynamics to everyday life, communication and expressing the metaphor of orbit, the logo is based on rounded shapes and features the variety of shades associated with diverse content on the platform.

 

Logo design by Tubik

 

Whizzly

 

The logo is made for the social network Whizzly showcasing talents and sharing creative projects. The mascot is a monkey which looks quite pretentious because of the sunglasses. The choice of the character can be explained by the common associations connected with this animal. Monkeys are energetic funny representatives of fauna and they know how to draw attention. Rounded forms make the image dynamic and friendly.

 

As the brand’s target audience are talented people, the monkey displays their eccentricity. The colors include the gradient of violet and blue. They are easily associated with the lights which are often used on the stage. Also, we can see the reflection of the brand’s name in the sunglasses. It ensures better brand recognition.

 

whizzly_mascot_logo_design_tubik

 

fOxygenic

 

Here’s the concept applying branding symbol for an app icon. It features a logo for fOxygenic, a mobile application which represents a social network for people loving the active life, open-air sports and events. As you see, the mascot is based on round shape. It may set different levels of association by the resemblance with “O” letter for the word «oxygen» applied in the brand name, motion and active life and the circle of friends as well as in OrBeat logo. Bright warm orange color reflects not only the traditional vision of a fox coloring but also the idea of dynamic life, joy, and great mood. Moreover, the color has high visibility potential which strengthens the icon’s recognizability.

 

logo design tubik studio

 

SwitchUp

 

This is a branding sign for a music app SwitchUp with broad functionality on generating and sharing playlists. A logo features a wordmark and the form of a play button. This shape helps to set the link with the nature of the application. In addition, the keywords behind its branding are “bright”, “dynamic”, “fun” and “positive”, the reason why the triangle is an accurate choice. The thing is that triangle is an energetic and dynamic shape which is associated with motion and direction. The color palette supplements the brand image bringing the feeling of energy and freshness.

logo design music app tubik studio

 

Meditrack

 

The logo concept was designed for a medical app Meditrack used by doctors for planning and organizing the flow of appointments as well as tracking and saving health data for patients. It features the stylized track sign where straight lines go up and down similar to heart rating graph. The combination of blue, light blue and red colors is often associated with health care industry so creates a professional image for a brand.

meditrack_tubik_studio_icon_logo

 

The success of branding highly relates to a logo design. Considering the influence of colors and shape on human psychology, you can create compelling brand signs which set the connection with the target audience by transferring accurate messages and emotions.

 

animated logo design

 

Recommended reading

 

Knock Design Into Shape. Psychology of Shapes.

Color in Design: Influence on Users’ Actions.

Don’t Stay Still. Why Brand Needs an Animated Logo.

Psychology in Design. Principles Helping to Understand Users.

Logo Design: Creative Stages.

6 Creative Stages of Branding Design: Step-by-Step Guide.


If you want to know more about creative stages of the design process for logos, welcome to read our free e-book «Logo Design».

Welcome to see designs by Tubik 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

choice of color in UI design

Color Matters. 6 Tips on Choosing UI Colors.

User experience design involves many processes which need to be done thoughtfully so that an interface would meet the needs of the target audience. Each step requires deep attention to details, even if it doesn’t seem too complicated.

 

One of the time-consuming still vital stages in UI creation is color choice. Designers sometimes can spend hours to pick up the right color palette. In this article, we’ll describe six useful tips helping designers choose powerful colors for UI and make this process easier and more productive.

 

Tip 1. Learn 60–30–10 rule

 

This rule, or technique, came from the interior design, so it is often applied for house decorating. The idea is simple. To bring the balance into the composition, the colors should be combined in the proportion of 60%–30%–10%. The biggest part should go to the dominant hue, the third of the composition takes secondary color and 10% percent goes to the color which helps to make the accents.

 

Such a proportion is thought to be pleasant for human eyes since it allows perceiving all the visual elements gradually. Knowing the appropriate proportion designers can successfully combine the colors without risks of turning UI into a colorful mess.

 

web_ui_design_tubik

Digital Agency Landing Page

 

Tip 2. Contrast is a friend

 

Color contrast is a key part of any visual composition. It brings the individuality for each UI element and makes all of them noticeable. User interfaces containing only shades from the same color family have fewer chances to draw users’ attention. Moreover, copy content in this UI will look illegible which make the interactions with a product almost impossible.

 

Designers control the level of contrast depending on the goals it is supposed to accomplish. For example, if you need users to pay special attention to the specific UI elements, it’s a good idea to apply two highly contrasting colors such as blue and red. High contrast is often used for CTA buttons design.

 

However, speaking of UI as a whole composition, high level of color contrast may not always work well. If copy content and the background colors contrast each other too much, it will be difficult to read or scan the text. That’s why designers are recommended to create a mild level of contrast and apply high contrasting colors only for highlighting elements. User-testing on various devices can help designers to make sure of the effectiveness of their solutions.

 

choice of color in UI design

Urban Sketcher App

 

Tip 3. Consider psychology of colors

 

As we’ve mentioned in our previous articles, psychology is one of the basic studies helping in design workflow. There is a branch of psychology showing the influence of colors on human mood and behavior called color psychology. It states that our mind reacts to colors while we usually do not notice it. When human eyes perceive a color, our brain gives signals to the endocrine system releasing hormones responsible for the mood and emotions.

 

Each color has its own influence on our mind and the knowledge of the possible reactions can help designers to transfer the right message and call users to make the expected action. Here is a short list of color meanings.

 

Red. It symbolizes both good and bad feelings including love, confidence, passion, and anger.
Orange. An energetic and warm color bringing the feelings of excitement.
Yellow. This is the color of happiness, the sunlight, joy, and warmth.
Green. The color of nature which brings calming and renewing feelings.
Blue. It often represents some corporate images. May be associated with distance and sadness.
Purple. Long associated with royalty and wealth. It’s also a color of a mystery and magic.
Black. It associates with a tragedy and death and signifies a mystery. At the same time, it can be traditional and modern.
White. The color means purity and innocence, as well as wholeness and clarity.

 

In addition, designers need to remember that visual perception is quite individual for everyone. Such factors as age and gender have a great impact on color preferences, so it’s vital to know the target audience peculiarities. You can find the detailed description of color meanings and preferences in our previous article.

dance academy landing page

Dance Academy Website

 

Tip 4. Don’t forget cultural differences

 

Each culture has its own traditions and beliefs, so before you choose the colors, you need to make sure that they will be interpreted the way you mean. The thing is that sometimes one color may have absolutely opposite meanings in different countries. For example, in European countries white color signifies purity and it is often used at the weddings while in many Asian countries this color means death and sorrow. Incorrect usage may lead to misunderstandings which could be fatal for a product. By acknowledging the specialties of culture’s color perception designers decrease risks of being misconceived.

 

Tip 5. Strive to color harmony

Harmony is what UI design strives to. To make users feel pleased and comfortable, designers try to bring the balance into user interface design. The color harmony is about the arrangement of the colors in design in the most attractive and effective way for users’ perception. Harmonic colors contribute to a nice first impression from the website or application.

 

After years of searching, designers distinguished the basic color schemes that work effectively. Let’s see what they are.

Monochromatic. Color harmony is based on one color with various tones and shades of it.

Analogous. The scheme applies colors located right next to each other on the color wheel.

Complementary. It is the mix of colors placed in front of each other on the color wheel and it aims to produce high contrast.

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.

Triadic. It is based on three separate colors which are equidistant on the color wheel. Professionals recommend to use one color as a dominant, the others as accents.

Tetradic/Double-Complementary. The tetradic color scheme employs four colors from the wheel which are complementary pairs. If you connect the points on the chosen colors they form the rectangle.

 

color theory design tubik

Source

 

Detailed information and examples of color harmony can be found in our article Color Theory: Brief Guide for Designers.

 

Tip 6. Steal ideas from nature

 

Mother nature is the best artist and designer in the world. Color combinations which we can see in the natural environment are always close to perfect. People enjoy watching sunsets and dawns, autumn forests and winter mountains since they are full of natural color combinations.

 

So, why don’t you try to borrow a few ideas? Go for a walk or search for beautiful nature photos and you will definitely find the inspiration.

 

web ui design city guide

Big City Guide

 

The success of a digital product depends largely upon the colors chosen for its UI. The right colors help users feel comfortable with a product. Designers can put people in the frame of mind that compels them to take action just by applying the appropriate color palette. Make your choices wisely.

 

Recommended reading

 

Color Theory: Brief Guide For Designers.

Color in Design: Influence on Users’ Actions.

Color in UI Design. Look on the Bright Side.

Dark Side of UI. Benefits of Dark Background.

3C of Interface Design: Color, Contrast, Content.


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

usability_interfaces_ux_design_tubik

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

«Simplicity is the ultimate sophistication,» said genius Leonardo da Vinci, and this eternal truth is as fair now as it was several centuries ago. Such an approach in design for web and mobile interfaces results in human-centered products which are pleasant and easy in use. Make no mistake, simple doesn’t mean empty, primitive or monofunctional. Instead, it means clear, intuitive and helpful. Really simple products not only solve user’s problems but also do it in an optimal way in the aspects of times and effort.

 

We aren’t often thinking in terms of love and respect when it comes to digital products. We can describe them in tons of other words featuring appearance (like beautiful, elegant, interesting etc.) or functionality (like intuitive, easy-to-use, confusing etc.) or content (like informative, consistent etc.) but you rarely can hear that someone names a website or app respectful. However, respect for user’s time and energy is one of the vital goals which designers should strive to achieve in the product they work on. This approach is a great factor of usability and desirability. Today we would like to share some advice and techniques which could become supportive of this aim. These tips aren’t reinventing the wheel but present a helpful checklist for design outcome. So, let’s check what designers can do to save time and effort for users.

visual hierarchy in UI design

 

1. Put the core data into header

 

Talking about websites, it is an extremely helpful idea for quick and easy navigation. The only problem is to decide on what core data is, especially for websites with a huge amount of various data, like big e-commerce websites, news platforms or multi-theme blogs. Header is a strategic part as people see it before scrolling the page in the first seconds of introduction to the website. Being a sign of invitation, header should provide the key information about the digital product so that users could scan it in split seconds.

 

In our article telling about web headers design in detail, we provided the typical kinds of content which can be included into headers:

 

  • basic elements of brand identity: logo, brand name lettering, slogan or company statement, corporate mascot, photo presenting the company or its leader, corporate colors etc.
  • copy block setting the theme of the product or service presented
  • links to basic categories of website content
  • links to the most important social networks
  • basic contact information (telephone number, e-mail etc.)
  • switcher of the languages in case of multi-lingual interface
  • search field
  • subscription field
  • links to interaction with the product such as trial version, downloading from the AppStore etc.

 

It doesn’t mean that all the mentioned elements should be included in one web page header: in this case, the risk is high that the header section would be overloaded with information. The more objects attract user’s attention, the harder it is to concentrate on the vital ones. Here designers, preferably together with marketing specialists and stakeholders, need to decide on the strategically important options and pick them up from the list or add the others.

Why is header so essential? Eye-tracking investigations show that whichever scanning model a particular user follows, the scanning process will start in the top horizontal area of the webpage. Using it for showing the core information and branding is a strategy supporting both sides: readers scan the key data quickly while website gets the chance to retain them if it’s presented properly. That is the basic reason why header design is an essential issue for UI/UX designers as well as content and promotion specialists.

gourmet_website_interactions_tubik

 

2. Make branding highly visual

 

In terms of the discussed topic, brand 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. This image can be created in tons of diverse ways — visual, verbal, touchable etc. In web and mobile design, branding supposedly means a set of visual elements defining the brand style, which can be applied in the interfaces such as logo, typography, brand colors and the like. All of them together are a powerful tool for creating visual recognizability of the product as well as its style. Being based on the analysis of target audience and marketing/ customer research, branding in this sense plays the vital role in product promotion as visual perception is very fast and easy for most people, much easier than reading the text and much more memorable than listening to speech. Moreover, if the brand is already well-established, its signs observed in the first seconds of seeing a website or app increase the level of trust.

Bakery website design case study tubik

 

3. Use numbers, not words

 

One of the investigations of user behavior provided by Nielsen Norman Blog shared an interesting finding: based on eye-tracking studies while users scan web pages, numerals often stop the wandering eye and attract fixations, even when they’re embedded within a mass of words that users otherwise ignore. People subconsciously associate numbers with facts, stats, sizes and distance — something potentially useful for them. So they are hooked with the numbers included in copy while words representing numerals can be missed in the bulk of text. Even more, whatever numbers represent, they are more compact than their textual variant, which enables to make the content more concise and time-saving for skimming the data.

 

4. Make the call-to-action (CTA) instantly noticeable

 

A call to action (CTA) is actually a word of phrase stimulating users to interact with a product in a way and for the aim it is designed for. CTA elements are the interactive controls which enable users to do the action they are called to. Common types of such interactive elements in the layout are buttons, tabs, or links. In the interfaces of all kinds, CTA elements are the core factor of effective interaction with the product, which plays the crucial role in usability and navigability. When all the path of interaction and transitions is built clearly for users but CTA element is not thought-out, placed or designed well, users can get confused and will need to take additional effort trying to achieve their goals. That sets the high risk for poor conversion rate and general user experience. That’s why this navigation element should draw particularly deep designers attention. In any interface, it should be one of the most prominent and quickly noticeable parts to inform users how the product can be helpful or useful for them.

bookshop website animation

 

5. Care about general page scannability

 

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. This significant domain of user research is massively supported by Nielsen Norman Group and provides designers and usability specialists with the better understanding of user behavior and interactions. Different experiments collecting data on user eye-tracking have shown that there are several typical models along which visitors usually scan the website. In the article about 3 design layouts, the author Steven Bradley mentions the following common models: Gutenberg Diagram, Z-Pattern, And F-Pattern.

reading pattern

Gutenberg Diagram

 

reading pattern zig-zag

Z-Pattern

 

f_reading_pattern_eyetracking

F-Pattern

 

Knowing these models, designers and information architects can build navigation and important data in the points where they have the highest chances to be seen and get the user interested. The well-thought-out visual hierarchy will make the page easily skimmed saving users’ time and energy.

design for users copy in UI

 

6. Check the icons perception

 

Icons are pictograms or ideograms used in the web or mobile interface to support its usability and provide the successful flow of human-computer interaction. It’s hard to overestimate their role in UI navigation: they make it much quicker as most users perceive images faster than words. Usage of recognizable and clear icons has a great potential for boosting usability. However, even the slightest misperception can become the reason of poor UX so the solutions on the type of icons should be carefully tested and if needed supported with the appropriate copy content.

 

7. Strengthen the message with theme images and hero banners

 

No secret, in many cases an image is worth a thousand words. In web and mobile UI it often works that way: images become highly supportive and effective in setting the mood or transferring the message. In addition, images present the part of the content which is both informative and emotionally appealing. Original illustration, prominent hero banners, engaging photos can satisfy multiple goals: 

  • 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.

dance academy landing page animation

 

8. Talk to users in their language

 

Copy content plays the crucial role for communication with the user. Not only is its effective visual presentation significant for high page performance: the style, structure, and vocabulary should also correspond to user’s expectation from a page. Usage of too formal or business-like style in an entertainment app for teenagers, or vice versa too informal style on the luxury website selling elite real estate — there can be hundreds of cases when copy doesn’t follow business goals as well as habits and needs of a target audience. That kind of content inconsistency can be confusing and move the users away from the website or app. User research will be effective for this issue to see what way users want to communicate while a professional copywriter will help to strengthen design with the power of words.

web_ui_design_tubik

 

9. Use the power of Gestalt principles

 

Gestalt is the term meaning «shape, form». It is used primarily in cognitive psychology for the field exploring the laws of meaningful perception of the data which people constantly get from the world that seems primarily chaotic. It works on different levels of perception, but the visual part seems to be the most interesting for designers creating interfaces. It helps understand the psychology of the app or website users better. When designers know the factors influencing visual perception, it makes the process of UX design much more proficient giving higher rates of successful interactions and lowering the level of misunderstandings users could get on this way.

gestalt-theory-grouping_principles

Source
 

For example, applying the principles of similarity and proximity, designers can group the layout elements according to human cognitive abilities, so that users could perceive them in the most natural and convenient way.

bright_vibe_calendar_app_ui_tubik

 

10. Optimize visual content

 

Whatever interesting, attractive and informative is the interface, there is the invisible factor which can erase all the benefits — the loading speed. If the visual content — images, animations, video — applied to an interface is too heavy or doesn’t perform well on different devices, the risks are high to lose users before they will understand the strong points of the product. In terms of high competition, with loads of websites and application, be sure: users aren’t going to wait, they will head for the more convenient and quick alternative even if it loses in a number of points. Optimization and persistent testing of visual content is the real sign of respect to the user boosting less time-consuming flow of interaction.

website design UI

 

Hopefully, this list will be helpful for those who are aimed at creating positive user experience. Don’t miss the updates — new practical tips and inspiration are coming very soon.

 

Useful articles

 

This set of articles can be useful to dive deeper into the points mentioned above

 

Best Practices for Website Header Design

The Role of Branding in UI Design

Visual Hierarchy: Effective UI Content Organization.

Gestalt Theory for Efficient UX: Principle of Similarity.

Gestalt Theory for UX Design: Principle of Proximity.

Copywriting in UI. Words that Make Design Go Round.

Small Elements, Big Impact: Types and Functions of UI Icons.

Tips on Applying Copy Content in User Interfaces.


Welcome to see designs by Tubik Studio on Dribbble and Behance