GETTING STARTED
Introduction & intentionsUI design principlesPILLARS OF VISUAL DESIGN
TypographyLayout & spacingColorsReflection & UI challengeDIVE DEEPER
Finishing touchesDeveloping tasteTools & resourcesGET INSPIRED
InspirationPodcast, newsletter & blogsPeople to followNEXT & MORE
What’s next1:1 mentoringSupport meUI/Visual design fundamentals & principles
📖 Reading list
The power of visuals in product design
- We live in an age of abundant visual information. Huge numbers of people watch videos and view/share photos on social media platforms daily.
- Humans are wired to process visual information efficiently. 40% of brain nerves connect to the retina and 90% of information coming to our mind is triggered visually. 65% of people are visual learners.
- Visual communication has a long history, from ancient cave paintings to modern user interfaces. Visual elements play a key role in UI/UX design.
- Visual elements speed up data perception. The brain processes images in just 150ms and understands their meaning in another 100ms - much faster than text. Icons can be recognized 60,000x faster than words.
- Visual information is retained much longer in memory. Vivid images paired with information lead to 65% retention after 3 days, vs only 10% for information presented verbally.
- Easy to process visuals trigger feelings of pleasure by activating the brain region that controls smiling. Cognitive ease is associated with positive sensations.
- Visual elements guide user attention. Eye-tracking shows people spend more time on information with relevant images. Strategic use of visuals can direct focus.
- Visuals make interfaces more universal across languages and accessible to those with reading difficulties. Images push the boundaries of perception.
In summary, leveraging visual elements provides major benefits for conveying information effectively, engaging users, and creating intuitive, pleasurable user experiences. The human brain has evolved to process visuals rapidly and retain them longer.
Developing your eye for design
- Importance of Developing a Design Eye
- A refined design eye often surpasses the designer's skill.
- Enhancing one's design sense can help in discerning improvements over time and setting a higher standard for work.
- Training the Design Eye
- Design Inspiration:
- Maintain a collection of inspiring designs and periodically review them.
- Analyze designs by asking critical questions about their purpose, aesthetic appeal, functionality, and potential improvements.
- Utilize platforms like Dribbble, Behance, and Awwwards to study interface designs.
- Diversifying Design Exposure:
- Explore designs from various mediums including posters, magazines, and books.
- Delve into designs from different cultures to understand the influence of cultural context.
- Observational Practice:
- Actively observe the surrounding environment to understand design elements.
- Instead of being preoccupied with digital devices, engage with the physical designs around you.
- Consider visual hierarchy, interaction with designs, color schemes, etc.
- Utilize photography to understand elements like composition, visual balance, and color dynamics.
- Feedback Mechanism:
- Create a continuous feedback loop with other designers.
- Seasoned designers can highlight unnoticed flaws which, once identified, can be avoided in the future.
- Conclusion
- Enhancing one's design eye is pivotal to improving overall design quality.
- Active engagement and feedback are crucial for growth.
- The author actively publishes on Medium and interacts on Twitter.
Visual design rules you can safely follow every time
Essential Visual Design Rules for Effective UI
- Colors:
- Opt for near-black and near-white over pure tones; it's easier on the eyes.
- Saturate neutrals slightly (below 5%) with a primary color for cohesiveness.
- If you saturate neutrals, stick to either warm or cool tones, not both.
- Contrast & Alignment:
- Prioritize high contrast for essential elements; minimal contrast for less crucial ones.
- Optical alignment (by eye) often looks better than strict mathematical alignment.
- Ensure all elements align with something else for relational context.
- Typography:
- Adjust letter spacing and line height based on text size: larger text requires less, smaller text requires more.
- Maintain body text at 16px or above for readability.
- Aim for a line length around 70 characters.
- Limit yourself to two typefaces for clarity.
- Spacing & Sizing:
- Use a mathematically derived scale for consistent spacing and element sizing.
- Place spacing between high contrast points.
- In buttons, horizontal padding should be double the vertical padding.
- For containers, outer padding should equal or exceed inner padding.
- Containers & Shadows:
- Container borders should contrast both the container and the background.
- Shadow blur values should be double their distance values.
- Maintain brightness differences: 12% for dark interfaces, 7% for light.
- Layout & Elements:
- Elements should be ordered by visual weight.
- If using a grid, a 12-column structure is versatile.
- Closer screen elements should appear lighter.
- Combine complex backgrounds with simple foregrounds (or vice versa).
- Consistency & Deliberation:
- Be intentional in every design choice; everything should have a purpose.
- Measurements and sizes should be mathematically consistent.
- Avoid nesting two hard divides together.
How to improve your visual design
5 Practical exercises to learn UI design
Weekly UI Design Exercise Guide:
- Time Commitment: Aim for 1-2 hours daily. If you can do more, you'll progress faster. Stick to a consistent pace.
- Evaluation: List 5 sites/apps with excellent UI and 1-2 with poor UI. Explain your choices.
- Practice: Replicate a well-designed UI. Note techniques that boost your design knowledge.
- Font Exploration: Identify fonts you love, noting where they excel and where you've seen them.
- Style Development: Craft 2-3 style tiles using:
- Chosen fonts and text styles.
- A fitting color scheme.
- Sample form controls or images.
- An optional logo.
- Design Task: Create 1-3 screens for an app/website you're passionate about.
Stay consistent and practice regularly for best results!
Laws of UX
- Fitts's Law: Bigger and closer buttons are easier to click.
- Hick's Law: More choices means it takes longer to decide.
- Law of Proximity: Items close to each other seem grouped together.
- Miller's Law: People can remember about 7 items at once.
- Law of Similarity: Items that look alike seem grouped together.
- Law of Simplicity: People prefer simple and clear shapes.
- Law of Common Fate: Items moving in the same direction seem grouped.
- Law of Continuation: We prefer lines and shapes that continue or follow a direction.
- Law of Closure: We see whole shapes even when part of them is missing.
- Von Restorff Effect: Unique items stand out and are remembered better.
- Zeigarnik Effect: We remember unfinished tasks better than finished ones.
- Serial Position Effect: We remember the first and last items in a list best.
- Tesler's Law: Some things are just always complicated.
- Occam's Razor: The simplest solution is usually the best.
- Pareto Principle: Most of the results come from a small part of the effort.
Think of these as shortcuts or rules of thumb for designing things people use. They help make things easier and more enjoyable for users!
Gestalt design principles
1. Introduction to Gestalt Design Principles
- Enhances usability, aesthetics, and engagement.
- Based on the Gestalt psychology that originated around 1912, focusing on the perception of whole objects.
2. Core Concepts of Gestalt
- Gestalt is derived from the German word for "unified whole".
- It explains how we perceive visual elements collectively and how our brains identify patterns.
3. Gestalt Principles in Design
- Principles shape our expectations, assumptions, and motivations in recognizing designs.
- Examples are found in infographics, mobile apps, and even signage.
4. List and Description of Gestalt Design Principles
- Similarity: Grouping objects based on shared visual attributes.
- Continuity: Perceiving elements as part of a single, uninterrupted flow.
- Closure: Brain's ability to complete incomplete visual information.
- Common Region/Common Fate: Perceiving elements as a group if close or moving similarly.
- Figure/Ground (Multi-stability): Differentiating an object from its background.
- Proximity (Emergence): Grouping closely placed elements.
- Symmetry and Order (Pragnanz): Achieving balance in design.
- Past Experience: Perception influenced by prior experiences and cultural context.
- Parallelism: Arranging elements in parallel lines for unity.
- Focal Points: Highlighting the main element in a design.
- Simplicity: Using only essential elements for clarity.
5. Applying Gestalt Principles
- Improve user delight, design usability, and strengthen brand perception.
- UsabilityHub is suggested for implementing these principles.
📺 Watch list
Dieter Rams – A brave new world of product design
The first secret of great design
Mastering the pillars of great visual design ⭐️⭐️⭐️
4 Foundational UI design principles
Bonus: Rams documentary (Paid). If you have financial issues, then email me (shivamdewan08@gmail.com) I can give you access to the documentary.
← Previous
Next →
On this page
- UI/Visual design fundamentals & principles
- 📖 Reading list
- The power of visuals in product design
- Developing your eye for design
- Visual design rules you can safely follow every time
- How to improve your visual design
- 5 Practical exercises to learn UI design
- Laws of UX
- Gestalt design principles
- 📺 Watch list
- Dieter Rams – A brave new world of product design
- The first secret of great design
- Mastering the pillars of great visual design ⭐️⭐️⭐️
- 4 Foundational UI design principles