Application Design - High Fidelity Prototype
16/12/2025 - 09/12/2025 (Week 13- Week 14)
Application Design - Low-Fidelity Prototype
Cindy Noverin / 0376409
Bachelor of Design in Creative Media / Taylors University
TABLE OF CONTENTS
Lecture
Definition: UI elements are the parts we use to build apps or websites. They add interactivity to a user interface, providing touchpoints for the user as they navigate their way around.
UI elements usually fall into four categories:
Input Controls: Allow users to input information into the system.
Navigation Components: Help users move around the product.
Informational Components: Share information or feedback with the user.
Containers: Group content together.
1. Input Controls
These elements let users tell the system what to do.
Buttons:
Definition: A clickable element that triggers an action.
Types: Primary (main action, bold color), Secondary (alternative action, outline/ghost), Text Link (subtle).
Usage: "Submit," "Log In," "Cancel."
Text Fields (Input Fields):
Definition: A box where users can type text.
Usage: Usernames, passwords, search bars. Can be single-line or multi-line (text area).
Checkboxes:
Definition: A small square box that allows users to select one or more options from a set.
Rule: Use when the user can select multiple options (e.g., "Select toppings: [x] Cheese [ ] Pepperoni").
Radio Buttons:
Definition: Small circular buttons used to select exactly one option from a list.
Rule: Use when the user must select only one option (e.g., "Gender: ( ) Male (x) Female").
Toggles (Switches):
Definition: A switch that turns a setting On or Off.
Usage: Dark Mode, Enable Notifications.
Dropdown Lists:
Definition: A button that, when clicked, reveals a list of options.
Usage: Selecting a country from a long list to save screen space.
Date Pickers:
Definition: A calendar selector that lets users choose a specific date or time range.
2. Navigational Components
These elements help users find where they are and where they want to go.
Search Field:
Definition: A search box (often with a magnifying glass icon) allowing users to find content by keyword.
Breadcrumbs:
Definition: A trail of links showing the user's current location within the site hierarchy.
Example: Home > Men’s Wear > Shoes > Boots.
Pagination:
Definition: Breaks large content into pages.
Usage: "Page 1 of 10" or "Next >" at the bottom of search results.
Tags:
Definition: Keywords or labels assigned to content to help categorize it.
Usage: Clicking a "Tech" tag shows all tech-related articles.
Sliders:
Definition: A track that allows users to select a value (or range) by dragging a handle.
Usage: Volume control, Price range filter ($10 - $500).
Icons:
Definition: Simplified images used as symbols to represent functions (e.g., a "House" for Home, a "Gear" for Settings).
3. Informational Components
These elements communicate with the user without always requiring action.
Tooltips:
Definition: A small hint that appears when a user hovers over an item.
Usage: Explaining a complex icon or feature.
Progress Bars:
Definition: A visual indicator of how far along a user is in a process.
Usage: File upload status, completing a profile setup.
Notifications (Badges):
Definition: A small red dot or number on an icon.
Usage: Showing unread messages or new updates.
Message Boxes (Alerts/Toasts):
Definition: a small popup window that provides feedback.
Types:
Success (Green): "File saved."
Error (Red): "Password incorrect."
Warning (Yellow): "Unsaved changes."
Modals (Pop-ups):
Definition: A window that sits on top of the main page and requires user interaction before they can return to the main app.
Usage: Confirming a deletion, quick sign-up forms.
4. Containers
These elements hold other elements together to create structure.
Cards:
Definition: A rectangular container that groups related info (image, title, text, link) into one unit.
Usage: Pinterest posts, YouTube video thumbnails, Product listings.
Accordions:
Definition: A vertically stacked list of items that can be expanded or collapsed to reveal content.
Usage: FAQ sections (Clicking a question expands the answer).
Low Fidelity Prototype Development
Feedback
Comments
Post a Comment