Codecademy Logo

Introduction to UI and UX Design

Print Cheatsheet

What Is Design?

Design is an intentional problem-solving process focused on planning or making something for a specific use or purpose. While “design” is often equated with graphic design or visual design, design is a vast discipline with many subdisciplines – everything from industrial design to service design.

UI and UX Design

Both user interface (UI) design and user experience (UX) design are centered on users and ensure that the products and systems meet real needs and are as intuitive and pleasant as possible to use.

User Interface (UI) Design

User interface (UI) design is focused on the visual design of the interface through which users interact with a product or system. UI design considerations include layout, colors, typography, interaction design, brand identity, responsiveness, and accessibility.

Examples of user interfaces on differently sized screens: smartphones, laptops, a large monitor, and a smart watch.

User Experience (UX) Design

User experience (UX) design is focused on the holistic experience around a product or service, taking into consideration the user, system, and context. UX design focuses on the user journey, user research, and deliverables to document the user experience, such as personas, journey maps, storyboards, and prototypes.

A Venn diagram of the intersection of three circles: Context, User, and System, with User Experience (UX) at the center.

5 Elements of UX Design

The 5 elements of UX design, from abstract to concrete, are strategy (user needs, business goals), scope (functional and content requirements), structure (information architecture, interaction design), skeleton (interface design, navigation design, information design), and surface (visual design). UX design encompasses the entire process, while UI design primarily focuses on the surface.

User vs. End-User

The user is anyone who might use or maintain a product, and could include people such as system administrators, IT experts, and computer technicians. The end-user is the person ultimately intended to use a product, who may not have the technical know-how or skill of the product’s administrators.

UI and UX Methodologies

UI and UX methodologies offer structure and consistency to focus on problems, drive execution, and define success within a design process. Methodologies help get people on the same page, whether it’s within a project, an organization, or an industry. Designers can choose between a wide variety of methods for any given project.

Product Development

Product development is a cross-functional, iterative process, usually involving many stakeholders across an organization. The process starts from a problem or pain point to ensure that the product meets a real user need and that the team is aligned around the same goals. UX designers and researchers can be involved at any stage of the cycle to ensure user needs are taken into account. UI design is one of the many outputs of the process.

Product Development Life Cycle

The Product Development Life Cycle (PDLC) helps us understand how design fits into product development. This process can be viewed as 5 stages: brainstorm, define, design, test, and launch.

A cycle diagram representing the five stages of the Product Development Life Cycle: Brainstorm, Define, Design, Test, Launch.

Double Diamond

The two-diamond structure of the double diamond diagram differentiates between divergent thinking and convergent thinking and when they occur during strategy and execution in the design process. The four phases of the double diamond process are: discover, define, develop, and deliver.

The Double Diamond diagram: two diamonds side-by-side, broken down into Strategy (Discover and Define) and Execution (Develop and Deliver) phases, moving from problem to solution.

Divergent Thinking

Divergent thinking explores many possible solutions and generates novel ideas, promoting creativity and innovation.

Convergent Thinking

Convergent thinking analyzes, filters, and focuses ideas to help teams make decisions and commit to a direction.

Wicked Problems

The term wicked problems, coined by design theorist Horst Rittel, describes the types of extremely complex, multi-dimensional problems that designers are often tasked to solve. Design thinking isn’t limited to creating new products—it can affect change at a systemic level.

Design Thinking

Design thinking puts people at the center of every process and encourages designers to set aside assumptions. The five stages of the design thinking process are: empathize, define, ideate, prototype, test.

A diagram of the five phases of the design thinking process: Empathize, Define, Ideate, Prototype, and Test.

Design Thinking: Intersections & Activities

Design thinking offers opportunities to focus on both divergent and convergent thinking across its steps to encourage both creativity and problem solving. Design thinking lives at the intersection of desirability, viability, and feasibility and its core activities are ideation, inspiration, and implementation.

A Venn Diagram illustrating the intersection of Desirability, Viability, and Feasibility.

User-Centered Design (UCD)

User-centered design (UCD) is an iterative process that puts users at the center of product development and involves them in the design from the beginning. User-centered design processes generally involve the following activities: understand, specify, design, evaluate.

A cycle diagram of the user-centered design process, with people at the center of the diagram. The four steps of the cycle are Understand, Specify, Design, and Evaluate.

UCD & Product Development

In user-centered design (UCD), product development should respond to both both contexts of use (such as the user’s environment, technology, and emotional state) and business goals.

The UX Honeycomb

The UX Honeycomb diagram is one example of a framework for understanding the many facets of a positive user experience. Created by designer and information architect Peter Morville, the UX Honeycomb defines “good” UX design as useful, usable, desirable, findable, accessible, credible and valuable.

An illustration of Peter Morville's UX Honeycomb diagram, with seven adjectives within each hexagon: usable, useful, desirable, valuable, findable, credible, and accessible.

Ten Usability Heuristics

The ten usability heuristics, developed by Jakob Nielsen and Don Norman, are a set of ten general principles for good interaction design. They help designers assess where a design is excelling and falling short, and what trade-offs are being made in a design process. Examples of heuristics include visibility of system status, consistency and standards, and flexibility and efficiency of use.

An illustrated list of Jakob Nielsen's ten usability heuristics.

User Research

User research is the systematic study of target users of a product or interface to understand their behaviors, needs, and motivations. User research can happen at every stage of the design process to inform decisions. Methods of user research include: quantitative user research, qualitative user research, attitudinal research, behavioral research, and usability testing.

Illustrations of three tools used by user researchers to communicate their research findings: personas, storyboards, and journey maps.