I learned something recently about how I do my work. I learned that, sometimes, I was trying to be cheap.

When I started this business, I figured I’d better be competitive, in order to get more business. And I figured I would have to start with smaller clients. And that those smaller clients wouldn’t have as much money.

Therefore, I figured, I would have to charge them less money, and so, I would have to take less time doing what I did.

But the result of this, sometimes, has been that–yes–people have been able to get a good “deal” from me; but not necessarily exactly what they wanted.

I realized that it suits me to treat myself like a craftsman–like a fine cabinetmaker, for example. He makes sure every join is true. He finds just the right stain. He polishes every detail. Because he does these things, he feels great about his work. To the extent that he puts this much care into the thing he is doing for someone else, he puts this much care into his own life, and so his life feels worthy of him, and his work feels worthy of his time.

It doesn’t do for the craftsman to make sacrifices to his craft, justify that “the client would not be able to afford it, if I did everything I know to do, to do the job right.” To ignore details that he sees, presuming the client doesn’t care enough to notice them, or won’t spot them anyway. This makes him small, and makes him appear like a lot of other people–just getting by, cutting corners, and making do with second best. A lot of people out there never notice those little details anyway, and this makes him, like them, and so it makes him like a whole lot of other people.

And this confirms the belief that he was avoiding (and living)–that he is small, and not worthy to charge for doing top-quality work. It makes the work less fun, and therefore harder. The time spent in this way is tiring, and feels like a waste.

I have in part to thank Brandon Sinclair, who wrote The Web Design Business Kit, for this insight. He points out that, in a very crowded field of web design, one of the only real differentiators you have is really good customer service. Think about it: even if you have no real idea what the answers to the following two questions are, what do you imagine they would be:

1. Roughly how many web designers would you guess there are in your area?
2. Roughly how many web designers would you guess there are in your area, who:

• You know you could trust to handle every detail of your site with the utmost care, and make sure it gets done right?
• If something is not right, you could trust to fix the problem with the same urgency he would treat it as if it were his own?
• Who start and end every project centered around handling every detail towards achieving the following goal: to assist you in making more money from your business?

After having tried for a year and a half to “cut a few corners here and there,” I have realized that, every project I do where I treat myself like a craftsman, and care for every detail, will become a piece that my client will rave about, and make me successful that much quicker. But just as important: I feel excited about doing the work, because I am testing my edge, rather than slumming around the boring middle.

I really love web designs that emulate natural, rough sketches, and simple, playful watercolors. Ever since it became easy to produce perfect type, absolutely straight lines, and unassailable right angles, we’ve become fascinated by the imperfect. Here is a collection of 14 of my favorite examples of websites using this principle.

1. Sojourner Farms All Natural Dog Food

I just love the slightly rough, 1930’s style banner of this site, and the sweetness it creates. The use of CSS dotted lines to demarcate areas of the text, and the reddish brown color of the type, add to the effect very nicely.

Link: http://www.sojos.com/affiliates.html

2. Electric Pulp

The two watercolor trees in the background are very nice! This firm has created a backdrop to highlight the various designs they have done for clients, where the frame is not too overpowering, but still allows them to express some of their personality.

Link: http://electricpulp.com/

3. Fuze Creative

Here is a very nice design, incorporating elements of “sloppiness,” with a clear layout gridl. The color and the feel of the brown background scan is echoed nicely in the color and pattern of the border lines, and the type. Once again, this conveys a sense of playfulness that is under the control of the designer. For me, this would inspire confidence that they were able to be creative, playful, and original, but also had a handle on what they were doing, and weren’t doing it just to show off.

Link: http://www.fuzecreative.com/

4. Noémie Chevaux-Tavernier

So playful and sweet. The black and white photo of the woman, that looks almost like it was cut out of a photo from an old scrapbook, and her look could almost suggest she was from a long time ago. I’m not sure if that was intended, but it creates a magical effect, for me.

Link: http://www.noemie-chevaux.com/

5. Nut and Bee

This artist creates a wonderful series of characters, and sells them in the form of stickers, magnets, and so on. The design is a nice, simple backdrop for her various characters.

Link: http://www.nutandbee.com/

6. Orange Coat

I just think this artist came up with a very cute logo, and utilized it well at the top of his/her site. The choice of Georgia for the type, and a sweet and soft brown color palette (with a turqoise secondary color) creates a very nice feel.

Link: http://www.orangecoat.com/

7. The Ditty Bops

Along with being a great band, these women have a wonderful website. Check out the links within the site as well, as they are awesome as well. It’s kind of seeming like I like an almost post-Victorian sensibility in design, doesn’t it? That, combined with a penchant for the juvenile.

http://www.thedittybops.com/

8. The Pug Automatic

I like this weird pen and ink drawing of a dog, and how it’s integrated into the banner of this blog. The drawing is just weird–there’s no chance of it looking like any other site! Coupled with that, he’s standing over an iBook, there are zeppelins flying overhead, and mysterious, organic-looking gears in the other corner.

http://henrik.nyh.se/

9. WhyTheLuckyStiff

I really like this guy, and he’s written a very good, extremely entertaining guide to the Ruby language. He’s a brilliant guy who’s not afraid to be weird (very weird), but is also sane. The banner is playful and silly, and integrates beautifully with the standard CSS elements of the site. When I was younger, I wanted to do things like this, but I never did, because I thought it would mean people wouldn’t take me seriously. But I think people do take him seriously, because he’s providing a lot of valuable information at the same time that he’s choosing to be silly.

http://whytheluckystiff.net/

10. Holly Hue DIY Clothing

Here’s a brilliant site, that features an active text area comprised of a piece of brown burlap fabric, hand-stitched to the striped white and blue background fabric. The navigation buttons, too, are hand-stitched pieces of fabric. They become a deeper purple when you hover over them with your mouse. You really have to do something like this to discover what a feat it is! To make something this organic look seamless, no matter how long your text area may grow, or shrink, to. Nice work!

http://www.hollyhue.com/

These are some of the top sites I have found that have this sort of naturalistic, sweet flavor. Do you know of others? Please post them in the comments!

There are so many factors that go into creating an attractive website design. At the same time, I thought I might give you a ideas for good website design that you can use right away, if you are thinking about how to create a good design. These are things that I frequently notice, and that I notice not everybody does pick up on.

Choose a font size that makes your text readable. A lot of web designers are very young-in their twenties. I’m not (I’m 41), so maybe this comment reflects this. But this is not a bad thing! The majority of your audience-depending on who that is-may well not be in their teens and twenties. A number of web fonts do look kind of cool at small sizes. Here is an example:

But they are going to be a lot easier to read at a higher font size, like the one you are reading now. Ultimately, your site visitors will thank you more for being able to convey the information quickly, than by looking “cool”.

Pay attention to the width of your text column. The wider the column is for your body text, the harder it will be to read. You just need to weigh this against the other factors that affect readability, such as: the age of your target audience, the readability of the font you are using, the length of your material and its complexity, etc. Just be sure the overall effect of all these choices leads to easy to read body text. And remember: nobody likes to read as much text on a web page as they do on the printed page!

Remember: people don’t “read” a web page, they scan it. Countless studies, as well as common sense, indicate that when people go to a web page, they don’t sit and “read” it in the way they might read a page in a book. And yet, it’s easy to forget this when we’re writing our copy and putting it up. Therefore, remember these things:

• Utilize lots of visual “cues” that will help your reader scan for the information that’s most pertinent to them; this can include bulleted and numbered lists, bold sections of a paragraph, and boxed sections-like “callouts,” for important take-away information.
• Write in shorter, simpler sentences than you might otherwise.
• Write in shorter paragraphs.
• Put yourself in the shoes of a busy person who’s searching for relevant bits of information.

Leave plenty of “air” between text and other elements. When I started doing graphic design in the early 90’s, I was taught by a very anal, meticulous friend, who schooled me to become very attuned to the amount of spacing between different elements of the page. A problem I often see is: for some reason, an otherwise decent design has too little “air” (white space) between text and design elements. Here’s an example:

Before: Not enough air between the text and the element above.

After: An appropriate feeling of air between the element and the text.

Just take a moment to “feel” the two examples. Doesn’t the second one “feel” more balanced, more relaxed? There are many ways in which you can play with giving your design this feeling of air, and ultimately, playing with the spacing between elements, until it all “feels” right-airy, roomy, and balanced-can go a long way to creating the impression of a professional, well-put-together design.

I hope this gave you a few more ideas for good website design. There are plenty more, but these are a few that you may not have thought of.