Help
Options
Didn't know it?
click below
click below
Knew it?
click below
click below
Don't Know
Remaining cards (0)
Know
retry
shuffle
restart
0:00
Embed Code - If you would like this activity on your web page, copy the script below and paste it into your web page.
Normal Size Small Size show me how
Normal Size Small Size show me how
UI/UX - Week 4
WTWD 610 - Prototyping & Wireframing
| Term | Definition | Example |
|---|---|---|
| Prototyping | The process of creating an interactive model of a design to test and validate ideas before full-scale development. Prototypes can range from low-fidelity sketches to high-fidelity, interactive digital models. | Using Figma to create a clickable prototype of a mobile app to test user interactions. |
| Wireframing | The process of creating a simplified, visual representation of a user interface, focusing on layout, structure, and content hierarchy without detailed design elements. | Sketching a basic wireframe of a website’s homepage to plan the placement of the header, footer, and main content sections. |
| Low-Fidelity Wireframe | A simple, rough sketch or outline of a user interface, focusing on the basic layout and structure rather than detailed design elements. | Drawing a hand-sketched wireframe of a login page, showing the position of the username and password fields, and the login button. |
| High-Fidelity Wireframe | A detailed and polished representation of a user interface, including specific UI elements, typography, spacing, and often some interactivity. | Creating a high-fidelity wireframe in Figma that includes exact fonts, colors, and clickable elements to closely resemble the final product. |
| Rapid Prototyping | A method of quickly creating prototypes to test and iterate on design ideas in a short timeframe. | Using Figma’s prototyping features to rapidly create and test multiple versions of a user interface within a single day. |
| Iterative Design | A cyclic process of prototyping, testing, analyzing, and refining a product or process. Iterative design aims to improve the design with each cycle based on user feedback and testing results. | Continuously refining a prototype based on user testing feedback to improve usability and functionality. |
| User Interface (UI) Elements | The components that users interact with on a digital product, such as buttons, text fields, checkboxes, and icons. | Designing UI elements like buttons and input fields in a high-fidelity wireframe. |
| Interaction Design | The practice of designing interactive digital products, focusing on creating engaging interfaces with well-thought-out behaviors. | Designing a responsive navigation menu that adapts to different screen sizes and user interactions. |
| Sketch (Lo-fi) | A rough, hand-drawn representation of a user interface, focusing on the basic layout and essential elements without detailed design. | Drawing a simple sketch of a mobile app screen to outline the main navigation and content areas. |
| Figma | A web-based interface design tool that enables collaboration among designers in real-time. It is used to create wireframes, prototypes, and high-fidelity designs for web and mobile applications. | Using Figma to design and prototype a mobile app interface. |
| Usability Testing | The process of evaluating a product by testing it with representative users. Usability testing helps identify usability issues and gather feedback to improve the design. | Conducting usability tests on a prototype to observe how users interact with the interface and identify any pain points. |
| Microinteraction | A single interaction with a product that accomplishes one task, often involving small design elements that enhance the user experience. | Adding a subtle animation to a button when a user hovers over it to provide visual feedback. |
Created by:
ProfJordan
Popular Computers sets