UX + UI + Data Analysis

1. Layout

• Grid System: A framework used to structure and align elements, ensuring consistency and organization.

• Whitespace (Negative Space): The empty space between elements that helps improve readability and focus.

• Composition: How the elements are arranged within the interface to guide the user's eye and create a balanced layout.

2. Typography

• Font Pairing: The combination of two or more fonts to create contrast and hierarchy.

• Hierarchy: The arrangement of text in such a way that the most important information is most prominent (e.g., headings vs. body text).

• Kerning: The spacing between individual characters in a word.

• Leading: The vertical spacing between lines of text.

• Line Length: The width of a block of text, which affects readability.

• Font Weight & Style: Variations of font (bold, italic, light, etc.) used for emphasis or style.

3. Color Theory

• Primary Colors: Red, blue, and yellow, which are the foundation of all color combinations.

• Secondary & Tertiary Colors: Colors created by mixing primary colors (e.g., purple from red and blue).

• Complementary Colors: Colors located opposite each other on the color wheel (e.g., blue and orange) used for contrast.

• Color Palette: A set of colors chosen for a design, often including primary, secondary, accent, and neutral colors.

• Contrast: The difference in brightness or color that makes text or elements stand out.

• Saturation: The intensity of a color (its purity or vividness).

• Tone, Hue, and Shade: Tone refers to the lightness/darkness of a color, hue is the actual color, and shade refers to the color mixed with black.

4. Icons & Imagery

• Iconography: The use of simplified symbols to represent actions, objects, or ideas.

• Raster vs. Vector Images: Raster images (e.g., JPEG, PNG) are pixel-based, while vector images (e.g., SVG, EPS) are made up of paths and can be resized without losing quality.

• Favicon: A small icon used in browser tabs to represent a website.

• Hero Image: A large, impactful image used at the top of a page or section to draw attention.

5. Buttons & Interactive Elements

• Call-to-Action (CTA): A button or link prompting the user to take an action (e.g., "Sign Up", "Buy Now").

• Hover Effects: Visual changes that occur when a user hovers their cursor over an element, like buttons or links, indicating interactivity.

• Microinteractions: Small animations or design elements that provide feedback or enhance user engagement.

• States: Different conditions of interactive elements (e.g., hover state, active state, disabled state).

6. Navigation

• Navigation Bar (Nav Bar): A set of links or buttons that help users navigate between pages or sections.

• Breadcrumbs: A navigational aid showing the user's current location within a website or app.

• Dropdown Menu: A hidden menu that reveals additional options when clicked or hovered over.

• Hamburger Menu: A three-line icon used to toggle a menu, often on mobile devices.

7. Feedback & Alerts

• Toast Notifications: Small, non-intrusive notifications that appear temporarily, providing feedback or alerts.

• Modals/Popups: Overlaid windows that require user interaction to dismiss, often used for confirmations or alerts.

• Error States: Indications of problems (e.g., error messages or warning signs).

• Loading Indicators: Animations or icons (e.g., spinning wheel) to show that content is loading.

8. Responsiveness & Adaptability

• Responsive Design: Design that adjusts fluidly to different screen sizes and resolutions (e.g., mobile, tablet, desktop).

• Breakpoints: Defined points at which the layout or design shifts to accommodate different screen sizes.

• Viewport: The visible area of the user interface on a screen, which may change depending on the device.

9. Grids & Spacing

• Modular Grid: A grid where elements are placed in a series of rows and columns, ensuring alignment.

• Column Grid: A type of grid that divides a page into vertical columns, guiding the placement of content.

• Margin & Padding: The space outside and inside elements, respectively, that helps control the positioning and spacing between UI components.

10. Visual Hierarchy

• Z-Index: The stack order of elements on a page, determining which elements appear on top of others.

• Contrast: Using contrasting colors, sizes, and spacing to direct attention to important elements.

• Proximity: Grouping related items together to signify their connection.

• Alignment: The arrangement of elements along an axis to create visual order and harmony.

11. Animation & Transitions

• Transitions: Smooth animations between states, such as changing colors or moving elements, to enhance the user experience.

• Easing: The rate of change in an animation, such as easing in (slowing down) or easing out (speeding up).

• Keyframes: Points in an animation that define its start and end states, enabling smooth transitions.

12. Usability

• Accessibility (A11y): Designing the interface to be usable by people with disabilities (e.g., color contrast for visually impaired users, keyboard navigation, screen reader support).

• Affordance: The visual clues that indicate how an element can be used (e.g., buttons that look clickable).

• Consistency: Maintaining uniformity in design elements, interactions, and patterns to reduce cognitive load.

• Intuitiveness: Ensuring the interface is easy to understand and use without additional guidance.

13. Prototyping & Wireframing

• Wireframe: A basic visual guide that represents the skeletal framework of a UI, often in grayscale to focus on layout and structure.

• Prototype: An interactive model of the UI that simulates user interactions and helps in user testing.

• User Flow: The path a user follows to complete a specific task within the interface.

14. Consistency & Branding

• Brand Guidelines: A set of rules that define how the brand’s visual identity should be presented across all platforms.

• Style Guide: A document that outlines the design standards, including fonts, colors, buttons, and other UI components to ensure a consistent look and feel.

• Visual Identity: The overall style, tone, and visual elements that reflect the personality of the brand.