Tag Archives: product design

typography tips for designers

8 Typography Tips For Designers: How to Make Fonts Speak.

Typography is a way of communication with users. Visual performance and readability of copy in digital products have the great impact on user experience. One of guru graphic designers, Hoon Kim, once said: » Typographic design is visible as well as audible. If you have a great scenario, now it is time to cast good actors.» Typography can become a voice of design. Appropriate typography speaks for itself setting the right mood and transferring a certain message to users. Today’s article presents tips which will assist you in creating of effective typography.

 

Typographic hierarchy makes things work

 

To create a design pleasant for users’ perception, all its elements should be well organized and clear to navigate. Designers set a proper structure by establishing a visual hierarchy. It organizes all the visual elements so that users could easily perceive content.

 

Visual hierarchy can be divided into different parts. One of them relates only to the copy elements is called typographic hierarchy. It aims at organizing copy content by dividing it into various types such as headings, subheadings, body copy, captions and others. The differences between the types of copy are set by regulation of family, sizes, width, and colors of fonts.

 

Clear typographic hierarchy makes text legible and easy to scan. Moreover, it’s simple to highlight key parts of the text to draw users’ attention and hitch them to the expected actions.

 

mood messenger landing page

Mood Messenger Landing Page

 

Consider context and audience

 

When it comes to the choice of fonts, an essential thing to consider is a context of a copy and a potential audience. Each font brings its own mood to a layout. There are friendly, funny, serious, business, and many other fonts that will fit a certain design.

 

Before you choose a font, you need to learn your client’s goals as well as needs and preferences of a target audience. Visual performance of fonts influences the first impression users get from the product. If the kind of font doesn’t fit the mood which the product aims at, there can be a misunderstanding with the audience. For example, if a designer chooses a font which looks too fun and silly for a business website, users will hesitate if the company is trustworthy. Or, if a product is meant for youngsters, too formal fonts may seem boring.

 

web design florist store ecommerce

Florist E-Commerce Website

 

Deep attention to mobile typography

 

Designers often do the experiments with typography to make a project original. However, when it comes to mobile UI design, typographers are literally short of space. Mobile screens are quite small which sets a new challenge for designers to cope with restrictions without loss of sense and functionality. Mobile typography requires deep attention to the details from an appropriate size of fonts to compelling tracking and line length.

 

Compared to web design, mobile typography is harder to reach a good legibility. The font size shouldn’t be too small because on tiny screens it will look like an illegible mess. Moreover, if the text is too big, it won’t fit the small screen too. In addition, designers need to care about the level of contrast since a screen with ambient light and high contrast can hurt users’ eyes.

 

Furthermore, a designer should think of the typography functionality. Smartphone UI includes clickable text parts and designers need to make sure users manage to use them. If these parts are too small, people can’t press it with a finger and it’s rather annoying.

 

Considering all the tiny details in mobile typography, designers can bring valuable products for users.

 

UI animation wine app

WineYard App

 

Minimalism can’t hurt

 

Sometimes, when designers aim at showing all the facets of a digital product, they try to use lots of various styles and fonts all in a single design. As a result, they get a design overloaded with unnecessary distracting details and lacking a proper mood.

 

Experts usually try to keep a number of fonts within two or three for the same layout. It allows making an essential contrast between copy elements along with saving the balance and right message of a design. Applying different styles (bold, italic) should also be minimal. They are good for emphasizing really important parts but the overuse of them can make the text look messy.

 

Also, copy content shouldn’t overwhelm users with the unnecessary information. Of course, it’s a writer’s job to create appropriate text still designers need to collaborate with them to make sure the text will fit a design.

 

upper app UI design case study

Upper App

 

Text needs to breath

 

Legibility level highly relies on how much space there is between letters, words, and text lines. Tracking, kerning and leading are the processes of white space adjustment between the typographic elements. White space is the area between elements in a design composition.

 

A lack of white space may end in the bad legibility of copy content because it is difficult to distinguish words which are placed too tight to each other. Appropriate white space brings a visual relief to users’ eyes and allows going easily from one word to another, from one line to the next. However, try not to overuse it otherwise it can ruin text unity.

 

dance_academy_website_interactions_tubik

Dance Academy landing page

 

Build typography like a scientist, revise like an artist

 

Typography is a complex science consisting of many rules and regulations. Those who covered them are able to create clean working typography. However, it’s is not enough. Clients always require originality and emotion but it can’t be done only by following the written instruction.

 

Designers should never bury their artistic souls. Imagination and the sense of beauty bring the uniqueness in any project, even the most casual one. Find the balance between the strict rules and unordinary choices, and the results may surprise you and your customers.

 

web design UI tubik studio

The Gourmet Website

 

Colorful typography needs thoughtfulness

 

The topic is actively debated. Some think there is no room for color in typography and some claim it’s a must-have for good-looking design. There is no point in looking for the right side of the dispute because there is no accounting for taste. Nevertheless, colorful typography does exist and designers apply it quite often.

 

Among the advantages of colorful typography, let’s mention the element of emotion it adds to any UI as well as the ability to highlight points of interests for users. Moreover, each color may transfer a certain message since it has an influence on users’ mind and behavior.

 

To take all the benefits, colorful typography should be applied thoughtfully and carefully because it’s easy to turn UI into a colorful chaos. Here is the useful checklist for this case:

 

Make it contrast. A big problem which colorful typography may bring is bad legibility. Proper contrast between the fonts and background will help to avoid it. However, make sure the contrast looks pleasant and doesn’t hurt the eyes.
 
Don’t use too many colors. Again, try not to turn UI into a mess. Too many colors look distractive and amateur.
 
Color harmony. Remember the basics of art lessons. Use the color wheel and schemes to choose the proper palette.
 
Be careful with effects. Fluorescent, luminescent, metallic, and glowing colors have their peculiarities and they may not always look good on a digital screen.

 

book swap app interaction design

Book Swap App

 

Learn the basics of typography

 

It may sound too obvious still some designers ignore learning basics of typography science. They rely on modern tools which automatically choose the fonts or just hope aesthetic features of chosen fonts would be enough. Such an approach seems like learning to read without knowledge of the alphabet.

 

Designers who don’t know the concepts and the anatomy of typefaces can’t use the potential of typography at the full strength. Everyone decides for oneself if they need to learn the science in depth but the basics is a foundation of every craft.

 

The experts working on the problem of harmonical usage of fonts gladly share their knowledge that’s why there are so many useful books on typography for designers. As the recommended reading we can name

 

tubik typography and design books

 

Recommended reading

 

Here are some articles providing useful tips and tricks in typography.

Do’s and Don’Ts of Typography

The 8 biggest typography mistakes designers make

10 typography tricks every designer should know

Typography in UI: Guide for Beginners.

Tips on Applying Copy Content in User Interfaces


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

dance academy landing page design

Hit the Spot: Design Strategies for Profitable Landing Pages.

Every traveler knows it’s hard to find more annoying and upsetting experience than landing in the wrong place. It wastes the precious time and effort on looking for the needed spot right when you are full of nice expectations and ready for the best. No wonder, this story isn’t different when users go to the virtual journey around the Internet, especially having particular goals and destinations in mind. So, today let’s discuss how to make their landing soft and effective.

 

Definition of a landing page

 

In general terms, the phrase «landing page» was created by analogy with a landing spot in the physical world: in the web, it initially marked any page on which the user «landed» while surfing the Net and started their journey around the website. The phrase is still used in this meaning in terms of web analytics. However, more specific understanding of this term has become increasingly popular and widely used by not only designers but also marketing specialists. Today the term is used for a web page designed with a focus on specific relatively narrow goal and a quick way of accomplishing a particular action.

 

As for the goals, they can be different, still, the biggest diversity of landings is found in e-commerce sphere. This is the field in which they play the great role both for users and stakeholders, presenting the specific commercial offers without distraction in a helpful and attractive way. Creating special pages for every case means giving users directions, which is especially useful for big e-commerce platforms with hundreds or even thousands of items. Directing all the traffic to the home page in the case of such websites can open the big gate to poor user experience, especially when users come from particular marketing campaigns in outer resources. The risk is high that they will get lost immediately in the overwhelming amount of content and links on the home page or their attention will be driven away so the purchase won’t be finalized.

 

Furthermore, there are also many other cases beyond e-commerce when landing pages present a good point to consider: they can present the mobile applications or educational resources, promote events and meetings, make the announcements, introduce the communities or just share information. Anyway, the design process for any landing page starts from setting the clear and concise aim which should be achieved with its help.

 

tubikstudio ui design dark background

 

Conversion as a key metric

 

One of the core characteristics measuring the efficiency of a landing page is conversion. In basic terms, it is the outcome, the achieved goal which is set for the landing page. Conversion is the transformation of passive users into active, from reading, considering, watching and comparing to actual buying, downloading, trying, subscribing etc. Measuring conversions and improving landing pages to get this rate higher is the way to problem-solving design helping users and supporting business strategies.

 

As e-commerce presents the highest diversity of landing pages now, the most frequent way of conversion is the actual purchase while the most popular call to action is «Buy». However, the presence of the Internet in human life is growing constantly an plays a significant part in daily operations on professional and personal levels. On that ground, the variety of conversions also reflects diverse goals — except buying something, users can be called to:

 

— download the mobile application

— read more about the presented issue

— subscribe to updates

— download a free ebook, templates, graphics or other deliverables

— start the free or discounted trial of the product

— leave the comment or share the opinion

— share the information with friends and followers in social networks

— browse the educational or informational resource

— fill in the form or survey etc.

 

Obviously, conversion as the finalized action the user is navigated to is not the only function of a landing page: it is also effective as a general supporter of brand awareness and recognizability, due to the original design or special features it can even be a part of viral marketing campaign. Still, the most important outcome of all the effort invested into its creation and maintenance is ultimately measured via conversion rate, with the number of users who actually did the action they were called to.

 

UX design process tubik

 

Design strategies

 

No doubt, all the design projects are highly individual and require solutions based on the specific case. Nevertheless, on the basis of our diverse creative practice, we have collected the set of general ideas useful for work on efficient landing pages.

 

Clear goal and structure

 

The core difference between the home page of a website and the landing page with the specific offer is in their strategic use. The home page sets the global point of departure enabling the user to take a variety of routes around the website, while the landing page is focused on one particular aim which should be effectively presented and easily achievable. Therefore, the first step at designing converting page is setting this particular goal and building the page architecture which will navigate the users to the ways of achieving it.

 

Targeting

 

In the article about business-oriented design, we defined targeting as the strategy and techniques of researching the particular target audience to find the best and the shortest ways to attract their attention to the specific product or offer.  A landing page is the effective marketing tool when it’s based on the needs, preferences, and expectations of the target audience. Even more, these web pages allow companies to set multiple landing spots for various target users on the basis of:

— geographic targeting

— gender targeting

— psychographic targeting

— demographic targeting

— behavioral targeting.

 

There are many practical cases when companies changed some parts of the products, their names or even set the new brands to sell successfully in different countries with the diverse cultural background. The same can be done with landing pages:  for example, the page offering the same smartphone can look and talk differently to the users from different countries, taking into account their perception of colors, copy, priorities in product features and trends on the local markets.

 

gym landing page concept by Tubik

Gym Landing Page

 

Functional minimalism

Getting back to the metaphor with the physical landing of an aircraft, it’s hard to imagine how it could safely land on the place which is heavily stuffed. For soft landing, a clear spacious spot is a vital condition. For landing page, it works the same way: attempts to overload it with everything bring to a negative result. In most cases, minimalist design based on core functionality and visual elements easily navigating the user to the CTA proves itself a good approach.

 

Maximum attention ratio

Attention ratio is the level of concentration on a particular task or goal. No need to explain that for a landing page is should be as high as possible. Too many elements of interaction will provoke distraction lowering the chances of conversion: the more options users have simultaneously, the harder it is to make the choice.

 

Instantly visible call-to-action elements

CTA or call-to-action element presents the most valuable interaction element of a landing page as it is actually the spot where conversion happens. It should be instantly visible, which can be done via color or shape contrast, and informative, which is usually achieved with proper copy or icon, or both.

Tubik studio UI animation

Museu landing page 

 

Harmonic color palette

Colors and shades chosen for a landing page are not objects of designer’s creative self-expression: they are as much influencing the conversion rate as any other design element and sometimes even more than others. It’s not just aesthetic satisfaction which users can feel seeing the presentation but also the hidden message which can be transferred via traditional associations in color perception. So, colors should present the combination pleasant for user’s eye, emotionally appealing for the target audience and establishing the effective visual hierarchy of the layout.

 

Corresponding typography and good readability

As well as colors, fonts also tell much not only with the copy hidden behind them but also with associations and emotions they bring out. Typographic hierarchy and well-balanced font combinations have a big impact on the readability of the page which can directly influence the conversion rate. Landing page is not the spot on which users are ready to spend much time so poor readability can drive them away before they make a decision or understand if the offer corresponds to their needs. Being an integral part of the general stylistic concept, appropriate fonts can also contribute much into effective visual performance catching users’ attention.

 

Strong and consistent branding

Landing pages are widely used as the part of web marketing strategy so they should support the general scheme of brand promotion. Coming from outer resources, social networks, advertisements, users need to feel and see the consistency of brand image to be ready to trust it. So, identity elements like logo, slogan, mascots, corporate fonts and colors should be taken into account.

website design for photographers

Photography Workshops landing page

 

Prominent theme image

No secret, most users are visually driven and they scan the web page in a couple of seconds perceiving images much faster than copy. An appropriate theme image, be it a hero banner, original illustration, high-quality photo presenting a product or service, is a good way to attract users and get them interested as well as inform about the nature of the promoted offer. Images of this kind save users’ time, send them a quick and appealing message and add much into aesthetic side of the presentation.

 

Engaging and attractive scroll animation

Although there is a big army of those who find animation an unnecessary feature overloading user interface and making it more complicated, most users expect motion as an integral part of interaction experience. Scroll animation applied wisely can add life and style to the landing page and become another attractive feature stimulating positive emotions. Also, motion creates the feeling of one integral smooth interaction with a whole page rather than several separate parts. 

 

dance academy landing page animation

Dance Academy landing page

 

Visual hierarchy of copy content

Copy content is another aspect which has to be well-thought. A designer’s task here is to think about edible copy presentation framed into a clear visual hierarchy: sizes and placement of copy blocks, instantly scanned headlines and short concise call-to-action elements directly influence the level of conversions. The length of copy on landing pages is a debatable issue: focused goals behind the landing page doesn’t always mean that each time it should contain a minimal number of words. If it presents a famous company product or service or informs about special offers, short and strong copy can be enough to encourage users. However, if a new unknown product or service is presented, it is often useful to provide users with more information persuading them to follow the call to action. Anyway, the presentation of the copy has to be designed for good readability and scannability of the page.

 

No information overloading

Based on the previous points, creative team working on a landing page — designers, copywriters, marketing specialists etc. — should agree upon the priorities and define the core benefits users must see. Trying to overload the page with all the possible data about the offer, you risk overwhelming them so much that they can start hesitating or even get annoyed. Core information fields included in the landing page usually cover:

— the general introduction of the presented offer

— concise and informative description of the benefits solving user’s problems

— testimonials and signs of trust

— clear call to action.

 

If the offer is quite complex and it’s hard to describe all its benefits shortly, the good solution can be found in dividing the page into several theme blocks with separate interactive elements ( buttons, fields, links etc) enabling users to get further information or help quickly but on the other page.

landing page animation Tubik studio

magic.co landing page

 

Promotional video

In one of our recent posts, we have given insights on the benefits of short promotional videos for the presentation of products and services. The big advantage of this technique is the high speed of perception, emotional feedback and big informative potential of the video in comparison with copy. On the other hand, creating the video can be more time-consuming and require the bigger budget, so the efficiency of this element should be analyzed in business perspective to see if it’s really profitable for every particular case. 

 

High loading speed

None of the mentioned strategies will work properly if technical side of the interaction is neglected. Whatever stylish, sophisticated and informative is the landing page, it won’t make users put up with waiting while it’s loading. The matter here is really in short seconds, without any exaggeration. So, optimization of the images, thoughtful technical realization of motion effects, quickly loading video and fast transitions if they are applied — all of these and similar factors can have a crucial effect on conversion rates. Respect the users’ time otherwise they won’t be quick to trust you.

 

free design books landing page

Tubik Magazine landing page

 

Obviously, the presented list doesn’t mean that all the mentioned strategies should be applied together on every page. Each project demands individual approach based on rigorous analysis of the target user expectations, needs, and preferences combined with business goals. When the page is live, A/B testing and analysis of real interactions open the new perspectives and prove if designer’s initial decisions were appropriate for the established aim.

 

Landing page vs Home page

 

Should all the traffic from outer sources be directed to a home page or landing pages? We have already shared our ideas with the set of strategies for home page design. The answer considerably depends on the nature and complexity of the website. The issue to consider is the user attention and its concentration on definite areas of the websites in terms of solving a particular problem or satisfying particular needs.

 

For simple one-page websites this question is not actual: indeed, they represent only a home page which satisfies one or multiple functions and there is no other place where the traffic could be directed from the outer sources. The same happens if the website is not complex, home page in not overloaded with diverse links and navigation elements, so conversion can be reached right from the home page while other pages play secondary roles. In this case directing all the traffic to the most informative part of the site, which also enables a user to accomplish necessary action and get what they need, is a good idea.

 

However, for complex websites and platforms, especially if they satisfy multiple needs of broad target audience, this approach can be the step killing profitability and reducing conversion rates. The user can get scared, distracted or even annoyed with the tons of information they have to get through to find what they need, especially if the needs or wishes are focused on a particular narrow goal. Using landing pages in the case when you need to concentrate user’s attention on something important, to make it noticeable and easily available can be the efficient way of solving this problem. A landing page is a tool to emphasize one item, to make it quickly found and reduce delays in cases 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. The choice of a profitable approach in every case should be based on user research and then thorough user testing.

 

big city guide web ui design

Big City Guide landing page

 

Recommended materials

 

Diverse issues of applying landing pages have been an object of professionals’ attention. In terms of design issues, here’s the bunch of articles for those who would like to continue the topic exploration:

 

Landing Page Optimization: The Definitive Guide to Testing and Tuning for Conversions

 

Landing Page Conversion Course (9 parts)

 

Classic landing page mistakes you’re probably still making

 

Landing Page. Direct Flight to High Conversion.

 

The ultimate guide to designing landing pages that convert

 

What Happens When You Analyze 100 Landing Page Examples?

 

10 Key Landing Page Features That Draw in Prospects

 

7 Landing Page Call-to-Action Formulas for Higher Conversions

 

Want Conversions? Start with User-Friendly, Useful Landing Pages


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

UI icons in interface design tubik blog

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

Icons in user interfaces are the elements that cannot be overestimated. Small and meaningful, they solve numerous problems. They become little keys to usability and intuitive navigation. And only designers know how much time and effort is needed to make them simple, helpful and expressive.

 

Guru of user experience design Steve  Jobs said: «Details matter, it’s worth waiting to get it right.» Obviously, icons are on the top of details making interface usable and navigable. So, today let’s discuss what are their types and how they can be used in interfaces.

 

Definition

 

In general terms, an icon can be defined as an image which has a high symbolic value and is used for the purpose of communication. Icons present signs which are informative and support data exchange between the informer and addressee alongside with words and sentences: while copy is served with letters or characters, icons communicate via the images showing pictorial resemblance with an object of the physical world. In computing and digital design, 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.

 

Diving into the benefits of icons, one of the most important among them is the ability to replace the text. In one of our earlier articles, we gave details about the relations of copy and icons and their influence on usability. The process of the research showed that usage of recognizable and clear icons had a great potential in strengthening navigation as most people perceive images faster than words. However, even the slightest misperception can become the reason of poor UX so the solutions on the type of icons should be carefully tested to reach the good balance of icons and copy for a particular target audience.

 

weather app design UI

 

History

 

Obviously, icons weren’t invented by interface designers. As an object of communication, they have a long and diverse history rooting in ancient times. They are found in maps, signs, schemes, manuals and many other sources of information. However, with the advent of new technologies and graphical user interfaces, icons experienced the new twist of progress. Historically, Xerox is mentioned in credits for creating the first icons for a graphical UI in the early 1970s: the icons were implemented in a machine called Xerox Alto which was very expensive and didn’t really go to the wide masses. Still, that was a beginning of a long story: in 1981, Xerox Star was released and it’s referred to as the first consumer computer which used icons as a part of its interface. In particular, it applied the icons of folders and trash bins which have been used so far.

 

icons xerox star

Source

 

Another milestone easily remembered on this way is presented with the color icons Apple revealed first in 1991 and then later with their further updates for Macintosh. They featured another approach to the style when icons combined functionality and informative capacity with attractive and harmonic appearance.

 

icons apple machintosh

Source

 

These days icons are presented in digital design with numerous packs and sets in all the themes and styles possible. Although there are many ready-made packs, the database of icons is growing all the time in search of new solutions appealing to users.

 

Talking about the classification of icons, we can mark out several aspects of grouping them on types.

 

Types based on functions

 

Clarifying icons

These are the icons aimed at explanation. They are visual markers explaining particular features or marking out categories of content. In some cases, they are not the layout elements of direct interaction; also, you can often find them in combination with copy supporting their meaning. This trick activates multiple elements of perception in one interaction providing better recognizability for call-to-action elements. People, who instantly understand the symbol transferred with the icon, won’t pay big attention to the copy. The same will happen to those who have problems with fast copy recognition. However, using the copy together with the icon decreases the risk of misunderstanding or wrong interactions for people who can possibly misinterpret the meaning of the image.

 

Homey app smart home UI

Homey App

 

saily app UI design

Category icons for Saily app

 

Interactive icons

The icons of this type are directly involved into interaction process and are the core supporters of navigation. They are clickable or tappable and respond to the users request doing the action symbolized by them. Their main goal is to inform users about the functions or features behind the buttons, controls and any other elements of interaction.

 

tubik studio tapbar ui

Tab Bar interactions

 

ui concept animation tubik studio

Menu interaction concept

 

Decorative and entertaining icons

 

The icons of this type give more about aesthetic appeal than functionality. However, this aspect is also significant and needs to be considered as the style and appearance corresponding to the target audience preferences and expectations set the solid ground for high desirability. Applied wisely, it is one of the features that can not only attract but also retain users and add much to the positive user experience. Decorative icons are often used to present seasonal features and special offers.

easter icons tubik studio

Easter and spring themed icons 

 

App icons

 

App icons are the interactive brand signs that present the application on different platforms supporting the original identity of the digital product. In most cases, it features the logo of the app designed according to the requirements set for this kind of icons. However, it also can apply something else, for example, a mascot or an abstract combination of corporate colors. The effective solution is usually based on thorough market and competition research with the aim of creating an original icon which won’t get lost on the screen full of other app icons.

 

logo design by Tubik studio

Elephun App Icon

 

Favicon

 

Favicon, also known as URL icon or bookmark icon, is a special type of symbol which represents the product or brand in the URL-line of the browser as well as in the bookmark tab. It allows users to get a quick visual connection with it while they are browsing. This interface element proved itself effective for productive website promotion and good recognizability of its visual identity.

 

Types based on visual performance

 

Glyph icons

 
The term “glyph”[glif] has come to design from the field of typography. The word takes its roots from the Greek word which means “carving”. Originally, the term presents an elements symbols or pictogram which is included in the set of symbols agreed upon many users (readers, writers etc.): it presents a readable character enabling people to write it.

 

In the sphere of typography, it is a certain graphic representation of an element of written language within a particular system of writing or particular typeface: it can be a grapheme, or part of a grapheme, or sometimes several graphemes in combination (a composed glyph). Here’s the set of ancient Celtic glyphs, for example.

 

pictish_rune_meanings

Source

 
In modern digital design, the word “glyph” reinvented its meaning but not into a sort of revolution. It is used to define a graphic symbol that provides the appearance or form for a character: it can be an alphabetic or numeric font as well as a symbol picturing an encoded character. Talking about icons, glyph icons are first of all described as a typographic symbol that represents something else, not letter or number. Among popular examples, you will also find the «@» symbol representing the preposition «at». For example, here is the set of icons for material design from Google.

 

material icons

Material icons

 

Glyph icons use simplified and universal shapes and images to be recognizable and flexible in terms of responsive design. They play the big role in the issues of navigation for a digital product.

 

weather_icons tubik studio

Weather icons

 

Flat and semi-flat icons

 

Flat icons are usually a bit more complex than glyph: they can apply color combinations, filling of the elements and present a bit more complicated images. Nevertheless, they are also focused on simple and recognizable visual metaphors quickly transferring the required meaning. The most prominent feature which actually has inspired the name of this direction is applying flat 2-dimensional visual details as the opposite to highly realistic and detailed skeuomorphic images. Flat style allows designers to be more flexible in applying the expressive power of colors and shapes not losing in legibility of the presented items.

 

tubik studio blog app

Blog App

 

Skeuomorphic icons

 

Skeuomorphism is the design direction somehow opposite to flat. It is based on the idea of reflecting images in 3D look very close to the original natural look of the physical objects. It was popular for GUI of different types and functionality several years ago. But then it was gradually replaced with flat design in UI which is simpler and therefore more flexible and practical for the needs of digital interfaces. Nevertheless, the skeuomorphic icons are still widely used in game design and app icons in game sector.

 

SVG icons

 

SVG icons, decoded as Scalable Vector Graphics, are responsive icons built on XML-based 2D vector images. They are designed and integrated according to an open standard developed by the World Wide Web Consortium (W3C) since 1999, and supported by all major browsers. SVG icons are growing their popularity as today websites are used on the diversity of platforms and devices and need to be responsive to provide positive UX.

 

Types based on applied image metaphor

 

This direction of icons typology is based on the research provided by the famous expert in usability Jackob Nielsen and revealed in his article for Nielsen Norman Group. In this perspective, icons can be divided into three core types according to the type of the metaphor they reflect.

 

Resemblance icons are the symbols directly depicting a physical object the icon represents. These are, for example, the magnifier for search, the shopping cart, the envelope for mail etc.

 

Reference icons are the symbols depicting an object on the basis of analogy. For instance, a picture of a clamp representing a file-compression utility (because it squeezes) goes to this group.

 

Arbitrary icons are the symbols which currently do not set direct connections with the objects and their recognizability is based on convention and power of habit. This is when we should remember about floppy disc representing «Save» function: although initially it was a reference icon, for many users now it doesn’t work like that — they just know the meaning solidly connected to this image for many years.

 

multimedia icons tubik studio

Multimedia Icon Set

 

Key features of effective icons

 

In one of our previous articles devoted to the role of icons in user interfaces, we have already described all the essential features making the icons efficient, so today let’s just quickly recall them.

  • clear — the meaning of the icon is understandable and accessible to the target audience
  • meaningful — the icon transfers the informative value
  • recognizable — the visual symbol applied in the icon is presented in the form which can be recognized and decoded correctly by users
  • simple — the icon isn’t overloaded with non-essential graphic elements which allows it to be quickly perceived and understood without too much effort
  • original and noticeable — the icon stands out among other similar elements of the interface which is especially actual for the app icons
  • scalable and flexible — the icon saves its unity, integrity, and legibility in different sizes and resolutions
  • attractive — the icon satisfies aesthetic expectations and sets harmonic visual appeal
  • non-offensive — the icon doesn’t have hidden meanings or misperceptions which could feel offensive or rude for any part of the target audience
  • consistent — the icon corresponds to the general stylistic concept of the layout it is applied for.

 

Icons in UI tubikstudio

 

Recommended reading

 

Here is a bunch of articles for further exploration of the topic:

 

Icon Classification: Resemblance, Reference, and Arbitrary Icons

A Brief History of the Origin of the Computer Icon

Iconic Simplicity. The Vital Role of Icons.

Visual Perception: Icons VS Copy in UI.

How to Combine Icons from Different Sets in Your UI


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

typography in UI design web mobile

Typography in UI: Guide for Beginners.

People read all the time. It’s not only books or magazines but various info on the Internet, adverts in the streets, in public transport or outside shops. However, only minority of readers may know how much time and effort often stand behind a single line. When we easily read a copy feeling comfortable and relaxed, many thanks go to a designer. Text arrangement and the aesthetic look of fonts are among designers’ top priorities. To create effective UI and clear UX designers learn basics of typography science. Today’s article covers basic points in typography which every professional designer should comprehend and apply in work.

 

What’s typography?

 

Typography is something bigger than just a design technique. A Canadian typographer, Robert Bringhurst, in his book The Elements of Typographic Style defines typography as the craft of endowing human language with a durable visual form. In addition, typography transforms language into a decorative visual element.

 

Typography has a much longer history than the design or the Internet itself. First, it appeared approximately in the 11-12 centuries when people invented movable type system. A real typography revolution started after the Gutenberg Bible, the first major book printed via movable metal type, which marked the beginning of the age of the printed book in the West. The style of type used in Gutenberg Bible is now known as Textualis (Textura) and Schwabacher.

 

Nowadays, it is more than just copy printing and organization. Commonly, typography is defined as the art and science of font style, appearance, and structure which aims at delivering the aesthetic and easily readable copy to readers. Not that long ago, it was a specialized study for editorial office workers but now the science is applied in different spheres and plays a significant role in design.

 

The role of typography in design

 

Can you think of at least one example of web or mobile design without copy elements? It’s difficult, right? Still, just a presence of copy in the interface is not enough for effective UI and positive UX. Copy and its appearance should be well-thought otherwise it may spoil the design. There are designers who ignore typography studies because they think it’s too difficult to understand so it isn’t worth spending much time. However, typography is an essential part of the effective design. Let’s see why.

 

People got used to receiving the majority of information in text form and designers need to make this process easy and productive. The basic knowledge of typography can help to comprehend the peculiarities of font visual presentation and its influence on users perception.

 

The effective copy is a key to the powerful design. Its effectiveness depends not only on its content but also on how it is presented. Font size, width, color, and text structure — all of that matter. Designers can transfer certain mood or message by choosing appropriate fonts and the ways of their presentation. This way typography helps design to communicate with people. Visual performance and readability of copy in digital products have the great impact on user experience. If fonts are badly legible, people can face problems with navigation or even worse can’t use it at all. Today poor user experience in digital products is unforgiven since users can easily find the better alternative.

 

In addition, bad typography significantly affects the first impression because even when users don’t read copy, they scan it. In case fonts look inappropriate people may not want to learn about your offer or use your product.

 

home page design strategy

 

Essential typography elements

 

To create profound typography, you need to learn its anatomy and the processes typography building requires. Let’s see.

 

Font and Typeface

 

Nowadays, many designers use terms “font” and “typeface” as the synonyms but that’s not quite right. Let’s straighten it out. A typeface is a style of type design which includes a complete scope of characters in all sizes and weight. On the other hand, a font is a graphical representation of text character usually introduced in one particular typeface, size, and weight. In other words, a typeface is something like a family and fonts are parts of it. These two are the main objects which designers and typographers change and transform to create readable and aesthetic typography. More about typeface styles will be presented here soon for our readers.

 

Mean line and baseline

 

Typically, type characters are placed in a straight line creating a neat visual presentation. Main tools assisting designers in the process are mean line and baseline. The first marks the top and the other bottom of a character body. Such lines allow creating fonts even. Of course, the lines are invisible in interfaces after designers finish their work.

 

tubik typography baseline

 

Character measurement (size, weight, and height)

 

To separate different types of information and highlight the vital points, designers apply fonts in different weight and size. The type weight is a measurement of how thick type character is. The sizes are usually measured in inches, millimeters, or pixels. The height of the character is also called “x-height” because the body of every character in one size is based on the letter “x”. This approach makes them look even. It’s easy to segregate copy elements such as heading, sub-heading and body copy by varying these parameters.

 

tubik typography x_height

 

Ascender and Descender

 

The ascender is a part of a letter that goes above the mean line like in a letter “b” or “d”. The descender is opposite to ascender. It’s a segment that extends below the baseline like in “q” or “g”.

 

tubik typography ascender

 

White space

 

White space, also known as negative space, is the area between elements in a design composition. Readers aren’t usually aware of the great role of the space, but designers pay a lot of attention to it. In case the white space is not balanced, copy will be hard to read. That’s why negative space matters as much as any other typography element.

 

tubik_typography_whitespace

 

Alignment

 

Creating effective typography is not that easy and it includes many processes. For example, alignment is an action of placing and justifying text. During the stage, designers aim at transforming randomly placed pieces of text into one unified composition.

 

tubik_typography_alignment

 

Tracking

 

The process of tracking involves adjustment of space for a group of type characters which form a word and text block. A designer set appropriate spacing for all letters, making copy feel airy and pleasant to the eye. The effective tracking makes letters in a word easily readable.

 

tubik_typography_tracking

 

Kerning

 

Kerning is a bit similar to tracking still they aren’t the same. Tracking means is spacing between all the characters of font while kerning is the process of adjusting the space between two type characters. It is usually applied for individual cases when a designer decides to change the spacing between two specific letters to make it feel more natural.

 

tubik_typography_kerning

 

Leading

 

Leading is the spacing between the baselines of copy. The appropriate leading helps readers easily go from one text line to another and makes big pieces of text legible. In design, the standard leading is 120% the point size of the font still it can vary according to the typeface peculiarities.

 

tubik_typography_leading

 

Typographic hierarchy

 

As any other design element, typography should be structured. Typographic hierarchy is a system that organizes copy content in the best way for users’ perception first of all via modifications and the combination of typefaces and fonts. It is aimed at creating the contrast between the most meaningful and prominent copy elements which should be noticed first and ordinary text information. The contrast is created by regulating typography elements including typefaces, fonts, sizes, and colors as well as their alignment.

 

web design UI tubik studio

The Gourmet Website

 

Typographic hierarchy is presented with common types of copy content used in UI design. They are headlines, subheaders, body copy, call-to-action elements, captions, and others. These copy elements create distinct layers in design: primary, secondary, and tertiary.

 

The primary level of copy content includes the biggest type like in headlines. It strives at drawing user’s attention to the product. The secondary level consists of copy elements which can be easily scanned. Those are subheaders and captions which allow users quickly navigate through the content. And the tertiary level of typography includes body text and the other information. It is often presented with the small type still it should be readable enough.The typography layers assist users to learn copy content gradually step by step without effort and get oriented in the digital product.

 

web design UI concept tubik studio

The Big Landscape

 

Typography cannot be learned in one day. It requires constant studying and persistence. Follow Tubik blog updates and learn more about typography in design.

 

Recommended reading

 

Robert Bringhurst “The Elements of Typographic Style Paperback”

 

Erik Spiekermann “FontBook”

 

Simon Garfield “Just My Type: A Book About Fonts”

 

Tips on Applying Copy Content in User Interfaces

 

Every Design Needs Three Levels of Typographic Hierarchy


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

upper app UI design case study

Lean and Mean: Power of Minimalism in UI Design.

Simple doesn’t mean primitive. Less isn’t vague. Short doesn’t say little. Air doesn’t equal emptiness. Today we are talking about minimalism.

 

In the book «The More of Less», Joshua Becker said: «You don’t need more space. You need less stuff.» Minimalism is often discussed nowadays in different spheres of life and work, and diverse directions of design are not the exception. Let’s see what are its benefits and points to consider.

 

web design tubik studio

 

What is minimalism?

 

Actually, minimalism is a word of broad meaning used in various spheres of human activity. Merriam-Webster dictionary defines it as «a style or technique (as in music, literature, or design) that is characterized by extreme spareness and simplicity». Being applied to more and more fields, it saves its core traits: meaningful and simple.

 

Minimalism as a direction of visual design got especially popular in the 1960s in New York when new and older artists moved toward geometric abstraction in painting and sculpture. The movement found its impression in the artworks associated with Bauhaus, De Stijl, Constructivism and so on. In diverse spheres of visual arts, key principle of minimalism was leaving only essential part of features to focus the recipient’s attention as well as support general elegance. Lines, shapes, dots, colors, spare space, composition — everything should serve its function being thoughtfully organized. Today we can meet minimalism in a variety of life spheres: architecture, arts, photography, all kinds of design, literature, music and even food presentation.

 

«A shape, a volume, a color, a surface is something itself. It shouldn’t be concealed as part of a fairly different whole. The shapes and materials shouldn’t be altered by their context», said Donald Judd, an American artist associated with minimalism. Working in this style, designers seek to make the interfaces simple but not empty, stylish but not overloaded. They tend to use negative space, bold color and font combinations, and multifunctional details making the simplicity elegant. The line dividing simple and primitive is very thin. That is why not all the designers take the risk of trying this direction: some may think it looks too decent, the others don’t find enough ways to show much with fewer elements.

 

Tubik studio UI design

Architecture Blog

 

Characteristics of minimalism

 

Main features of minimalism often mentioned by designers 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 sounds like user-friendly trend. Applied wisely, it helps users 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.

 

dance academy landing page

Dance Academy landing page

 

Practices of minimalism in digital design

 

Today minimalism is one of the wide-spread trends in the design of websites and mobile applications. Main points to consider can be described with the following practices.

 

Flat design

 

As we mentioned in one of our previous articles, flat design became a great supporter of minimalism in modern digital products. The most prominent feature of this direction is applying flat 2-dimensional visual details as the opposite to highly realistic and detailed skeuomorphic images. Flat images usually use fewer elements and curves, avoid highlights, shadows, gradients, or textures. This approach allows creating images, buttons, icons and illustrations which look neat in different resolutions and sizes. It lets designers enhance usability and visual harmony of user interfaces.

 

However, the terms «flat» and «minimalist» shouldn’t replace each other which often happens today. They are not the same. «Flat» deals with the style of icons, illustration, buttons and other visual elements of the interface in the aspect of gradients, textures, shadows etc. «Minimalist» has much broader meaning and deals with the layout in general, its composition, color palette, contrast and all the techniques of visual performance applied to it. So, flat can be described as one of the design techniques applied in the minimalist approach to creating interfaces.

 

ui animation cafe app tubikstudio

Cafe Coupon App

 

Monochrome or limited color palette

 

Color is a feature of a great potential in design of interfaces as it can set both informative and emotional links between the product and the user. Designers working in minimalism tend to take the maximum from color choices, and in most cases, they limit color palette to monochrome or minimal set of colors. This strengthens the chosen colors and doesn’t distract users with too much variety. Such an approach is efficient in interfaces concentrating users’ attention on particular actions like buying, subscribing, donating, starting to use etc. Moreover, in the psychological perspective, the colors usually transfer particular associations and emotions perceived by users, so limited palette makes chosen colors stronger in this aspect.

 

tubik studio web UI design

Slopes Website

 

Bold and expressive typography

 

Typography in minimalistic design is seen as one of the core visual elements of not only informing users about the content but also setting the style and enhancing visual performance. Choosing the way of concise use for graphics, designers usually pay much attention to the choice of typography and never hurry in testing the pairs, sizes and combinations. As well as color, fonts and typefaces are seen as a strong graphic element contributing into general elegance and the emotional message it sends. On the other hand, readability and legibility do not lose their leading positions in the matter of choice.

 

upper app UI design case study

Upper App

 

Choice limitation

 

One of the strong sides of minimalism in interfaces is enhanced user concentration. Being focused on functionality and simplicity, the pages and screens of this kind don’t usually overload users attention with decorative elements, shades, colors, details, motion, so in this way, they support high attention ratio and often let users quickly solve their problems and navigate through the website or app.

 

tubik studio web ui design

Birds of Paradise Encyclopedia

 

Prominent theme visual elements

 

Working on minimalist UI, designers do not apply many images, but those which are chosen to be used are really prominent, catchy and informative. This approach results in the long and thorough search of the «right» image which would cover all those functions and set the required mood instantly. The photo or illustration itself has to follow the principles of minimalism, otherwise, the choice of the wrong image can ruin all the layout integrity.

 

website design UI

Architecture Firm

 

Concise and intuitive navigation

 

Navigation in minimalist interfaces presents another challenge: designers have to prioritize the elements rigorously in order to show only the elements of the highest importance. There are different techniques to hide the part of navigation, but doing this, it’s vital to ensure that users will find what they need easily. That is one of the reasons why minimalist approach can be criticized: not being presented properly and tested enough, solutions like hamburger menus and hidden layout elements can leave some users lost in the journey around the website. Obviously, it is not the good ground for positive user experience, therefore every solution about navigation should follow the philosophy «measure thrice and cut once».

 

Adding air and using negative space

 

White space (also called negative) in digital design is the term which is more about space rather than color. In minimalism, it is one more effective way of adding elegance and marking out the core elements. Also, in terms of monochromatic or limited color palette, white or negative space plays the big role in creating enough contrast and supporting legibility.

 

tubik studio ice ui website

Ice Website

 

Grids

 

Grid system in minimalist interfaces can be effective for making the layout look highly-organized, especially if the website presents a lot of homogenous content. Another benefit is that grids are responsive-friendly.

 

web design UI concept tubik studio

The Big Landscape

 

Contrast

 

Following the philosophy of limits and simplicity, minimalism depends much on contrast as a tool of good visual performance. The choice of colors, shapes and placement are often based on the contrast as the key feature.

 

tubikstudio ui animation website design

Bjorn Website

 

Well, it’s easy to see that minimalism has a great number of benefits and presents a good approach in creating user-friendly interfaces. However, it doesn’t mean that minimalism should be applied everywhere: every goal should be achieved by the proper means. One thing is for sure: the more minimalistic is the interface, the more time and effort the designer should invest to make it clear and functional. Elegance and beauty of minimalism should support the global aim of providing positive user experience.

 

Recommended reading

 

The Characteristics of Minimalism in Web Design

 

The How and Why of Minimalism

 

6 Steps to Perfecting Minimalism in Web Design

 

Functional Minimalism for Web Design


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

tubik free podcast design business terms

Tubik Podcast #6. Design for E-Commerce.

These days e-commerce is evolving by leaps and bounds presenting new interesting challenges to designers of user interfaces. Websites and mobile applications enabling users to buy and sell need constant attention and improvement to correspond to the current concerns. Today we have prepared a new episode for the listeners of Tubik Podcast, the series of free audio talks devoted to various aspects of design. In this episode, we’ll consider the strategies and practices of UX design for e-commerce. Welcome to listen and follow the updates!

 

If you want to get the set of episodes devoted to the theme of business terms and processes in the design aspect, subscribe here and get them right into your inbox.

 

You can check more details in the article devoted to targeting applied in design projects. Also, to learn more and see practical case studies, welcome to read or download our free ebooks. Stay tuned!

tubik studio lettering design

Get Original: Benefits of Handcrafted Lettering in Design.

Nowadays, people try to be discernible and unique among thousands similar ones. Business owners strive at the uniqueness of their brand and often demand something special from designers. The majority of original things are made by hands. Custom hand lettering took its place among other design techniques a long time ago and it never gets old. All the advanced digital tools still couldn’t replace it and even more, they only supplemented it with new opportunities. Today’s article reveals the essence of lettering and shows its role in the design industry.

 

lettering designer

 

What is lettering?

 

The essence of the term “lettering” is already hidden within its name. To be specific, lettering is the art of letter drawing when a word or phrase is presented as an artwork. Each letter is drawn in an original way and together they form a unique composition. Lettering masters usually work by hands using various pencils, brushes, ink, or chalk. Some may prefer applying graphic tablets and stylus but it can be more challenging because it requires advanced skills in special programs like Adobe Illustrator. A distinctive characteristic of hand lettering is that an artwork can be carefully developed as well as absolutely spontaneous.

 

tubik studio lettering design

 

Lettering vs Calligraphy

 

People seeing decorative letters may think “ A calligrapher did a stunning work!”. It happens because not everyone knows that lettering and calligraphy are not the same things. Let’s clear this out.

 

As we said above, lettering is the art of letter drawing while calligraphy is the art of beautiful letter writing. A dip pen and ink are the main tools of calligraphy masters. Calligraphers follow certain rules to create a perfect construction with the letters made in one style. They regulate the width of lines by changing degrees of pressure on the pen. Calligraphy masters usually write one letter and even one word with one stroke.

 

One of the biggest differences is that calligraphy aims at the perfection of style while lettering is popular due to the freedom of the presentation. Lettering is more like an individual illustration. Each letter is an original unit and together they form a unique picture. Masters of lettering are not constrained by the certain style, so they can create something really special which isn’t similar to anything else.

 

team_work_tubik_studio_lettering

 

Hand-drawn lettering in design

 

Being an expert means non-stop improving and expanding professional skills. Today a proficient designer is expected to be an artist, architect, psychologist, and illustrator all in one face. So, the lettering skills will definitely be a huge benefit for a designer’s status. However, some may ask how lettering can be applied in web design. Let’s see.

 

Nowadays, a designer can choose from a great assortment of various fonts perfectly suiting different digital products. Nevertheless, it may happen that a client’s product has a wide range of competitors and to stand out, it needs something extraordinary so that the product could attract the attention of the potential customers. Many designers offer to create slogan lettering. It is drawn in an absolutely original way which characterizes the product and the company principles. This way people may memorize the slogan quicker and associate it with the certain product. Design with custom lettering can increase brand awareness and make sure people will be able to distinguish the company from the others.

 

slogan_lettering_tubik_graphic_design

 

In addition, beautiful original lettering can guarantee the pleasant first impression from the company. People always appreciate things which go from hand craftsmanship, so handmade lettering will give clients strong associations with the trust and painstaking. Also, decorative letters give the feeling of aesthetic pleasure which is significant for the delightful first impression too.

 

Hand lettering in branding

 

Building strong brand identity is as vital as providing excellent services to your customers: a business just can’t survive without the brand awareness and loyalty.

 

A logo is one of the key parts creating brand’s image. Well-thought logo design can tell about the personality of a company to the potential clients. A designer’s task is to create a powerful extraordinary logo that would represent the business image and transfer the message of the company.

 

Hand lettering is an effective way to design unique, aesthetic, and recognizable brand identity. A designer creates custom letters fully based on company’s features and peculiarities. The professional will take into account the smallest details paying deep attention to every letter and line because it’s known that the devil is in the details. Moreover, today everyone strives at uniqueness so a great benefit logo with the hand lettering brings to a business is that everything made by hands can never be repeated once again. It means a company receives an original logo that will be hard to plagiarize so people will associate it strongly with your company.

 

toonie-photo-lettering

Logo lettering handcrafted for Toonie Alarm

 

Pitfalls lettering may bring

 

Despite all the pleasant emotions and benefits hand lettering brings, it isn’t perfect as well as any other technique. First of all, considering hand lettering as a design element, you need to think if it suits the brand. For example, it’s hard to imagine a website of a law firm with decorative letters say “We’ll protect your rights”. Hand lettering looks artistic and sometimes even playful. A designer needs to understand the target audience and their requirements before taking decisions.

 

Another point to keep in mind is legibility of letters. Sometimes, it may be difficult to see the line between beautiful and usable. Designers may go too far with the letter decorating turning them into the illegible mess. Badly readable letters may ruin the transferred message so a company risks falling into disrepute or losing the reach.

 

Points to consider

 

Hand lettering is an old craft requiring discipline, knowledge, and talent. Not every designer will choose to spend time and effort to lettering learning. However, for those who want to learn and for the companies thinking about applying hand lettering, we present the list of possible benefits it may bring.

 

  • Hand lettering is fully original so it makes the design feel fresh and special.
  • Custom letters always look extraordinary and attract customers’ attention.
  • Beautiful decorative letters influence visual perception bringing the feeling of aesthetic pleasure.
  • Powerful hand lettering increases brand recognition.
  • It’s sometimes easier to transfer the right message of a product via custom letters than with the help of digital fonts.
  • Original lettering assists a company to stand out against competitors.
  • Hand lettering can guarantee a pleasing first impression.

design_for_business_tubik_studio

 

Recommended reading

 

Drawing Type: An Introduction to Illustrating Letterforms

 

The Art Of Hand Lettering

 

Creating a Hand-Lettered Logo Design

 

Understanding The Difference Between Type And Lettering

 

Hand Lettering for Responsive Web Design


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

tubik studio design process

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

The question if UI/UX designers should know how to code is one of the «eternal» discussions in the design sphere. The more diverse UX design becomes in its evolution, the more opinions arise. Having answered several questions of this sort on Quora recently, we would like to share our ideas with Tubik Blog readers as well. 

 

What is the difference between UI/UX designer and programmer?

 

UI and UX design present different aspects of creative flow for digital products. Basically, UI design aims at creating effective and attractive user interface while UX design aims at providing the positive user experience. Interaction with a product via the user interface is a part of user experience, so we UX design as a creative field is broader and includes UI design as its integral part.

 

UX design process tubik

Work on information architecture for a website UX

 

Working on the UX and UI for a digital product such as a website or mobile app, designers have to concentrate on such core aspects as:

— usability (the product is convenient, clear, logical and easy to use)
— utility (the product provides useful content and solves users’ problems)
— accessibility (the product is convenient for different categories of users)
— desirability (the product is attractive and problem-solving, it retains users and creates the positive experience which they are ready to repeat).

 

home budget app mobile interface

UI design of some screens for Home Budget App

 

Programmers or developers are people who actually build the website or mobile application planned and designed by UI/UX designers. They breathe life into the plan, with the code they create the live product which users can actually apply to solve their problems and satisfy wishes. Programmers transform the structure and visual performance thought out and created by designers into the real interface.

 

ios-developers-tubik-studio

How interfaces look from the programmer’s point of view

 

Therefore, to see the difference, we can apply the metaphor of an actual construction site: 

UX designers are architects who come up with the general concept, its structure and the flow of interactions as well as a variety of factors which influence positive or negative user experience (in case of real building it could include transportation, quality of air, availability of shops and entertaining points, educations and sport facilities, neighbors etc.).

UI designers are architectural visualizers who find the best solutions for visual performance of the object corresponding to the style, the environment, user’s expectations and aesthetic needs based on the already agreed architecture, structure and core factors of interaction.

Programmers are actual builders who create the final object in reality. As well as on the building site, they have various specializations: some are good in creating the foundation, others know how to realize visual features made by designers, and some of them work out effective interaction with this object in particular environments and for new requirements which can arise later.

 

tubik teamwork design digital agency

 

Do UI/UX designers need to know computer science and programming to create top-quality user-friendly designs?

 

This is the question in which the terms should be clearly defined.

 

Computer science in its traditional understanding is the broad comprehensive study including theory and practices for making and using the computers (now it can also go further to other kinds of digital devices and gadgets). It is often characterized as the scientific and practical approach to computation as well as study, exploration, and automation of diverse operations with data. Therefore, the person with a major in computer studies is usually a specialist in the theory of computation and design of this sort of systems and hardware.

 

In this perspective, yes, knowledge of computer studies is a great basis for creating problem-solving and user-friendly interfaces. UI/UX designers are professionals dealing with much more than just the looks of a website or an app: they think over the logic, transitions, usability, accessibility, emotional and aesthetic appeal, data presentation and lots of other things forming the whole user experience. Whatever is the way to get this knowledge — higher education, courses, apprenticeship, self-education etc. — it underlies the necessary basis of knowledge which allows a designer to understand human-computer interaction for appropriate and effective design solutions. I personally find the knowledge on computer science important factor of being a competent designer of modern user interfaces.

 

As for the programming, the situation is different. There are, basically, two camps of extreme positions. One side claims that programming/coding is the absolutely vital thing to know and you cannot provide really efficient UI/UX without knowing how to code. The other side believes that the knowledge of programming kills the creativity in design as in this case designer is limited with the rules, standards and restrictions of development. Both positions are supported by numerous articles and discussions and both somehow make sense if you think about the issue in the perspective of real design projects.

 

On the basis of our team experience, it’s easy to state confidently: you definitely CAN be a competent and successful UI/UX designer for mobile and web with no background or major in programming.

 

Basically, the task of UI/UX designer is to analyze the target audience and their needs, to make a research, to create an efficient layout and well thought-out system of transitions, to wrap it in an attractive but highly usable and clear visual design and to test the solutions. UI/UX designer is not a developer: they work on the same product but from different sides, as well as for example a writer, an editor and a publisher work differently on the same book. However, it is obviously pleasant for developers if a UI/UX designer is able to produce designs which consider at least the basic limitations and points of programming and coding.

 

information architecture for designers

 

You can find a great bunch of successful experts in app and web design who have never had anything in common with the sphere of coding and development and provided great design solutions with a very high level of usability. Nevertheless, in the case of high-level specialists, it’s impossible to say that they are totally out of the issue. Designers, who are keen to create viable product designs, usually tend to get acknowledged with the general understanding of development basics. That really supports the designer in providing effective design as possible, considering all the stages of its creation and implementation. However, it doesn’t mean that without this sort of knowledge it’s impossible to create good designs. Moreover, if designers work in a team with developers, they can create designs without knowing coding even easier as they are supported by developers who control the process in the perspective of coding.

 

Happy medium should be found in this issue without any extreme positions. If designers tear themselves too far away from development reality, they risk losing viability of their designs and could end up having a great deal of amazing and terrific concepts none of which will be implemented in real products. On the other hand, if designers concentrate too much on limitations of coding, they risk becoming unable to think out of the box and provide original design ideas. Keeping the wise balance provides the harmony.

 

So, to sum up, a person can become a successful UI/UX designer not knowing programming and development; however, this kind of knowledge can be supportive if used wisely.

 

Working on interfaces created from the first line of design to the real digital product, like Upper App and Toonie Alarm, we find thoughtful and organized teamwork the most effective workflow: UI/UX designers, developers, content and branding specialists have to be involved into the creative process from the very beginning and combine their strongest sides into one product. The wise delegation of tasks works more quickly and effectively than the attempts of one person to explore and cover everything. And this sort of teamwork lets designers and developers share their knowledge and understand each other’s decisions for the sake of good outcome solving users’ problems.

 

upper app UI design case study


 

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

Welcome to read us on Quora

video speeches for ui ux designers

Must-See Expert Speeches for UI/UX and Product Designers. Set 2.

Learning and innovation go hand in hand. The arrogance of success is to think that what you did yesterday will be sufficient for tomorrow. (William Pollard)

 

Our previous collection of video speeches from top experts in product design and user experience, which we published several months ago, got shared and actively viewed. There is no reason why we wouldn’t continue this sort of sharing, collecting great speeches from designers and product creators recognized internationally. That’s the precious part of being a professional in the era of the internet: you are able to get tips, recommendations, experience and knowledge from the best masters. So, catch the new set of expert talks we have collected for you and get inspired!

 

Julie Zhuo: How a Facebook Designer Thinks

 

 

Katie Dill: Balancing Order And Chaos In UX

 

 

David Vogel: Zen and the Art of UX Design

 

 

Cindy Chastain: Building the bridge from UX to CX

 

 

Joe Natoli: 5 Rules for Successful UX Disruption

 

 

Michael Bierut: How to use graphic design

 

 

Stephen P. Anderson: Hooked on a Feeling

 

 

Jakob Nielsen: Web UX 2016 vs 2004

 

 

Robert Brunner: What All Great Design Companies Know

 

 

Design+ Social Panel — Designers from the top social networks

 

 

Welcome to watch the first set of must-see speeches for UI/UX designers

Welcome to check 20 TED-talks for designers