I recently read an article about readability on web pages, and it mentioned a lot of good stuff about do’s and don’ts on fonts. The article quickly covers these topics:
One example of a site that I frequently use is Abduzeedo. They focus on design blog on many different levels. They have a section where they interview different artists. I wanted to show how Abduzeedo uses emphasis and alignment in the interview posts.
They use great emphasis in this article and through out the entire website. The title is bold and big and stands out from the other text. The short description is below the title and is not as bold. The paragraph texts is shown next and it’s clearly a much small font. All the font’s on the page are Sans-Serif. Right beneath the opening statement you see links to where the artist is also on. The links are in bold and underlined to give emphasis on the link.
And if you scroll down a little more you’d see the more writing in the paragraph. The alignment is left aligned. It’s not justified. But this type of alignment is easiest to read.
When people think of web design they typically don’t associate it with art or design principles applied to it. Well After being a graphic designer turned web designer I can tell you that those people are wrong in there thinking. Web design is quickly becoming one of the best paid and most used forms of artwork today.
After doing a little research on grouping and harmony and how it’s applied to web design I was amazed at how much even I have over looked. Then again wouldn’t that be great usability on the web page (designed so well that the user doesn’t even have to think). The research defined grouping, or proximity, as when we have a group of objects, we tend to see them as forming a group.
One basic concept of grouping in web design is with navigational links, where not only do we keep the navigation links together, but also group them internally, putting links to similar pages together, categorizing them into sub-categories, and so on.
With the knowledge we have on grouping, or proximity, lets look at a couple of examples of this applied in some pretty well known sites.
The first site I wanted to take a look at is web hosting company called, RackSpace. They are only a few years old and are becoming one of the biggest hosting companies. So with my experience with using hosting companies I know that they have a massive amount of feature and products to offer. In order to keep all that organize you would need to group those products accordingly. If you look at the image below it shows a great example of proximity site navigation applied. You have the main categories in all caps and white, and the sub categories are blue and are in title caps.
Here is a closer look at the proximity applied in site navigation.
Another example of proximity in site navigation that came to mind was Netflix. Let’s face it, most of us reading this post probably use this site daily. If not the site, then some form of this on a different device. Regardless of which device you may use Netflix on they still apply great proximity in their site navigation. Since they have so many movies and tv shows they have to have great grouping in their genres. Look below and see how the grouping is applied. They group the ‘Top 10’ and ‘Popular On Netflix’, etc. They chose to group their movies in a horizontal manner, which I find to be great usability.
Take a close look at the grouping below.
The last thing I found in my research about harmony was that even harmony is applied in great web design.
Harmony is the pleasing result of relationships between the elements and principles of design.
Since we already look at Netflix I thought it would be appropriate if we looked at one of it’s competitions, Hulu. I personally like Hulu’s site better. They are better if you watch more TV. Hulu tends to be up-to-date with the latest in TV, but they do lack in great and current movies. Then again so does Netflix. Anyways, one of the reason I love Hulu’s site it’s big visual impact on the user. When you first go to Hulu you see a slider that features about 10 slides of the latest. The slider is edge-to-edge, and the top nav has a transparent gradient, which is a great feature. The search bar at the top is also transparent, and gives the user more of a feel of the entirety of the slider.
I know it may not seem like it at first, but I find this harmonious and pleasing to me as a user when I go to this site.
Whatever form of artwork you choose to do, be sure to apply the design principles. Especially the ones we discussed above (Grouping & Harmony). They may vary on how the final outcome is, but these design principles are used in our everyday life. Sometimes we just don’t know it.