Web Design Anti–Patterns: Setting Your Site Apart

cover-patterns

There are around a billion websites live on the web today (according to the ISL). That’s about three websites for every single person in the USA. We all want our darling websites to stand out from the rest, but with numbers like that, how can we possibly achieve such a goal? I strongly–like, really strongly–believe the answer is as simple as can be:

Don’t simply default to the latest trend.

I’m sure you’re thinking something like “Well, no duh! That’s nothing new!” but what I want to do is challenge you to think about these two things a little differently than you normally would.

Putting the focus on the user should always be paramount, but don’t just stop at, “It works for our target users. Ship it.” If you really want to create something, like MailChimp, that will be a joy to use and have people talking about for years to come, you need to go a few steps further to make sure you can say, “It works and our audience loves using it.” It’s the reason most of us would probably choose a BMW over a Ford Focus; one looks fine and gets you from point A to point B, but the other looks beautiful and is a joy to drive.

So you want to focus on the user and give them a wonderful experience, but how? One of the best ways you can accomplish both is to simply not default to whatever the latest web trend is. If this sounds kind of vague, allow me to demonstrate:

sitecompare

The site on the left defaults to using most of the trends I’m going to talk about, such as a slider with generic stock photos, clip-art, or stock graphics, and a basic, slightly messy grid.

Contrasting this, the site on the right uses a grid of stories on top that contain more interesting photos that don’t look staged, custom graphics that are interesting and pique interest in the articles, and a more compelling, tidy grid.

Most people would agree that the site on the right is the BMW, but how can you achieve the same effect with your site? Let’s go through the most common web patterns today and look at some alternatives, or anti-patterns.

Stock Photos

The scourge of the internet…sort of. Stock photos have become become practically synonymous with bad or generic design, and not just with web designers. There are many websites and memes making fun of just how bad a lot of stock photos are, including this hilarious parody by Vince Vaughn poking fun at the popular web trend.

We can’t just swear off pictures, though. Imagine the internet without funny cat pictures—horrid, right? Well the good news is that there are plenty of alternatives.

Anti-stock photos

In recent years, a swarm of anti-stock photo sites have popped up offering free or very affordable alternatives that are often less staged and better quality than their paid counterparts. Some of my favorites include:

Custom Photography

You can’t beat going with custom photos on your website. Most cities have an abundance of local photographers ranging in prices that you can hire to take photos of your team, products, etc. and you can feel good about helping a local artist/business out in the process!

Stock Icons

This one is a bit different from stock photos; most modern icon sets actually look good. The problem is that web designers have been relying on them so much that they rarely offer anything new or unique to the website. If you’ve fallen into a rut of just sticking your favorite stock icons in every design, here are some alternatives to help your design stand out:

Custom Icons

You guessed it—going custom! The main benefits of creating custom icons is that you can truly make them match the brand and ensure your clients is getting something unique from their competition. The downside of course, is that it does add a decent amount of time to the project.

Customized Icons

An alternative that I like is to take some of my favorite icon packs and customize them to the project. Take a look at the before and after of these icons. I simply added some color from the brand and an extra design touch with the lines and waves to create a more personalized feel. These extra elements even add a little more descriptiveness to the icons as well.

icons

Animated Icons

Another option is to animate your icons with AfterEffects, or even better, CSS. This option can help create a more dynamic, interactive feel that’s more eye-catching for key information.

calendar

Layout

Layouts on the web have gone through a lot changes over the years, from main content areas with prominent sidebars to the “bands” of full width content seen today. With the advent of Flat Design, our sites have cleaned up a lot, but in the process we’ve also boxed ourselves into a, well, boxy design trend.

boxy

 

 

Getting Creative

Jen Simmons has been a proponent of finding information for our designs and layouts in places other than other websites–specifically, magazines and books. These print mediums offer an insane amount of diversity and creativity, and while we can’t achieve everything print can with the web, we can certainly use it as an influence to create some more interesting layouts and effects. Take a look below, normally on the web, floated images and text appear pretty blocky:

layout-plain

…but watch what happens when we apply one CSS rule, shape-outside: polygon; to our image:

layout-cool

A simple CSS change and we have a cool new, magazine-like layout. View my CodePen for this here.

Summary

We covered a lot of common patterns and some alternatives to them, but there are many more out there and many more to come. So go try some of these tips out on your next design and let me know how it turns out for you!

Posted in Design and tagged with CSS Design design trends

2 thoughts on Web Design Anti–Patterns: Setting Your Site Apart

  • I very much like the two images for the “Don’t Simply Default….” article and the contrast they demonstrate. We are rebuilding our site, and will likely be incorporating this idea into our plans.

    Your section on “Custom Icons” is good in theory, but presumes we have some degree of creative ability. Yikes! I like the idea of “Customizing” existing icons better, and plan to employ that idea as well.

    In your “Getting Creative With Layouts”, I’ve looked carefully at both images. Other than a change in the contrast, I’ll be darned if I can see any difference.

    Thanks for the interesting article.

    • Cameron Campbell says:

      Thanks for your thoughts on this, Stephen! So yeah, with the Getting Creative With Layouts section I’m just allowing the text to bet cut into the shape of the image with shape-outside but now that you mention it, I think that idea could be expanded with a lot more information and examples. That could be a great idea for a follow up article :)

      Good luck with the redesign!

Have a comment?leave a reply

Your email address will not be published.