Understanding UI Design

UI Design looks familiar…
If you’ve been looking around the digital sphere, you may recognize the term UI Design, or perhaps you might know its counter part, UX Design.

You can learn about UX Design here.

Whilst both UX Design and UI Design work closely together, each role refers to extremely different processes when it comes to designing and building a website. Though this does not stop people from misrepresenting or misunderstanding both roles.

Rahul Varshney, co-creator of the site Foster.fm describes this difference in the first of many metaphors people like to use when discussing both terms:

“A UI without UX is like a painter slapping paint onto canvas without thought; while UX without UI is like the frame of a sculpture with no paper mache on it”

This metaphor doesn’t necessarily explain the role of UI Design, but it does highlight the nature of the relationship between UX Design and UI Design.

Put simply.

User Experience Design focuses on how the user thinks and feels.
User Interface Design looks at how the content is organized and used.

or

A door handle is UI Design. The fact you need a door is UX Design.

Which one is more important?

Both are crucial and play an important role in building a site.

Of course there are millions of websites, apps and software programs that may contain one without the other. But consider how much better off they would be had they taken advantage of both.

What does a UI Designer aim to do?

  • To compliment the work of a UX Designer by translating their research and requirements into an attractive, guiding and responsive experience for users.
  • To make sure all visual elements are consistently displayed and adhering to a style guide.

In an example:

The UX Designer decides that there needs to be a ‘thank you’ box that appears after a customer has registered their details.

The UI Designer decides that this box appears in the top left in blue in Helvetica.

A better example?

A UI Designer will design each page on a website in accordance with the UX Designers recommendations.

They might be transferring some analytical data into a graph or dashboard on one of these pages. They might decide to move the more important information to the top of the page, or it might make more intuitive sense to include a zoom or sliding function to adjust the graph.

That’s sounds like a Web Designer.

There are a lot of overlapping responsibilities between a Web designer and a UI Designer, and often a UI Designer can fulfill the role of a web designer as well as a graphic designer, brand designer and a frontend developer.

But there is a distinctive separation.

Most of those roles focus on translating design into code.

But a UI Designer is responsible for translating the brand’s strengths and aesthetical values into a usable and attractive interface.The interface is what a customer will be navigating around and interacting with. It’s the visual composition of the page.

It’s everything the customer will be looking at.

A UI designer looks at branding and visual design principles as oppose to cognitive analysis.

They’re designing graphics, constructing the layout and introducing appropriate typeface.

Think of UI like a tool.

It’s a medium of communication between a person and a company. By presenting your websites information in a well-formulated and attractive layout, you are allowing your customer to interact with information and your company.

You are causing them to behave with your company. As such, it means it is observable, measurable, and testable.

How do they know what works?

Like any designer, a UI Designer will keep their eye trends in their field. Just like a furniture designer will keep tabs on new developments and ideas, a UI Designer will look at other interfaces and designers to see other ways a website can be maximized.

What’s cool in the UI World?

  1. Content chunking – This is way to break up large information, by separating them into chunks by using sub headings, new paragraphs and pictures. Like what we have done here. It makes it a lot easier to digest.

  2. Laser Focus – This is when a design of a page will cause someone to complete an action by making it really obvious. Like when you sign on to Google, there is a blank bar to write in. Immediately you are drawn to think that this is the most obvious and prioritised task to complete.

  3. Context Sensitive Navigation & Collapsed content – This is just asking the question, what items should be seen all the time and some hidden. Like how you don’t see a ‘like’ or ‘next’ option until you cursor drags over an image. Or you don’t see the full menu until you click on that little icon in the top left.

  4. Minimalism – No longer are we interested in multi-colour or rich gradient buttons or text. It’s all about being simple and colour minimal.

  5. Long pages – we used to like having everything sorted into different pages, using our mouse and a menu bar to navigate through everything. But this requires a lot of work from users. It works better to keep things simple and easy by building it all on to one page.

In short, what are a UI Designer’s Responsibilities?

  • Customer Analysis
  • Design Research
  • Branding and Graphic Development
  • User Guides
  • Prototyping
  • Animation and interactivity
  • Transference for all devices and screen sizes
  • Implementation with a developer

In a sentence:

A UI Designers responsibility is to build an attractive interface in order to enhance the relationship between the customer and the brand.

Please share:TwitterLinkedInFacebook
Get more writing like this

Sign up and get new writing, just like this, every other two weeks. Unsubscribe any time (I'm not a dickhead).

Books

User Experiences that Matter (2016)
Mastering Freelance (2017)

If You're Getting Started in UX

What's a 'User Experience' Anyways?
How Do You Learn UX?
Working as a UX Designer

Next Steps in UX

Working as a UX Lead
Defining a UX Strategy
Writing as Part of the UX Process

Thought-pieces

AI Ethics - A New Skill for UX-Designers
Designer Ethics & The Moral Implications of our Apps
The Future of the UX-Designer
Voice Input’s Effect on Social Norms

The Work We Do

Chasing Growth
New Tools Don’t Always Equal Productivity
Why Designers Need to Write
The Tools I Use to Run My Business

Featured Writing & Interviews Elsewhere

Q&A With Anton Sten, Author of User Experiences that Matter - Adobe
What the F*#!ck is a UX Designer anyway - Working not Working
It’s Time for a Code of Ethics for Designers - Medium Modus
The Art of Going Freelance - .Net Magazine
It Takes Time - Being Freelance episode 100

From My Newsletter

Who’s listening?

UX of Email Newsletters

Working as a UX-lead

2018 in review

What’s my location?

I’m taking a break

Stay humble, stay eager

Back to Work!

Vanity Metrics

The Future of Retail

2017 review

What do you do?

Carpe Diem UX-designers

What´s Good Design?

Chasing Growth

A Redesign

Is Less More?

Why Simple is Hard

Pricing It Perfectly

Trusting Your Gut

Built to last

An Eye on the Future

UX Design explained

Bite-sized Posts

The Enemy

The Hot Potato Process

Leave the Phone at Home

Delight Comes Last

The Cost of Lies

Big Mood Machine

Simplicity is a war

The next iPhone

Leadership or management

Everyone should own a dog

Silence is gold

Cameras that understand

Humans, not users

Keeping AI Honest

Right to privacy

The State of UX in 2019

Why scrap scrappy?

Organized for browsing

The iPhone Franchise

Why Small Teams Win

The Bullshit Web

Just keep at it

Let them eat cake

Netflix Culture

Skype

Unfoundered

Tech is not Neutral

Productivity

Whose risk?

Why Small Teams Win

Phone Bored

Karim Rashid

Dieter Rams

Bleeding Out

Fake News is spam

Conversational Design

Dropbox

Bye bye Facebook

Cuba

The seat at the table

Givenchy

Love letters to trees

Pricing Philisophy

Specialize

Personas

Make me think

Hawaii Missile Alert

Why Design Systems fail

What You Build

Checkout for Winners

Living a Testing Culture

Creative Class

How To Predict Your Future

Github

Medium

Design quotes

Enough

Why?

ARKit

Designing for Mobile

Failure, Reflect, Renew

Growth

Working with me

Great user experience

Naming your icons

Conversations

All writing

Who’s listening?

The Enemy

The Hot Potato Process

Leave the Phone at Home

UX of Email Newsletters

Delight Comes Last

The Cost of Lies

Big Mood Machine

Simplicity is a war

The next iPhone

Working as a UX-lead

Leadership or management

Everyone should own a dog

Silence is gold

Cameras that understand

Humans, not users

Keeping AI Honest

Right to privacy

2018 in review

What’s my location?

The State of UX in 2019

Why scrap scrappy?

I’m taking a break

Organized for browsing

Stay humble, stay eager

The iPhone Franchise

Why Small Teams Win

Back to Work!

The Bullshit Web

Just keep at it

Let them eat cake

Netflix Culture

Skype

Unfoundered

Vanity Metrics

Tech is not Neutral

Productivity

Whose risk?

Why Small Teams Win

Phone Bored

Karim Rashid

Dieter Rams

Bleeding Out

Fake News is spam

Conversational Design

Dropbox

Bye bye Facebook

Cuba

The seat at the table

Givenchy

Love letters to trees

Pricing Philisophy

Specialize

Personas

Make me think

The Future of Retail

Hawaii Missile Alert

2017 review

Why Design Systems fail

What You Build

Checkout for Winners

Living a Testing Culture

What do you do?

Creative Class

How To Predict Your Future

Carpe Diem UX-designers

What´s Good Design?

Chasing Growth

Github

Medium

A Redesign

Design quotes

Enough

Why?

ARKit

Designing for Mobile

Is Less More?

Why Simple is Hard

Pricing It Perfectly

Failure, Reflect, Renew

Trusting Your Gut

Built to last

An Eye on the Future

Growth

Working with me

UX Design explained

Great user experience

Naming your icons

Conversations