InkTank Refinement
UI design
Visual refinement process based on a design langauge system to ensure unique product character.
Overview
This Case Study focuses on the visual refinement process of InkTank App, a project created as a part of CareerFoundry UX Design course. The goal of this process was to develop a full design langauge system which would compliment the content of the app and give the whole product a unique character.
All content was created with Adobe XD and Adobe Illustrator.
Project Goals
- developing a unique visual language of the product
- ensuring visual coherence across the whole product, for both desktop and mobile platforms
- identifying and removing design inconsistencies
- improving efficiency of product development by organizing and documenting design components
- polishing up the user experience – ensuring ease of use and enjoynment
InkTank Icons
To give my app a unique character, I decided to create tattoo-inspired icons.
First Sketches
I started preparing for this task by creating a couple of quick and simple sketches.
After putting some initial ideas down on paper, I narrowed my options down to the designs which I liked the most and then proceeded to drawing them in more detail.
Creative Process
I planned to create icons of a size 30×30 px, which meant that I had to reject more complicated ideas. After narrowing my choices down, I opened up Adobe Illustrator and created couple of different versions.
Final Versions
Final versions of my icons were determined by a number of different factors:
- Their small size prevented me from choosing more complicated designs
- Icons had to be clear enough, so that my users would understand immediately what they represent
- On one hand, they had to be easy to spot on the screen, but on the other hand, they couldn’t be too distracting
- Their design had to be unified and tattoo-themed
In the end, I decided to replace the Home icon with a Newsfeed icon represented by a deck of cards, as I decided that the previous one differed too much from the others and didn’t resemble any typical tattoo design.
Design Language System
In order to ensure visual harmony of the product, I created a document that lists all reusable components and standards. The goal was to develop a clean and simple style, which would compliment the tattoo photos of my users, and not overwhelm them with visual clutter. During the process of developing my app’s UI I followed Material Design Guidelines.
Refined Design
After establishing a unified design system and creating tattoo-themed icons, it was high time to implement all these UI elements and guidelines to my product. Final version of my mobile prototype can be seen below.
If you’d like to know more about InkTank app UX design process, click here.
