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 a Valentine’s Day Icons Presentation which presented one more UI concept showing another type of environment for design. So, today we decided to tell a bit more about those presentations here.

Multimedia Icons Presentation

The first UI concept was created on the basis of Multimedia Icons Set by Arthur Avakyan.
Icons in UI Design. Great Power of Small Details | picture
To present some items from the set in practice, Valentyn Khenkin designed the UI concept of the 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.
Icons in UI Design. Great Power of Small Details | picture
Icons in UI Design. Great Power of Small Details | picture
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 a simple and clear user interface, easy to use in any environment. Therefore, all the icons were carefully drawn and shaped.
Icons in UI Design. Great Power of Small Details | picture
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.
Icons in UI Design. Great Power of Small Details | picture

Valentine’s Day Icons Presentation

One more set of icons was specially created by Arthur Avakyan for Valentines Day theme.
Icons in UI Design. Great Power of Small Details | picture
Designing icons for the set, the designer took much time and effort to make them clear, recognizable and meaningful in the general layout of the user interface. Based on this, Valentyn Khenkin worked out one more UI concept demonstrating the broad functionality of this set even beyond the seasonal topic of St. Valentine’s Day celebration.

Icons in UI Design. Great Power of Small Details | picture
To demonstrate the icons in action, the designer created the concept of a 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 the user’s data and statistics as well as featuring the use of icons of the presented set in the tab bar. The icons represent main steps of navigation and at the same time become a harmonic addition to the general visual representation of the screen.

Icons in UI Design. Great Power of Small Details | picture
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. 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.

Icons in UI Design. Great Power of Small Details | picture
So, the second presentation also shows the great potential and high level of functionality of such small elements as icons.

Icons in UI Design. Great Power of Small Details | picture

UI Kits

Working on different projects in Tubik Studio, our designers prepare UI Kits — the sets of user interface elements that can be integrated into 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. Working on the concepts for icon presentations described here, the designer also prepared the UI Kits.
Icons in UI Design. Great Power of Small Details | picture
Icons in UI Design. Great Power of Small Details | picture
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 Dribbble, Behance, Creative Market, and Envato. 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 icon design, from the rough sketches to polished digitized versions. Don’t miss them in our next posts.


About the Author: Marina Yalanska is content manager and writer for Tubik Studio, tech/design blogger and researcher




Try tools for creators by the Icons8 team:

Icons8

Icons8, a library of about 130K+ icons and clip art images

Offline app icons8

Offline app and plugins to drag’n’drop icons and clip art to any design tools

Moose

Moose, the big collection of high-quality stock photos

illustrations

Ouch! , a library of vector illustrations and collages

Background Remover

Background Remover, AI-based online tool for removing background from any photo

Mega Creator

Mega Creator, online tool for creating visual content from pre-made elements

Fugue

Fugue, royalty free music for videos of any kind

Lunacy

Lunacy, free graphic design software with built-in design resources

Smart Upscaler

Smart Upscaler, image upscaler to enlarge and enhance images using AI

Generated Photos

Generated Photos, unique, worry-free model photos generated by AI

Also, get the lists of free vector software and free photo editing software.
pinterest linkedin VK reddit