An Intro to UX/UI

#beginners #uiweekly #ux #css

Let's begin with the obvious...
Also, be sure to read to the bottom of the page as I provide some additional resources if you're hungry for more.

So, what is UX/UI?

UX/UI is a new term for a design concept that has been around for quite some time, but let’s break the terminology down into its component parts.

UX stands for User Experience. UX is how an end-user i.e. the specific audience you’re developing for: a customer, website visitor, app user, etc. experiences your product from the first touch to last.

UI stands for User Interface. A user interface refers the presentation of your product to your end-user i.e the look and feel of your product, the components of a website or app, and the interactivity of those components.

These design concepts can be applied to the creation of any product like... a car for example: the UX for the driver will depend on the car’s performance, safety features, the drive experience, etc. The car UI for the driver includes: the car’s exterior and interior styling, the dashboard, entertainment console, the steering wheel, how the car presents to the user, etc.

We’ll focus our attention on digital products moving forward, but these design concepts have broad application across many product types.

Human-centered Design:

You’ve probably heard of the term Human-centered or user-centered design within the context of UX/UI, and if you haven’t, we want our products to be user-centered (i.e puts the user front and center) because well, we’re making them for people, and our end-user should be at the center of every design decision.

What does it mean for a product to be Human-centered, I’m so glad you asked. It means our products should specifically be Usable, Equitable, Enjoyable, Useful.

UX | How Users experience your product

Usable - Is it functional? The design and function is clear for everyone to understand. Self-guiding questions one can ask to determine if a product is usable: Can users accomplish specific tasks within the design? Is the functionality of the product easy to understand?
Equitable - Are the needs of a diverse group of users considered? Our products should be inclusive of end-users of diverse abilities and backgrounds. Questions to ask to determine if a product is equitable: Does the product address the needs underrepresented groups? Does the product only work for abled users?
Enjoyable - Does it keep the user engaged? Our goal is to create a positive connection between our users and our product. Questions to ask to determine if a product is enjoyable: Does the product and it’s design inspire delight in the user? Are there aspects of the design that consider the user’s feelings?
Useful - Does it solve a problem? We should make products that add value to people’s lives. Questions to determine if a product is useful: Does the product design solve a problem for the user? Does the design / product help your users achieve a specific goal?

UI | How your product looks & responds to User actions

Creating a Design System: the user interface is the juncture where the user and the product meet through the medium of a digital device like a mobile phone, computer, or tablet. Check out this color system / global color guide from Material Design.

It’s important to keep your product design consistent, coherent, and accessible…. i.e choosing colors with high enough contrast for users to read type while avoiding color combinations that strain a user's vision.

A product’s UI is created with a visual collection of design elements that include typography, color schema, icons & buttons, animations, imagery, and responsive layouts that adapt to device type. Again, I cannot stress enough the importance of consistency regarding these elements because a good design system reinforces user confidence, coherence, and product usability.

The Product Development Lifecycle

Everyone wants to dive in and create prototypes, but developing a great product requires quite a few steps before jumping into prototyping. Because a product's UX and UI are informed by one another and most importantly, the end user. Product development is a cycle of research, iteration, and testing.

image credit: Google UX

Brainstorm
Initial process for coming up with ideas for/about product.
Define
Defining the product. Who is the end user for this product? What will the product do? What features are needed to be successful? Pin down the focus of the product.
Design
Draw wireframes, create low-fidelity prototypes & high-fidelity, and create early models/user-flows of the product’s functionality.
Test
Test the product with users to consider the interactivity of product design and decide what might need to change based on user feedback.
Launch
Sharing a finished version of product with the public
Real-world understanding

Back to Prototyping & Using Prototypes in Development

I know what you’re here for. Adobe XD and Figma are the most common and widely used design tools for building UI Prototypes. There are some great tutorial resources out there, but Adobe XD's Start Page and Figma's Learn Design Page are great places to start.

Use the built-in developer tools: in Adobe XD:
Use the share tab to export a development friendly link that includes CSS.

Use built-in developer tools: in Figma:
Use the inspect tab and the ALT or OPTION key to inspect your UI prototype that includes CSS

Inspect the CSS
Be sure to test the CSS taken from any prototype. You should be especially careful of the prototype's CSS position. In most cases, your UI prototype will default to absolute, which won't give you the responsive elements that you likely desire.