1. Feature Development & Design Process
- Start Small, Iterate Later: When building a new feature, anticipate difficulties and begin with the simplest, most useful version.
- Avoid Scope Creep: A feature without optional extras is better than no feature at all. Prioritize core functionality and add enhancements later.
- Prioritization Matters: If an aspect of a feature is just a "nice-to-have," it should be designed and implemented later.
2. UI Personality & Typography Choices
- Typography Defines Personality: The font style significantly affects how a design feels. Elegant & Classic: Use serif fonts. Playful & Friendly: Use rounded sans-serif fonts. Neutral & Functional: A standard sans-serif works best.
- Writing Tone Affects UX: A formal tone makes a website feel more official and professional. A casual tone makes it feel approachable and user-friendly.
- Words Shape Experience: Text choices are just as important as color and typography in defining a design’s personality.
3. UI Hierarchy & Readability
- Contrast & Background Colors: Making text slightly closer in color to the background creates a better hierarchy than simply using light grey. A better approach is adjusting the hue, saturation, and lightness to match the background rather than relying on generic grey shades.
- Layout Adjustments for Hierarchy: If a sidebar competes with the main content visually, remove its background color and let it blend with the page.
- Headings Shouldn’t Be Oversized: Using <h1> for a title like “Manage Account” makes semantic sense, but default heading sizes can be unnecessarily large. Adjust the size to fit the context instead of relying on default heading styles.
4. UI Spacing & Sizing
- Effective Spacing Strategy: When grouping elements, ensure more space around the group than within it to improve comprehension. Poorly spaced elements make the interface harder to understand.
- Consistent Unit Usage: Stick to px or rem units for predictable and scalable spacing.
- Font Sizes & Readability: Fonts meant for headlines typically have tighter letter spacing and shorter lowercase letters. Fonts for body text have wider spacing and taller lowercase letters (larger x-height).
5. Text Readability & Formatting
- Line Length & Line Height: Ideal paragraph width: 45–75 characters per line for readability. Use em units for width to maintain responsiveness. Line height should be proportional: shorter for narrow content (1.5), and taller for wide content (2).
- Number Formatting: Align decimal points for easy number comparison.
- Text Alignment Choices: Justified text mimics print (good for magazines but not necessary for most web use). Left-aligned text is generally better for digital readability.
- All-Caps Readability: All-caps text lacks variation, making it harder to read. Increase letter spacing to improve readability.
6. Color Theory & Application
- Understanding Color Properties: Hue: Position on the color wheel (e.g., different shades of blue). Saturation: Intensity of color (0% = grey, 100% = vivid). Lightness: How close a color is to black or white (0% = black, 100% = white).
- HSB vs. HSL in Design: HSB (Hue, Saturation, Brightness) is more common in design software. HSL (Hue, Saturation, Lightness) is preferred for web design since browsers use it.
7. Color Usage in UI Design
- Primary & Accent Colors: Primary Colors: The main colors defining the site’s look (e.g., Facebook’s blue). Accent Colors: Used sparingly to highlight features (e.g., yellow or teal for attention). UI systems may need up to 10 colors with 5–10 shades each for complex interfaces.
- Fine-Tuning Colors:Saturation and lightness might need manual adjustments in real-world use. Avoid adding too many new shades unless necessary to maintain consistency.
- Perceived Brightness of Colors: Colors don’t get brighter linearly—yellow is perceived as brighter than blue. Adjusting brightness using hue rotation: To lighten a color, shift towards a bright hue (60°, 180°, 300°). To darken a color, shift towards a darker hue (0°, 120°, 240°). This technique is useful for colors like yellow, which may otherwise appear dull when darkened.
8. Accessibility & Contrast
- Text Contrast for Readability (WCAG Standards): Normal text (~18px): Minimum contrast ratio of 4.5:1 Large text: Minimum contrast ratio of 3:1
- Color Should Support Meaning, Not Define It: Never rely solely on color for communication— use text or icons for clarity.
- Temperature of Greys: Add blue to greys for a cooler feel, yellow/orange for a warmer feel.
9. Shadows & Depth in UI
- Using Shadows Effectively: Large shadows work well for modal dialogs to grab attention. Define a smallest and largest shadow and create intermediate ones with gradual increments.
10. Image & UI Element Handling
- Prevent Background Bleed: If a user uploads an image with a background similar to the UI background, the image may blend in. Adjust contrast or add subtle borders to separate elements.
- Table Optimization: Unnecessary sortable columns should be combined for clarity and hierarchy.
Design is about balance—between functionality and aesthetics, simplicity and completeness, hierarchy and flexibility. By understanding the fundamentals of typography, spacing, color, readability, and accessibility, designers can create interfaces that are both visually appealing and highly functional.
