Booklet

author

Fullstack HQ

Development

7 Design Hacks for Graphic Designers & Developers Part 1 of 2

7 Design Hacks for Graphic Designers & Developers Part 1 of 2

1. Use color and weight to create hierarchy instead of size
Try and stick to two or three colors:
1 . A dark color for primary content (like the headline of an article)
2. A grey for secondary content (like the date an article was published)
3. A lighter grey for ancillary content (maybe the copyright notice in a footer)

2. Don't use grey text on colored backgrounds
Making the text closer to the background color is what actually helps create hierarchy, not making it light grey.

3. Offset your shadows Instead of using large blur and spread values to make box shadows more noticeable, add a vertical offset.
It looks a lot more natural because it simulates a light source shining down from above like we're used to seeing in the real world.

4. Use fewer borders
When you need to create separation between two elements, try to resist immediately reaching for a border.

Example 2: Box shadows do a great job of outlining an element like a border would, but can be more being as distracting.

Example 3: Giving adjacent elements slightly different background colors is usually all you need to create distinction between them.

Example 4: Whitespace is a great way to create distinction between groups of elements without introducing any new Ul at all.

More booklets by Fullstack HQ

More Development booklets

Your recently viewed booklets

  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
See all booklets