Welcome to the first segment of the Design Edition of Hubze Hangout! Today we’re going to start diving into the goods that will get you on the road to becoming a damn good designer.
To start things off, we’re going to talk about CRAP. No, we’re not going to look at crappy designs or discuss the composition of, well, you know….
CRAP is the acronym for the four basic principles of design.
Before we define what each of these mean, it’s important to know why we need to identify these by name. Being able to name things gives you power over them. Think about it…
- Did you ever see an actor or actress for the first time in a movie that you really liked, then after you learned their name, you recognize them in a ton of movies that you’ve already seen?
- Have you ever gotten Poison Ivy walking through the woods? Well, once you knew what it looked like, I’m sure you could spot it from 10 ft away!
Being able to name things gives you control over them. You can now reference your actor or actress when speaking about movies with your friends, and you know to avoid going near Poison Ivy for fear of contracting an itchy rash. Referencing things by name is important, and today we’re going to learn how to take control of your designs.
The four basic design principles
Contrast in design is sort of the measurement of how elements on a page stand out against each other. What you want to avoid is making elements on the page similar, but different. If you’re going to make elements different, make them very different. Make things contrast, not conflict.
Bad Contrast Example
Good Contrast Example
Repeat visual elements on the page to strengthen organization and unity. Repetition gives the piece cohesiveness.
Elements being repeated can consist of colors, shapes, textures, spatial relationships, line thicknesses, fonts, sizes, graphics concepts, etc.
Good Repetition Example
Every element on your page should have a visual connection with another element on the page. Nothing should be randomly placed on the page. Good alignment creates a clean, professional appearance.
Bad Alignment Example
Good alignment Example
Proximity is the spatial relationship between elements on a page. Related items should be grouped together, forming a visual “unit.” Proximity helps organization, reduces clutter and makes digesting information easier on the reader.
Bad Proximity Example
Good Proximity Example
It’s important to note that all elements can be identified individually, but rarely is only one element used in a design. Look at the examples and see if you notice the other principles in each design.
Read part 2 of the series, Learning Proximity in Design
Read part 3 of the series, Learning Alignment in Design
Read part 4 of the series, Learning Contrast in Design
Read part 5 of the series, Learning Repetition in Design