Color wields immense influence in web design. Strategically applying color to SharePoint website design layouts through an approach called color blocking creates striking visuals that capture attention while conveying the brand’s essence. Read on to unlock color’s potential.
Balancing Act: Blending Color Theory and Accessibility
Before diving into color blocking techniques, let’s review core color theory principles and accessibility guidelines SharePoint website designers should consider:
- Use a primary brand color– Pick one brightly-hued color that conveys your organization’s spirit to use widely across page elements.
- Add neutral secondary hues– Greys, blacks and whites give contrast to accent colors without overwhelming.
- Mind color psychology– Different hues invoke different emotions that can align with your messaging.
- Ensure sufficient contrast– Text should clearly stand out against backgrounds, with a ratio of at least 4.5:1.
- Support color blindness– Don’t convey meaning through color alone. Also use textures, labels, icons and patterns.
Testing with online contrast checkers and color blindness simulators helps balance vibrancy with accessibility, notes Samantha Lee, SharePoint Creative Director at Fabrikam Industries.
Color Blocking Creates Hierarchy and Focus
Color blocking seems simple on the surface, but do it right and transforms page layouts from flat to fabulous.
This technique applies a single vibrant hue in a concentrated way to capture attention while creating visual hierarchy.
Effective color blocking follows three key rules:
- Select page elements to color block
- Choose a vibrant hue that complements the palette
- Apply generously in a contained manner
Prime Candidates for Color Blocking
Nearly any page component can be color blocked, but some options make optimal focal points:
- Headings and sub-headings– Guide visitors through content
- Sidebars and info boxes– Allow details without clutter
- Graphics and icons– Draw interest towards imagery
- Buttons and tiles– Enable clear calls-to-action
- Borders and lines– Direct attention logically
Pick a Vibrant Accent Shade
While nearly any bold color works, consider what feeling you want to achieve. Need confidence? Go for an orange red. Seeking creativity? Consider aqua blue.
Once selected, generously apply the accent shade to fully saturate the target elements, creating an eye-catching color field.
For variation across pages, choose alternate accent colors that share the same base (red text on one, red graphics on another).
“We color block key modules neon yellow to infuse our intranet’s straightforward layouts with the brand’s playful wit,” says Fabrikam’s Samantha Lee.
Energize Your SharePoint Site’s Story
Thoughtful color blocking grabs visitor attention while communicating the aesthetics and emotions tied to your brand story. See how color blocking commonly transforms SharePoint sites:
| Site Area | Styling Approach | Desired Effect |
| Homepage Banner | Vibrant blue header | Feel cutting-edge |
| Content Sidebar | Saturated orange boxes | Appear friendly |
| Section Headers | Lime green title text | Seem innovative |
Small touches make a monumental subconscious difference in how visitors perceive your organization.
Let color blocking help shift site perceptions while adding some design excitement. Contact your SharePoint consultancy to explore options for your next redesign.
