3 Simple Changes for a More Editorial Site Design
If I know you (and I think I do) you’re not just wanting a regular old website, you want the whole editorial shebang.
But when your website ends up coming out on the other end not looking like a Burberry coat model could use it as a runway at any moment (as they do) what’s a girl to do?
You may not have ever thought of your website as being something that can be editorial, but it totally is. Your site may feature a blog, (which is editorial content!), but even if it doesn’t, most likely you’ve got words on there right? And if you’ve got words, you’ve got a story. And that, my friend, is your editorial foundation.
An editorial look will give your site a more luxurious feel, a sophisticated edge, and can make your content sing off the page. Let’s dive into three simple guidelines to check in on to elevate your site to the next level.
1.) Create Contrast
On top of the loveliness that your site already is, you may be missing something, and that’s the pop, or the contrast. If you’ve ever heard the (sometimes vague) term, “Make it pop!” That means to make the subject stand out, and the way to do that is to create a change within two items so the one you want to highlight has something to stand out against.
This could be negative space, an opposite color, or a difference in fonts (serif vs. san-serif). This could mean simply spacing things out really well so there’s a breathable difference in visual space between them.
Take a look at your site. What would you like to have stand out that’s just …. not? Check your gut instinct here, what’s the first thing you’d like to change?
A Quick Tip
If your first reaction is a desire to change the template, try to resist that urge. Changing a template is often the first thing done to change a site’s look (understandable) but this can also be majorly time-consuming, so just know that you can have an editorial look on any template just by making simple design changes!
If one of your first reactions on things to change was fonts, then boom you’re doing great! Next, it could be colors, or it could be with photography as well. Those are all great things. But I will say, the fastest and easiest way toward a more stylistic editorial look (which all started with words, might I add…) is, you guessed it, the fonts.
If you already have an established brand and are not willing to change your fonts, then changing the sizing may be all that is needed here. Make some headings bold, or larger than they used to be. Add some letter spacing (or reduce it). This can create more of an edge and stylistic contrast.
In terms of fonts, serif fonts are notoriously the more sophisticated of the bunch, while sans-serif fonts can be edgy, modern, and chic, especially when paired with a little letter spacing. Include both styles together to create visual contrast on your pages.
Check out this simple example below of typography, color, and contrast using some basic Squarespace Cover page layouts.
The example page on the left features a text coloring that creates little contrast as well as one basic font, Arial. The example on the right features a layout where the photo and text aren’t competing against each other, there’s more exciting copy, and it also features two contrasting fonts, a serif and sans-serif: Monotype Modern FB and Lato.
It’s also important to make sure your brand colors are jiving with your text colors and that everything is working harmoniously and nothing is fighting for dominance. For instance, you can have black text along with navy blue as a brand color, but it might not be the best idea to overlay them together (and all the fashionistas out there said amen.)
2.) Smart Use of Headlines and Website Copy
When I think to myself “What is editorial?” as I sit on a bench, latte in hand, gazing at the sky (but really though, lol.) I have to go back to my days working alongside magazine publications.
Magazine and newspaper layouts are where everything started, and today’s modern magazines are the perfect way to spark inspiration to craft that editorial look.
Pick up your favorite magazine. It could be Magnolia Journal, Southern Living, Nat Geo (or even Modern Cat, no judgement here), and thumb through it to take a look at their headlines, feature stories, and the way their text is laid out across the page.
Take note of how the magazine feels, and how each design choice, when put together, is reflective of that brand.
One thing you may have noticed (that all magazines have in common) is their clever use of, well, words.
Just as I mentioned above, creating a stylistic sense of contrast with the fonts, colors, and imagery is a great thing to do so the eye is pulled toward them. And this can be done with headlines as well to offer contrast both stylistically and linguistically.
To put it simply… is the copy on your website interesting? Does it create intrigue? Does it make the reader want to devour the next section with unstoppable vigor? Because part of a great editorial style is also the words. There’s sophistication in the smart use of words.
For headlines to be sharp, they’ve also got to deliver on their promise. So that means being real and authentic with the delivery of items such as the titles of blog posts, headings, pages, and even social media captions. Click-bait is a no-no. For example, don’t put “HARRY AND MEAGAN’S NEW BABY IS AN ALIEN” if you’re not prepared to deliver on that promise, kay?
3.) The Spacer Block
I’ve saved the best for last. The spacer block. For those not using Squarespace (most web builders have an equivalent to this!) the spacer block is a content block type that literally just adds space in between other content blocks.
The spacer block is by far the easiest way to create breathable room in your site’s layout and prevent other blocks from crowding together.
You can use the spacer block in between content blocks on sidebars, on your pages, to make text narrower on the page, to move text to the side of a page, or to simply create that sense of space and contrast.
By creating space with a spacer block, you’re actually helping to direct the user’s eye toward what you want them to see. In many ways, it makes pieces of content stand out to a greater degree. If content blocks were all squished together on a page, it would look like one big blob, so the spacer block helps correct that.
Is Your Site Ready to Take On the Runway?
Of course, a website is more than just its looks, but having a fresh coat of paint sometimes just makes the car run better (ifyaknowwhatimean).
Just to recap, here is our roundup of 3 editorial changes to enhance your site design:
Create visual contrast
Use great headlines & copy
Utilize the spacer block
These simple editorial changes can enhance your entire design strategy with social media posts and sharable graphics that carry the potential to not only help your site look amazing, but can help generate higher ranges of traffic.
So if somewhere along the way you’ve started to feel a little “bleh” about your current website or you know you’d like a little bit of a stylistic tune up, my goal here is to help you accomplish that easily and fall in love with your site all over again.
I’d Love to Hear From You!
What were your biggest takeaways from today’s post? Do you know right away the areas where your website needs some love and attention? Or maybe, you don’t know where to start and could use some pointers? Let’s discuss!