8 Well-Designed Sites and What You Can Learn From Them

Making a website is a process that requires a good amount of technical expertise, but there’s one thing web designers should never forget: that it is the visitor’s experience that counts the most. For that reason, it’s sometimes good to look at web design from a perspective other than the technical standpoint, and take a look at what generally makes a website enjoyable for someone to visit.

The websites we’re about to look at it aren’t necessarily supposed to be examples of the best websites ever; rather they are meant to be examples of sites that do at least one thing particularly well. These sites could be almost any site at all, because almost every site has some aspect about it that can be learned from.

Finally, some of these pieces of advice will overlap, but that’s just because it’s such great advice that you should hear it twice. Also all of this advice isn’t meant to necessarily be used at the same time on the same site, because, well, we can’t have everything we want.

And without further ado, here are the sites!

KINEDA.com

I’m not exactly sure what this site is about; it seems to basically feature hip-hop fashion news and other trendy stuff. But it doesn’t really matter what it’s about, because it’s clean and sharp design immediately drew me in and made me want to start clicking on things.

The interesting thing is that Kineda essentially seems to be just a wordpress blog, but that does not hold it back from being a fantastic design. Its use of high-quality pictures and a simple design, with a solid, readable font,  straightforward white-on-black background colour scheme, and newspaper-like columns makes the focus entirely on the content, and not on anything that the reader shouldn’t be interested in.

The result is that the site has a look very much like that of a magazine, which naturally makes visitors to the site want to dig in and start reading. Just like in a good magazine, nothing gets in the way of the visitor’s experience with the content.

The Lesson: You don’t need crazy-fancy web design to have a great site; a simple wordpress blog with a bit of thought put into presentation can do wonders for the visitor’s experience.

Also, even though print magazines and the internet are two different mediums, there are always lessons to be learned from print when designing a site. Magazines and newspapers have been around a lot longer than the internet, and many of the basic lessons learned by magazine designers are transferable to the world of the web: use columns for readability, include a good amount of high quality pictures to break up the text, and choose your font well for maximum readability.

Finally, pictures of hot Japanese girls never hurt.

NARROWDESIGN.com

This site is a good example of how to make an appealing style of navigation. It’s also a good example of a site that is different and interesting, yet still completely focused on the content.

The main content of the site is a series of links to sites designed by the owner, which is pretty standard. But what is interesting about the links is how they are presented and how the user navigates through them: by simply moving the mouse the links scroll up and down.

This unique method of navigation immediately puts the focus on the links, which is how it should be, considering they are the main content of the site. The user simply can’t ignore them, because upon first moving their mouse they see the links move; the visual cue to pay attention to those links is immediate. This kind of navigation is also very intuitive, making sure the visitor isn’t confused at all by the somewhat unusual approach.

Also, when a link is clicked on, the user isn’t immediately sent to a site; rather, a preview of the site is shown. By getting previews of the work the visitor gets an idea of the content, while still having the opportunity to stay on the main site and play around with the navigation system.

The end result is a site that the user will most likely start using right away, with no other cues than the unique navigation style.

The Lesson: Thinking about how users navigate your site can be very important, and giving visitors a particular way to navigate can bring more focus to your content, whether it is composed of text, pictures, movies or links.

And you don’t always need a flash site to take advantage of navigation; most of the time visitors will just be scrolling up and down and clicking on links, but there are still design decisions to be made. Want everything to be one screen? Then you’ll most likely need links to navigate the site, while not cluttering your screen with too much text. Want users to scroll through your site? Then keep links to a minimum, and what links you do have should open in a new tab, because losing your place on a long webpage and having to scroll back can be annoying.

By putting a bit of thought into how you want visitors to navigate, and a bit of planning and design to support that vision, you can make your site that much easier for visitors to use.

LEGWORK STUDIO

I usually don’t like sites that have a lot of weird stuff going on in the background; they tend to be confusing and end up scaring me away. But this site managed to hold me in just long enough for me to click on the about button, which scrolls you down to a cleverly embedded video that looks like it’s part of the background.

I’ll admit it, this video is pretty much the only reason this site is on the list. Not to say that the rest of the site is poorly designed; it is perfectly functional, stylish site. But the video in particular was entertaining and funny, and managed to draw me in while explaining what the site was about with a ridiculous cartoon. Further, it didn’t feel like a tacked on gimmick, because of the way it was featured seamlessly in the site.

The result is a fun use of media that is not only entertaining for anyone that visits the site, but that also lets visitors know what the site is all about without boring them to death.

The Lesson: Don’t be afraid to get creative with different types of media to get visitors engaged. Movies, music, and sound aren’t always going to work on every website, but if it is an option then with a bit of ingenuity and some smart integration of the media you can make what is normally a boring affair that users might ignore into something that is engaging and fun. The internet is capable of so much more than just pictures and text, and smart use of these possibilities can make your site that much more engaging.

YOULOVE.US

First of all, this site has a really cute name. I’m not sure how much that’s worth, but it can’t hurt.

Right off the bat this site looks like a pretty design with a full background image of a nighttime cityscape, but doesn’t immediately blow you away with anything amazing. But as soon as you scroll up or down or click on a main link, the website does a very cool effect where the movement of the background gives the impression that the time of day is changing in the little cityscape.

The effect is interesting and engaging, but not distracting, since the buildings in the background stay in place, acting as a visual anchor so that the site doesn’t give that nauseating feeling that most full-scrolling-background sites give. Also, the site makes great use of colour, managing to change the background colour from dark blue to bright red without making the text unreadable.

The result is that you don’t even have to care what the site is about to stay around, because you want to keep exploring it to get more of the unique and attractive scrolling effect. And the better chance someone has of sticking around at your site, the better chance they have of getting into its content.

The Lesson: Keep visitors interested with whatever you can. Sometimes it doesn’t even matter how relevant the interesting aspect of your site is, although ideally it will be with something that gels well with the overall presentation and content of your site.

And you don’t have to come up with a groundbreaking new clever design to do this; a catchy title, a funny picture, some pretty colours, or anything else that might catch a visitor’s attention will help keep them around long enough to let your page make an impression.

VIGET LABS WEB DESIGN BLOG

This site is a simple blog about web-design, fittingly. It’s got the usual setup, with blog posts, an about section, comments, and so on.

What makes this site worth talking about is how nice it looks. It has a beautiful watercolour background that blends with the blog perfectly, and is just plain easy on the eyes. The colours used are soft and inviting, and this theme is carried through to the rest of the site, which can be seen in the pictures of the various editors, which have the same mild, faded style. The end result is a website that is a pleasure to look at.

The Lesson: If you have the resources to do it, make your website look as nice as possible. Some people might argue that information is information, and that it shouldn’t matter how many nice frills your site has, as long as it gets the points across. But the simple fact of the matter is that most people like stuff that looks nice, and a pretty looking webpage with some attractive graphics — even on something as simple as a blog — just gives visitors one more reason to stick around.

MAGNIVATE

Magnivate is a pretty unusual site: it is almost like a video game, in that you get to explore a little world with a character that you control. It’s a fun and interesting approach that will most likely get any visitor immediately involved with its interactivity.

But the epxloration you do on the Magnivate site isn’t just about exploring the strange little world you are presented with, because by getting your character to run around, you also end up learning what the site is about. As you reach certain points, information about the site is presented to you, making what would normally be dry and boring info become a quick and fun game.

By giving the visitor a fun way to find out what the site is about, Magnivate skips the whole boring about page that no one cares about, and instead integrates exploration of the site into the exploration of the game.

The Lesson: Try to keep things organic when explaining to any visitors what your site is about. A small about section doesn’t hurt, but ultimately you want people to naturally figure out what your site is about while exploring it, so that they aren’t forced to swallow any information about the site without first experiencing what it’s like first hand. When visitors interact directly with the site in learning about it, they build a much stronger connection with it than if they simply memorized a block of text explaining what it’s about.

Of course, you don’t need to take the same route as Magnivate; its flash-based approach takes the exploration-as-information idea to a very literal conclusion, but it’s far more elaborate than is appropriate for most sites. Nonetheless there are ways to make sure that users get an idea of what your site is about without first needing an explanation.

For example, make sure to give the user plenty of options in exploring the content of your site, so that no matter what they click they’re getting content that the site is focused on, and not periphery stuff. A lot of blogs do this well, by not only showing the latest blog posts up front, but by also giving the archives or last month’s posts in a sidebar, or implementing an option that allows users to access a random post. With lots of different ways to get to the same content, the user will quickly figure out what the site is about just by clicking on stuff.

TED.COM

Ted.com is a site meant to showcase various talks given at TED conferences. The site actually has quite a few things going on, with a fair amount of links and options that the user might take some time to become familiar with.

Nonetheless, TED’s main focus, the videos, is undeniably the first thing any visitor will notice. The central feature of the site is a neat visualization of various categories of videos, and it presents the visitor with an interface that immediately asks to be investigated. By making the video visualization feature so prominent, TED gives the visitor direct access to all the videos, and also organizes them according to a number of interesting and intuitive themes, making the visitor comfortable to dive in and get acquainted with the site’s content.

The end result is that, even though TED has a fairly busy design with a good deal of periphery information, most visitors will ignore all that info and instead make use of the much more intuitive visualization feature.

The Lesson: Your site’s content must be the main focus at all times, because it is what the visitor is there to see. If anything gets in the way of that, then the visitor’s focus shifts away from the content, and they may lose interest or miss the point.

Make sure that every design choice you make puts your content, whether that be articles, movies, music, or pictures, front and centre.

WEB ZEN

Web zen is a site that lives up to its name quite well: it is sparse and straightforward and keeps features to a bare minimum, letting nothing get in the way of the content, which consists of a themed set of links to interesting stuff.

It might almost seem ridiculous to have a webpage with so little on it, but the result is a very focused design. There is no explanation of what the site is about, but there doesn’t need to be, because the content is right there in front of the visitor. With no ads, blocks of text, or distracting graphics to get in the way, web zen loses no time in getting the visitor to start digging in to the site.

The Lesson: Keep things simple. You don’t have to be as minimal as web zen, of course, but the basic design principles it embodies are important: if you have ads, make sure they don’t get in the way, make sure nothing that isn’t the main content is distracting, and if you don’t need it on there, get rid of it.

The challenge is balancing simplicity with the other important features included on your site: the more features you add, or have to add, the more complex the site becomes. But with a bit of organization and some smart cuts, a simple design that ensures the visitor doesn’t get confused, lost, or frustrated can be achieved.