Jess Walker // Apr 24 2012
Good design doesn’t just mean pretty, it means functional too. Sometimes a website is born that combines those two things seamlessly. It’s like a miracle. Or more likely, people worked hard and communicated with one another, allowing design, functionality, and content to come together and deliver a clear and helpful message.
A functional website satisfies two important needs:
A well-designed site must allow both to happen, while being aesthetically pleasing and providing relevant information. If you’re stomping your feet and whining that you don’t want to have to do all of those things at the same time, the Internet should be taken away from you and your bad web design. You can have it back when you’ve had some time to think about what you’ve done.
So, in no particular order, let’s see some good design!
Ript Apparel is a clothing company that specializes in made-to-order t-shirts that feature original pop culture designs contributed by independent artists. With the exception of a few reprints, the designs are only available for 24 hours, making each shirt they sell a limited edition collector’s item.
If you didn’t know any of that before now, it’s at least immediately clear from their homepage that they’re an apparel company and you can get a rad shirt with featuring a pirate-esque Super Mario water-skiing on a couple of Koopas
Due to their unique business model, they have no need for any kind of category page, so nearly all of their content can be reached within 1-3 clicks from their homepage. While there is, admittedly, not a lot of content on the homepage, everything above the fold is relevant and useful, and everything below the fold is devoted to engaging their users in a discussion.
Camera+ starts off with the bare minimum of what you need to know – it’s an app, it takes pictures, you can buy it for $1.99. Mission accomplished. To add some icing on that cake, the image of the phone plays a little video that shows you how to use the app, and if you want a more in depth tutorial there’s an intro video linked right above the ‘buy now’ button.
You could argue that it loses a little functionality by lacking any sort of navigation – if you want to know more about the product you have to scroll down, getting into finer and finer detail the farther you go, but there’s no way to go straight to the information you’re looking for without skimming all the information available. Still, the page isn’t that long – it tells you everything you need to know without being verbose, and it does so using excellent photography and consistent attention to spacing.
Crowdrise holds a special place in my heart because the entire site is laced with humor, which as we’ve mentioned before, rules the internet. This is another site that knows how to keep things simple. Nearly any information that you could be looking for is available in one of those top five drop-down menus (though they could probably stand to make it a little more obvious that those are, in fact, drop-down menus).
And if you don’t know what Crowdwise is about, the navigation and slideshow text is full of keywords to clue you in that their mission is, as the tagline says, to give back. Crowdrise is an easy, secure way to raise money for good causes, and they provide that service with a great sense of humor.
These guys break the 1-3 click rule a little bit – but you don’t actually have to click the big pink button to find out what they do, you can just scroll down. And to be fair, the big pink button is – you know – big. And also pink.
Strawberry Jam combines all your social media feeds so that, for example, if you’re friends with all your coworkers on Facebook and/or Twitter and they all suddenly decide to share the same link to the same article at the same time, you only have to see it once. And if you already knew that, you need only fill out the form to sign up for the beta. One click and done.
This is another app – which you can see from the handy pictures of it shown on both i-Phone and Android screens. For newcomers, all the basic info about what the Trip Lingo app does – it helps you learn other languages so you can communicate with locals while you travel – is right there when you arrive on the page, no clicking necessary. For people who already know what it is and simply need to have it now, there’s a big shiny button to get you started. And if that’s not enough for you, there’s a big ol’ features section right below the fold.
Foodzy is another addition to the craze of turning diet and exercise into a fun social networking game. The site combines fun, colorful, retro-style illustrations with a clean, to-the-point design. Their purpose is laid out in three steps at the top of the page, there’s a cute video to watch if you’re still not sold. If you’re already shouting sign me up there’s a big green button at the top, just for you.
Louise Fili specializes in packaging design for restaurants and food products, which is what it says in that big red bar. Her work is divided into clear categories which are listed along the top, and she combines beautiful photography with a minimalist design to showcase her art. This is another example of a website that’s lacking a lot of text content, but portfolio sites are one of the few cases where that’s not terribly necessary. Portfolio sites should be carried by the work you’re presenting – if you have to mince words to convince people why they should like your art, you’re doing something wrong.
Editorial sites often have a problem with spacing; they get caught up in trying to fit as many interesting headlines on the page as possible and forget that if they aren’t easy to read, no one is going to read them. GOOD doesn’t fall into that trap. The site is pretty and easy to read, there’s a nice balance of images, content, and negative space, and the title changes from ‘Good Morning’ to ‘Good Afternoon’ depending on what time it is, which is nifty.
It’s hard to explain what Evernote is, since there isn’t really anything else like it out there (it’s not quite a blog and not really a social network), but they do a pretty good job of presenting the basics. If you already know what Evernote is and want it, the download button is right there in the middle of the page. Plus the logo cleverly combines an elephant (because they never forget) with a standard page icon, and I’m a sucker for clever logos.
These guys don’t do anything terribly fancy as far as visuals, but they don’t need to. Squarespace is a site creation software and they follow the rules to the letter – the who, what, and why are spelled out for you above the fold and the call-to-action is the first thing you see (as it should be). Any other information you desire is available within 1-3 clicks and overall, their site reflects the clean, elegant professionalism of the product they offer.
And that’s it! Ten beautiful websites for you to fawn over and strive to emulate. If you have any that you think should have been featured (or any good design, not just websites but logos, posters, email blasts, etc.), let us know!
Jess started teaching herself HTML/CSS in high school while customizing blog templates for fun. She has continued to branch out from there and is always looking out for new things to learn. Read More