N.CREATIVE STUDIO

Ditch the cookie cutter with these web design game changers

In my last post, I talked about cookie cutter websites and how popular they are among the solopreneur and small business crowd. While a lot of these websites look similar, it’s not due to some sinister plot to suck the very soul out of web design (as far as I know.) It’s just that as people got better at creating and selling things on the internet, guidelines that took the guesswork out of making a website look nice and bring in more leads started to emerge. Then those guidelines resulted in the exact same elements turning up on site after site and the cookie cutter look was born.

Then again, having some uniformity in websites isn’t all bad. It has a lot to do with why websites are a lot less hilariously ugly, and easier to navigate than they were, say 10 to 15 years ago. But what if you’ve worked hard on developing a unique brand identity, and wanted a website to match? Accomplishing that could be a bit difficult if you have to reuse the same site elements everyone else is using or be left with something that stands out but doesn’t generate as many clicks or signups.

Well, the good news is you have more freedom than you might think to do something different. And you won’t have to sacrifice usability or lose out on sales either. If you can figure out what makes a certain cookie cutter element effective, you can usually find a more creative way to get the same result.

I already demonstrated this with how to bypass the above the fold subscribe form. Now here are 3 more ideas (examples and comments on how I did it included) that will help rid your site of the cookie cutter look.

1. Ditch the sidebar

The idea of scrapping sidebars altogether can be a little nerve-wracking as they provide a quick snapshot of anything important or useful on your site. And since you have one on practically every page, they’re impossible to miss. But the no sidebar look is already happening on your mobile layout due to it pushing your sidebar underneath your main content, if not hiding it completely. And you don’t hesitate to use a single-column layout on sales pages so that your readers won’t have any distractions.

So if you love a clean, minimalistic look, and have been dying to declutter your site so that your content can shine, this is something you can try. And you can still promote additional content by tailoring the messaging so that it relates to the main article. Doing this, and weaving it into the content should make a click or signup even more likely because it appears more relevant and connected than it would in a static sidebar.

If you’re digging this idea and using WordPress, it should be pretty easy to implement as most themes today are built with the ability to turn sidebars off, and have an after post widget area to let you easily add things like signup forms at the end of blog posts.

2. Break Out of the Grid

We’re so used to seeing web content neatly arranged into equally spaced columns and rows. But you’ll be surprised by how cutting edge your website design can look when you go outside the lines.

Instead of the typical full-width image at the top of your page, try overlapping a headline and a short intro over a large square image. Or pulling up a row of boxes so that they partially overlap the background image of the section above it.

I did this on Elizabeth Rider’s B-School page using the Beaver Builder plugin. It allows me to easily “break” the grid by using negative numbers in a content box’s top margin (to pull it up) or left margin (to pull it on top of the content to its left.)

3. Hidden navigation menus

A header containing your logo on the left and the main menu on the right is a classic cookie cutter site feature. Here’s one way to mix things up and do something different with that space. Try showing the main site navigation in a full-screen modal popup that’s triggered by clicking on a “Menu” button or icon. This is a clever way to provide navigation access when required and keep it stowed away for a more immersive and interactive website experience.

And it works for other elements that can potentially get in the way of your design like search forms too.

This is a bit trickier to implement if your theme isn’t already designed to display menus or search forms this way. But I was able to achieve something similar on staceymattinson.com using the Font Awesome 4 Menus plugin for displaying a search icon in the main menu, and the Popup Maker plugin for the actual popup. The only difference here is that we kept the form aligned to the top of the screen instead of centering it, and used a transparent background so that her website could still be seen underneath.

Of course, all of these tips aren’t meant to work for everyone. It really all depends on your brand aesthetic and the goals for your site. But if you decide to give any of them a try or use other techniques to ditch the cookie cutter look, I’d love to hear about it.

Leave a Comment

Products

Studiocart

Build a business website in days

A powerful, all-in-one plugin that helps you build high-converting checkout pages and sales funnels. No coding required!

WP Survival Kit

Build a business website in days

A powerful, all-in-one plugin that helps you build high-converting checkout pages and sales funnels. No coding required!