Archive for June, 2009

10 Jun 2009


Dark vs. Light Design: Does it really matter?

I can see many readers thinking, “Why would it matter? Light or dark design is just a designer’s personal preference, right?” It’s easy to think this, but dark and light design are world’s apart. Also, with the rising trend of dark website design, a closer look into the differences is needed.

Why Use Light Design?

Let’s analyze light design first. This is dark text on a light background, a very common type of web design. Using light design is also an easy way for a designer to come out with something boring.

Light Web Design

What happened to the importance of readability everyone? A website that needs to accommodate a large audience should always use a lighter design. This is because light design is, by far, the most legible type of design.

When the screen emits more light, it’s easier to see the text — just as you can see more during the day rather than the night. Seems like a silly thing for our brain to do, but it’s undeniably true. I could go into the science behind this phenomenon, but I’ll just Jonathon Snook from explain:

“But the outcry against black could be heard amongst the crowd. “Hard to read”, they say. I’ve been looking at this design most evenings for a couple months now and actually found it comfortable on the eyes. Why is that? And then it dawned on me…I was always looking at the design in the evening, often working in the dark. Looking at it during the daytime with the bright sun beaming in, I actually found myself preferring the contrast mode on.” – Reboot: Light vs. Dark

When our eyes are adjusted to the dark, it’s easier to see a dark web design. However, most readers probably aren’t sitting in the dark every time they view a web page!

Dark Design

Ok, so I think the point’s been made about readability. So what’s the big deal about dark web design? It’s purely aesthetics. Most experienced web designers will scream usability over design any day, but lets consider dark design a bit closer.


To really determine if you should try out dark design, we need to answer the question, “How important are aesthetics?”

Well, they say content is king, but design is the queen. —and who says the queen can’t be of equal status? When it comes down to it, design sets a mood for he visitor. If there is bad design, the visitor won’t trust the website. If there is unprofessional design (even if it’s pretty to look at), the visitor surely won’t invest anything into it, whether it be time, a registration, or buying a product.

What is the mood-setting difference between dark and light design though? This is how dark design can be a powerful thing. The following moods can be portrayed from dark website design:

  • Creativity, “Out of the Box”
  • “New”, contemporary
  • Sleek/Web 2.0
  • Mysterious

An excellent example to use dark web design would be a web design portfolio. Creativity is obviously something that needs to be displayed, and at the same time most designers want to display themselves as contemporary and new — a person that would think outside of the box.

The Big Debate

Darren from Problogger did a poll on this topic, and just to see how many people actually preferred light backgrounds, below are the results he came up with.

Problogger's Study

Note that this image is credited to Darren of

As you can see, most viewers prefer light backgrounds with dark text. However, a large chunk of this population also says it depends on the blog. Below are some of the comments made by the voters.

“I have had 4 different templates running on my website. Light, medium and two dark versions.

In my experience on this particular site the dark versions out perform the lighter ones about 3 to 1 in Adword clickthroughs.

I think it greatly depends on your blogs topic though. With mine being on the “The Secret” dark is more mysterious, so dark fits the topic better. IMHO

Overall, for reading I prefer lighter versions.” – Ron

“I prefer lighter backgrounds for research but It depends on the subject matter. Really dark backgrounds put me off especially if the text is gray. Overall lighter backgrounds give out a clearer call to action and the graphics stand our better for me. I do like to see contrasting colours too and a bit of individuality.” – Bill Masson

“White is good for all professional web pages and dark equally good for all recreational web pages, i.e. entertainment, the arts, leisure, travel, the holidays, hobbies.” – GameDaddy

“What people say they like and what they actually like can still differ greatly.

It’s not about what your visitors like, it’s about what converts best for your goals (more visitors, more mail/rss subscribers, more sales, twitter followers, etc.)”

Wrapping Up

In one of my next posts I’ll be speaking about how to achieve a more legible dark background website. So for those that think they would benefit, or just prefer dark backgrounds, keep checking back. You may also be interested in the two articles I found below.

Do you prefer light or dark websites? What are you basing your reasoning on?

09 Jun 2009


10 Things to Consider When Working with your First Client

Below are 10 things to consider and be aware of when working with your first client as a web designer. Some of these tips may even broaden to other forms of freelancing professions.

08 Jun 2009


5 Techniques that Will Take your Design to the Next Level

1. Add Gradients

Gradients can add a lot to web design without overpowering it. They also add depth and a modern appeal. Gradients can come in a variety of forms, too.

Centraol Snowsports

The example above uses gradients all over the place. From the top bar, to the logo, and throughout the various types of content. As you can see, there are different variations of gradient too. The gradients with the deepest contrast (Fallscreek, Hotham, and Hakuba) create a place for the eyes to focus.


Gradients can b added very subtly too. The above design is far from a sleek style, but gradients are still present in the logo and site title, and in various icons throughout the design.


This illustrative design uses slight gradients throughout the illustration, and adds detail with gradients to the navigation and various icons.

2. Add Lighting Effects

A technique that is sometimes similar to gradients is lighting effects. Glowing, spotlight, or other lighting effects can have a significant impact on the overall design. Again, lighting effects add depth and visual appeal, but with a bit more pizazz. These effects are often times the main feature, or highlight the main feature, in the overall design.


The above design features various gradients, but a main thing you’ll notice is the ‘shine’ effect in the background. Two simple gradients, and this line have created a very realistic look for this website. On top of that, similar lighting effects were used in the featured icons.


As one can see, the main lighting effect resembles an underwater scene, and can be related to the site title. That lighting effect is complimented with the semi-transparent content area. Also notice the slight lighting effect to the logo design. Adding subtle lighting effects on top of the main effect can add a lot of appeal as well.

N.Design Studio

The background lighting effects are obviously not the only feature making this design amazing. It is a great example, though, of how lighting effects can add to any part of the design– whether it be the whole design, a logo, or in this example, an illustration. Nick La’s post, Vector Polishing Techniques, goes over these various techniques that he has become famous for, many of them being lighting techniques.

3. Use Image Detail

Many designers will create a main header or background image, and close down Photoshop for the rest of the design process. This is a huge mistake. Adding small image details to buttons, headers, and specific content areas can add a lot of detail to a design, creating more appeal and focus.

African Budget Safaris

The travel website above uses image detail in various spots. For example, the navigation, menu background, borders, and even the submit button for the the search bar.


The above is a great example of how blog design can benefit from extra detail. The design above features a lot of whitespace and is very simplistic. The extra detail on the post date, comment icon, and color added to the active navigation element in the above screenshot already adds so much. If you visit the site, you will also notice details in the search bar, other navigation elements, etc.

Studio Kreatywne Synergia

This design adds image detail to the headers, a very common and effective trick when using this technique. One will also notice icons and unique borders used throughout the design. The footer border is also very colorful, creating a great separation point.

4. Declutter and Add Whitespace

This doesn’t necessarily mean every design should resort to the minimalistic style. Any design style should pay attention to the amount of whitespace present in the design. Also decluttering or removing any content or elements that are not needed in the design will help bring attention to the elements that are really needed– as well as leave more room for whitespace.

Healogix Marketing Research

The extra spacing throughout the design aid in the visual hierarchy. One of the first components the visitor’s eyes are lead to is the navigation area. This area has a significant amount of whitespace around it. As I stated in A Guide to Simplistic Web Design, whitespace frames whatever it is around, and adds focus to the internal elements.

Blue Dot Design

Be sure to consider spacing between the large, main components in the design as well. Drastic spacing between the content, logo, and navigation bar remind the visitor that they are separate entities, and allow the visitor to focus on each individually.


For websites that require a lot of content on the front page, even when decluttered, a smart use of spacing between paragraphs, headers, and images can create a content-heavy site that doesn’t look too busy.

5. Add Dynamic Effects

Most websites aren’t ready to enter the world of 100% flash, but adding smaller dynamic effects with, for example, jQuery, can create a sense of professionalism and aesthetic appeal that is bound to amaze.

There are a number of ways a designer can add a dyamic feel to a design, but because JavaScript is the most common way to do this, here are a few well-known techniques that are used.

jQuery Tabs

jQuery Tabs



Flash-like Menus

JavaScript Menu Navigation


JavaScript Lightbox

Fancy Forms

Slide down contact form

What are some of your techniques?

Please share some of your own techniques with design, or share if any of the above techniques helped you out!

05 Jun 2009


Interview with Jacob Gube of, a Web Design and Development Blog

1. Let’s begin with the basics. Could you tell us a little about yourself and your blog?

I’m Jacob Gube (pronounced as “goobeh”): a 26 year old web developer, author, and the Founder/Chief Editor of Six Revisions, a web publication that shares useful design and development information and tutorials. My passion in life is creating (and writing about) awesome websites and web applications. I also like taking pictures as a hobby; something that I’ve been neglecting because of all the things going on right now.

2. Is being a professional blogger your full-time job, or do you work on other projects as well? Do you have any other websites that keep you busy?

I am not, and never will be, a full-time blogger. To be effective at writing about the topic of design and development, I have to practice the stuff I write about on the site. I have a full-time job as a Web Developer specializing in distance-learning education and online training sites and applications.

As for other websites: I don’t have any other web property besides Six Revisions, though I do work closely with the people over at Smashing Magazine, so if there was any other site keeping me busy — I’d have to say it was them. Vitaly Friedman, Co-Founder and Chief Editor of Smashing Magazine, is a friend of mine and is a person I take a lot of advice and inspiration from, whether its in my writing or what TV shows are worth watching. He always manages to find ways to improve my writing and makes me think of things I’ve never thought of before. I’ve also learned a lot about how to become a good publisher/editor from him. Having written for various other online publications, I would have to say Smashing Magazine is the best place to write in.

3) It’s easy to see that Six Revisions is very popular. How long did it take to get the following you have now, and how did you do it?

Six Revisions has been up for a little less than a year and a half, and the journey from the start to what it is now has been a life-changing experience for me. How did I do it? I think the main recipe is to write about what you know and to let your passion, knowledge, and experience about the topic show in the stuff you write. I think that’s what makes people come: they want to read about design and development not from a professional writer, but from someone who’s just like them.

When it comes to contributing writers — I typically recruit and publish authors that write not as a profession, but rather, as a passion. For example, Jan Cavan from Dawghouse Design Studio, who writes Photoshop tutorials for Six Revisions, is a design agency graphic/web designer whose work has been featured in .NET magazine. Tyler Denis from Denis Designs and Matthew Heidenreich from PSDVIBE are freelance designers who share their Photoshop expertise on Six Revisions. Angela Rohner, who puts together these beautiful design showcases, and who runs my favorite web design gallery (, is an Art Director and front-end developer for a design studio. Francisco Inchauste, the brilliant mind behind Finch, is a UX designer. Phil McClure from, who writes about RoR, is a software developer. These are just a few of the great and talented people who write stuff for Six Revisions readers — they’re real professionals who just happen to have a knack for writing.

4) As a blogger myself I know how hard it can be to keep focus. How do you stay motivated to keep working on Six Revisions, and creating new posts almost every day?

When you receive emails and comments from readers thanking you for the stuff you share, whether it be a cool slideshow jQuery script, a freebie set of textures, or a showcase of designs that’s inspired them in their own work, that is motivation enough to keep going. I have an obligation to the readership to provide them with useful information on design and development.

The key is to have a love for what you write about, otherwise you’ll run out of ideas and you’ll never put the time you need to keep a regular posting schedule. The topic I write about is what I think about before I go to bed, and the first thing I think about when I wake up – it’s sad, but true, and you know what, I don’t mind it one bit. If I were to love something else, like spelunking or baking cookies, even if I worked as a web developer, I would write about those topics instead.

5) When did you first become interested in the world of web development, design, and blogging? What inspired you to do what you’re doing today?

Let’s start with development first. I started as a hobbyist software programmer making command-line games — this was about when I was 14 years old. About a year later, I learned about HTML. It must have been HTML 2 or 3 (probably 3), and there wasn’t really any CSS back then, so just inline properties for things like background color, widths of elements, and table layouts.

Let’s jump ahead to design. When I was about 17 years old, I grew an obsession towards Photoshop; I saved up all my money for three months to purchase my very own copy. I started off professionally as a freelance graphic designer, more specifically, a brand identity designer for small businesses and start ups — this is about the time I was able to hone my skills using Illustrator (you can see one of my early vector illustrations in college on Flickr).

But I always loved doing web-based stuff so I transitioned into web development, towards PHP and client-side scripting like JavaScript and Flash AS, taking my passion for coding along with me.

Blogging just happened by accident: I was looking for an outlet to share and maintain an online archive of the things I learned from work, and a weblog just seemed like the natural way to accomplish this. I set up a site, installed WordPress, and in under a day, I had a post up even before the “” DNS records had fully propagated.

And that’s my story in a nutshell. In short: being a designer/developer was planned since they’ve been my passion most my teenage and adult life, blogging just sort of happened by accident and on a whim.

6) What advice would you give to a person just starting out in your field, whether it is blogging, design, or development?

I’m not going to try and say something smart and enigmatic to make myself sound intelligent and cool, that’s just not my style: if you know me, you’d know that I’m a practical and straight-to-the-point person.

For designers and developers: learn your craft well and be sure to keep up with what’s new, even if you don’t plan on using it; that way you’re always well-informed. For example, I know about Flex 3 even though I’ve never applied that knowledge; I’m dangerous enough with it to be conversant about it. Start a blog, that’s the best way to learn and to force yourself to keep up with what’s going on around you.

Bloggers: write about a topic you know well, not about a topic you think will generate the most site traffic.

7) What are your future goals, both for yourself and your blog?

That’s a tough one. I’m not that much into planning, and I believe that if you work hard and do what you love, the rest will fall into place, and at the very least, you’re doing something you love doing. I do know that I would like to redesign the Six Revisions layout, as well as improve site features and findability (I did the current layout in a rush). I do like the simplicity of the design as it is now though, so I’m not sure when I’ll ever want to redesign it.

Other than that, my goal is to finish the books I’m writing and not get my editors mad(der) at me for being late on my chapters… again.

04 Jun 2009


Predefined Variables in PHP: For complete beginners

This is an overview made for beginners: and introduction to predefined variables in PHP. We’ll go over what they are, where you’ve probably seen them, and how and when to use them.

What are predefined variables?

Predefined variables in PHP are exactly what they sound like — variables in the PHP language that have been defined already. They can use used in any PHP script, with no need to create them yourself. They serve a purpose that is commonly used among programmers repeatedly, such as passing information from a form to a PHP script ($_POST would be used for this).

Here is the list of currently defined variables in PHP. Of course, you don’t need to understand all of these quite yet, but they can come in handy for any PHP developer.

All of these variables interact with the current server in some way. This means their purpose is to either get information from the server (e.g. Find the IP address of the user) or translate information to the server (e.g. send a user’s information from a form through the server to be handled by a PHP script.)

Let’s now get a closer look at some of the most commonly used predefined variables.


This variable is an array of values, with the values containing information about the server.

If you don’t know what an array is, it’s quite simple: it is a collection of values, put into one component. For example, an array of numbers would be “1, 4, 6, 3, 3″. All these numbers can be stored in one place, called an array. The array can then be assigned to a variable name, like “$numbers”. There are more formal definitions of an array, as this definition may not be 100% ‘accurate’. However, it’s a good outline and way to think of arrays.

Let’s say we’re creating a fluid layout, and because different browsers handle pixels differently, we want to determine the browser type of the user so we can lead them to a specified stylesheet. This way, we can make sure a fluid layout never breaks.

In the PHP $_SERVER array (collection), there is one piece called “HTTP_USER_AGENT”. This piece of the array (index of the array) contains the user’s browser information. We can call it like so:


To see it in action, let’s echo it out:

     echo $_SERVER["HTTP_USER_AGENT"];

The code above will return browser information in the form of a string. My browser information looks like this:

Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv: Gecko/2009042316 Firefox/3.0.10
     (.NET CLR 3.5.30729)

I won’t get too into it, but from here on we can see how we can use this information to specify a certain stylesheet for a user. If we store that String in a variable, (or part of the string), and send it through an if/else statement, we can give the user the correct stylesheet.

Note: This is just pseudo code below!

$browserType = $_SERVER["HTTP_USER_AGENT"];

if $browserType = "Mozilla..."
     then [switch user to the Mozilla Firefox stylesheet]

else if $browserType = "Internet Explorer..."
     then [switch user to the IE stylesheet]

else [use the default stylesheet]

Here are some of the other indexes in the $_SERVER array:

  • Get the user’s IP Address: REMOTE_ADDR
  • Get the hosting server’s name: SERVER_NAME
  • Retrieve the referrer URL: HTTP_REFERER
  • Retrieves the server identification string: SERVER_SOFTWARE
  • Retrieves the pathname of the current running script: SCRIPT_FILENAME
  • Retrieves the current page URL: SERVER_PROTOCOL
  • Retrieves how the script was requested (Did it use “Get” or “Post”): REQUEST_METHOD

If you don’t understand what they do based on the general description given above, do some more research on them, as well as try them out!


This predefined variable is very commonly used, and incredibly useful when working with forms. You’ve probably seen this one before if you’ve ever tried to learn PHP.

The $_POST variable is linked to a method in PHP, called “post”, respectively. This method is often used in forms that need to send data to a PHP script. An example of this would be a sign up form: the user enters in data to the form, the form uses the post method to send it to the specified script, and the script can then process the data.

<form method="post" action="phpscript.php">

Easy enough, right? Well in order to carry the input from the form over to the script (in the example above, ‘phpscript.php’), it puts the data in an array, and assigns that array to a variable: $_POST. So, the $_POST variable contains all the data sent through the post method.

To specify the names of the indexes in the $_POST array, we clarify names in the input tags within the form:

<form method="post" action="phpscript.php">
<input name="username" type="text" />

After using the name=”" attribute, we can easily find that data in our $_POST variable array:


We have retrieved the data from a form, sent it to a PHP script, and can now work with it inside the PHP script. Using that, we can assign the username to a variable with in our PHP script, manipulate it, or send it to a database.


The $_GET variable is very similar to the $_POST variable in that it can work with forms and a PHP method called “get”.

<form method="get" action="phpscript.php">

The difference is that the get method will send information through the URL, like so:

Let’s break that up a bit. We can see the example website: Then, we see a question mark (?). This question mark means that everything following it within this URL is now associated with the form, and contains the variables. We then see “name=Kayla”. This would be if I were to create an input field named “name”, and input “Kayla” for the variable to be passed:

<form method="get" action="thankyou.php">
<input name="name" type="text" />

Next, an ampersand (&) that will connect all the field names and variables. Finally, our second piece of data, named “website” with a value of “”.

The URL will go to the page where the form wants us to go (the location of the action=”" attribute). In our case, ‘thankyou.php’. It can display a thank you message, or whatever other type of content you’d like to display. In addition, this page can retrieve data with PHP:


A better example of $_GET in action is:

<h1>Hello, <?php $_GET['name']; ?>!</h1>

Of course, that’s fairly useless, but you see how it could be used if needed. The point of $_GET is to easily pass information from a form that the user enters, and provide it to the next page. This is helpful for any sort of non-secure information, such as number of items to add to a shopping cart, or posting a website to a database.

You would not, however, ever want to use $_GET for a signup form or anything that uses secure information. Otherwise, important information (like a password) would be sent through the URL, and could be seen by anyone that could view the computer screen.


Hopefully with a more in-depth overview of these three predefined variables, it can get you started in understanding the rest of them. A great place to get started is the PHP Manual itself.

In a future tutorial I really want to go over the $_COOKIE variable, and how one can use cookies to identify users and work with specific users to the programmer’s advantage.

02 Jun 2009


A Guide to Simplistic Web Design

Define Minimalism

To start, think about what makes a website the opposite of minimalistic: A lot of color, images, shapes, and not enough whitespace. Also think in terms of content. Simplistic web design also strips the design of unnecessary content, so what a visitor does see, is what the visitor needs to see.

By subtracting the unnecessary elements in a web design, we create more meaning to the remaining pieces. What are those remaining pieces? Portfolio pieces, blog posts, a resume…you name it, it’s important.

Typography is a #1 Priority

Let’s think about what we do need in simplistic web design. Content, content, content. The number one way to dress up content is in the form of typography. Paying special attention to typography in simplistic design can create great aesthetic appeal by adding minor detail like italics, serifs, and defining spacing and proximity.

A List Apart

A List Apart features one of the greatest examples on the web of typography. It is obviously a very basic and minimalistic design, featuring black white, gray/beige and orange. The only image that is used in the logo, which is also minimalistic, and the majority of shape on the design is rectangular.

Looking closer at the design, we can see that the designer spent a lot of time thinking about typography. They first thought about the size of the headers, paragraphs, navigation, etc. relative to all other content. Then, color came into place. Notice how the brightest color on the page, orange, highlights the titles of fresh content.

There are other ways to highlight content with just typography. Bolding, italicizing, size, and font change all come into play. Using correct hierarchy in typography is also a must, so pay attention to proximity and spacing as well.

Boring Color? No. Little Color? Yes.

Many designers want to spice up simplistic web design with bright, interesting colors. However, as a general rule of thumb, a simplistic design should not use more than 2 colors in the actual design. This is because pops of color creates strong contrast, opposed to weaker forms of contrast like change in shape or size.

Janic Design

Janic Design uses two contrasting colors: green and orange. The rest of the design is variations in gray, and uses contrast to get the point across. Also notice that the bulk of the design are in these grays. Those bursts of color lead the eye to what is most important: logo, navigation, and portfolio content.

The only other colors in the design are in the portfolio pieces themselves, leading the eye even more. This strong contrast in color and style creates a design where the visitor sees the portfolio pieces first; this is a great goal for any designer making a portfolio.

An Effective Use of Whitespace

Whitespace is often overlooked as such a big part of web design. Ever wonder why adding a bit of margins on the side of a layout makes it ten times more appealing? Whitespace frames whatever it’s around, meaning side margins frame an entire layout. This gives focus to the whole design.

Experienced designers know how to take the knowledge a bit further. Using whitespace to properly frame headers, intro text, content, and navigation can make for a more effective layout. A good designer knows how to influence their audience with their design, either to read the content, donate money, make a sale, or leave a comment. Whitespace is one of these biggest influences.

Uses of Whitespace to creat feeling

Whitespace is not only used to frame, but to also create a sense of feeling. The more whitespace there is, the lighter it feels, and the more luxurious it is. Luxury can be compared to professionalism, high-quality, and high-price.

The image above is from a very informative article from A List Apart: Whitespace. Mark Boulton goes into what exactly whitespace is, how to use it effectively, and a walkthrough of basic practices when working with whitespace. I highly suggest everyone read the article completely through:

What do You Think of Simplistic Design?

Share your thoughts, practices, and tips on simplistic design.

How do you use whitspace in design?

Do you have any special Typography tricks?

How important do you think color is in minimalistic design?

01 Jun 2009


6 Websites that Can Help you Increase Website Visitors

Just because you have a blog or website, it does not mean you are getting the traffic you deserve. And if you are not getting traffic, why? What about if you want to know how your website ranks, or how to improve it? These six resources will check your site and give you helpful information on improving tags, search engine optimization, usability optimization, and website traffic overall.

Thank you to Eva Vesper over at Web Hosting Search for contributing this article. WHS is a web hosting reviews and information site.

1. Mint

Like the motto says, have a fresh look at your site. Access statistics on all sorts of parameters from number of visits to unique referrers. If you want to analyze your website page by page, this is a great source.

2. Submit Express


Get information on how to improve META tags and get statistics on keyword density. It’s incredibly hard to write meta tags, and Submit Express helps a lot.

3. DN Scoop


DN Scoop’s intent is to give an estimated value of a domain. But it also provides information on Pagerank, links pointing to your domain, and traffic values.

4. Website Grader

Website Grader

Website Grader is pretty basic, but free SEO tool that analyzes the effectiveness of your website. One should also do a competitive analysis. Type in other competing websites to find out SEO, website traffic, social popularity and other factors. You will get suggestions on how to improve the site from a marketing perspective.

5. Crazy Egg

Crazy Egg

One of the best tools out there, Crazy Egg comes in four flavors: basic (free), standard, plus and pro. The packages depend on how many visits and pages to track at once. CE visualizes visitors, a cool concept through heatmaps, lists or overlays.

6. Popuri

Popuri gives you information on everything from PageRank to Bookmarks to Alexa rank, at once. It is similar to Smart Page Rank but with a more attractive interface and more statistics.

Thank you to Eva Vesper over at Web Hosting Search for contributing this article. WHS is a web hosting reviews and information site.
Page 3 of 3123