Some Design Advice
As Cloud Four’s Creative Director, a big part of my job is setting direction and providing feedback for both our team and any external teams we collaborate with. A while back, I started a list of my most frequent suggestions as a resource for new team members.
While loosely organized and far from exhaustive, I thought it might still be worth sharing as a point of reference for other like-minded teams.
Use white space purposely and consistently.
Compose elements on a page in a logical order. Confirm this order by reading the text aloud: Make changes if it sounds bizarre or robotic.
Group related elements wherever possible.
Resist introducing containing shapes until you’ve resolved typography and white space. Ideally, the design should still work even with these shapes removed.
Prioritize alignment of content over alignment of content containers.
Blur your vision (squint) periodically to confirm that the hierarchy of elements is still apparent.
Consider landscape device orientations and the presence of browser chrome, especially when designing fixed position or “sticky” elements like navigation bars.
Base as many sizes and dimensions as possible on something else: A percentage of a containing element, a multiplier of a base font size, etc. Patterns that result from this approach will be more responsive and harmonious.
Minimize the number of unique type styles.
Check text sizes for readability. When in doubt, go larger.
Make sure headings are clearly differentiated from the preceding content and clearly associated with the content that follows.
Avoid differentiating adjacent type styles in more than two ways. For example, if a heading is already larger and bolder than adjacent copy, it probably doesn’t need an underline, too.
Line lengths for prose should be around 50 to 75 characters.
Adjust line heights based on both line length and font size.
Keep the size of your color palette manageable. Only hues with a clear and distinct purpose deserve to be there.
Be aware of the psychology and symbolism of certain colors (which are sometimes regional). Red might mean love, but it also might mean emergency or stop.
Avoid small amounts of adjacent colors that differ in hue but not lightness or saturation, as these appear “fuzzy” to the eye.
Don’t be afraid to slightly vary hue and saturation of a base color for richer light and dark variations. In real life, shadows and highlights are almost never pure black or white.
Be deliberate when layering colors. Darker colors appear to recede, implying depth.
Check color contrast of text for readability. Reserve more troublesome colors for accents, borders or other inessential elements.
Optimize interactions for as many input types as possible.
Distinguish interactive elements visually from any non-interactive content.
Save dramatic visual state changes for direct user action (tap, click, focus). Use subtle visual changes for interactions that may happen accidentally or absentmindedly (hover, scroll).
Avoid relying on color alone for state changes or meaningful visual differentiation, as not everyone is able to perceive color as designed.
Avoid relying on icons or imagery alone to convey meaning.
Don’t design custom interactions that replicate or replace built-in browser behavior without a very good reason.
Design for users first, stakeholders second, yourself third.
Embrace any constraints that focus your design efforts, but speak up when a constraint is at the user’s expense.
Strive for straightforwardness over simplicity.
Know what browsers can and cannot do today. Question these assumptions regularly.
Design for small screens before tackling larger ones.
Familiarize yourself with any existing design patterns before introducing new ones.
Avoid introducing patterns that work great within a single page or interface but poorly within a system as a whole.
When iterating on an existing design, periodically compare your work to what came before. Confirm that you’ve introduced more improvements than regressions.
Do as little design as possible. Generate whatever artifact will communicate or test a concept most effectively and efficiently. Sketches, user flows, mood boards, wireframes, paper prototypes, element collages, mock ups and digital prototypes are all at your disposal regardless of the project stage.
Remember that design artifacts are only as meaningful as their ability to impact and inform the end product.
Celebrate and steal your teammates’ best ideas openly and enthusiastically. Do better work together than you would separately.
Tyler Sticka is Cloud Four’s VP of Design, allowing him to think about design systems every day. When he isn’t directing his team, sketching on sticky notes or nitpicking CSS, he enjoys reading comics, making video games and listening to weird music. You can follow Tyler on Mastodon.