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 the efficient UI/UX design. Our designers always work thoroughly on icons for every project we take over. Going further, we 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 another 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.
To present some items from the set in practice, we 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.
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.
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.
Valentine’s Day Icons Presentation
One more set of icons was specially created for Valentines Day theme.
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, we worked out one more UI concept demonstrating the broad functionality of this set even beyond the seasonal topic of St. Valentine’s Day celebration.
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.
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.
So, the second presentation also shows the great potential and high level of functionality of such small elements as icons.
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. Working on the concepts for icons presentations described here, the designer also prepared the UI Kits.
The work on icons and concepts continues to present even more options and high creative potential of icons as vital elements of the user-friendly interface and successful interaction providing the 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 icons design, from the rough sketches to polished digitized versions. Don’t miss them in our next posts. Meanwhile, welcome to check the review of types and functions of interface icons.