archive,tag,tag-advance-scripting-languages,tag-63,ajax_fade,page_not_loaded,,select-theme-ver-3.7,vertical_menu_enabled,wpb-js-composer js-comp-ver-5.0.1,vc_responsive

Week 2: Grouping & Harmony

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.

Proximity in Site Navigation

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.

Screen Shot 2013-07-21 at 8.17.38 PM

Here is a closer look at the proximity applied in site navigation.

Screen Shot 2013-07-21 at 8.17.53 PM

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.

Screen Shot 2013-07-21 at 8.24.11 PM

Take a close look at the grouping below.

Screen Shot 2013-07-21 at 8.24.33 PM

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.

Screen Shot 2013-07-21 at 8.25.17 PM

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.

Week 1: Imagery

Zen Garden 5_b_a

Image 1

Here is a classic Zen style image.  I just crop to a square to give it a more visually appealing look and feel to it.


Zen Garden 4_b_a

Image 2

Again another classic Zen style photo.  You have the stacked rocks in water.  I changed it to red to give it more of a warm feel.


Zen Garden 3_b_a

Image 3

This is more a modern take and inorganic photo of what could be taken as Zen.  With the incomplete circle in the center to give that the main focal point it makes the viewer ponder it.  I wanted to change the image to more cool colors, and cropped it tighter.


Zen Garden 2_b_a

Image 4

This green scenery photo makes me feel like I’m at peace and that’s the idea of Zen, so I really felt this image would work great.  The green is really eye popping and the change I wanted to make was to tone it down a bit and see if you still got the same peaceful feeling.  I also cropped it tighter.


Zen Garden 1_b_a

Image 5

This is calming and peaceful image of a flower that’s classic in Zen style.  The condensation on the rock and flower give it more of a refreshing feel to it. I wanted to have a black and white image and thought this would be the perfect image for that.  Like most of my other photos I cropped this one a bit.