UI/UX Design Basics for Marketers · Wireframes, UI patterns and prototypes · lesson 8 of 21 · 10 min

UI fundamentals, components and states

From wireframe to interface

Once structure is agreed, UI design makes the interface clear, consistent and attractive. For marketers, the most valuable UI knowledge is about patterns users already understand, components that can be reused, and states that give feedback.

Visual hierarchy on screens

The same hierarchy principles from graphic design apply, with extra considerations:

One primary action per view. Make the main button visually dominant; secondary actions look secondary (outlined or text buttons).
Scannable content: headings, short paragraphs, bullet lists, bold key phrases.
Consistent spacing using a scale (for example multiples of 4 or 8 px).
Readable text: body text on the web commonly starts around 16 px, with comfortable line height and line length.
Affordances: elements that look interactive should be interactive (buttons look tappable; links look like links).

Common UI patterns

Users learn patterns across the web. Using familiar patterns reduces effort:

| Pattern | Use | Tips | |---|---|---| | Hero section | Top of landing pages | Clear headline, supporting line, CTA, relevant image | | Cards | Products, articles, case studies | Consistent layout; whole card clickable if appropriate | | Tabs | Switch between related views | Keep labels short; don't hide critical info | | Accordions | FAQs, long details | Good on mobile; clear expand/collapse icons | | Modals | Focused tasks (booking, confirm) | Easy to close; don't interrupt with them on arrival | | Sticky CTA bar | Mobile landing pages | Don't cover content or cookie notices | | Progress indicators | Multi-step forms, checkout | Show steps and current position | | Toasts/snackbars | Brief confirmations | Don't use for critical errors |

Components and design systems

A component is a reusable UI element: button, input, card, navigation bar. A design system is a collection of components, styles (color, type, spacing), patterns and guidelines used consistently across products.

Benefits for marketing teams:

Landing pages can be assembled quickly from approved sections.
Consistency builds trust and brand recognition.
Developers build faster when design matches existing components.

Many website builders and landing page tools use a section/block approach — essentially a design system. Define your own set of approved blocks: hero, social proof, features, pricing, FAQ, CTA.

States: the forgotten half of UI

Every interactive element has states. Designing only the default state leads to confusing experiences.

Button states:   default | hover (desktop) | focus (keyboard) | pressed | disabled | loading
Input states:    empty | focused | filled | error | success | disabled
Page states:     loading | empty | error | success | partial data

Examples:

A loading state on a "Pay now" button prevents double payments.
A visible focus state is essential for keyboard users (and an accessibility requirement).
Disabled buttons should explain why ("Fill in all required fields to continue") — or, better, keep the button enabled and show errors on submit, which is often clearer.

Touch targets and spacing

On mobile, fingers are less precise than cursors. WCAG 2.2 includes a minimum target size criterion (generally 24 by 24 CSS pixels, with exceptions), and many platform guidelines recommend larger targets (around 44–48 px) for comfort. Provide spacing between adjacent links and buttons.

Worked example: a pricing section

Before: three plans with identical styling, eight bullet points each, "Buy" buttons in gray, and a toggle for monthly/annual that doesn't show the price change clearly.

After:

Cards with consistent structure; the recommended plan highlighted with a label ("Most popular" — only if true).
Short feature lists focusing on differences; full comparison in an expandable table.
Primary button for each plan labeled "Start with Growth", etc.
Monthly/annual toggle updates prices instantly, showing the annual saving clearly and total billed amount.
Focus and loading states designed.

Common mistakes

Several equally prominent buttons competing.
Designing only default states.
Tiny tap targets packed together.
Inventing unusual patterns where familiar ones work better.

Hands-on: build a button component with variants and states in Figma

Components let you design a button once and reuse it everywhere, so a change to the main component updates every copy. Variables let you store colors and spacing as named tokens that can switch between modes such as light and dark.

Create color variables. Open the Variables panel (in the right sidebar with nothing selected, under Local variables) and create a collection called color with variables such as color/brand/600, color/brand/700, color/text/on-brand, color/border/focus. Check each text/background pairing for WCAG contrast before you save it.
Create spacing variables (number type): space/2 = 8, space/3 = 12, space/4 = 16.
Draw the button. Type the label, press Shift + A to add auto layout, set horizontal padding to space/4 and vertical padding to space/3, and apply the color variables.
Make it a component with Ctrl/Cmd + Alt + K.
Add variants. With the component selected, add a variant property State with values default, hover, focus, pressed, disabled, loading. Give focus a visible 2 px outline in color/border/focus offset from the button, and give loading a spinner and the label "Processing…".
Add a Type property with primary and secondary values, so the secondary button is visibly quieter (outline or text style).
Check the minimum size. Make sure the button is at least 24 × 24 CSS px (WCAG 2.2 minimum), and preferably around 44–48 px tall for comfortable touch.

BUTTON COMPONENT SPEC (paste into the component description)
Name:        Button
Properties:  Type = primary | secondary     State = default | hover | focus | pressed | disabled | loading
Label:       Verb + object ("Start free trial", "Book my call")
Min height:  44 px (touch comfort); never below 24 x 24 CSS px target
Focus:       2 px outline, color/border/focus, 2 px offset, contrast >= 3:1 against adjacent colors
Loading:     Disable repeat submits; label "Processing…"; keep width stable
Disabled:    Prefer enabled + inline errors; if disabled, explain why nearby

If your team uses a website builder rather than code, apply the same idea: create one saved, reusable button style and section blocks, and never style one-off buttons by hand.

How to measure success

Look for fewer inconsistencies in design QA, faster landing-page assembly (time from brief to live page), and behavioral signals such as fewer double submissions and fewer rage clicks on elements that look interactive but are not.

Summary

Apply hierarchy with one primary action per view, use familiar patterns, build with reusable components or approved blocks, design every state, and give touch targets enough size and spacing.

Video lecture: UI fundamentals, components and states

Lecture coming soon · 12 chapters · about 8 minutes. Read the full transcript below.

UI fundamentals, components and states
Why UI matters
Hierarchy on screens
Familiar UI patterns
Components and design systems
States: the forgotten half
Worked example 1: pricing section
Worked example 2: duplicate orders (illustrative)
Watch me do it: variables + component
States as variants
Common mistakes and measures
Recap and try this now

Lecture transcript

UI fundamentals, components and states

Here's a small mystery. A shop sees lots of duplicate orders. Same customer, same product, two payments, a few seconds apart. Is it fraud? No. It's a button. The pay now button didn't change when tapped, so people tapped it again. One missing loading state, and the shop is processing refunds every week. In this lecture, you'll learn how to apply visual hierarchy on screens, which UI patterns users already understand, how components and design systems help marketing teams move faster, why every element needs states, and how to build a proper button component in Figma.

Why UI matters

Why does UI matter for marketers? Because the interface is where intention turns into action. A clear primary button, a familiar pattern, a visible response when you tap. These reduce effort, and less effort means more completed actions. Think of UI patterns like road signs. A stop sign is red and octagonal in many countries. You don't read it. You recognize it. If a city invented its own shape for stop signs, drivers would hesitate, and accidents would rise. Unusual interface patterns do the same to your visitors. Familiar beats clever almost every time.

Hierarchy on screens

Start with hierarchy on screens. One primary action per view. Make the main button visually dominant, and make secondary actions look secondary, as outlined or text buttons. Make content scannable, with headings, short paragraphs and bullets. Use consistent spacing from a scale, like multiples of four or eight pixels. Keep body text readable, commonly starting around sixteen pixels on the web, with comfortable line height. And respect affordances. Things that look tappable should be tappable, and things that aren't shouldn't look like buttons. When people click on a picture that does nothing, that's a broken affordance.

Familiar UI patterns

Now common patterns people already know. A hero section at the top of landing pages, with a headline, supporting line, call to action and relevant image. Cards for products, articles and case studies, with a consistent layout. Accordions for FAQs, which work well on mobile. Modals for focused tasks, like booking, but easy to close and never shown the moment someone arrives. A sticky call to action bar on mobile, as long as it doesn't cover content. Progress indicators for multi-step forms. And toasts, those small temporary messages, for brief confirmations, but never for critical errors.

Components and design systems

Components and design systems. A component is a reusable interface element, like a button, input, card or navigation bar. A design system is a collection of components, styles for color, type and spacing, patterns and guidelines, used consistently. Why should marketers care? Because landing pages can be assembled quickly from approved sections. Consistency builds trust and recognition. And developers build faster when designs match existing components. Even if you use a website builder, you can work this way. Define your own set of approved blocks: hero, social proof, features, pricing, FAQ and call to action.

States: the forgotten half

Here's the forgotten half of UI: states. Every interactive element has several. A button can be default, hover on desktop, focus for keyboard users, pressed, disabled and loading. An input can be empty, focused, filled, error, success or disabled. A whole page can be loading, empty, error or success. Designing only the default state leads to confusion. A loading state on pay now prevents double payments. A visible focus state is essential for keyboard users and required for accessibility. And disabled buttons should explain why, or better, stay enabled and show clear errors on submit.

Worked example 1: pricing section

Worked example one, simple. A pricing section. Before: three plans with identical styling, eight bullet points each, gray buy buttons, and a monthly or annual toggle that doesn't clearly change the price. After: cards with a consistent structure, and the recommended plan highlighted with a most popular label, only if it's true. Short feature lists that focus on differences, with a full comparison in an expandable table. A specific button on each plan, like start with growth. A toggle that updates prices instantly and shows the annual total. And designed focus and loading states.

Worked example 2: duplicate orders (illustrative)

Worked example two, a business scenario with illustrative numbers. An online electronics store in Lahore notices around one in fifty orders is a duplicate, each needing a manual refund. Session recordings show the pattern: shoppers tap pay now, the button doesn't change for several seconds while the bank verification loads, and they tap again. The fix is a loading state that disables repeat taps, changes the label to processing, and keeps the button the same width so nothing jumps. They also add a toast saying payment received once it's done. Duplicate orders drop to almost none, and so do angry support messages.

Watch me do it: variables + component

Watch me do it in Figma. First, I open the variables panel and create a color collection: brand six hundred, brand seven hundred, text on brand, and border focus. I check each text and background pair for contrast before I save it. Then spacing variables: eight, twelve and sixteen. Next, I type a label, press shift and A for auto layout, set the padding using my spacing variables, and apply the colors. I press control or command, alt, and K to make it a component. Now any copy I place will update when I change the main one.

States as variants

Now the states. I add a variant property called state, with default, hover, focus, pressed, disabled and loading. The focus variant gets a two pixel outline in my focus color, offset from the button so it's clearly visible. The loading variant gets a spinner and the label processing. Then I add a type property with primary and secondary, so the secondary button is visibly quieter. Finally, I check size. At least twenty-four by twenty-four CSS pixels is the WCAG two point two minimum, and I aim for around forty-four to forty-eight pixels tall for comfortable thumbs. I paste the spec into the component description.

Common mistakes and measures

Common mistakes. Several equally prominent buttons competing for attention. Designing only the default state. Tiny tap targets packed tightly together. Inventing unusual patterns where familiar ones work better. Styling one-off buttons by hand instead of using a component or saved style. And a focus outline removed because someone thought it looked ugly. That last one locks out keyboard users. How do you measure success? Fewer inconsistencies in design review, faster page assembly from brief to live, and fewer double submissions and rage clicks in your recordings.

Recap and try this now

Let's recap. Keep one primary action per view, and make secondary actions look secondary. Use familiar patterns people already understand. Build with reusable components or approved blocks. Design every state, especially loading, focus, error and empty. And give touch targets enough size and spacing. Try this now. Pick one section of your site, like pricing, sign-up or a product card. List every state its components need, then build or sketch the missing loading, error and focus states. If you use Figma, turn your main button into a component with state variants.

Key takeaways

Keep one primary action per view and make secondary actions visually secondary.
Familiar UI patterns reduce effort — don't reinvent them without reason.
Reusable components or approved blocks speed up consistent landing pages.
Design all states: loading, focus, error, empty, success and disabled.

Try it

Pick one section of your site (pricing, sign-up or product card). List every state its components need and sketch the loading, error and focus states you are missing.