Tag Archives: logo design

design_review_tubik_studio

Tubik 2017. Bright Year in a Big Review.

Full of productive work and a wide variety of creative challenges, the year 2017 is almost over. For Tubik it was dynamic, bright, rich in meetings, shots, interesting projects and non-stop professional growth. The company got bigger, more experienced and diverse. And again, we start the new stage of our workflow remembering the most significant points of what has already been done, so today won’t be an exception. Let’s take a moment to turn back for a while and remember some outstanding things that marked the year 2017 for our team.

 

Keeping our active position on Dribbble, we published over 120 shots. Welcome to look through the set of top positions in the categories of UI/UX design, animation, branding and illustration. Following the links, you will be able to see all their detailed descriptions and full-size attachments.

 

Top Ten UI shots

 

bright vibe calendar UI design tubik

Bright Vibe Calendar

 

financial_service_website_tubik

Financial Service Website

 

dating_app_landing_page_tubik

Dating App Landing Page

 

design agency landing page

Digital Agency Landing Page

 

web ui design city guide

Big City Guide

 

home budget app mobile interface

Home Budget App

 

bikers website blog

StarDust Biker Website

 

underwater world encyclopedia design tubik

Underwater World Encyclopedia

 

music streaming app design

BeatSync Music Streaming App

 

Homey app smart home UI

Homey App

 

Top Twenty Animated shots

 

watering_tracker_app_ui_tubik

Watering Tracker App

 

jewellery ecommerce app

Jewellery E-commerce App

 

loading_animation_iphonex_tubik

Loading Animation for iPhoneX

 

home budget web interface

Home Budget Dashboard Animation

 

burger_app_ui_animation_tubik

Tasty Burger App

 

californication_bus_animation_tubik

Californication Bus Animation

 

dance academy landing page animation

Dance Academy Landing Page

 

cinema app interaction UI

Cinema App

 

upper_app_ui_design_tubik_studio

Upper App

 

Upper App Animation

Upper App Landing Animation

 

business_card_app_animation_tubik

Business Card App

 

gourmet_website_interactions_tubik

The Gourmet Website

 

bookshop website animation

Bookshop Website

 

car app interface

Car Stats Animation

 

mood messenger landing page

Mood Messenger Landing Page

 

Animated stickers mood messenger design tubik

Animated Stickers for Mood Messenger

 

navigation_in_ui_animation_tubik

Navigation in UI

 

mobile_game_interactions_tubik

Mobile Game Interactions

 

tubik_photo_app

Photo App Interactions

 

menu_interactions_ui_animation_tubik

Menu Interactions Concept

 

Top Ten Illustration shots

 

design_party_graphic_design_tubik

Design Party

 

star_wars_stickers_fanart_tubik

Star Wars Fan Art Stickers

 

creative_ux_design_illustration_tubik

Creative UX

 

halloween_pumpkin_animation_tubik

Creative Pumpkin

 

opera video animation case study

Opera Video: Summer Heat Illustration

 

illustration_design_in_progress_tubik

Design in Progress

 

add_color_illustration_tubik

Add the Color

 

building_ui_illustration_tubik

Building UI

 

business_graphic_design_tubik

Business Teamwork

 

golden_ratio_ui_design_illustration_tubik

Golden Ratio in UI Design

 

Top Five Branding Shots

 

binned logo animation design

Binned Logo Animation

 

logo_animation_tubik_design

Whizzly Logo Animation

 

brand identity design case study

Reborn Business Cards

 

lunnscape_branding_case_study_tubik

LunnScape Branding

 

forcecop_logo_design_tubik

ForceCop Logo

 

Top 5 tubik.arts shots

 

tubik_arts_character_animation_hagrid

Character Animation: Rubeus Hagrid

 

tubik_arts_flickids_pirates_character_animation

Character Animation: Flickids Pirates

 

tubik_arts_orks_vs_aliens_nagari_cg_design

Character Design: Sorceress Nagari

 

tubik_arts_orks_vs_aliens_nazmordul_illustration

Character Design: Orc Nazmordul

 

tubik_arts_thorin_character_illustration

Character Design: Thorin Oakenshield

 

Top Ten Articles in Tubik Blog

 

The year melting away has been really fruitful for Tubik Blog: we shared around 100 articles and case studies with our readers and subscribers. Here’s the top ten of them (the extended list of the most popular articles can be found here).

 

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.

 

most popular design articles in tubik blog

 

Top Six Tubik News

 

Upper App Launch

 

At the beginning of 2017, following the successful launch of Toonie Alarm, Tubik team we rolled out another iOS application for everyday use called Upper App. It is a simple and elegant to-do list designed in minimalistic manned and aimed at easy task tracking. The application got itself the App of the Day on Product Hunt and once again allowed us to go through all the process from the initial idea of the product to branding, design, development and marketing of our own product. No doubt, this kind of experience was highly helpful for our work on outsourcing project.

 

upper app UI design case study

 

tubik.arts launch

 

One more big news was establishing tubik.arts department focused on creating CG, characters and environment for various games, book illustrations and complex motion design.

 

tubik_arts_cg_orc_nazmordul_animation

 

Behance Portfolio Reviews

 

In 2017 Tubik hosted Behance Portfolio Reviews events twice in Dnipro, Ukraine. These creative meetups let the local design community get one more platform for communication on professional issues and allowed novice designers to get useful tips and recommendations from experts.

 

behance portfolio reviews

behance portfolio reviews dnipro

behance portfolio reviews dnipro tubik

 

Full Cycle for Product Creation

 

This year our team has grown to add not only the designers but also web and mobile developers, therefore the range of services which we can offer to our clients has broadened significantly. At the moment we are able to accomplish the creation of any digital product from scratch. Research, branding, graphic design, UI/UX design, motion design and video production, iOS, front-end and back-end development as well as copywriting for slogans and brand names — in 2017 we successfully dealt with all those positions and even more custom ones.

 

Tubik Academy

 

The year has also been marked with the first group of UI/UX designers who have completed the intensive course of UI/UX design in Tubik Academy — and two of them are already going through their internship in the studio.

 

tubik academy ui ux designers

 

Problem-Solving Web Design — Free Ebook

 

In 2017 we shared one more issue of Tubik Magazine: a free ebook Problem-Solving Web Design devoted to design of user-friendly and goal-oriented websites and landing pages.

 

problem solving web design free book

 

Bright moments of work, rest and creative search were traditionally shared with our followers on studio Instagram page. And as usual, we also didn’t miss the chance to share our ideas, news, tips and experience via Medium and Quora at which we got the positions of top writers in the domains devoted to design. Also, we kept everyone updated with studio news via TwitterFacebookTumblr and Flipboard.

 

new year tubik studio team

 

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

Warm greetings for everyone from the Tubik team, we wish you the amazing and successful year 2018!


Welcome to read the Review of Popular Interface Design Trends in 2017

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

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

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