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:
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.
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.
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:
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!
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:
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.
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.
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.
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.
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:
…but watch what happens when we apply one CSS rule, shape-outside: polygon; to our image:
A simple CSS change and we have a cool new, magazine-like layout. View my CodePen for this here.
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!