User Interface

Once the layout has been definied, next step is to start thinking about how all the elements and components would look. That's the actual UI of the product. This is the creative part, where we can decide the look of our product or apply branding guidelines.

We can play with the layout to make the visual experience diverse and playful.

MOBILE APPP

MOBILE WEBSITE

DESKTOP WEBSITE

Components and States

In order to keep consistency across the devices, we need to design elements in a way that they would work on each version, and in a way that they can resize and readapt for optimal responsiveness.

Applying elements and components we designed to the layout structure we defined before,

brings our user interface to life!

Cross Platform Experience

A well structured layout and a consistent design system makes the overall cross-platform experience enjoyable, usable and friction free.

Icon Design

Micro Interactions

Micro Interactions play an important role in a User Interface. They make the experience more enjoyable and give the user a reward after completing a task, in the form of visual feedback. It's good to find the right balance between no interactions/animations that would make the experience pretty dull, and an overuse of them that would just add noise and confusion.

Accessibility

Accessibility is the inclusive practice of ensuring there are no barriers that prevent interaction with, or access to, digital products by people with physical disabilities, situational disabilities, and socio-economic restrictions on bandwidth and speed. When sites are correctly designed, developed and edited, generally all users have equal access to information and functionality.

 

To ensure we meet these requirements, we have to pay attention to some fundamental aspect of our product. A few examples are:  good contrast between colours and standard text size to make the readability and navigation optimal even for people with impaired vision; clarity on language and semantics to make our product accessible by people with any cultural background and education; keeping a consistent and clear layout for people with cognitive difficulties.

 

It is important to understand that accessibility is crucial not just for people with disabilities, but also for users that might find hard to complete a task due to their temporary environmental or emotional conditions ( for example a workplace with dim lighting, or an emergency situation ).