click below
click below
Normal Size Small Size show me how
UI/UX - Week 1
WTWD 610 - Intro to UI/UX & Figma
| Term | Definition | Example |
|---|---|---|
| UI (User Interface) | The space where humans and machines interact, aiming for effective operation and control by the user, while the machine provides feedback to aid decision-making. | The layout of buttons, menus, and other interactive elements on a website or app. |
| UX (User Experience) | The overall experience a user has when interacting with a product or service, including ease of use, satisfaction, and accessibility. UX design aims to create positive experiences that keep users loyal to the product or brand. | How easy and enjoyable it is to navigate and find information on a website. |
| 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. |
| Wireframe | A low-fidelity, simplified outline of a product, often created with basic shapes and lines, to represent the layout and structure of a user interface. Wireframes help visualize content placement and user flows. | A basic sketch of a website layout showing the header, footer, and main content areas. |
| Prototype | An early sample or model of a product used to test concepts and user interactions. Prototypes can range from simple sketches to fully interactive digital versions. | Creating a clickable prototype in Figma to simulate the user journey through an app. |
| Sketch | A rough drawing or outline used to brainstorm and plan the design of a user interface. Sketching helps designers quickly visualize and iterate on ideas before moving to digital tools. | Drawing a simple layout of a login screen on paper. |
| Real-time Collaboration | The ability for multiple users to work on the same document simultaneously, with changes being updated and visible to all participants in real-time. | Multiple designers working together on a Figma project at the same time. |
| Design System | A collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications. Design systems ensure consistency and efficiency in design processes. | A set of predefined buttons, fonts, and color palettes used across all pages of a website. |
| User Flow | A visual representation of the steps a user takes to complete a task within a product. User flows help identify and optimize the user's journey. | Mapping out the steps a user takes to sign up for a newsletter on a website. |
| Accessibility | The practice of making websites and applications usable by as many people as possible, including those with disabilities. Accessibility involves designing and developing products that can be navigated and understood by everyone. | Ensuring that a website has keyboard navigation and screen reader support for visually impaired users. |