What we have to come to terms with is that data visualization can be used anywhere. Navigation is filled with data. It contains a list of links to pages on your website or to other websites. So why do the web designers of today always display these list of links in the same way? Why not develop a pie chat type navigation or line graph? Not only this but there seems to be a lack of creativity when it comes to data visualization. When was the last time you saw a ‘new’ type of graph. This article will highlight some of the brilliant data visualizations we see around the web along with some that we could or should see.

Current popular methods

Now I am no expert when it comes to data visualization and if I say there very few ways to represent data, a table, a pie chat, a bar/line graph, I am most likely wrong. For one these are two dimensional. However, the current forms of data visualization of today are probably the most efficient ways of representing data, hence why there have been no new developments.

Tables

Take the table for example, a simple representation of data using rows and columns to arrange data. Websites that use tables and their default CSS stylings in web design are not particularly exciting. However, when you visit websites such as wufoo you can see the potential of beautifully styled tables. Bare in mind a table does not have to use the dedicated tags supplied by W3.

Pie charts

A further example of data visualization is a pie chart. I shall always remember who invented the pie chart thanks to QI. Florence Nightingale, a nurse during the Crimean War needed a way to better represent her data. She devised a circular graph known today as the pie chart. (After visiting wikipeida it would seem William Playfair has been credited for the first pie chart). I’m unsure if the name has anything to do with it’s origins but It would make sense if it does. Few websites tend to use the pie chart to represent data but the few that have pay close attention to the colour scheme. A section can be emphasized even if it is not the largest.

Bar and line graphs

Probably one of the most popular forms of data visualization is the bar or line graph. You will see these everywhere. In the newspaper, on the television, in books, everywhere. I feel the clarity of bar and line graphs have led it to be the most popular.

In todays websites these types of graphs find themselves on analytic websites. It is clear to see when you get a spike or a fall in traffic without any labelled axis.

Mint’s gorgeous bar graph displays the number of visits each day, the attention to detail here is outstanding. This graph also uses tabbed navigation to alter the data used.

Below are a couple more bar graphs used in web design. The right bar graph displays how many posts were published each month. Have you ever thought of displaying your blog’s archives like that?

Venn Diagram

Very rarely used in web design. However, when pulled off in excellent fashion (as we can see here from analog.coop) I can only see a rise in the use of Venn Diagrams. The team at Analog have inspired me to explore Venn Diagrams and I hope they have inspired you as well.

Incorporating these into your designs

It’s (relatively) easy to incorporate graphs into your designs. If you are experienced in Photoshop you can mock one up manually paying close attention to all the small details or if you’re not I guess you could save graphs produced in Excel as images and upload. There are also a number of JavaScript solutions for online graph drawing. It’s interesting to see that tables have been given the necessary HTML properties yet other visualization methods have not.

When staring a large chunk of data try and forget about lists. Instead delve deeper into a single list item. Say you want to display the latest comments from your blog. What could be displayed for each list item: the author name, the gravatar, the time and the comment itself. Now take a step back and think how this data could be displayed. Firstly, the first latest comment could be more prominent then the second, perhaps by size or colour. The length of the latest comment could determine the width of the containing div.

Experimenting

I think the time has come for all web designers or designers in general to begin experimenting with data visualization. The few that do, I would suggest moving away from infographics and print design. Make infographics interactive. Turn infographics into websites..

Analyzing what data you have

If you would like to design your own graph then first you must gather all the data that you would like to display. Group and categorize the data through abstraction until you have data that in it’s simplest form can be sorted into a table. Then analyze what each bit of data is, is it a colour, a place, a thing. Begin to think visually how each bit of data could be displayed. For example a place, such as a city could be displayed by the size of it’s population or by it’s geographical size.

Being creative

When visualizing data one doesn’t have to be entirely creative and reinvent the wheel. It is easier to experiment with current methods. Instead of using rectangles in bar graphs use an image, a skyscraper for example, each floor could represent a value. If you try to be creative you will undoubtedly fail however if you forget about everything but remain focused on visualizing data I’m sure you will succeed. Get off the computer, go outside. Spend twice as long looking at things that just pass you by on a normal day. I’m sure a number of designers will be familiar with analyzing every font/typeface used in a shop’s logo, looking at the layout of a restaurant’s menu or even looking at person’s dress sense.

Creative examples of data visualization

I assure you, you will find more inspiration from the world around you than from your computer. Nonetheless I have gathered a number of examples that demonstrate creativity when it comes to data visualization. Use these as inspiration but remember the real inspiration is away from computer.

Further Examples

15 Stunning Examples of Data Visualization
50 Great Examples of Data Visualization
30 new outstanding examples of data visualization
Grid Accordion with jQuery
Digg Labs

What Exactly Will This Post Do For You?

Please Note: All images in this article are screenshots taken directly from the browser window, no photoshoping here!

With the release of CSS3, which is now being used more frequently, I’ve put this little article together for more of a beginner. However you never know, there may be a few tricks you don’t know.

I’m also going to be giving advice on such things as Padding, Margin, Borders and Background Colors, and how to us them effectively.

It’s starting to annoy me when people are making something huge out CSS3, yes it is a big evolution in the world of styling a page. However it can be a bit intimidating, so just think of it as normal CSS that you’ve never used before, because that’s all it is.

So as my first post on Creativity Den I am going to cover the CSS tricks that’ll improve your designs. Taking them from pretty good to awesome! The first thing i would like to cover is the box-shadow effect. It’s just an easy way of using drop shadow in CSS without using messy background images.

The Box Shadow Effect

/*Here be the awesome drop shadow/box shadow effect for the web*/
#someRealyCoolDiv {
	width:500px;
	margin:0px auto;
	box-shadow:0px 0px 10px #000;
	-moz-box-shadow:0px 0px 10px #000;
	-webkit-box-shadow:0px 0px 10px #000;
}

Explanation:

box-shadow: This is the actual CSS3 specific code for implementing the shadow effect.

-moz-box-shadow: This targets FireFox which doesn’t understand the standard box-shadow.

-webkit-box-shadow: This targets Safari & Google Chrome mainly, it uses the -webkit- selector which is the advanced CSS3…let’s say ‘package’, that Safari uses.
Please Note: Goolge Chrome is terrible at rendering box-shdow effects!

The Box Shadow Effect

Using Margin, Padding, Borders & Background Colors Successfully

We’ve all made sites or seen sites that could be beautiful, but unfortunately aren’t because of one small issue: The overall CSS aesthetics. Here’s what some people will have:

/*POOR/LAZY WORK*/
#someRealyCoolDiv2 {
	width:500px;
	margin:0px auto;
	border:1px solid #000;
	background:#fff;
}

Poor Use Of Margin & Padding

Now as you can see, that’s just terrible, let’s make it allot better with really basic CSS:

/*AWESOME/VERY WELL PADDED WORK*/
#someRealyCoolDiv2 {
	width:500px;
	margin:0px auto;
	padding:30px;
	border:1px solid #ccc;
	background:#E6E6E6;
}

Good Use Of Margin & Padding.

There we have it, you see how much cleaner it looks already? – All I’ve done is basically add some padding, a little margin, lightened the border and made the background color slightly darker than it was. Which gives a more stylistic effect, but it’s mainly because you should, (almost), never use pure white or pure black in a design. The reason being that they’re both very powerful on the wide spectrum of colors, and strain the eyes when viewing.

The Text-Shadow Effect

Yes, this is practically the same as the box-shadow effect however the effect is for text and the code is written differently. Also the biggest difference is that this effect has two uses.

/*TEXT-SHADOW WITH A SHADOW LIKE EFFECT*/
#h2 {
	text-shadow:5px 5px 10px #000;
}

The Classic Drop Shadow Effect.

That’s the first way of using it, the two 5px values represent the position, the first is left and right and the second is up and down, then the 10px represents the amount of blur wanted. The second is my personal preference: The engraving effect. All you need to do is create a Div with a BG color of #333333 then add a H2 tag with a color of #000000, (you know when i said almost never? yeah, this is the exception), then to that H2 tag add the following code:

/*TEXT-SHADOW WITH AN ENGRAVE LIKE EFFECT*/
#h2 {
	color:#000000;
	text-shadow:-1px 1px #333;
}

I haven’t a added a blur amount so the drop shadow stays like the normal text but is moved slightly down, and slightly left, Now you should see something like the following, and by that i mean exactly like the following:

The Engrave Text Effect.

Working With Positioning

OK understanding this can be tricky at first, but just remember that each element is static to begin with and once changed to being relative, absolute or fixed you can accept four different parameters: Top, Right, Bottom and Left.

Relative Positioning

This is the easiest one to deal with, nothing to fancy going on here, HOWEVER, relative positioning is the base for the other two. A relatively positioned element means that it’s positioned relatively to it’s normal position. Don’t get it? yeah me neither, here’s a better explanation: All elements on a page are positioned static by default. Changing an elements positioning to relative means it can be moved around on top of other elements while it’s original position is kept, (like having it’s seat saved ).

Absolute Positioning

Now, this one seems to confuse people quite allot, it’s quite simple actually. Here we go: An absolutely positioned element is like a relative element BUT it doesn’t really notice the other elements around it. (you know, the whole “Having it’s seat saved thing…”). It just floats around on its merry way.

It is positioned according to which element that surrounds it is set to relative, i.e. If the surrounding Div is set to relative then it’ll go 50px from the left of that Div – If no relative value is set in any Div that surrounds it, it’ll go 50px from the browser window edge.

Fixed Positioning – The Evil Child Of Positioning!

Yes, you read correctly, fixed positioning is the hardest to grasp for most. It’s this simple: A fixed element can sit on top of everything else, (try and stick to one fixed element per page!), here’s a perfect example of fixed positioning in action, by the master of web development, Jeffrey Way! – look at the huge bar along the bottom of the screen.

Positioning Examples:

#container {
	width:500px;
	position:relative;
	border:1px solid #ccc;
	background:#e6e6e6;
}

.awesomeDiv1 {
	width:250px;
	position:relative;
	left:50px;
	top:0px;
	border:1px solid #666;
	background:#999;
}

.awesomeDiv2 {
	width:250px;
	position:absolute;
	top:100px;
	left:50px;
	border:1px solid #666;
	background:#999;
}

.awesomeDiv3 {
	width:100%;
	position:fixed;
	left:0px;
	bottom:0px;
	border:1px solid #666;
	background:#999;
}

Explaining Needed!

OK, pretty basic code going on here, just a #container Div holding three smaller Div’s, .awesomeDiv1, .awesomeDiv2 and .awesomeDiv3.

What you’ll see if you attempt to use this code is that the first two will be pretty much one after the other in the container Div. You’ll also notice that the #container Div is only wrapping around the first Div, why? Well as i said earlier, the Absolute positioning is basically in a world of its own, so it doesn’t see any other elements, hence no other elements see it!

Then the bar at the bottom, if you make the #container Div 1000px high you’ll see that the fixed Div, .awesomeDiv3, is still in its position and hasn’t moved.

Rounded Corners – Border Radius

Yes i do realize that this has been posted many times over but I thought it was worth adding. Border-radius is a way making the corners of a div, input, textarea etc… Have a rounded corners effect like in photoshop. Here’s how:

/*BORDER-RADIUS - PHPTOSHOP LIKE EFFECT*/
#awesomeDiv {
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
}
/*THE OTHER METHOD*/
#awesomeDiv2 {
	border-radius:0px 10px 0px 10px;
	-moz-border-radius:0px 10px 0px 10px;
	-webkit-border-radius:0px 10px 0px 10px;
}

Rounded Corners With Some CSS3.

If your wondering what the difference is, here’s an explanation: Each 10px/0px value is equal to one corner of the div, it goes like this, Top, Right, Bottom and Left. As you can see it goes round in a clockwise motion. So in my example the top left corner will be straight, the top right will be rounded, the bottom right will be straight and the bottom left will be rounded.

If your finding it difficult to remember what each value is for just start at the top left corner, (which seems like the most logical corner to start with anyway), and then just go around in a clockwise motion.

Header & Paragraph Typography

This is an area that I’ve seen many people struggle with, mainly because most designers/developers don’t take much notice of typography…or they just don’t care. Either way, I see sites on a regular basis that could be awesome, (yes, even with good Margin, Padding, Borders & Background Color), which lack in one very important area Typography.

Crappy Web Page Typography:

/*This is a little crappy by my standards*/
h1 {
	font-family:Arial;
	font-size:40px;
	color:#000;
}

h2 {
	font-family:Arial;
	font-size:30px;
	color:#000;
}

h3 {
	font-family:Arial;
	font-size:20px;
	color:#000;
}

p {
	font-family:Arial;
	font-size:14px;
	color:#000;
}

Good Page Typography:

/*This is a pretty good by my standards*/
h1 {
	margin:10px 0px 10px 0px;
	font-family:Arial;
	font-size:2.5em;
	color:#252525;
}

h2 {
	margin:10px 0px 10px 0px;
	font-family:Arial;
	font-size:1.88em;
	color:#333;
}

h3 {
	margin:10px 0px 10px 0px;
	font-family:Arial;
	font-size:1.25em;
	color:#4c4c4c;
}

p {
	margin:0px 0px 20px 0px;
	font-family:Arial;
	font-size:0.88;
	color:#4c4c4c;
	line-height:1.6em;
}

Explanation:

First off we’ve said goodbye to the Pixel values for all the elements, this is something you’ll hear alot: Use EM’s instead of Pixels for text elements, It’s one of those best practices. (I actually use both from time to time, but never on the same project).

Now i know how some people feel about using Margin inside of text elements as i have done, however i ask you this, if it makes your website look awesome and it validates then why not?

Conclusion Time

I hope you’ve enjoyed my little article, it should have shown you that taking your time with each and every project is a very valued idea, be sure to spread the word by doing some Re-Tweeting, Digging & Bumping!

When Leonardo da Vinci painted, he put his paint brush to his canvas and magic happened. Five hundred years later, nothing has changed. We are still using paint brushes and a canvas but this time its virtual and the magic happens on computers and graphic editing software like Photoshop or Illustrator.

A few examples

There are various ways and techniques to create a typographic portrait. A typographic portrait is not limited to just portraits of people. It can also be a social ad, credits of a movie, can be creatively used in music videos, and much more. In this article, I have tried and compiled some incredibly beautiful imaginations of artists along with some of my own work.

Rakta Charitra

Vivek Oberoi

Utada Hikaru

En Masse

With great humility

The Zebra Eye

Happiness

Steven Paul Jobs

White Hand

A Man of his Words

Mos Def

Typomin M

Big Ban London

Typographic Portrait

More than Just Words

Self Portrait

Am I your type?

Beer Directions

Jimi In Type

Thom Yorke

Typography Woman

I want to kill you

homme typo

Trust in you

Let us all dream together

The art of typography in video

These are just some of the many works of art that are out there. Hope they serve as a visual stimulus and here are some video tutorials to get you started.

Typophile Film Festival 5 Opening Titles from Brent Barson on Vimeo.

Behind the scenes with Dencii Manayak

His art makes you think that imagination does not have any boundaries. It is as free as the butterfly that spreads it wings and flies across the meadow. He puts his heart and soul into his work and becomes the piece. I have had the great opportunity to interview a young, upcoming and my favorite artist Dencii Manayak.

Dencii, thank you for talking to us at CreativityDen. We appreciate you taking time out for this interview. Please introduce yourself to our readers.

Hi. I’m Dencii Manayak from Parañaque, Philippines. I’m 27 and currently working as a part-time graphic artist at a local company making advertising materials and designing baby t-shirt prints.

How did you stumble upon this form of artist expression? Also, how did you get started?

Mahatma Gandhi

I’ve seen quite a few Typographic works before but I never really got into it until I took Typography 101 class when I was studying at Glendale Community College in Glendale, California in 2008. My professor at the time, as part of the subject course, made us watch the documentary Helvetica and interview a “Master Typographer” of our choice and then present the data gathered in class. I ended up interviewing Dr. Alessandro Segalini who was not only well-educated about Typography but was also very passionate about it. The most memorable thing he said to me during the interview was “Respect the letters and they will respect your feelings.” I guess since that experience I started to subconsciously look at the more classic typefaces in a deeper way. Things like how each single character was designed to work effectively individually and with other characters, how they withstood time since their creation and how they influenced other fonts, were characteristics I once overlooked in favor of grungy and heavily stylized fonts.

John Lennon

The first creation I did with my typographic style was a piece that served as my final project for the Typography 101 class. The challenge was to make a poster using only type characters whether it’s a creative way of writing the lyrics of your favorite song, poem, movie line or a quote. Me being more of the unimaginative illustrator than a creative typographer went for a portrait of John Lennon with the lyrics to his song “Imagine.” Honestly, the result was not the one I had in mind as what I originally planned was something more loose and generic but I was very satisfied with it. At the night of the presentation, I told my professor that it was a fluke to which she replied that I should never say that about any of my work especially to clients. So to see if I can do this challenge again, I made another one with Martin Luther King Jr.’s face in it. A lot of people enjoyed these compositions and encouraged me to keep doing it so I followed my works with versions of Mahatma Gandhi, Rick Astley (although it was more of a self-parody), Mother Teresa and a rework of MLK Jr.

As an artist, what influences your work? Or where does your inspiration come from?

I can’t say there’s a single person or event that inspired my style. I’ve seen an artist do the Mona Lisa by scraping burnt breads and another one smearing burger grease straight from the patty. I’ve seen awesome works made of ketchup and fries, cappuccino, Lego blocks, stamps, playing cards and so on. These feats, using objects that are not meant for visual art, have always left me in awe. A lot typographical works I’ve seen on the web has also showed me a fraction of the infinite possibilities of how far you can push yourself artistically using only letters.

Your style is very unique. Is there a specific font type that you prefer using over the others? What software(s) do you use to develop these projects?

Mother Teresa

When making these projects, I use Adobe Photoshop for cropping, converting to grayscale and adjusting the levels of the images. I then move to Adobe Illustrator to do the rest. I also use Winamp to keep me sane. As for the font, Bickham Script Pro all the way! I just love the anatomy, the natural curves, the structure and its flexibility to follow the shape of the human face. I just can’t imagine achieving the same effect using a different font. I learned to develop a connection with it. When I’m working on a project, I look at a part of the picture and it comes natural to me as to what letters or numbers are good to cover that area. And of course I want to give credit to the great photographers who took the great photos that I use for references. After all, they’re the ones who truly captured those moments. I just happen to be the guy who’s converting it to another medium.

How long does it take for you to complete a project?

Working on the first few projects took me a few nights as I was still trying to learn how to go through it. The last ones took me about 2-3 nights as I became more familiar with it.

Is there a message you would like to give our readers/artist who would like to explore this type of art?

In the end it was all about practice, practice and more practice. Perseverance is as valuable as creativeness. I know I’m a very flawed artist but I just make the most out of what I have and work around those flaws. I strive to share with other artists and compete more against myself, not the other way around. I guess that’s basically it. Thanks for appreciating my art.

Check out more of Dencii’s work

Summary

In conclusion, letters are no longer used just to create words and words no longer just create sentences. Artist expressions have transcended these boundaries and set a new milestone in the world of art. This is my attempt at giving you a little peek into the boundless world of Typography. So, let your imaginations loose and get creatin’.

Email can be a bit boring

Everyday we log onto the same client to see what emails we have received over night, for some, it is exciting to see what news and discoveries await. However, for the majority, checking you email can be a chore. A chore that we like to procrastinate over and try to ignore as much as possible. When supplying a mailto link, you are simple directing your potential client to where he would least likely to go, his email cave. Where his idea of a new awesome website that he would like you to design is shrouded with normal life of day to day emails.

Ugh more emails...

I have only suggested that many people do not like to check their email due from the various negative tweets I have come across. I would definitely say responding to emails can be a chore however, I don’t think it would have a huge affect on a potential client. That said, I believe a beautifully designed and built contact form would be much better to include than a simple mailto link.

Use a contact form

I would therefore recommend using a contact form. When the potential client has finished browsing your work and is thinking about contacting you, first of all the size of the contact form is more likely to catch the client’s eye than small link to your email. Furthermore, a lot of people continue to talk about how making a good first impression is essential. In my eyes the last impression should be just as important as the first. When the client comes to the end of his/her browsing and is considering whether you are the ‘one’, by putting a large contact form in front of them instead of a tiny link. You may find yourself receiving a few more extra clients every so often. However, this is only if the contact form is perfect(-ish)!

Important things to note

To create the perfect contact form, various objectives must be achieved. Perfect alignment. A good color palette. Correct Size for input boxes and uniqueness and creativity.

Alignment is crucial!

Alignment

With the number of input boxes used in contact forms, it is essential that they are each one is aligned. Unless of course you have created a creative layout which leads me onto a topic which I hope to discuss soon, Creativity versus Usability.

Size is very important.

Size

When it comes to size I don’t understand why some websites have a tiny message box, sometimes the height can be the same as the name and email boxes above?!. A message box should be at least ten times the size, it is the most important part of any contact form. The reader should be free to write as much as they want without feeling cramped. Of course, some browsers allow you to expand the text area yourself, but why put the reader through the effort? Why make them expand a text box that will potentially break you site?

Use contrasting colors.

Color

As always, color plays an important role. It is important to make sure that the contrasting colors are used for the background of the input boxes and color of the text. So the reader does not experience any strain.

Use your imagination.

Uniqueness, Creativity

When using your form, there has to be something that stands out, something that provides a little flair. A typical contact form will have each input box below the other, with a submit button at the bottom. Maybe try to experiment with different layouts, positioning input boxes, labels and submit buttons in different locations. I have endless ideas when it comes to this sort of stuff, if you need any help just leave a comment.

Analyzing great contact forms

There are probably a number of ‘awesome’ contact forms out there (if you find any please leave a comment), but I have only taken two and explained why they almost perfect.

Vuu Media

Vuu Media

Alignment – As you can see with Vuu Media’s contact form all elements are perfectly aligned. Padding and margins stay consistent through out and overall the layout and structure gives a nice flow to the form.

Size – Input boxes for names, email and telephone are correctly sized. The subject input box and and message text area are also perfectly sized. Throughout the form, the reader has enough space to fill in the labelled inputs. The size of the message box also allows the reader to write a decent amount of text before it is filled up.

Color – Labels are well defined. Strong text for defining different areas of the form, light blue text to inform the reader of the required inputs and a nice darkish gray for the standard input box labels. The background color of each input box also has a nice mouse over color also. I like this, however I believe the light gradient is easier to type on then the blue background.

Uniqueness, Creativity – I like the way has David has added depth to his input boxes. The contrasting top and bottom borders combined with an inner shadow gives a perfect recessed look. I also like how he has added some extra information to the right. However, it would be nice to see David adapt his design slightly so that the message text area can be expanded (using the integrated browser function) whilst still retaining the design. The submit button is also great but I feel it deserves an active state.

Sam Brown

Sam Brown

Alignment – As mentioned above, alignment can be ignored if the design has a creative layout. Sam brown has managed to align all but two input boxes but this is only because of the two full stops/periods he has used.

Size – Absolutely perfect

Color – Transparency works very well. However, I do feel the text color could be little brighter.

Uniqueness, Creativity – I have never stumbled upon a contact form such as this. Sam has done an excellent job with the design and has also produced a unique template type contact form where you just fill in the gaps.

Other great contact forms for your inspiration

Icondock’s contact form is perfect. It may not be creative or unique but it’s what everybody should learn from and build on:

Icondock

Grooveshark

Giraffe

TVI Design

Fubiz

Orman Clark

Summary

Mailto links aren’t necessarily bad, but they don’t show off any of your creative flair. Like sidebars I do feel like contact forms are neglected. I have found numerous websites with bad contact forms, and concluded that only around 10% turn out to be good. (Even CreativityDen’s is rubbish :/ ). It would be nice if we could all take a little more time when it comes to our contact forms and forms in general. Forms may be the only interaction you website has, so it is essential that a good user experience is achieved.

A few questions

What are your views on contact forms and mailto links?

Where do you think the submit button should be positioned, on the right or left?

Do you think the size of the message box should be larger in width and hight than input boxes for name and email?

Can you think of any alternative ways? (I just thought, perhaps you could allow people to leave audio or even video messages?)

For the past few years now, web designers have been adding depth to their designs. What is depth? Well in terms of perception which will be my main focus today. Depth perception is is the visual ability to perceive the world in three dimensions (3D). Now of course this is impossible when it comes to design on 2D surfaces. Nonetheless, we can still simulate the effect using various methods.

William of Tyre was one of the first men that attempted to add depth to his work

But why would we want depth in our designs? Depth can be useful a tool for distinguishing certain areas of you website. When you used well you can even divide your design into layers, one layer being in the foreground, another in the background and any in between. With layers, content that appears in the foreground is given a focus and emphasized, whereas the opposite effect applies to the background.

1. Perspective

Perspective can be great for guiding the reader to a particular element. In the following example we notice how the designers at Flourish have used perspective to make the tree the focal point of the page. Along with some beautiful jquery, the site interacts with the reader well. However, when emphasizing an important area or element it is essential that other areas of the same importance do no suffer an deemphasis (unless that in the attention). I believe Flourish have done an excellent job in putting focus on the tree and their design views, however because of this I believe their slogan and logo just above isn’t given the attention it deserves. Nonetheless, a great example of perspective in web design.

Flourish Web Design

Nine Flavours have also used subtle perspective to add emphasis to their logo. The background appears recessed and so the logo (thanks to a drop shadow) is brought forward.

Nine Flavours

Daylight Touch throws in a bit of perspective by adding a 3D Iphone image. You will notice the Iphone facing to the right and so its vanishing point is also to the right. This guides the reader’s eye to the product name and then the two call to action buttons below.

Daylight Touch

2. 3-Dimensional graphics

During 2009 a handful of designers who were daring enough to experiment with depth decided to add 3 Dimensional graphics to their designs. The result was positive and led to a popular trend that involved folding, the same effect seen when folding a piece of paper or card.

The beautiful fold technique

From the Couch

There are two types of folding, rigid and curved. Curvy gives the impression of flexibility and to me, relaxed. The guys over at From the Couch have done an excellent job in demonstrating the beauty of curved folds. Some sites can sometimes go over board with this technique but I believe Marc and David have been spot on here. I particularity look how the shine effect continues around the fold.

Yoast

Rigid folds give the impression of precision. Yoast is a great site demonstrating how a simple fold can add depth to a website. The site also demonstrates how a site can have layers, you should be able to count five. Layers is what depth creates. The layer that appears on top of all others is the most prominent and therefore emphasized (foreground). Whereas the bottom layer (background) usually contains less important information. Each layer tends to be differentiated from the other by a change in colour or opacity. Remember, when adding depth to any website to design, be sure to give the correct areas emphasis.

The fold technique became so popular everyone had a go at it:

Other fold examples

When i came across cubescripts I just had to include it in this article. The perspective used to the right of the design does not add any emphasis or focus to the design but it makes a change from the standard 2-D designs that we see day to day.

A very 3-Dimnesional design!

Illustrations

Sometimes, a ‘simple’ 3D illustration or graphic can be enough to add depth. However, bare in mind they will be the center of attraction so it is essential to keep quality high and mistakes few.

Positive Hype

Synch Media

Not only do 3D illustrations add depth and clarity to a website design they can also add character. As soon as the reader lands on your page they will make a snap judgement as to the style of the site, it’s purpose and subconsciously, will this site benefit me. A friendly and inviting illustration can be a great first impression. Synch Media have produced a firendly robot design that instantly gives them an ‘image’. After visiting the website you are most likely to remember it because of the distinguishing robot.

Creative Increase (below) is another great example of a 3D illustration that adds depth, with the help from perspective edges on either side:

Creative Increase

3. Shadows

Shadows are another factor that can add depth to your web design. Be it inner or drop, either will give the impression that an object/element is recessed or hovering. Drop and inner shadows are so powerful that even the most subtle one pixel line can lift an element off the page. Henry Jones over at Web Design Ledger wrote an excellent article talking about exactly that, Adding Depth with Pixel Perfect Line Work.

Dissecting Metalab’s Design

When it comes to subtlety I always find myself returning to MetaLab. To demonstrate how depth is added I cropped the stylish vertical navigation. On the left you can see a 2D list, however even with a lighter colour for the selected item some depth can be seen. When we look at the entire area we notice a few things that confirm depth in the design. Firstly, the popular fold technique is used. Secondly, the point towards the right over hangs the content area on the right. I believe Metalab did not use a drop shadow because they wanted the selected area to ‘hug’ the list rather than to hover slightly above it.

Demonstrating that depth is used

MetaLab navigation demonstrating inner shadow

You will have to look closely (attention to detail) but you should notice a subtle inner shadow on selected items on the top navigation as well. This is another trend that became popular for user interfaces. When clicking a button it feels natural if the button appears recessed, by pushing down on the mouse button, you ‘physically’ push the button on the website.

A drop shadow can lift elements off the page

Here we notice MetaLab have decided to use a drop shadow. Why here? I believe their aim was to improve interaction with the reader. A drop shadow puts the are that much closer to you and entices you join their newsletter or to work with them. A little enticement at the end of a visit can be key when reeling in clients.

Tips

A few tips

4. Focus

Another method that gives your website design depth is, focus. For this we look at the way light and cameras respond to each other. I am no photographer but I do understand that a camera has the power to focus on objects at different distances. When focusing on sometihng relatively near to the camera, the background can appear blurred. Many people use this to their advantage to produce beautiful bokeh photography. When focusing on an object slightly further away, anything close to the camera will also be out of focus and blurred.

My question is, why not use this effect in web design? I am sure there are other designs that have attempted this, but the best example I could find was AWP Express. It includes both, an out of focus background and foreground. Complete with a beautiful brand illustration.

I would love to see more use of this effect in web design. I will definitely be trying it out!

A beautiful example of depth of field in web design

5. Colour Shading and Opacity

When searching for ways to add depth I didn’t realize how effective a simple colour palette can be. A good palette that allows depth will contain a mixture of dark and light colours. Dark colours can be related to the background and light to foreground. This is mainly because lighter colours tend to attract the eye whereas darker colours require a little more attention.

If we look at Versions we immediately notice the central focal point and the lovely brand illustration. When looking slightly closer we notice the background contains the same grassy hills but much darker and monochromatic. This is strong evidence that light colours are emphasized when on top of dark colours. It also concludes that colours on top of shades of black or white are emphasised. Furthermore, you will notice the dark gray hills in the background also have a slight blur. Perfect depth!

Versions

The AppStorm design also demonstrates a great use of depth with colour. The design is mostly dark gray but content is emphasised with a white background.

Appstorm, white on very dark gray. Result: Content emphasised

Similarly with Vuu Media:

I think I'm in love with this design!

6. Size and Placement

A final way to add depth is the most obvious, Size. However, size on it’s own won’t add any depth as seen in William of Tyre’s artwork. If you would like to use size to add depth then you must combine it with overlapping. If we take a look at how Symphony have showcased their CMS it appears as if the screenshots to the left are further away then the ones on the right.

Symphony demonstrating depth with size

Derek over at Valen Designs shows us how it’s done with the addition of some nifty javascript.

Valen Designs

Summary

To conclude, depth is, by all means, not essential to web design, but it does give your design a bit of flair. I have discussed six ways in which you can achieve depth with each being fairly easy to apply. I am always a fan of large illustrations that make me stare, it usually leaves and good first and last impressions so I would thoroughly recommend those. As mentioned, I would also like to see the design community playing with depth of field, AWP pulled it off and produced a stunning design so why can’t you? I hope you have enjoyed the first article of the new year. My plan is to stay consistent, so future articles will be of the same quality

However it has come to my attention that only a few designers like to spice their sidebar up a bit. Instead of having the same style for each item or list they’re a little creative and have tweets styled one way and popular posts styled another way. It is because of these blogs that I too have spiced CreativityDen’s sidebar up a bit. So what’s your excuse? Be creative and make your sidebar stand out from the rest!

Boring sidebars

Ugh, boring!

If you look at the majority of themes in the wordpress directory, you will notice some beautiful themes that cover the latest trends of subtlety, letterpress, png transparency and much more. However, if you take a look at their sidebars each theme seems no different than the last. Each sidebar houses lists of navigation or statistics and each list has a heading. The only main factor that differentiates these themes is the colour scheme.

Spice up your sidebar

A few days ago I wrote a post on how to Create a funky most commented section for your blog!. This is just one of many ways in which you could spice up your sidebar. Be creative and think outside the box. Say you want to display the top commenters, you could use various factors to differentiate between the commentors. You could display the gravatars at different sizes according to how many comments they have made, or you could have the top commenter fully opaque with the others being transparent. Furthermore, if you wanted to display your latest tweets, don’t just display them as a list. If anything display them as a fancy list with unique styling, put each tweet inside a stylish quote bubble. Perhaps the font-size of each tweet could be determined by how much it has been retweeted. When it comes to spicing up you sidebar there are a number of ways to display it’s contents, you just have to be a bit adventurous.

Great examples of creative sidebars

Engadget

Since it’s redesign I have found engadget to be a great source of design inspiration particularly the sidebar. From the beautiful archives calendar to the most commented, digg and twitter sections, Engadget should definetly inspire you to try new things.

Engadget - A great source for sidebar inspiration

Awesome way to display archives

If you’re similar to Engadget and post a large amount every day then you may be worried that all your posts may not be viewed by the majority of your readers. The guys over at Engadget and Code and Theory came up with an awesome way to display archived posts. The number of posts published each day is displayed on a calendar and can be distinguished by a background color: red being more than 40 posts, yellow more than 20 and blue more than 1. There is also a nice animation that displays the exact number of posts when mousing over a specific day.

Most commented section

Engadget also has a number of active users who regularly comment. Due to the larger amount of comments the site recieves everyday Code and Theory came up with a nice way to display the most commented posts. Similarly to the archives calendar the color scheme remains with red being the most commented and blue the least. The width is also determine by the number of comments although I have recently noticed that they aren’t in proportion to each other. If you would like to add this most commented section to your blog then check out my tutorial on how to code it.

WorkAwesome

WorkAwesome creatively uses post in notes as tabs to display its latest tweets and popular posts.

WorkAwesome

ilovecolors

ilovecolors is a great example of spicing up your sidebar. It is divided up into sections with each having unique styling.

ilovecolors

Little BIG Planetoid

Similarly to ilovecolors each list/item in the sidebar is uniquely styled.

Little Big Planetoid

Help me make this list much bigger, spice up your sidebar today!

To conclude

I hope everyone has a go at spicing up their sidebar. I do feel it can sometimes be neglected and deserves more attention then it gets. I hope you enjoyed reading this article and look forward to any ideas you may be willing to share

1. Blogs

Subscribe to blogs

Something very important for me is to have a constant flow of ideas and designs coming into my head from all over. I have found that the best way to do this is to subscribe to some creative blogs. It is fun to me to check my blog reader and see what people are thinking up. Often it sparks a new idea for me.

2. Think of a design problem even when you haven’t dedicated time to think about it

A good example of this was the design for my personal site. The one I had at the time was old and dated and I was in the process of designing a new one. I went through some rough comps and wasn’t feeling happy with any. I began thinking about a new design through out the day when I was walking to the train, driving, or in the grocery store. I had some different ideas but nothing stuck. I kept thinking about it through my daily activities. One morning I was feeding my fish in my fish tank while thinking about this design problem and it just hit me. I started sketching and now I have the new lukelarsen.com. I have fed my fish dozens of times while looking into a new design. In the past though I hadn’t started brainstorms until I sat down to do it. Sometimes the best creative ideas come when you aren’t trying to think of one.

Always think design

3. Nothing beats a pen and paper.

When those random creative solutions come I have to be ready to jot them down somewhere or they will most likely float off into a void never to be thought of again. Some sort of book to record your rough thoughts will help turn then into polished gems.

4. Refiners Fire

Once a design starts to get polished it needs to get sent into the refiners fire. Show other designers and non-designers your thoughts. When they tell you that something is bad don’t get offended. Take it in and address it where is needs to be addressed. As you do so you will find your design getting better in many ways. All great designs go through a refiners fire.

I hope these ideas help out with your next design idea. If you have thoughts on these or some different ones all together let us know.