Applying Design Principles to Interfaces

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

7559f6cff1f5efc2d210965febd4d71c?s=128

Bermon Painter

March 07, 2018
Tweet

Transcript

  1. Applying Design Principles to Interfaces @bermonpainter | clt.design

  2. None
  3. None
  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.
  6. None
  7. None
  8. Contrast Helps to emphasize and highlight key elements.

  9. None
  10. Proximity Creates organization within the design and builds a relationship

    between various elements that are in close proximity.
  11. None
  12. Repetition Ties individual elements together and creates association and consistency.

  13. None
  14. Alignment Alignment creates a more ordered design by connecting various

    elements together visually.
  15. None
  16. None
  17. Direction Imagery or motion can help direct the eye to

    critical parts of the design.
  18. None
  19. Color

  20. White Clarity, cleanliness, hope, openness, & simplicity.

  21. None
  22. None
  23. Red Activating, stimulating, passionate, exciting, & powerful.

  24. None
  25. None
  26. Blue Dependable, trustworthy, & secure.

  27. None
  28. None
  29. Yellow Happy, warm, & expansive

  30. None
  31. None
  32. Green Calming, balancing, rejuvenating, & stability

  33. None
  34. None
  35. Orange Vibrant, energetic, friendly, & Inviting

  36. None
  37. Purple Nobility, abundance, dignity, creativity, & imagination.

  38. None
  39. None
  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.
  48. None
  49. None