Icons in UI design. Great Power of Small Details

In one of our previous articles called  Iconic Simplicity. The Vital Role of Icons we have shared our vision on the importance and features of icons in efficient UI/UX design. Our designers always work thoroughly on icons for every project we take over. Going further, Tubik Studio designer Valentyn Khenkin created special UI concepts to present icons at work in different applications. The presentations are created on the basis of original icons packs made by Tubik Studio designer Arthur Avakyan.

Multimedia Icons Presentation was already published on Behance and featured at App Design Served. It was followed by Valentine’s Day Icons Presentation which presented one more UI concept showing other type of environment for design. So, today we decided to tell a bit more on those presentations here.

 

Multimedia Icons Presentation

The first UI concept was created on the basis of Multimedia Icons Set by Arthur Avakyan

icons tubik studio

 

To present some items from the set in practice, Valentyn Khenkin designed the UI concept of Media Player App. The screens of the player designed for the concept demonstrate the icons with well-thought out placement and functionality presented via their symbolic meaning and simple easily recognizable forms.

Tubik Studio icons presentation

 

tubik studio ui design

 

On the screens you can see the icons from the presented set featuring all the necessary functions (Play/Pause, Back/Forward, Repeat, Mute etc.). On the feed screen three more functions were presented with icons, which provide not only clear metaphors and symbols, but also the particular style features and bright visual details.  The aim of both designers was to create the icons which do not overload the general layout of the screens, look harmonic with the background and create simple and clear user interface, easy to use in any environment. Therefore, all the icons were carefully drawn and shaped.

Tubik Studio icons set

 

So, this concept shows the important part of such small details as icons in creating efficient UI design that feels integral and stylish through all the app.

 

tubik studio animation icons

 

Valentine’s Day Icons Presentation

One more set of icons was specially created by Arthur Avakyan for Valentines Day theme.

tubik studio st valentine icons

 

Designing icons for the set, the designer took much time and effort to make them clear, recognizable and meaningful in the general layout of user interface. Based on this, Valentyn Khenkin worked out one more UI concept demonstrating broad functionality of this set even beyond the seasonal topic of St. Valentine’s Day celebration.

Tubik Studio icons presentation

 

To demonstrate the icons in action, the designer created the concept of Dating App. It is designed and thought-out as a sort of social network for dating and easy communication. Here you can see the Profile screen, the Calendar screen and Feed screen. The Profile screen shows user’s data and statistics as well as featuring the use of icons of the presented set in the tapbar. The icons represent main steps of navigation and at the same time become a harmonic addition to the general visual representation of the screen.

 

tubik studio dating app concept

 

The Calendar screen shows the interactive calendar of the app where the vector icons are represented as symbols of the gifts and actions planned for the particular date. Also, the small icon on the avatar becomes a little symbol of marking a person you are dating with. So, the icons become the efficient tool of visualization of navigational functions as well as marking specific data. Moreover, they play the role of visual elements not only functional, but also decorating the screens, making them lively, cute and stylish. As in the previous case, all the shapes, proportions and curves were accomplished with great attention for the mentioned aims.

Tubik Studio icons set

 

So, the second presentation also shows the great potential and high level of functionality of such small elements as icons.

Tubik Studio Dribbble shot

 

UI Kits

Working on different projects in Tubik Studio, our designers prepare UI Kits – the sets of user interface elements that can be integrated in various web or app design. Now we are also working on ready-made UI Kits universal for different projects which will be presented for designers  in  our online shop Tubik Lab. Working on the concepts for icons presentations described here, the designer also prepared the UI Kits.

Tubik Studio UI Kit

 

Tubik Studio UI Kit

 

The work on icons and concepts continues to present even more options and high creative potential of icons as vital elements of user-friendly interface and successful interaction providing positive user experience. Our designers have already created and presented several packs of icons, including the ones shown here, on DribbbleBehance, Creative Market, Envato as well as our own online shop for designers Tubik Lab.  Hopefully, our work will be helpful for other designers and perhaps will save some time and effort for those who are in search of necessary icons for their projects.

Now we are also preparing the articles which will tell you more about the full path of icons design, from the rough sketches to polished digitized versions. Don’t miss them in our next posts.


Originally written for tubikstudio.com

Welcome to see designs by Tubik Studio on Dribbble and Behance

Welcome to Tubik Blog

One thought on “Icons in UI design. Great Power of Small Details

Comments are closed.