User Interface Design Overview

A simplified representation of a system that focuses on how it functions technically, often depicted using diagrams and code.

The user's understanding of how a system operates, shaped by their experiences and expectations.

The way a system is presented to the user, including its visual elements, information structure, and interactions.

Good UX design aims to hide complexities of the implementation model from users, focusing on a simple and intuitive representation.

Designing software without considering the user leads to solutions heavily influenced by technical constraints and difficult to use.

A UX professional who helps bridge the gap between technical implementation and user experience.

User-centered design principles prioritize the needs and experiences of users over technical implementation details.

Models play a crucial role in UX design by providing frameworks for understanding how users interact with the system.

A card game designed to help students understand and apply psychological principles to web application interface design.

A collection of over 50 insights from psychology that offer practical advice on user interface (UI) design.

The application of psychological techniques to the design of user interfaces, aiming to improve user experience and engagement.

A design tool that allows users to create prototypes and mockups of digital products, including web applications.

The process of creating high-fidelity prototypes, which closely resemble the final product, giving a realistic experience for testing.

A psychological principle that suggests people are more likely to trust and follow the actions of others.

A psychological technique that leverages curiosity to engage users, making them more likely to interact with an interface.

A psychological principle used to establish a predictable and consistent user experience, making it easy to navigate and use.

The part of a curriculum that focuses on universal principles and skills applicable to all digital product development, forming the core foundation for understanding and designing.

The portion of a curriculum dedicated to specialized training in specific UX/UI design tools and techniques, tailoring skills for diverse projects and needs.

The psychological study of how humans perceive and interpret visual information, encompassing processes like memory, attention, and decision-making.

The meaning or message conveyed through a graphical image. This is important because it dictates the design choices made to ensure visual clarity and communication.

A teaching method where students actively engage with the material before class, often through online resources or pre-class assignments, allowing for more in-depth discussions and problem-solving during class time.

A type of interface designed for users to complete specific tasks efficiently, prioritizing clarity and ease of use.

A type of interface designed for users to consume content effectively, prioritizing readability and navigation for exploring information.

The process of analyzing and evaluating existing design examples to learn from best practices and identify potential areas for improvement.

The legal and ethical obligation to make websites accessible to people with disabilities. This includes ensuring websites can be used by individuals with visual, auditory, cognitive, and physical impairments.

A set of standards and guidelines that ensure websites are accessible to people with disabilities. It covers a wide range of criteria, including text alternatives for images, sufficient color contrast, and keyboard navigation, among others.

A legal framework in the United States that prohibits discrimination against individuals with disabilities in various areas, including access to public spaces and services. This law also applies to digital accessibility for websites and online services.

A law in the United States that requires federal agencies to make their websites accessible to people with disabilities. This law outlines specific accessibility requirements for federal websites, promoting inclusive digital experiences.

A type of website design that adapts to different screen sizes, providing an optimal viewing experience on desktops, mobile phones, and tablets. This improves user experience and visibility on devices of varying sizes.

A design approach where a website's layout and content adjust automatically based on the user's screen size and device. This ensures readability and usability across various devices, enhancing the overall user experience.

A visual representation of data or information, often used to simplify complex concepts. It can be a powerful tool for communication and understanding, making information more engaging and accessible.

A visual representation of data or information that presents complex concepts in a comprehensible and engaging way. It uses graphics, charts, and other visuals to simplify and clarify information, impacting user understanding.

A Figma element that wraps content tightly around the children within it. This means that children scale with the group and stay aligned to the artboard.

A Figma element that is larger than the content it contains. This allows for overflow content and scrolling behavior. Frames become aligned to their parent.

The act of scaling content within a Frame to allow for content overflowing the bounds of the Frame. This is necessary to prevent visual clipping.

A Figma element that is the canvas for designing content, and is essentially a top-level Frame. Frames can be nested within other Frames, giving more control.

A transition that connects one Artboard to another in Figma, enabling navigation between different sections of a design.

The setting in Figma that allows scrolling to happen within the frame. In this case, the frame is set to be scrollable horizontally.

The effect of visually clipping content, causing it to be cut off, which can be addressed by increasing the size of the Frame.

The process of connecting elements on an Artboard to enable interactive user experiences, such as navigation between Artboards, which are equivalent to Frames.

A type of animation in Figma where layers transition smoothly between artboards, assuming their names and structure remain consistent.

A property in Figma's interaction settings that determines when an animation should start.  "On Tap" triggers an animation when a specific element is tapped.

A property in Figma's interaction settings that specifies how a design element should move.  "Navigate to" directs the design to a specific artboard.

A property in Figma's interaction settings that defines when a timed animation should start. "After Delay" schedules an animation to play after a defined delay.

A property in Figma's interaction settings that defines how long a timed animation should be delayed. "300ms" indicates a 300 millisecond delay.