Designing UI Components

# CHAPTER 8

Designing UI Components #

1. Introduction #

If you dismantle a massive, complex Lego castle, you will find it is constructed entirely from a few dozen simple, repeating plastic bricks. A digital interface operates on the exact same logic. A massive 50-page e-commerce website is not 50 pages of unique art; it is simply a clever rearrangement of a few core elements: Buttons, Cards, Input Fields, and Navigation Bars. These foundational building blocks are known as UI Components. In this chapter, we will transition from the rough gray boxes of wireframing into the pixel-perfect precision of High-Fidelity UI design. We will dissect the anatomical requirements of standard UI Components, enforce strict spacing rules, and design interactive elements that feel modern, clickable, and accessible.

2. Learning Objectives #

By the end of this chapter, you will be able to:

• Identify the core anatomical parts of standard UI components (Buttons, Cards, Forms).

• Design a high-fidelity Primary and Secondary Call-to-Action (CTA) button.

• Construct a modular UI Card utilizing images, typography hierarchy, and spacing.

• Design accessible Input Forms with clear labels and placeholder text.

• Recognize common UI design pitfalls, such as poor touch-targets on mobile.

3. Buttons (The Call to Action) #

The button is the most critical component in any interface. It drives user behavior. Anatomy of a Button:

• Padding: A button is just a text layer with a box around it. The space between the text and the edge of the box is the padding. *Rule of Thumb:* The horizontal padding (left/right) should be roughly twice the vertical padding (top/bottom). e.g., 16px Top/Bottom, 32px Left/Right.

• Primary vs. Secondary: A screen should only have ONE Primary button (Bright brand color, solid fill) telling the user the main goal (e.g., "Submit"). Secondary actions (e.g., "Cancel") should be ghost buttons (No fill color, just a subtle gray outline) to visually de-prioritize them.

4. UI Cards #

Cards are the standard way to group related information into a digestible chunk (think of a Twitter post or an Amazon product listing). Anatomy of a Card:

• Container: A white rectangle, usually with a subtle Corner Radius (8px to 16px) and a very soft, faint Drop Shadow to lift it off the light-gray background of the app.

• Media: A high-quality photo at the top.

• Content: A clear Title, a short descriptive paragraph, and a CTA button at the bottom.

*Crucial Detail:* The internal padding of the card must be consistent! The text should not touch the physical edge of the white box; it needs 16px or 24px of breathing room.

5. Input Forms #

If users cannot fill out a form, your company makes zero money. Forms must be flawless. Anatomy of an Input Field:

• Label: The text *above* the box (e.g., "Email Address"). It must remain permanently visible.

• The Input Box: A tall, easily clickable rectangle (minimum 48px tall for mobile touch targets) with a subtle gray outline.

• Placeholder Text: Faint gray text *inside* the box (e.g., name@company.com) showing the user an example of what to type.

6. Navigation Bars #

The map of your application.

• Desktop (Top Nav): Logo on the far left. Navigation Links in the center or right. A prominent "Sign Up" Primary button on the far right.

• Mobile (Bottom Tab Bar): Because phone screens are tall, you cannot put the menu at the top—human thumbs cannot reach it! Mobile apps place 4 or 5 primary icon tabs at the absolute bottom of the screen for ergonomic accessibility.

7. Diagrams/Visual Suggestions #

*Visual Concept: Button Padding Anatomy* Provide a close-up diagram of a bright blue "Start Free Trial" button.

• Draw mathematical red lines demonstrating the padding.

• Show 16px of space above and below the text.

• Show 32px of space to the left and right of the text.

• Point out the 8px Corner Radius.

This visual breaks down a "pretty button" into an exact mathematical formula the student can easily replicate.

8. Best Practices #

• The 44px Touch Target Rule: If you are designing a button or an icon for a mobile app, the absolute minimum physical size of that clickable area must be 44px by 44px (Apple's guideline) or 48px by 48px (Google's guideline). If you design a tiny 24px "X" button to close an ad, human thumbs are too fat to tap it accurately, resulting in intense user frustration.

9. Common Mistakes #

• Disappearing Form Labels: A terrible trend in UI design is putting the label (e.g., "Email") *inside* the input box as placeholder text, and deleting the label above the box. The problem? When the user clicks the box and starts typing their email, the word "Email" disappears! If they look away and look back, they forget what box they are filling out. *Always keep the Label permanently visible outside the box!*

10. Mini Project: Construct a High-Fidelity Product Card #

Let's build a classic e-commerce UI card.

1. 1. Draw a Rectangle (W: 320, H: 400). Fill: White. Corner Radius: 16. Add a very faint Drop Shadow. (This is the Card Container).

1. 2. Draw a Rectangle (W: 320, H: 200). Place it at the top of the card. Fill it with a stock photo of a pair of sneakers.

1. 3. Use the Text tool (T). Type "Nike Air Max 90". Font: Inter, Size: 20px, Weight: Bold. Place it below the photo, 24px from the left edge.

1. 4. Type "$120.00". Font: Inter, Size: 16px, Color: #4B5563. Place it below the title.

1. 5. Create a Primary Button: Draw a blue rectangle (H: 48, Radius: 8). Type "Add to Cart" in white text. Center the text inside the button. Place the button at the bottom of the card, 24px away from the edges.

1. 6. You have just built a production-ready, highly aesthetic UI Component!

11. Practice Exercises #

1. 1. Design a Primary CTA button and a Secondary CTA button side-by-side. Ensure the Primary button has a solid fill, and the Secondary button is visually de-prioritized using only a stroke outline.

1. 2. Design a mobile-friendly Input Field for a "Password". Ensure the height of the input box is at least 48px to accommodate human thumbs, and include a permanently visible label above it.

12. MCQs with Answers #

13. Interview Questions #

• Q: Walk me through the mathematical anatomy of a standard Primary Button. Specifically, discuss the relationship between the horizontal (left/right) padding and the vertical (top/bottom) padding relative to the text layer.

• Q: A junior designer shows you a mobile login form where the input boxes are 24 pixels tall to "save vertical space." What specific mobile accessibility rule did they violate, and what is the physical consequence for the user?

• Q: Explain the UX danger of using "Placeholder Text" as the only label for an input form field. Why must the field title (e.g., "First Name") remain permanently visible outside of the input box?

14. FAQs #

Q: Should I use Drop Shadows on everything to make the UI "pop"? A: No! Drop shadows should be used incredibly sparingly. They are used to indicate *elevation* (that an object is floating closer to the user than the background). You use a soft shadow on a UI Card or a floating button to lift it off the canvas. If you put a drop shadow on every piece of text and every flat button, the UI becomes a chaotic, unreadable mess.

15. Summary #

In Chapter 8, we assembled the foundational Lego bricks of digital interfaces. We transitioned from wireframes to high-fidelity perfection, establishing strict mathematical padding rules for Primary and Secondary buttons. We constructed UI Cards, managing the internal constraints of container padding and visual hierarchy. We prioritized usability, enforcing permanent labels on Input Forms to prevent user amnesia, and adhering to strict mobile touch-target dimensions to accommodate the physical reality of human hands. We now possess a library of individual components ready to be deployed.

16. Next Chapter Recommendation #

Currently, if you draw 50 buttons and the client wants to change the color from blue to green, you have to click and change 50 individual buttons. That is unacceptable. We must introduce automation. Proceed to Chapter 9: Components and Variants in Figma.