Desirable at first sight
You now that moment when you see some design work and just go “Woah…that looks AWESOME!”.
It feels totally inspiring. You immediately want to go home and design something that has the same emotional impact because…AWESOME! Right?
That visual experience was pulling certain “levers” in your brain. These levers, a.k.a. your brain’s way of processing visual information, are governed by certain types of relationships–how things visually contrast, the noise-to-signal-ratio, the visual hierarchy, etc.. In short, your brain is hard wired to perceive things in a certain way.
Once you start to command these levers and think about how they apply them to your work, you will be able to more consciously pull those levers at the right time when people are experiencing your design work.
How to use the Design Principles Cheat Sheet
Applying these rules will vary from design to design, but the real idea is for you to use this sheet as a starting point to look at your work and consciously think about it from a principles point of view. Lot's of these things you will likely do intuititvely, but using them as a separate and discreet part of your process is ultimately the goal.
The list is comprised of principles (think "levers"), with sets of questions below each one.
Work your way through the list while looking at your design work and consider how each rule may apply. Use the sample questions below each principle to get you started.
Keep it simple. No one composition will use all of these rules and using fewer more thoughtfully will likely lead to better results.
Try adjusting the design to a rule if it seems to be resonating with you and ask yourself how it feels. Get more eyes on it than just yours. Test.
Add to the list and make it your own. I make digital products so my questions may not be specific enough for your work, but it should be enough to get you thinking along the right lines.
And now for the actual list...
The human brain is hard wired to…
…process visual information exponentially faster than written information
Can I make my content more visual in certain places to break up content types?
Can I make my content more visual so it is easier to understand?
…identify the whole before it identifies the parts (emergence)
Are there places I can combine Shape or color to unify the composition?
…avoid visual complexity (uncertainty)
Are there places I can get rid of weird spaces or edges of artwork that “catch” the eye or break up the visual flow too much?
Can I just weed stuff out altogether?
How can I simplify the overall visual experience and send stronger, more clarified visual signals?
Can I add more whitespace to reduce visual complexity?
…scan for information before digging deeper (actual reading)
Can I reduce the amount of written content and make content more “scannable”?
Could I make my header to body copy size bigger so it is easier to scan?
Are there icons or other visuals that could be reduced in complexity to make them more scannable?
…create visual hierarchy based on dominance or emphasis of an element
Have I chosen a way for the eye to flow over the experience?
Do my visual focal points and information hierarchy work together in a consistent way?
…look for Figure to Ground relationships (contrast)
Determine what content is informational and what is actionable— is it appropriately defined and contrasted from
the background?
…create visual closure— a set of shapes only need imply a larger shape and the brain will fill in the gaps
Am I using disconnected visual elements (rules, etc.) to create blocks of content? Does it work?
How else might I leverage this rule in my experience?
…perceive things in close proximity to each other as being related
Is my UI is using Proximity to group & associate it appropriately with its functionality?
Is my content grouped in such a way that its proximity to each other helps support understanding of that content?
…perceive things on a line as being related
Am I using rules or lines to break content or separate UI from content views?
Am I using lines in a consistent way?
…perceive things inside a “box” as being related
How can I use color boxes to chunk content or function if I choose to?
Are content types in side boxes (line/color/etc) Being used consistently?
…perceive similar looking things as being related
Do my UI elements look similar enough to be perceived as relatable, but distinct in their functions?
…to avoid making a decision if too many options are present
Can I reduce the number of options on a page to reduce decision fatigue?
Can I reduce the number of CTAs on a page to reduce CTA blindness?
…to seek out things of high visual contrast
Do I want to contrast content with color shape or another type of emphasis to make it more memorable or stick out more?
