UX vs UI Design

UX Design refers to the term User Experience Design, while UI Design stands for User Interface Design. Both elements are crucial to a product and work closely together. But despite their professional relationship, the roles themselves are quite different, referring to very different parts of the process and the design discipline. Where UX Design is a more analytical and technical field, UI Design is closer to what we refer to as graphic design, though the responsibilities are somewhat more complex.

What is User Experience Design?

User experience design (UXD or UED) is the process of enhancing customer satisfaction and loyalty by improving the usability, ease of use, and pleasure provided in the interaction between the customer and the product.

What is UI Design?

User Interface Design is its compliment, the look and feel, the presentation and interactivity of a product. User Interface Design is a digital field, which includes responsibility for cooperation and work with developers or code.

User interface (UI) design is the process of making interfaces in software or computerized devices with a focus on looks or style. Designers aim to create designs users will find easy to use and pleasurable. UI design typically refers to graphical user interfaces but also includes others, such as voice-controlled ones.

Interaction Design: 

Interaction design is all about how a user interacts with the particular elements of your website, software, or application. Loading indicators, animations, and page transitions are counted under interaction design.

Visual Design: 

Visual design is similar to graphic design; however, its major focus is on designing the software rather than designing ads, forms of media, and banners. Visual designers are focused on aspects such as graphics, illustrations, images, colors, fonts and great icon designs.

The primary difference between an Interaction Designer and a Visual Designer is that a Visual Designer focuses on providing pleasant “visuals” to a user whereas Interaction Designers deal with users’ minds. Basically, it’s about good visuals vs. a good overall experience.

Basic Elements of Visual Design:

Lines, Shapes, Color Palette, Texture, Typography, Form

Form applies to three-dimensional objects and describes their volume and mass.  Form may be created by combining two or more shapes and can be further enhanced by different tones, textures, and colors.

Prototype:

A prototype is “Sample version of a final product, which UX teams use for testing before launch.” 

Example: Paper prototypes,  Digital prototypes

Low-Fidelity / Paper Based Prototypes:

Do not allow user interactions, quicker to create and these are helpful in enabling early visualization of alternative design solutions

High-Fidelity / Digital Prototypes:

These are computer-based, and usually allow realistic (mouse-keyboard) user interactions.High-fidelity prototypes take you as close as possible to a true representation of the user interface. 

Wireframe:

Wireframe is noting but "Blue Print" of the application or website. These are also two types.

Low-Fidelity Wireframes: Outlines the basic elements of website or application

High-Fidelity Wireframes: It's a more complete visual representation of the framework. It has more technical details.