Where does this UI start? (or end?) - Understand the UI process - Part I | 'All the shapes of UI' Series

This is the first part of the 'All the shapes of UI' series conducted by Mihai Radu, Art Director at Linnify. The series aims to educate anyone on how the UI design process should look like, do's and don'ts, and help you find the right resources for inspiration and tips&tricks.

Think of a car. The inside. Now the outside. Well done, you’ve just put your mind to visualize a UI-like process. Remove the car idea and you are left with a good start for a thought algorithm able to create the visual part of a website or application.

The buttons users click on, the text they read, the images, sliders, text entry fields, and all the rest of the items the user interacts with, are all part of the various elements UI consists of. Surely, they are representing the entire visual part of the software and the graphical layout of an application, not a car, so you may leave the keys here as we explore where and how to kick off this visual journey.

When you’re just getting started in this field, you might think of UI as just the design part of your project. However, along the way, as you also get acquainted with UX, you might catch yourself starting to understand that the process is much more complex than you initially thought. First things first: Determine the user flow

First things first: Determine the user flow

Key aspect #1: Feedback is king. 

As a designer, you start determining, but what brings it all together are the post-feedback sessions changes that put the design, the user, and the stakeholder on the same page. Lots of soft skills learned there, I know.

Next up: Master Wireframes 

(Art deserves framing.)

Key aspect #2: Wireframes are visual translators of functionality.

Wireframes exist to better picture how the navigation and technical features work. The flexibility of these wireframes bends from low to high fidelity, depending on how much detailed information is asked for. 

They play a crucial role in translating what you see as an artist towards the stakeholders. In order to validate the functionality of the flow, these wireframes need to be tested and validated.

Up next: Colors, Shapes and all that jazz design

Key aspect #3: This is when UI really comes into play.  

UX choices got validated, so it’s time for the Design System to come to life: color palettes, typography, icon, and button styles. 

'The manner in which you build your design system will ultimately determine how your UI will look like.' 

This is the moment when you (should better) prepare all the necessary components for us to use when you build your product screens.

The mathematics of fine details in design

Key aspect #4: Do yourself a favor and work in modules.

I, one, like to start granularly. Once the base of the design is settled, building the design in small bits makes sense to me. For example, a couple of screens for the login only. Then, when the module is completed, then a prototype can be created to be tested. It feels natural to check after shorter iterations. 

Validation is key. Can’t stress it enough.

The art of letting go: The handover process

Key aspect #5: Feedback might be king, but organization is queen.

After all the necessary actors approve the navigation, technical features, and UI representation, preparing the handoff for the development team can start. 

This means anything from preparing assets to be easily exportable to full-blown documentation in which every step of the process is explained and configured in such a way that it would make sense for anyone (especially developers) to understand.

What’s the point of User Interface? (or line, or gradient)

Simply put, you need to make the product look as best as you can. 

My humble, yet possibly any designer’s main goal should be:

'to reproduce the idea and concept of a brand in a creative and organized way, while staying in line with the client’s needs.'

Own your stance, tho. The money that a company can lose daily without knowing is like a quiet drip underneath your sink. Is it ‘just’ design?

What’s the catch, then? 

Ever wondered what turns good design into great design, and why sometimes something is just off?

Here’s the catch, not everyone that has 10+ years of experience in the domain is good at UI because they aren’t good at branding. They make the app look perfect, just like a template, but they miss out on that creative, unique spark to it. 

'That ‘special something’ that makes you feel that the brand is there.'

That thing is what makes the app different from other app that’s already on the market.

In my experience, what makes a UI design stand out is a drop of creativity. Otherwise, it is just a template that you found on the internet of a website that is similar to millions that are already out there. You need to feel the brand and understand it fully in order to manage to create a website that is fit for it. 

‍

My colleagues, Andrada Farcaș and Adrian Miclăuș have joined their forces to create a design white paper to help individuals from all kinds of backgrounds to simplify their customers' experience, create a design that matters, and set a product successfully on the market. It’s called “Unleash your UX/UI design superpowers - Your essential handbook for generating the design that matters” and you should definitely check it out. It will cost you less to read it than it will if not.