Web Design Terminologies

I recall reading about someone explaining the various terms we use around in the world of Web Design. Here are the simplified ones without the jargon for posterity and my archive.

Design

Someone says, “This button should be 42px wide, have 8px of padding, and be colored #4590ff.” They’re diving into design specifics. Design, especially UI/UX design, is about precise dimensions, padding, and colors.

Google famously tested 41 shades of blue for their link color, ultimately resulting in an additional $200 million in ad revenue annually. Design isn’t just aesthetics; it can profoundly impact business.

Product

Teams announcing, “We’re building an app to let users listen to podcasts, showing recommended next podcasts with play buttons, but defaulting to autoplay,” are discussing Product. It’s not just about features; it’s about anticipating user needs.

Netflix’s “Auto Play” automatically starts the next episode unless stopped, while “Skip Intro” allows users to skip the introductory montage of a TV episode. This simple design choice dramatically increased user engagement.

Product Research

“Our users listen to podcasts while driving, needing hands-free interactions and autoplay,” showcases insightful product research. Product research is discovering user behavior to drive thoughtful features.

Spotify noticed many users listened to podcasts during commutes, prompting it to enhance its autoplay and hands-free navigation. It is common for users to discover new podcasts during their daily commute thanks to Spotify’s seamless autoplay, proving how small UX choices shape user habits.

Visual Brand

“Across products, we use simple white backgrounds, dashed-line dividers, and #4590ff primary buttons with 8px padding and 4px rounded corners,” discusses visual branding to create a cohesive style, creating brand recognition.

One might have seen Apple’s iconic minimalist approach, white backgrounds, clean lines, and consistent button shapes. It is said that Apple products remain iconic even if stripped down to mere button shapes and rounded corners, underscoring visual branding’s power.

Design Systems

“Use lists for collections; audio tracks use our music icon, and active tracks feature a moving audio signal display,” illustrates a design system, guiding consistency across products.

Airbnb’s Design Language System (DLS) is a celebrated example, ensuring its app and website feel seamlessly interconnected. A good design systems foster such familiarity.