Applying Design Principles to Interfaces

Creating a solid design for web applications and websites is like putting together a puzzle. There are various design principles we can and should apply when creating a new design. These principles provide a solid foundation that ensures that elements are organized and easy to use. In this session we'll dig into a few of core design principles:

- Balance
- Proximity
- Repetition
- Contrast
- Alignment

Transcript

1. Applying Design Principles to Interfaces @bermonpainter | clt.design
4. Design Principles Design is the fundamental soul of a man-made creation that ends up expressing itself in successive outer layers of the product or service. – Steve jobs
5. Balance Distributes the weight between elements typically symmetrical or asymmetrical to provide stability and structure.
8. Contrast Helps to emphasize and highlight key elements.
10. Proximity Creates organization within the design and builds a relationship between various elements that are in close proximity.
12. Repetition Ties individual elements together and creates association and consistency.
14. Alignment Alignment creates a more ordered design by connecting various elements together visually.
17. Direction Imagery or motion can help direct the eye to critical parts of the design.
19. Color
20. White Clarity, cleanliness, hope, openness, & simplicity.
23. Red Activating, stimulating, passionate, exciting, & powerful.
26. Blue Dependable, trustworthy, & secure.
29. Yellow Happy, warm, & expansive
32. Green Calming, balancing, rejuvenating, & stability
35. Orange Vibrant, energetic, friendly, & Inviting
37. Purple Nobility, abundance, dignity, creativity, & imagination.
40. Balance Contrast Proximity Repetition Alignment Direction Color
41. Balance Contrast Proximity Repetition Alignment Direction Color
42. Balance Contrast Proximity Repetition Alignment Direction Color
43. Balance Contrast Proximity Repetition Alignment Direction Color
44. Balance Contrast Proximity Repetition Alignment Direction Color
45. Balance Contrast Proximity Repetition Alignment Direction Color
46. Balance Contrast Proximity Repetition Alignment Direction Color
47. Design Principles Good design is invisible, it’s experienced and not seen.