Everything You Need To Know About UI/UX Design

Everything You Need To Know About UI/UX Design

What exactly is UI/UX Design?

Have you ever wondered why everyone can't stop gawking at Minnesota each time they pass by it? Rather, you can't stop thinking about how each product has its own section in the mall? You can stop wondering and imagining now, because I'm about to break it down for you.

What exactly is UI/UX design, and what exactly do UI/UX designers do? Here is a list of subtopics this article will cover:

  1. •Definition of UI/UX design.

  2. •Sole purpose of UI/UX design.

  3. •Similarities between UI/UX design.

  4. •Differences between UI/UX

  5. •Examples of UI/UX designs.

  6. •What do UI/UX designers do?

  7. •Is UI harder than UX?

  8. •Sites to learn and kickstart a career in UI/UX design.

Definition of UI/UX Design.

UI(User Interface) is the graphics, colours, everyone sees and gets attracted to while passing by Minnesota, while the UX(User Experience), is the experience every customer goes through while shopping. In one word, UI is what gets you attracted, while UX is how you explore. UI gets to create the look and feel of a product, and has more to do with aesthetics.

Have you ever wondered why ice cream shops are so colorful and aesthetically pleasing? This is to attract customers and give them a million reasons why they should come back the next time. However, many designers make common mistakes while designing which results in bad UI/UX. They tend to focus more on the outside look than the inner experience. This is more like attracting customers with aesthetics, but giving them a bad experience like queuing for hours to get a cone of ice-cream due to bad management.

Good UI with bad UX is like gathering a large amount of people into an empty museum with no artifacts. Zero experience at all! This is to show that the interface and experience of a design needs to work hand-in-hand. The level to which the interface of a design is important, is the same level to which the experience is important.

The experience is the content and backbone of the interface. Better still, the experience of a design or product is like the skeleton of the human body, while the interface is the skin covering it. And there's no way on earth the skin would stand without the skeleton!

Image Source: The Open Classrooms Blog

In more technical terms, UI is the visual representation of an application, product, and design. It is usually the first thing a user encounters. On the other hand, UX is the user's experience with a product. A product with good UX will be useful, accessible, usable, and with ease.

Oftentimes, UI and UX have been considered to be the same thing, this is because most people consider the word "design" as just the visual aspect of a product, without actually thinking about the experience, and how to navigate and explore such a product. A little experiment here, when you open your WhatsApp, the first screen you see is the UI, while the experience you have while trying to create a group chat is the UX.

Take note of how boring and bland your WhatsApp will be if the experience is not there.

Sole Purpose of UI/UX Design.

I know by now, you're probably wondering why UI/UX actually exists, and why the ice-cream shop owner cannot run his/her business without going through all these. You will be glad to know that nothing in this world cannot run without proper planning. Every business, digital product, application, needs a UI/UX designer.

The sole purpose of this is because every user which is You, is kept in mind when bringing all of these things to life. The "USER" is the key factor of any design. Every design is aimed at giving the user the best experience, and making them interact with a product with ease. This is why UX researchers exist; to make research on what users want, their complaints, and every other thing they feel needs to be in place. (Research made and documented about users is called User Persona.)

Similarities & Differences Between UI/UX Design.

Similarities.

UI and UX might be different in definition, but they are still similar in some ways since they fit in the same context.

  • •Satisfying users is the ultimate goal.

  • •Interaction from customers is the final product.

  • •They make a project look attractive because they complement each other.

  • •They both help and guide users' journey while using a product.

  • •Design thinking- solving problems by prioritizing the user's needs first. It is classified into 5.

  1. -Empathize- seeing things from the user's perspective.

  2. -Define- gaining clarity, and defining ideas you're getting.

  3. -Ideate- developing potential solutions, brainstorming, and getting creative.

  4. -Prototype- experimenting, transforming ideas into sketches.

  5. -Test- testing your results with users after iterating.

  • •Collaboration- meeting with other designers and sharing ideas and knowledge about a particular design process.

  • •Wireframe- a blueprint to communicate the structure of a project you're building.

Differences.

  • •Branding- creating a strong perception of a product or design in the users mind with a visually appealing interface.

  • •Visual design- aesthetics of a design by combination of colors, fonts, buttons, toggles, icons, animations, etc.

  • •Layout- arrangement of visual elements and texts on screen, in order to grab users attention and communicate information.

  • •User Persona- a fictional character used to carry out user research on target audience.

  • •User stories- description of a system written from the perspective of an end user.

  • •User research- making research to understand the needs and behavior of users.

  • •Usability testing- evaluating a product by testing it with representative users.

  • •User journey- full experience from a user's first contact with a product or design to the last.

Look out for the next article where all the five classes of design thinking, and every difference between UI/UX will be broadly explained.

Examples of UI/UX Design.

Image Source: Intellipaat

Every now and then, we interact with designs. Every application we have installed on our phone makes us an end user of any UI/UX design. While reading this article, you've interacted and had an experience with whatever platform you're reading it on. Below are ten examples of applications with UI/UX designs you can check out to see for yourself.

  • Instagram

  • •Spotify

  • •Twitter

  • •Facebook

  • •Google

  • •WhatsApp

  • •Pinterest

  • •YouTube

  • •Netflix

  • •Discord

Think of any digital product, application, they are all designed to have an interaction and experience(e.g our mobile phones, game apps, every social media platform, gadgets and electronic devices, to mention but a few).

What do UI/UX Designers do?

After highlighting major differences and similarities between UI/UX, it is pretty easy to state the job of a UI and UX designer. I know you're wondering whether it is possible to be a UI/UX designer at the same time. Yes! It is possible. But these days, most people rather focus on one area and find their niche.

According to the Nielsen Norman Group, the number of UXers has increased from 1,000 to 1 million between the 1980's and 2017. They predict the profession to grow further from 1 million to 100 million UX professionals by 2050. This is to show that while some people prefer to work on user experience, others prefer to work on the interaction.

UX Designers.

  • •Conduct user research

  • •Design user personas

  • •Improve products over time by testing them frequently

UI Designers.

  • •Bring UX designers idea to life

  • •Executive all visual design from scratch to finish (hand-off to web developer)

  • •Create wireframe, moodboards, user flows

Look out for the next article where "what UI/UX designers do" will be broadly explained.

Tools Used By UI/UX Designers.

Image source: Eiosys

Every kind of designer has distinct tools they use and work with. For example, graphic designers are well known to use Corel Draw. These tools used by designers are where all designs and design documentations are made. Tools used by UI/UX designers are:

  • Figma

  • •Adobe Xd

  • •Framer

  • •Webflow

  • •Miro

  • •Mockflow

  • •InVision e.t.c

There are lots of other design tools aside from all that was listed above. In most cases, most newbie designers are always asked to use Figma.

Is UX harder than UI?

A lot of people believe that UX is harder than UI simply because it has to do with the experience. There is no proof to back this up, as there's absolutely no skill that is easier than the other. Every digital skill comes with its own headache. UX designers take months tackling a problem, and face difficulties that come with their job. UI designers are not left out in this. Each skill has its own headache, you just have to be good at what you do, and be open to learning new things.

Sites to Learn and Kickstart a Career in UI/UX Design.

There are several sites and blogs that have detailed articles about UI/UX design, and there are several channels on YouTube where you can learn the practical aspect of it. A lot of skilled designers have also taken it into their hands to create platforms, apps, to enhance and facilitate the learning of various tech skills. This is their way of giving back to the tech community.

The list below will be about apps, platforms, channels, sites, where you can learn everything about UI/UX design if you're willing to kickstart your design career. A lot of them can be free, others might not. Run a quick check, and select whatever rocks your boat!

You don't have to worry if the courses are going to be detailed or not, they are!

YouTube.

Apps.

  • •Coursera
  • •Udemy

Platforms.

There are lots of sites and blogs available where you can read up articles about UI/UX design. You can read from all blogs, as every information you can gather is vital. All the links above are from trusted sources and top rated designers who are skilled in the world of design.

*Side Note.

Lots of people say you need to have basic knowledge in graphic design, brand design, and all before you get involved with UI/UX design. This is an advantage to everyone who had basic knowledge of those skills before starting a career in UI/UX design. But this is not essential, as there are millions of designers today that started UI/UX design with zero knowledge of any design related course. If you put your mind and soul to it, and you're ready to put in the work, you'll be amazed at how well you will do. All it takes is YOU!

Also, a good way to kickstart your career in UI/UX design is to follow designers on every social platform. Time-to-time, they share design resources, tips, on their socials. This is a very good way to get familiar with design terms. In terms of building a network, Twitter is a very good recommendation.

Follow me here on Hashnode@ hashnode.com/@DesignSisi and on Medium @ DesignSisi📌.medium.com for more articles on UI/UX Design.