UI Design Guide: 3 Principles of User Interface Design

UI design (short for user interface design) focuses primarily on the aesthetics and visual design of the customer’s experience through branding, web design, typeface choices, icons, and ad design. UI design is associated primarily with digital experiences (like websites, online courses, and mobile apps) rather than physical products or product packaging.

UI design is a subset of UX design (or user experience design), which is the overarching process by which a company designs every aspect of the customer’s journey.

Whether they’re designing a mobile app or landing page, UI designers usually share a few main goals throughout the design process:

1. 1. Aesthetic. UI design work helps craft branding and tone across every online page, physical store, or product, creating an attractive look and feel for the company that aligns with its goals—whether that’s soft and inviting or cool and edgy.
2. 2. Cohesion. UI design aims to make a brand’s presence feel cohesive across different platforms, including websites, social media, mobile apps, and ads, to ensure that every customer’s visual interaction with the company feels similar.
3. 3. Accessibility. UI design is primarily about looks, but UI designers also work hard to ensure that their designs are intuitive and user-friendly—they don’t want a beautiful or overly innovative design to get in the way of a customer’s interaction or purchase. They work together with UX designers to ensure that their designs offer full usability, functionality, and visual appeal.

A user interface designer is responsible for:

• Prototypes: In the early stages of the design process, UI designers create sketches, mockups, and wireframes of digital products for testing and feedback, using many design tools, prototyping tools, design systems, or mockup software. UI designers can create these designs from scratch or build them off of existing design patterns and templates.
• Iteration: UI designers work within a highly collaborative workflow, receiving feedback from different entities—including leadership, user research, and UX designers—that they incorporate into their final designs.
• Style guides: UI designers typically create or contribute to a company style guide, which offers overarching guidelines for design elements like color, typeface, spacing, and images.

UI designers know how to design many different aesthetic pieces of a company’s overall look and feel, including:

• Information components: Information components are pieces of digital design that need to communicate a particular concept quickly—for instance, tooltips, icons, notifications and message boxes, progress bars, and modal windows. UI designers decide where these information pieces go and how they look (for instance, size, shape, color, and typography).
• Navigation: Navigation components are pieces of interactable digital design (sometimes called interaction design or responsive design) that help users move around webpages or app windows—including sliders, search fields, page numbers, breadcrumbs (links that allow users to go back to pages of higher categories), tags, and navigational icons. UI designers decide when it’s necessary to include navigational elements and their aesthetic across the brand.
• Input controls: Input controls are pieces of digital design that require interaction from users—including buttons, checkboxes, dropdown lists, text fields, toggles, and date fields. UI designers determine the look and feel of these necessary controls and ensure they feel cohesive and deliberate within the design as a whole.
• Containers: Containers are pieces of digital design that hold other information and can expand to offer additional details—examples include accordions, tabbed interfaces, drop-down lists, and hamburger menus. UI designers determine when containers are necessary to keep the visuals uncrowded and aesthetically pleasing.

UI design is often used interchangeably with UX design (short for user experience design), but they are slightly different fields. UI design is a small subset of UX design that focuses on the aesthetics and graphic design of the customer’s experience—like branding, typeface choices, and website visuals—and primarily requires design skills.

On the other hand, UX design governs the big picture—every moment of the customer’s interaction with the company and products—and incorporates a broad skill set, including coding, product management, and design.

Get a MasterClass Annual Membership and let David Carson be your personal tutor. The prolific and decorated designer—who’s been lauded as the “art director of the era”—reveals his processes for going off the (design) grid, implementing typography in new and interesting ways, innovative uses of photography and collage, and so much more.