Web Design:

06 Jul 2009

8

How to Get Web Design Clients: Five Factors You Must Address

The first thing you notice when you become a freelance web designer is how quickly you also need to become a salesman.

Web design clients do not come floating through the door, you have to go out and get them. And the second thing you notice when you become a freelance web designer is how darn hard this process can be.

In this post I am going to give you some crucial tips on how you can get a web design clients by addressing some extremely important factors. If you fail to communicate these issues to the potential client they will, undoubtedly, become uninterested.

02 Jul 2009

9

4 Small Web 2.0 Design Tricks that Make a Big Difference

1. Lines and Borders with Depth

This feature is often used in amazing sleek web designs, but overlooked by beginners trying to create a similar feel. An example of this effect is below. On the left are two lines, that could possibly be used as a line or border in a web design, and on the right is the same, but with a bit more depth.

Line with Depth

As anyone can see, the line with depth is a lot more visually appealing.

How to Create a Line with Depth

  1. Create a new layer on top of the background color.
  2. Instead of a 1-pixel solid color line, create two lines: A 1px black line on top of another 1px white line.
    (For a horizontal line, as one can guess, just put a 1px wide black line next to a 1px wide white line.)
  3. Set this new layer to overlay, then merge the new layer on top of any bottom layers as necessary.

Examples Used in Web Design

Depth in Line Depth Line Depth Line

2. Reflective/Gradient Shine

Anything that looks glossy can just about be considered Web 2.0. The use of a few short techniques to add gradient and gloss can spice things up. The example below is what it looks like in action, just applied to a rectangle of solid color. The same effect can be used on logos, the background for content areas, text, images, and more.

Plain, Boring Color Box

Reflective Gradient Shine

How to Create a Reflective/Gradient Shine

  1. Create a new layer over the original image. (In this case, the plain green rectangle.)
  2. Using the Elliptical Marquee tool, create a portion of an ellipse on the top part of the rectangle.Tutorial
  3. Create a white to transparent gradient vertically upwards. Make sure the white is on the bottom. (To create a completely vertical gradient, hold down the shift key.)Tutorial
  4. Change the layer’s blending mode to Soft Light.
  5. Press “Ctrl [Cmd], Shift, I” to invert the current selection. Then, create another new layer.
  6. Create a black to transparent gradient in this selection, with black on the bottom.Tutorial
  7. Change this layer’s blending mode to Overlay.
  8. Put the opacity of both gradient layers down by about 50%. Alter the opacity of both until the image looks right.
    Reflective Gradient Shine

3. Drop Shadows

Drop shadows are used surprisingly often in Web 2.0 design, despite their bad reputation for being old-fashioned and cheesy in the web design world. This is because they are great for adding a sense of realism to a design, like a realistic sense of a flat piece of paper (or other material) setting on another flat surface. That’s the effect we get on the right.

However, on the left, it’s easy to see the effect is cheesy, old-fashioned, and should never be used. On the left, the dropshadow gradient is so large that it seems as though the green block is unnaturally floating above the flat background.

Cheesy Drop Shadow Stylish Drop Shadow

The trick is to use dropshadows to make things realistic. Don’t use dropshadows just for the sake of using them.

4. Rounded Corners

They’re not included in the new CSS3 for nothing. Rounded corners are often times a great way to add a bit more appeal to a design, especially a modern design. Many sleek and modern product designs often feature smooth curves and edges. Blocky feels old and clunky — smooth is new and modern.

Square Box Better Better

Wrapping Up

Not all of these have to be used simultaneously for a great Web 2.0 design, but they are a closer look at some simple tricks one can try to see if the effect will improve a sleek web design. In the end, though, good design comes from experience and a good eye for design.

These are, of course, very basic principles and are meant for beginners in web design. Anyone looking for the next step, or for anyone looking for more advanced techniques, should check out How to Accurately and Effectively Research a Web Design Style. The article goes over how to discover your own techniques when learning Web 2.0, or any other design style for that matter.

28 Jun 2009

13

5 Simple Ways Twitter Can Make You a Better Web Designer

Twitter. The slogan is “what are you doing?”. Everyone has an account. But web designers should be aware of the fact that Twitter is much more than just “I’m eating some cereal” and “I’m driving to work”. In fact, Twitter can make you a better web designer. In this post I am going to show you how you can use Twitter to improve your web designs, learn new design techniques and grow your businesses profile. I can honestly say that Twitter has improved my web design skills more than any other single entity.

1. Follow the best designers

The first thing you need to do is follow the best web designers. These guys are constantly giving tips and hints on how you can improve your designs and as such they will be an invaluable source of knowledge. I make it a habit to keep my Twitter window open all day long and periodically check for updates from these top designers. I can think of at least four occasions when a revolutionary Tweet changed the way I designed one of my client’s websites.

Follow the Best Designers

A bunch of very patient and diligent bloggers out there have compiled some fantastic and valuable lists of the best web designers on Twitter. Here are a few:

TIP: Follow people who live in a different country than you. European and Australian designers are doing very different things than Americans.

2. Tweet some questions

Now that you are following the best web designers on Twitter you need to start asking them questions. The wonderful thing about Twitter is that, for the first time ever, you can connect with your design heroes without feeling like you are really bothering them. In the past you could have sent out an email but chances are you would never hear back. Now you can post a simple Tweet and get an instant response.

Make sure your questions are direct, simple and easy to answer. Here is an example of a Tweet I do every time I finish a new design. The result is about 40 to 100 replies from people telling me what they like/don’t like and as such I am always able to improve the design.

Questions

You can also ask question during the design process. I recently asked my followers whether there was a way to “resolution test” my designs on the one computer. Five minutes later I had 20 websites that converted my design to every screen size available. Fantastic!

TIP: Add “@designersname” to your questions if you want to make sure they see your question.

3. Promote your clients

A good web designer doesn’t just design the site and then vanish into thing air. Instead, they should put some initial effort into promoting their client’s business and the new website that they have created. One fantastic way to do this is to use Twitter to create a burst of initial traffic and gain some backlinks. This will do a lot for their Google rankings and help them kick start their online presence.

For example, if you have just designed a website for a local pizza joint (like in the example above) you can Tweet some details about their pizza and promote it to your followers. If you have followers in the area there is a good chance they will retweet your message and your client might even get some orders! Try and be creative in the way you do this.

Promote your clients with Twitter

TIP: Keep your message short if you want it to get retweeted. Remember, the retweeters are limited by 140 characters as well!

4. Get your clients on Twitter

This idea is about taking the previous point to a new level by getting your clients involved with the magic that is Twitter! Obviously this tip isn’t about the design itself, but it is about being a better web designer on the whole. Your clients can get a lot out of Twitter and if you are the one that takes the time to incorporate it into their site, get them involved and get them profiting from it then you will (in my opinion) be a lot better at what you do. It is extremely important to keep your clients and your designs up to speed with the latest trends and avoid being one of these “set and forget” type of web designers.

Here is a great example of how it is done. Terrafolia Flowers is a florist in Montreal and she uses her website to promote her Twitter account and her Twitter account to promote her website. By marketing herself as the “social florist” she can tap into a generation of tech-savvy users and provide a way for her clients to find her again and again. Take a look.

Florist Twitter Page

The Twitter page (above) is used to show some of her latest floral arrangements and provide inspiration for other florists out there. She can also keep in touch with her existing clients in a very informal and friendly way.

Florist Web Page

With over 1,300 followers her Tweets are bound to get some repeat business. Now ask yourself whether any of your clients could have benefitted from this type of interactivity. What a wonderful (and free!) way for them to promote their business on a new scale. They would love you for this idea.

TIP: Make this an additional package in your web designs that you either charge for or add on as a bonus for premium sign ups.

5. Use contests to promote your firm

In the right hand sidebar there is a list of the most popular topics on Twitter for any given day. They are called Trending Topics. At the top of this list for the first part of June 2009 was the word #squarespace. The reason? Squarespace were giving away an iPhone every day for a month if you added that word to your Tweets. The result? Squarespace experienced an avalanche of traffic and got masses of new sign ups for their blogging software packages. I was shocked to see how many of my followers set up new Squarespace blogs during this promotion.

Squarespace Contest

Of all the social media sites it is Twitter that has the ability to go truly viral. The reason I use the world “truly” is because Twitter seems to create a lot of conversions, not just traffic. Stumble Upon and Digg are wonderful for bringing new visitors to your site but these visitors rarely convert to friends, followers or clients. Twitter is different. Squarespace are getting hundreds of new clients paying $30 a month due to some free marketing on Twitter. Imagine what you could do for your web design business.

TIP: Make your prizes concrete items like cash, phones or iPods. People do not respond well to eBooks, free designs or consulting.

Conclusion

Twitter is fantastic because it is full of talented people who are willing to converse with their peers. A few months on Twitter and I guarantee you will re-think the way you look at the web design business. You will modernize, become more effective and learn a wealth of new tips for dealing with your clients. If you aren’t already on Twitter I urge you to sign up today and implement these five tips.

27 Jun 2009

23

19 Web Design Blogs you Should be Following

Need an extra boost in creativity? Follow these 19 web design (and some development) blogs to learn, grow, and become inspired.

Whether you’ve heard of all of them or not, everyone of these blogs is worth a follow.

26 Jun 2009

6

The 5 Worst Mistakes That Web Designers Can Make

Being a web designer is a bit like being a famous basketballer. There are so many people looking at your work, pointing out your flaws and following your every move. But unlike a basketballer, our profession is constantly changing. We have new technologies, trends and fads to follow. And in this fast paced environment it is easy to make mistakes.

In this article I am going to show you the five worst mistakes that web designers constantly make. Some of them are to do with designs and coding and other are to do with networking and branding. Avoid them all equally. They could come back to haunt you.

NOTE: If you can think of any others please drop a comment and let us know. It might really help someone out there.

1. Having a poorly defined brand

What is your brand? Can I discover what your brand is within the first five seconds of visiting your website? Do you constantly reinforce that brand or are you always parting from it? The worst mistake that a freelance web designer or web design company can make is having a poorly defined brand. It will spell the end of your career.

Why is it important?

So why is branding so important? It is simple. It differentiates you from the rest. And we all know how important differentiating is. There are literally millions of web designers out there – you need a way to stand out or you will be just another dope in the crowd who will get overlooked every time.

What are you offering?

Branding is also about knowing who you are and what you are offering. Are you designing $5000 professional websites for up market companies or are you using templates to give people a website for $400? Do you promise two week turn around times or will you take six months? If you don’t have a well defined brand you will not know what you are offering and that will make it almost impossible to sell.

If you don’t believe in your brand, how do you expect other people to? If you don’t even have a brand… well, what more do I need to say?

An example of a well defined brand

A classic example of a well defined brand is Nike. Of all the brands ever created I am of the opinion that Nike is the best. Their logo (the swoosh) is synonymous with success and “correct answers” and their three word catch phrase “just do it” evokes emotion and imagery extremely well.

Nike Logo

When it comes to Nike gear you don’t care what the price is because you automatically know it is what you need. It is endorsed by the Michael Jordan, Tiger Woods and Roger Federer, all of whom reinforce in your mind that Nike is what you need to be the greatest.

If you want to be a successful web designer you need to solidify your brand as if your life depended on it. Make sure you know who you are, what you offer and why you are different from the rest. Without this concrete grounding your business will be forever shaky.

2. Making clients’ sites load slowly

I love images. I love big, unique, professionally taken photographs. I think they make a website come alive. But initially I used these images poorly and as a result my client’s websites loaded slowly. This had an impact on my business. Let me tell you how.

Simone Hanckel Photography

Simone Hanckel Photography: A great fast loading image site.

A story about loading times

One day I got a call from a person who had been referred to me via a friend. They wanted a website for their perfume shop and so we met up for coffee to chat about their options. The cafe had wireless internet so I could show them my portfolio. The problem? All of the image based sites I wanted to show them failed to load. The mixture of slow cafe internet and badly saved images meant that it timed out. I didn’t get the job.

People are fickle

Take a look at how you react when you visit a website that you’ve found on Google. If it takes longer than about three seconds to load do you click “back” and go to another site? I know I do. You need to remember this when you design a site for your clients. Make sure it has a fast loading time and doesn’t take too long to browse between pages, bring up images, etc.

How to make websites load faster

This is an article in itself so I want to keep these tips brief. If you want to make sure your websites load fast you need to:

  • Save for web and devices
    Make sure you save your images in Photoshop using the “save for web and devices” function and setting the appropriate level. If you use the regular “save as” function the images will be too large.
  • Reduce unnecessary code
    Part of the reason the web design community hate the old school tables commands is because they create a lot of extra code. Always find a css solution and keep your web page files to a bare minimum. Its only a small thing but it makes a difference, especially on more robust websites.
  • Simplify your designs
    You need to reduce the amount of different files that you have on your website. If your website is calling up images, flash, java, html, sound files, css, etc. your site is going to load slowly. Keep the design simple and clean and reduce all these requests.

I think that slow loading times is one mistake that beginners constantly make. It might seem like a small issue but in reality it will annoy your clients and your client’s customers. Make sure that website loads like a rocket.

3. Not delivering your product when you said you would

At Taplin Web Design we take the mildly brave step of giving our clients a “post-production survey” which asks them what aspect of our service they were happy/not happy with. Something that has come up once or twice is that delays are super annoying.

Laptop Stress

Why delays suck

Now, let me be clear. My company normally has a very fast turn around time. But on the odd occasion when our coder has been sick or our servers have been down we have had to unleash a website a day or two late. And the client hated it. Every time.

This is understandable. The client has worked themselves up into a mini frenzy waiting for that website. If you are a good salesperson you have probably pitched it to them such that they now really believe that they need it up and running as fast as possible. So when you turn around and say “it is going to be a day late” they get upset. And they pass this information on to their friends. The last thing you need in a fast-paced, highly competitive business world is a reputation for being tardy. It just won’t do.

The one saying to live by

I grew up in family of very successful (non internet based) business people and they often gave me pieces of advice on how I should run my web design firm. The one saying that has stuck with me all these years is:

“Always under promise and over deliver.”

Now, this does not mean you should down talk your product and undersell your skills. That is not the point. The point is to avoid making promises that you can’t keep and always attempting to surprise your clients by exceeding their expectations.

How to under promise and over deliver

If you have a client that has asked you to upload 100 images to their website you should explain that this is a time consuming process and that it could take up to a fortnight. Then make sure it is done within 24 hours. Send them a nice SMS or email letting them know that you value their ongoing business and as such made it a top priority. This is how great relationships are built. They will recommend you to everyone.

4. Not organizing your time properly

If you are a freelancer you will undoubtedly be a very busy person. Most freelance web designers have five to ten projects going at one time and, if you don’t organize your time, you will get lost.

Two Phones

For example, you might have three web design clients, two content creation clients and some images that you need to edit for your own websites. Now you get a phone call from a new client and begin work on their project straight away. After a week you realize that you are behind schedule on the other three web design clients and the content creation is just never going to get done. Not only will you lose your clients, you will not make any money.

How to organize your time better

It is vital that you create some sort of system for organizing your time. Everyone is different so make sure you experiment until you find something that works for you. Here are some basic things that every designer should do:

  • Keep a diary
    Keep a comprehensive diary with dates clients called, dates you need to finish designs by and so on. Refer to it everyday.
  • Write daily lists
    Everyday before you start your work spend five minutes itemizing the day. Write down everything you need to do and the order in which you need to do it. Put the most important items first, not the easiest ones.
  • Take organized breaks
    Don’t break when you feel like it, break when your schedule says so. One of the biggest differences between successful web designers and unsuccessful ones is how disciplined you are with your daily routine. Regular breaks will refresh your day, but only if you actually do work in-between

The stress of looming deadlines is horrible. It can make your work feel like a real drag and end up leaving you stressed, depressed and anxious. If you manage your time you will avoid these feelings as you will constantly reassure yourself that you are on top of all of the tasks. Organizing your time well is the first step to creating a very fruitful career.

5. Not giving your clients enough advice

This last point goes against a lot of the current wisdom out there which states that you should always do what your clients wants. Not so. Your client is not the expert. You are.

Caution Tape

The doctor and the patient example

Would you ever go to your doctor with a painful lump in your neck and then tell him/her how to do their job? No. You wouldn’t. You would listen to the advice and take it on board.

The same is true for web design.

You are the doctor, the client is the patient and the painful lump is the website that they really need to get built.

Now, one thing about the doctor and patient example that is also important to notice is that the doctor will always listen to the patient’s symptoms, feelings and fears before making a diagnosis. You need to do the same. Find out what they want, when they want it by and what they need it to do. But don’t be afraid to tell them if they are making a mistake or if there is a better “treatment” out there. For example, I will always advise my clients against a Flash website if they are trying to sell a product and rank well on Google. Almost all of the time they take the advice and their business is better off for having done so.

Again, the goal here is not to bully the client into doing what you want. Rather you are trying to do the best by them and giving them advice that you think will help them succeed. Don’t advise out of laziness. Do it to help.

Conclusion

The web design industry is a very volatile one and mistakes will be made. Do your best, however, to make sure the above five are not on your list of failures. If they are, pick up the pieces and make sure they don’t occur again. That way your mistakes become lessons and allow you to grow as a designer. After all, isn’t that what we all want?

Have you got any other mistakes to share? Remember, they might really help someone out there.

22 Jun 2009

14

Does Design Matter? Five Ugly Websites that Kill the Competition

Design is not always everything. The following five websites are proof that design is not all that it is made out to be. If you focus your time, money, and energy into creating a killer service, you will come out miles ahead of those pouring their time, money, and energy into the design of their mediocre service.

Most webmasters place a high amount of value on the design of their website. Many webmasters have even spent significant amounts of money to insure that their website design was exactly the way they wanted it. It is commonly argued that well-designed websites are one of the keys to insuring recurring traffic. If people enjoy the look of a website, they will continue to return. Yet, this is not always the case. Design is not always everything. The following five websites are proof that design is not all that it is made out to be. If you focus your time, money, and energy into creating a killer service, you will come out miles ahead of those pouring their time, money, and energy into the design of their mediocre service.

Chris Guitars

Chris Guitar’s is by far the ugliest website on this list. The official website/e-store for Chris Guitars in Albany, NY is e-commerce in its most elementary form. Chris Guitar’s is coded from top to bottom in HTML, complete with a “cheezy” graphic (albeit one that honors US troops and is therefore commendable). The website’s clashing color scheme of yellow text on a solid purple background is enough to make any shopper’s eyes bug out within the first minute of reading. Each product listing exists as a paragraph of product description and review along with a link to a picture of the item being sold.

Chris' Guitars

Don’t the the ancient design and super-simplicity fool you though. This guy does business. Chris Guitars has established itself as a sort of mecca for musicians and music equipment collectors. The simplicity of the website couple with the honest descriptions, pictures, and “best price on the web” make Chris Guitars exempt from any rule of good website design.

MMOFB Blog

The first three lines of this website tell all – “Don’t let the stunning graphics and good looks of this blog fool ya“. An obscure blogger writing under the anonymous pseudonym “Grizzly” has set out to prove that badly designed websites run by anonymous people can rake in cash. To see some of Grizzly’s handywork simple query “make money online” into Google and you will see Grizzly’s blogspot hosted website appear within the 1st three spots of the SERPs (depending on the data center you access). Rather than relying on flashy custom WordPress designs, personal branding, and name recognition Grizzly has simply focused on good SEO.

MMFB Blog

Grizzly essentially contends that good design is needless, and that webmasters should focus on producing a quality service focused on growing organically. Do you think he is dead wrong? Check the numbers: 4000+ subscribers (more than 3000 more than comparable websites with flashy designs), and daily earnings ranging from $150 to $300 (compared to maybe that much in a month from comparable “well designed” websites). While many may cringe at the design of Grizzly’s blog, Grizzly himself would probably tell you that all well designed sights should be as ugly. The design of the MMOFB blog is the result of careful ad testing and analytics. The design hinges upon where the ads are most productive. With his cult following and earnings of $1,000+ per month from a free hosted blog – I am tempted to go and dishevel things a bit more on my own websites.

Plenty of Fish

The story of Markus Frind and his online dating website PlentyOfFish.com have garnered quite a bit of media attention from high profile publications such as Inc. magazine and many others. Frind is the first to admit that a boring and poor design is what makes the free dating site such a huge success. Frind’s strategy in creating PlentyOfFish was to build it and code it as minimally as possible so that it would consume the least amount of (server) resources as possible. The most glaring piece of poor design is the lack of proportional resolution on the thumbnail version of the photos. Based on interview with Frind, the disproportional thumbnails encourage more clicks, pageviews, and time spent on the site which ultimately results in more advertising exposure. The purposeful design flaws on PlentyOfFish.com have resulted in an estimated $10M in revenue for 2008.

Plenty of Fish

Wikipedia

Consider Wikipedia the epitome of the age old internet adage “Content is King”. By focusing their community on creating excellent fact supported content Wikipedia has essentially negated the need for well designed pages. While Wikipedia does offer certain modules and graphs to express data in a more organized fashion, the tables do little to balance the overall asymmetrical contents often left poorly spaced and formatted by pictures and other related resources.

Wikipedia

Despite the relatively poor design and lack of eye appeal Wikipedia has established itself as the go-to resource for any online query, often showing up first in search engine results. The overwhelming existence of quality content and information often makes up for the lack of aestheticism, and lends itself well to the idea that academia should never be appealing to the eyes.

Google

Wait…why is the big “G” on the list? Excellent question. Google’s design may not be intrinsically ugly, but it certainly is primitive. Google, the number one most visited website in the world, also understands that success does not rest in good web design. For Google, success rests within a superior search product and other solutions. When compared to other design-centric search engines such as Bing and the content ridden search services of Yahoo! and AOL, Google begins to look a bit boring. Google’s logo set (save for the commemorative ones) remains rather unspectacular as well. However, what Google may lack in flashy logos and content management, they certainly make up for with their superior services and offerings.

Google.com

Questions and Conclusions

Five websites, five unspectacular designs. Does good design matter? Or is bad/boring/minimalist often used by designers intentionally to place a higher emphasis on the product and service. Should an excellent product or service be supported with flashy or cutting edge design? As a result of seeing these five websites, should a higher amount of energy be focused on website functionality and quality service development than on design?

One thing is for certain. Excellent products and quality design are not mutually exclusive. Excellent products can have excellent design, yet perhaps design should be one of those things that is gradually improved as time permits rather than thrust to the forefront of a project. If your website offers a quality product or a knockout service you should have no issues gaining users. The homework has already been done for you. Users care about functionality more than they do about design.

About the Author:

Ethan is a well-trained internaut who runs techsplosive.com, a website about Internet Startups and
Social Media.  If you like what Ethan has to say here, feel free to subscribe to the Techsplosive.com
RSS feed.

If you’d like to do a guest post on Webitect, feel free to contact us.

13 Jun 2009

7

75 Websites with the Best Typography

http://www.alistapart.com/

http://ilovetypography.com

http://www.shauninman.com/pact/

http://www.tanoshism.com

http://www.jrvelasco.com/

http://www.fontshop.com/fonts/

http://www.andyrutledge.com/

http://www.bearskinrug.co.uk/_store/

http://www.rikcatindustries.com/

http://www.underconsideration.com/quipsologies/

http://www.ff0000.com/

http://designsnips.com/

http://thebignoob.com/

http://www.processtypefoundry.com/

http://www.designcanchange.org

http://www.getfinch.com/

181

http://sr28.com/

http://jasonsantamaria.com/

http://events.carsonified.com/fowa/2009/miami/content

http://www.elysiumburns.com/

http://www.viget.com/inspire/

http://diaroogle.com/

http://www.themorningnews.org/

http://orderedlist.com/

http://www.wordsarepictures.co.uk/

http://owltastic.com/

http://www.blackestate.co.nz/

http://www.newyorker.com/

http://www.adfed.org/

http://www.whatalovelyname.com/

http://rustinjessen.com/

http://jontangerine.com/

http://www.thedarlingtree.com/

http://www.shauninman.com/blog

http://www.aneventapart.com/

http://decknetwork.net/

http://gr0w.com/

http://thenetsetter.com/blog/

http://www.pallian.com/

http://www.sushiandrobots.com/

http://legistyles.com/

http://benlind.com/

http://www.typechart.com/

http://www.loremipsum.ro/

http://www.crowleywebb.com/

http://astheria.com/

http://www.alpha-multimedia.com/

http://typedeskref.com/

http://madebygiant.com/

http://blog.fl-2.com/

http://www.cucweb.org/

http://adamglenn.com/

http://www.sergionoviello.com/

http://lhmdesign.com/

http://www.bigomaha.com/

http://forabeautifulweb.com/

http://www.jonbrousseau.com/

http://www.oneshareinvestments.com/

http://mattyblaw.com/

http://csswizardry.com/iamharryroberts.com/

http://www.383project.com/

http://www.works4sure.nl/

http://www.linksla.com/

http://junecloud.com/

http://oddwebthings.com/

http://designr.it/

http://bradfrostweb.com/

http://www.area17.com/

http://www.fontex.org/

http://joelongstreet.com/

http://squaredeye.com/

http://www.arqandgraph.com/

http://www.objectifiedfilm.com/

http://new.typographica.org/

10 Jun 2009

6

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 Snook.ca 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.

Joystik

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 Problogger.net

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?

Page 5 of 7« First...34567