5 Ways to Make Your Website Design Feel More Cohesive
Hi! Savanna here chatting about one of my favorite topics: cohesive design. In my opinion, making cohesive design decisions across all your elements is what takes your sites from beginner to pro-level, pretty instantly.
What do I mean by cohesive design? Your design elements (fonts, colors, icons, images, illustrations, section dividers, etc.) all compliment and work harmoniously with each other. Nothing feels out of place or off the wall. Kind of like a themed birthday party that the mom intentionally curated the decorations, food, colors, and even activities for. (Sorry for the niche reference, toddler mom here).
Cohesion is one of those skillsets that will help you feel more confident as a designer, and be able to charge more in turn.(And thankfully, you don’t have to create every element from scratch to get there.)
Here are 5 ways to create cohesive designs, everytime.
1. Define your style
Before you start collecting icons, illustrations, textures and other fun things from the internet, decide what style your website is going to be.
Is the brand style:
Hand-drawn or polished?
Rounded or sharp?
Playful or more buttoned-up?
Organic or geometric?
Minimal or detailed?
Flat or dimensional?
Then carry that style through everything: fonts, icons, backgrounds, image treatments, arrows, textures, buttons and illustrations. If your typography looks like it was drawn with a marker, perfectly symmetrical geometric icons will probably feel out of place.
The goal isn't for everything to match exactly, but it should feel complimentary.
2. Dial in your color palette
Color is probably the easiest shortcut to cohesion. We typically stick to around four or five colors for a site, with two of those often being a light and dark background color. There’s so many great resources like cooolors or Pinterest to find beautiful color palettes. Pro tip: use your style adjectives to help search for the perfect palette.
Once you have your palette, use it intentionally across buttons, backgrounds, graphics and other design elements. And don't forget about your photos.
When you're choosing stock photography, pay attention to the colors and tones already in the image. Finding photography that naturally complements your brand palette can make the whole site click into place.
3. Stay consistent with spacing
This one isn't flashy. It is, however, an easy way to spot an inexperienced design 😬
Whether your site is tight and compact or spacious and flowy, your spacing should feel intentional from one section to the next.
Pay attention to:
Section padding
Space between elements
White space
Margins
Repeated layouts
You don't need identical spacing everywhere. You need a system.
4. Pay close attention to your stroke widths
If the element has a line, look at the weight of that line. That includes icons, illustrations, button outlines, dividers and decorative elements.One super-thin icon next to a chunky one can immediately make a design feel disconnected, even if your visitor couldn't tell you why.
The easiest solution? Source similar elements from the same place whenever you can.
We love Streamline because you can choose from entire icon families in different styles and even adjust the stroke width.
5. Pay attention to size + scale
Finally, look at how much visual weight each element carries. Your images, headings, icons, buttons, logos and decorative elements should complement one another instead of competing for attention.
If an image is huge and the heading beside it is tiny, your eye will go to the image every time. Instead, we want balance between images and text.
Think about the hierarchy you're creating and what you want someone to notice first, second and third.
And remember: proportionate doesn't mean identical. A giant piece of background typography can work beautifully behind a smaller heading if it's subtle enough. An image can be taller than another if it's helping guide the eye down the page. The difference is intention.
The big idea: make it feel intentional
You don't need to custom-design every icon, illustration or texture on your website. You just need to be picky about what makes the cut.
Before adding something, ask yourself: Does this match the defined style?
Look at its style, color, spacing, stroke width and scale in relation to everything around it. Those little decisions add up.
And when they're working together? That's when a website stops feeling like a collection of sections and starts feeling like a design. Like Johnny’s perfectly themed dinosaur party that becomes Pinterest inspo for years to come 😜
We’d love to hear from you!
Show us your examples of cohesive design. Or if you’re stuck, we’d love to do a site check for you. As part of our Squarely membership, an expert designer will record a video providing feedback and practical solutions to help level up your Squarespace sites.