The overall design should be unified across all pages, maintaining a consistent graphic style, color palette, and aesthetic. This ensures that while each page can have its own unique identity, it still feels part of a cohesive whole.
Visuals and icons must match the overall aesthetic to maintain consistency. Every element, whether detailed or minimal, should work together to create a seamless user experience.
Color Usage
Core Brand Colors should be featured prominently and consistently throughout the site to clearly represent the brand.
Supporting Colors should complement the core brand colors without overpowering them. Strong supporting colors can be used occasionally to add emphasis, but it should always be clear which colors are core to the brand and which are supporting. The balance between core and supporting colors is key to maintaining brand identity while keeping the design visually engaging.
Background Textures and Ownable Look
Honeycomb: Use honeycombs dynamically as backgrounds, accents and content frames. Keep them subtle and strategic to avoid overuse.
Incorporate subtle textures like squiggles to unify pages, using a specified library of textures to maintain consistency.
Lean into unique elements, patterns, and gradients that are easily recognizable and distinctly ours. These should create an ownable look, helping to make the site feel cohesive while standing out from generic designs.
These textures can be used in a variety of ways—zoomed in to show a portion or zoomed out for a broader view—to keep the designs fresh while maintaining a unified brand identity across the site.
Visuals
Diversity: Ensure diversity in the visuals, representing a range of genders, ages, and ethnicities to create an inclusive design.
Clean & Simple: Keep visuals clean and simple. Only feature text when it provides necessary context or is directly relevant to the visual. Otherwise, use placeholder shapes or subtle design elements to maintain focus and avoid distraction.
Choose simplified visuals/icons for supporting points to keep the focus on the main features and message without overwhelming the user.
Purposeful Communication: Visuals should communicate the key message or idea of the section they’re part of. They should help users quickly understand the content with minimal text, reinforcing the message.
When illustrating positive outcomes, you could use icons such as upward arrows, growth charts, or smiling faces.
For challenges or negative scenarios, consider elements like downward arrows, declining charts, or neutral expressions.
Drawing Components
Use subtle drawing elements to enhance the design in a fun, understated way.
These can be applied around quotes or to visuals to draw attention to key areas, but should be used thoughtfully to complement the overall design without overpowering it.
Framing Content
Use frames selectively and asymmetrically. Some sections should remain open and expansive, while others are neatly framed. This contrast keeps the page’s flow dynamic and engaging.
Overlapping Visuals and Text
Allow visuals and text sections to overlap occasionally, creating a more integrated and fluid design. This helps break clear boundaries between elements, giving the page a more dynamic, cohesive feel and better flow.
Flow Between Sections
To avoid a boxy layout, use a common background color or subtle design elements to tie sections together. This creates a seamless scrolling experience, making the user curious to explore what’s next while maintaining a sense of connection between different parts of the page.
Things to Avoid
Abusing brand components
Brand components should be used selectively to draw the user’s attention and tie different pages together. If they’re used in every section (or every other section), they become more of an annoying distraction.
Overusing the color green
We want green to be used as a tertiary color to help draw the user’s attention. If it’s used too frequently (like in the drawing example above), it loses its ability to catch the user’s eye. Additionally, green seems to be a less dynamic color than others. Many grades and shades either feel too dark and heavy or too bright and obnoxious.
Too much symmetry
We don’t want the site to feel too structured or boxy. We want to tie different sections together and create a compelling and engaging flow to each page.
Want to print your doc? This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
Branding & Design