UI/UX Basics

Basic knowledge of UI and UX design

Charity Obukomena
3 min readOct 13, 2022

--

Welcome to this read!!! I hope it will be exciting for you as it was for me writing it.

As a Product designer in training, it was compulsory for me to know the basics of User Interface, also known as UI, and User eXperience known as UX. So if you’re reading this and thinking of venturing into product design, it will be helpful to you.

I have explained the general concept of UI/UX and given some examples of design tools that can be used.

P.S: In this article digital product refers to websites and mobile applications.

User Interface (UI) explained

Simply put it is how a digital product looks.

But for a deeper meaning user interface is the process of building different interfaces in software or computerized devices and placing the most importance on its looks or style. The main aim is to create designs that will be easy and pleasurable/eye-catching for users.

UI Designers need to anticipate what users might need to do and ensure that the interface has elements that are easy to access, understand, and use to facilitate those actions.

Some of the interface elements that UI Designers focus on are icons, typography, buttons, checkboxes, drop-down lists, text fields, list boxes, toggles, date fields, color scheming, imagery, spacing, search field, tags, sliders, footers, header, notifications, tooltips, progress bar, responsive design, and many others. Here

UI design focuses on making sure each screen looks its best visually and serves its purpose in an overall digital product.

User flow Illustration

User eXperience (UX) explained

Simply put it is all about how a digital product feels.

Furthermore, User experience is the process of enhancing user satisfaction with a digital product and this is achieved by improving the usability, accessibility, and pleasure needed while interacting with the product.

A good UX design is all about making sure that a visitor to your digital product has a good experience when they’re there, and they’d be happy to come back.

UX design provides value to its user. So a nice-looking digital product will not automatically have a good feel, except if the UX is good.

User experience includes human-computer interaction (HCI) design and extends it by addressing all aspects of a digital product as perceived by users.

UX design is the process of building a digital product that is both functional and intuitively easy to use. It focuses on the “satisfaction” aspect of a user’s experience.

These are some of the steps used to achieve user experience: user research, creating wireframes, low fidelity and high fidelity, personas, prototypes, testing, iteration, and presentation.

Design tools

Design tools for UI/UX designs

There are several design tools for storyboarding, prototyping, animation, collaboration, and interaction. Check them out.

UI/UX Design tools

Screenshot Examples

The first screenshot below is an example of a low-fidelity design I’ve been working on with Adobe XD, one of the design tools recommended. The second screenshot is a prototype of a mobile app.

Mobile app low-fidelity design
Prototype

Hope this article helps someone out.

Credits: Frankpeter Ani, Image by storyset, Image by rawpixel.com, Palette

--

--

Charity Obukomena

I am a Customer Support Officer, but also a UI/UX enthusiast. I am developing and learning regularly. Self-development is my best friend.