Published on | Prototyping: From UX to Front End — Medium Ishara sunjeewa

UX: Helps users accomplish goals
UI: Makes emotional connections

Today’s UX designers are facing a problem. More and more of them are finding that employers expect them to have not only UX expertise but also UI design skills.

Take one look at any of the recent UX designer job ads being posted in popular job sites such as LinkedIn, Monster, and Indeed. In a recent study, we found that 66% of those ads request UI skills.

“66% of UX designer job postings request UI skills.”

Many big-name institutions are starting to favor designers with both UX and UI under their belts. In fact, 20% of UX designer job ads put the “UI designer” part right in the title, specifically searching for that coveted “UI/UX designer” combo.

While the reasons for this rise in demand run many and varied, there’s one thing for sure: having a workable knowledge of both these design specializations gives designers an undeniable edge when it comes to landing a job.

We’ll be looking at how you can change your mindset from that of a dedicated UX designer to a UX designer with skills in UI.

Where does UX end and UI begin?

As you (no doubt) already know, UX design involves identifying a pain point or user need, then drawing up and validating a prototype through user testing. Once both the value proposition and user needs have been validated, the product is built.

Source: Dribbble.

It isn’t until after all of this (usually) that the UI designer comes in.

A UI designer works with the initial prototypes set up by the UX designer to include visual elements that make the product beautiful and memorable.

“The best products do 2 things well: features and details. Features are what draw people to your product. Details are what keep them there.”

How can you become a UX/UI designer?

A great first step is to sign up for a course that’ll cover the basics of good UI design and give you a chance to train and hone your skills. A remote program with a flexible schedule is helpful, especially as you’ll likely be trying to fit this in amongst your full-time job or freelance work. You need time to really study the course materials and adjust yourself to any potentially new software.

But the most important piece?

A dedicated mentor. Sure, you could go about it yourself, but who’s going to tell you whether you’re on the right track? Who’s going to direct you to try out new trends, concepts, or ideas and train your eyes to pick out which ones work best? And who’s going to act as your personal cheerleader when you’re going through your third “I can’t look at another icon!” tantrum?

some might be thinking, “are UX and UI really so different?” Perhaps they’re even thinking all they need to learn is how to make an icon and they’ll be golden. But there’s so much more to these 2 fields than a little bit of color theory.

Source: Dribbble.

Let’s take a look at where UX and UI differ so we can better understand their roles in the world of design.

UX: Makes interfaces useful
UI: Makes interfaces beautiful

A useful product meets a need that’s not already being met in the market. The research process of a UX designer involves doing a competitive analysis, developing personas, and then developing a minimum viable product — or more apropos, a minimum valuable product; a product that will be valuable to your targeted customer niche. This is validated through testing during the life-cycle of the product.

Once the user flows and wireframes are prototyped and tested, it’s the UI designer’s role to make them aesthetically pleasing. This includes choosing a color scheme and typography that will be both attractive and simple to use.

Source: Dribbble.

However, color choices, typography, and interactions aren’t based on the designer’s personal preference, but rather on clearly articulated reasons specific to the personas developed by the UX designers. With these, UI designers implement a visual hierarchy that will serve as a guide to users, letting them know what to do and when to do it in order to meet their objectives.

Source: Dribbble.

A well-designed hierarchy will highlight one main objective per page, making it clear to the user where they are on the site and what they can accomplish at any given moment. To achieve hierarchy, you can apply conventions or patterns that users are already familiar with. These patterns will act as clues to the user as to how to get to where they’re going.

UX: Helps users accomplish goals
UI: Makes emotional connections

People come to your site to do stuff, whether it’s researching the best kind of doggie companion for small apartment living or paying their taxes (ouch!). While the former may be more fun, in both cases, people come to your site with a goal in mind.

The UX side of things might look at people like dog lovers and try to figure out what’s important to them. What is it that they value or need when looking for assistance in choosing their next furry friend? They ask questions, they observe and interview people, they may even make prototypes and do a bit of guerrilla testing to see if they can validate their business and product value propositions.

Once you have the basic functions down pat, according to Aarron Walter, author of Designing for Emotion, it’s really the personality of your interface that will elicit loyalty in your users. People may be drawn to your site because of its striking design. They may stick around if it allows them to accomplish their goals.

…but once they make a personal connection, they’re hooked.

Does your interface make them laugh? Does it “get” them? Is it cheeky?

Walter says, “People will forgive your shortcomings, follow your lead, and sing your praises if you reward them with positive emotion.” That’s where the expertise of the UI designer comes in.

UX: Done first
UI: Done second… (sometimes)

Within the process of design, how do UX and UI designers work together?

Normally, UX design and research is the first step when deciding whether to build a product or application. UX designers handle much of the research that will validate or invalidate initial product ideas and guide the development of the product.

Once the prototype has gone through several iterations and is largely finalized (for now), the UI designer steps in and begins to work on the visual design and micro-interactions.

However, this may not always be a linear path. It depends on many factors. For example:

Who handles the UX and UI?
Is it the same person or a different person or team?

UX: Employed across products, interfaces, and services
UI: Only pertains to interfaces

User experience design is a broad field and it’s becoming more popular by the day. Now, many companies that develop products or provide services are catching on to the value of understanding their users and validating their hypotheses before they build — not just companies with a web presence.

User interface design is, well, only for user interfaces. This doesn’t mean, however, that it’s limited to the graphical user interfaces of computers, tablets, and mobile devices. We’re also seeing interfaces on many other products these days, everything from watches, washing machines, and car dashboards to vending machines, ticket kiosks, and more.

I recently read about an application on the iPhone that unlocks your car door. It turns out that this set of interactions takes many more steps than simply using your key to unlock the car door. Whether designing for interfaces or experiences, we should take care to (once again) keep our users at the heart of our design process.

Now that you know a few of the differences between UX and UI, you should have a better idea as to how you can specialize in both.

“Building thoughtful products with clear intentions shows that you care, makes choices more comfortable, and leads to a better overall experience.”

Let me know what you think!

I am curious to know how you guys manage UX and UI conflicts. Ideas and suggestions are more than welcome.

If you enjoyed the article, hit 👏 as many times as you want!

…

Leap to UI/UX was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Leap to UI/UX

Cool stuff, every week

More Articles