Introduction to UI & UX Design
By: Feyisayo Amoo
Tags: UX Design, UI, Ui Ux Design, Figma

User Interface Design

Refers to the aesthetics of a product, focuses on visual aspect of a product that draws the attention of users to it and direct the users on each steps to take when using the product. A process by which designers build the interface of digital product focusing on the colors, fonts and typography. It is made up of components that allows users to interact with a product or services.

User Interface (UI) Design focuses on anticipating what users might need to do and ensuring that the interface has elements that are easy to access, understand, and use to facilitate those actions.

User Experience Design

Refers to the experience of users when interacting with a product or service. The main aim of user experience is ensure a particular product or service is easy to use and perform all the necessary functions to satisfy the customer.

User experience design is the process of anticipating user needs and wants and proffering solutions to it. It focuses on overall effectiveness of a product to bring about customers satisfaction.

The main aim is meeting users need before, during and after product development. UI design is all about how the user interacts with an interface, how they get from one screen to another.

Difference between User Interface & User Experience Design

User Interface

Deals with users experience and interaction.

Applies to any product or services.

Focus on tools.

Desirable.

What to make.

User Experience

Deals with the aesthetics of a product.

Applies to only digital product.

Focus on interaction.

Credible.

What to achieve.

Design Tools

Design tools are software, media, objects, etc. that helps with creating design elements to communicate a message or build a brand. Examples include Figma, Miro,Adobe XD, Whimsical, Sketch etc.

Design tools are software, media, objects, etc. that helps with creating design elements to communicate a message or build a brand. Examples include Figma, Miro, Adobe XD, Whimsical, Sketch etc.

Figma

Figma is a cloud-based design tool that allows users to work together on the same file in real-time. Figma is a digital design and prototyping tool. It is a UI and UX design application that you can use it to create websites, apps, or smaller user interface components that can be integrated into other projects.

Advantages

Ease of use and compatibility.

Easy to share files.

Numerous plugins available.

Cloud based website designing tool.

Disadvantages

Require large amount of RAM.

Files cannot be accessed offline.

Components are a little bit challenging to master and effectively use.

Miro

Miro is a design tool that blends aspects of several different categories of software into one. It’s part diagramming and flowchart software and part presentation app.

Advantages

Excellent collaboration and presentation tools.

Strong support for integration with other apps and service.

Easy to use.

Rich features.

Quick orientation before people can effectively interact.

Built-in video chat.

Disadvantages

Little offline functionality.

Can’t show a video to participants, video can only be viewed by individuals.

Aligning and spacing elements is also a bit difficult.

Adobe XD

Adobe xd is a vector-based tool for designing and prototyping user experiences for web, mobile, and even voice.

Advantages

Easy, flexible wireframing.

Simple but powerful interaction.

Good app for prototype demo.

Time-saving features like symbols and grids.

Disadvantages

Scrollable masks can be confusing when scrolling through preview pages.

Easier templated elements without hunting for plugins.

The app does not support timeline animation, so its animation capability is elementary

Missing horizontal scrolling.

Sketch

Sketch is a visual design tool of use for application prototyping, coming with a wide variety of extensions, plugins, and an active user community.

Advantages

Easy to learn and use.

Sketch Libraries ability to sync across multiple Sketch file.

integration with other design software.

Autosave and multiple artboards.

You can design elements like icons and reuse them.

Disadvantages

Limited measuring tools.

Requires creating a lot of custom keyboard shortcuts to be super-efficient.

Doesn’t let you create permanent color palettes.