In many of these cases the designers behind the sites are simply incompetent.

They’re often amateur designers or those who have little or no design training or people who design their own sites based on a book from their local library that’s ten years out of date.

But there are other times when the designer was perfectly capable of creating a better site.

So why would a perfectly competent designer create a site that isn’t very good? The answer is simple: they settled. It happens all the time.

Maybe the designer has hit a slump and they’re looking for any paying work. Maybe it’s a site for a friend and they just don’t have the heart to tell them their design ideas are horrible. Maybe they were overwhelmed with work and just didn’t have the time the needed to devote to a project.

In any case, the end result isn’t up to par. It reflects poorly on the designer and oftentimes is left out of their portfolio entirely.

Of course, design isn’t the only place designers shouldn’t settle; it’s also important to maintain high quality standards in their business, their blogging, and other aspects of their professional life.

Work Begets Work

It’s long been said that work begets work. But it’s more complicated than that.

In reality, high quality work begets high quality work, and low quality work begets low quality work.

If you take on high quality design projects and product high quality results, you’re more likely to get similar projects in the future. If you take on projects with low design standards, you’re likely to get similar projects offered to you in the future.

Think about it for a minute. If someone sees a great website and they’re looking for a web designer, they may try to find out who designed that website. Of course, “great” is a subjective term.

So if someone likes site designs that look like they’re from the mid-90s, they’ll contact designers who are still designing like that. If they like designs that are up-to-date, unique, and professionally designed, then they’ll be looking for designers whose work is similar.

So again, if you settle for lower design standards, then you’re likely to get more work along the same lines. Hold your work to the highest standards you can and you’ll not only attract more high-quality work, but you’re also likely to improve your own skills in the process.

Pushing Yourself Results in Improved Skills

If you always settle for the easiest way to do something, you’ll never improve your own designs skills.

If you push yourself to always do things in the best way possible, you’ll constantly expand your skills and your knowledge. New and better techniques for doing things are coming out all the time, and if you expand your knowledge enough, you may be able to create your own techniques that do things better and easier than other methods available.

If you improve your skillset, you’ll be able to take on more complicated projects in the future. You’ll also improve your efficiency, as you won’t have to spend as much time figuring out how to do some things. Both of these can lead to higher income from your design work.

Good Clients Will Respect You More

Good clients will respect a designer who holds fast to their own standards. If you’re willing to sacrifice quality for the whims of a client, you’ll almost surely create inferior work at least some of the time. But if you’re confident enough in your own skills and your own aesthetic ideals, stand up for them and good clients will respect you for it.

After all, a good client recognizes that you’re the designer, and that while it’s their business, you have more experience than they do when it comes to design particulars.

They’ll appreciate it when you say (tactfully) that the giant flashing banner on the home page and all that scrolling text just isn’t going to give the impression they’re after. While it’s important to listen to your clients, don’t be afraid to step up and tell them why something isn’t a good idea.

Sure, you might lose some clients if you refuse to bend to their every poorly-thought-out decision, but the clients you retain will be easier to work with and will likely give you more design freedom. These clients will also likely refer more work to you, both directly and indirectly.

If your portfolio is filled with projects that are high-quality and reflect both your aesthetic ideals and those of your clients, you’ll attract more business. And if your clients are happy with their websites and the results they’re getting, they’re more likely to refer others they know to you.

Other Designers Will Respect You More

Designers tend to respect other designers who do excellent work and have a clear aesthetic and style.

While adapting to what your clients want is important, it’s still possible to maintain your own signature in your work. In some cases, this can be recognizable to others trained in design and can make your work stand out.

Respect from other designers isn’t important to everyone. But then again, it can lead to a lot of opportunities that you might not otherwise have. If a designer has too much work coming in, they may start looking to refer that work elsehwere rather than just telling prospects they can’t help. If you’re respected in the design community, some of that work is likely to come your way.

Low Standards Will Eventually Kill Your Business

Low standards in your designs will bring you low-quality clients. And the thing about low-quality clients is that they are generally more of a hassle than they’re worth. These are the people who will request a million revisions, delay paying you for as long as possible, and wonder why you didn’t send them back the changes they requested within the hour.

Dealing with clients like these will drain your energy and enthusiasm for design, which will show through in your work. Eventually, you’ll likely give up on designing for other people all-together, or you’ll find that you just don’t have enough clients coming to you. In either case, your business will suffer and likely close.

The same is true for aspects of your business other than design. If you have low standards for your bookkeeping, for example, you’ll likely spend money where you don’t need to, or fail to pay certain bills (or your taxes, which can result in very high penalties).

If you don’t uphold high quality standards in blog posts you write, you can expect that you won’t be asked to guest blog for more popular blogs and your blog will likely stagnate and fail to gain many new readers.

Upholding high quality standards can improve every aspect of your business and make you more effective. You’ll also likely enjoy your work more if you’re challenging yourself on a regular basis and designing projects you can be passionate about.

How to Get Past Settling

If you’ve got a history of settling in your business, it may be hard to break out of the confines of that mindset. But in order to grow as a designer, freelancer, or blogger, you need to be mindful of what you’re capable of and what your personal expectations should be.

If your portfolio is currently filled with designs that aren’t as good as you could have made them, take on some projects that will really let your skills shine. These could be personal projects or even pro bono work, but it’s important to set a new level of quality for yourself.

Make sure you eliminate low-quality work from your portfolio. No one ever said you had to include every design you ever created in your portfolio. Only include the high-quality work that’s indicative of the kind of projects you want to work on in the future.

Once you establish the quality standards you want to uphold, it’s important not to settle again. Defend your position to clients who want you to settle. Explain to them why you’re not comfortable incorporating a design element or feature they’ve requested and then stick by your decision. As already mentioned, good clients will respect you more for this.

If it helps, keep a list of specific things you found yourself settling on so that you can avoid them in the future. Put them on a post-it note on your monitor or post them on the wall behind your desk. Think of it as a to-don’t list rather than a to-do list.

Don’t be afraid to cut some of your clients loose. If you have a client who always expects you to settle, tell them you feel like their needs would be better-served by another designer. If you eliminate some problem clients, you’ll have more time to devote to high-quality projects that come your way. Plus, your stress levels will be lower if you’re not dealing with difficult clients all the time.

In the end, what you consider “settling” is going to vary, based on both your own skill level and the project at hand. While doing your best for the project at hand is important, different projects require different quality levels. A four-page brochure-style site has different requirements than a full-fledged web app. Keep that in mind and don’t go overboard on projects that don’t require it.

Written exclusively for WDD by Cameron Chapman.

Do you settle in your work? Why or why not? Please share your opinion below…

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: Z2Dn3e

For online purposes, a great portfolio website or blog is a perfect way to spread the word, but for offline purposes, nothing beats the traditional business card.

We’ve partnered with UPrinting to bring an amazing contest to WDD. One week from today, we will be awarding 10 prizes of 500 free business cards each!!!

You can choose from a variety of business card styles, such as the traditional US Standard, square, slim and specialty shapes. Let your creativity flow and design the cards any way that you want. We will ship them to you worldwide absolutely free of charge.

Read on for more details on how to enter this contest…

Here’s a brief overview of UPrinting as displayed on their site:

For over 25 years, UPrinting has been a trusted leader in online printing, featuring its signature easy-to-use website and the famous Free File Review, a complimentary proofing service which requires no upfront payment. UPrinting offers convenient marketing support services such as design, lists, and direct mailing to help grow small and medium-size businesses nationwide.

Powered by brand new fully automated in-house Komori presses and CREO direct-to-plate, we offer faster turnaround with minimal human error and lower overhead cost. This allows us to provide customers with consistently high-quality printing at the lowest possible prices.

To participate in this contest, please choose one of the 4 styles of cards that you’d like to win: US Standard, Square, Slim Cards, Specialty Shapes and leave a comment below.

We’ll announce the results in one week, on March 9th. The results will be posted here on WDD and all winners will also be contacted by email for more details.

Thanks to UPrinting for bringing us these great prizes and good luck to all of you…

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: Z2Dn3e

Getting in a rut is often the result of not staying up to date with the latest trends and technologies in the industry. Even if we do stay up to date, many of us at one time or another feel anxious about whether we’re advancing.

If you’re at a firm, you may be working towards a raise or promotion, or perhaps you’re thinking of jumping ship to a bigger and better company.

For the freelancers out there, we of course determine our own destiny; but far too often our careers feel stagnant, too.

This article goes over some ways to reignite your growth as a web designer.

When You Know You Need to Grow

I love to live simply. If I don’t see the need to grow my business, I won’t. For me, more money does not equal more happiness, especially if I have to work myself to death for it.

But many designers get to a point, as I have in the past, where they feel they have to grow in order to be comfortable with themselves and their business.

When does this point come? Well, it’s different for everyone, but most web designers fall into one of the following categories:

• You need more financial stability.
  Whether you’re expecting a baby, buying a house or climbing out of debt, life changes demand career changes. Improving as a web designer and cultivating your business increases stability.
• You’re anxious for advancement.
  As life goes on, even if we’re financially stable, we yearn for advancement to fill a need for self-worth. It’s not selfish, just a part of life. Advancing one’s career is a great way to advance personally.
• You’re just learning the business.
  Whether you’re young or just switching careers, you may be new to web design. To be successful in this business, you need to learn how to grow.

These scenarios are general, and surely many of us have been through all of them. Whatever your reason for wanting to grow as a web designer, the tips below may help.

Define What You Love to Do

This will make you happier at your job every day—that much is clear. But how does it make you a better web designer?

When you have to perform a task that you’re not interested in or inspired by, you do it very slowly, and the work day gets eaten up pretty fast.

Motivation is a driving factor, and without it your day becomes slow and inefficient.

Every day, we spend time doing tasks we hate, sometimes willingly, sometimes not. By minimizing these tasks, we can spend more time doing what we love, and by doing what we love, we get more work done because it doesn’t feel like work.

How do we figure out what we love? It’s not what brings more money or gets more clients. It is not even what you do well. In the context of a job, we love what makes us excited.

Don’t merely be content with what you’re doing; make sure you’re excited. What task do you do when you don’t have to do anything, that you don’t have to force yourself to do? What’s the one job that keeps you up late at night, without even realizing it?

Focusing on Your “New” Job

If you’re a freelancer, remove any services from your portfolio that you don’t like doing. Some think that offering numerous services brings in more clients, but fewer services can bring in just as many clients if you market them well.

If you don’t like to code, then don’t, even if you know how to do it. Outsource it, and don’t mention the service on your website.

If you’re at a firm, trading off tasks can be as easy as talking to a supervisor or co-worker. A co-worker down the hall may love doing exactly what you hate.

Learn a New Technique

With the wealth of tutorials on the web, learning something new every day is easy. Most web designers see elements and tricks every day that they wish they could do.

Too often we say, “This would really be cool to implement in my next design.” Yet, we hardly ever look up how to actually do it.

Another great idea is to set aside time in your workday to focus solely on learning something new. It could be a new coding practice, design technique or business tactic.

Don’t rely on browsing, because therein lies distraction. Instead, decide ahead of time what you’d like to learn, and focus on that during your set time every day.

This is a great way to keep up with technology and fellow designers. They move so fast, and falling behind is all too easy.

Collect Books, and Other Reliable Material

Collect books, magazines, articles, RSS feeds, tutorials and more to improve as a web designer. Both web and print materials are required to gain the knowledge you’ll need to advance.

Every good web designer has relied on certain resources to learn the ropes and stay up to date.

One can learn technique after technique, but we never really grow without some good reliable resources that delve deep into the heart of web design.

In other words, a shiny new Web 2.0-inspired button won’t get you as far as a sound understanding of positive and negative space.

Solid design and coding principles last much longer, and help you improve as a web designer much more quickly, than “tricks.”

Keep an Inspiration and Motivation Notebook

As creative people, we’re always coming up with great ideas. The problem is finding our record of those ideas when we need them.

Because we create one design after another, we’re not always on the ball. Burning out is easy and a huge inspiration killer.

We have to find a way to call up that motivation and inspiration on demand. Keeping a notebook of ideas and encouraging thoughts is a great way to do this.

Such a notebook could include sketches, written ideas, sources of inspiration, magazine clippings, book references and anything else.

It might also help to write down what has motivated you in the past; simply reading past experiences can be encouragement enough.

Build New Habits

When reading articles such as this one, we constantly discover new ways to improve ourselves and our business. The problem is that we don’t often apply everything we read. We are prisoners of our own habits.

To change this, don’t just find new things to do; rather, focus on forming new habits that will help your career.

For example, if you would like to sketch more ideas on paper for design projects, set a goal to do it consistently for the next 10 projects.

Setting goals turns your nascent habit into active steps, rather than leaving it as something “you’ll start doing someday.”

Studies show that a person takes on average 30 days to build a new habit. Yet different habits require different time periods to form.

For example, one group of participants took only eight days to form the habit of drinking more water every day, yet smokers took over two months to quit cigarettes. Different habits take different times to form; it depends on the person and the nature of the habit.

So, whether you want to optimize CSS files for quicker loading, sketch before starting each project or enhance your design skills, be sure to do it consistently and make it a habit. Otherwise, you’ll fall back into the same rut of inefficiency.

Forming new work habits is a prerequisite to changing and growing in your job.

Re-Organize

Remember your first day at the office? The first thing you probably did was get organized, buy a bunch of new stuff and prepare pretty charts to track your progress and help you expand.

Look at those things now. Are they still used? Are they buried under all of your junk? Have you used even half of it? Even if your work space is not messy, is it organized for the way you do business today?

Chances are your perspective has changed as you’ve learned to run a business and do your job efficiently.

Take time to clean up, and reorganize your work space so that you actually use the things you set up on that first day. Organizational tools, ideas and supplies that you’ve long forgotten about are bound to pop up.

After unearthing everything, re-organize it to be more efficient.

Wrapping Up

Growing is a never-ending process, so it should be something to look forward to.

One trick is to think of every business or personal advancement as a new beginning, where you throw all of your old career problems out the door.

Optimize, learn and grow if you want to succeed.

Written exclusively for WDD by Kayla Knight.

Everyone has gone through different stages in their career. Whatever stage you’re at, feel free to share some steps we can take to advance in our careers.

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: Z2Dn3e

Graphic designers have to help viewers get the message and help sell a service or product.

Creating a design for a client with little or no strategy just doesn’t work. Unlike traditional art, graphic design has to convey a very narrow message.

Developing a system for the graphic design process can help the designer achieve the best results.

Systematizing any sort of project, whether graphic design, web design, programming or otherwise, gets the work done faster, keeps the project organized and yields better results.

Here is a simple six-step graphic design process, which you may want to take wholesale or build on.

1. Collect the Necessary Information

You might be tempted to jump right in and start designing, but collect the necessary information first. For most graphic designers, this information will come from the client. Even for your own projects, though, assembling the necessary information first is essential.

Most clients will probably contact a graphic designer in this kind of way:

I need a poster made for my new product X, [followed by project description]. We will be displaying them in location A and location B, and we need a talented graphic designer to make a poster that “sells.”

The client would likely go on to ask for a quote and provide contact information. All is well from the client’s perspective, but you, the graphic designer, really have nothing to go on still.

Some clients might leave you with more information, and some less. However much you get, though, will usually not be enough. Before providing an estimate and starting the project, make sure the following information is spelled out:

The Target Audience

You might be able to get a good idea of the target audience from the line, “We will be displaying them in location A and location B,” but asking the client explicitly for this information will better define the target audience for you.

Just because the posters will be put on college campuses, for example, we shouldn’t assume that the target audience will be college students in general. Does the client have a certain group or sub-population in mind? Design students? Engineering students? Faculty and staff?

Information about the target audience should include age range, geographic location, interests and needs.

Learn What the Exact Message Is

For product advertisements, “Buy Me!” obviously isn’t going to cut it. Ask the client how the product, service or message should be conveyed. Does the product need the high-end treatment, or a more personal feel?

Every kind of graphic design—logos, posters, t-shirts, etc.—needs a message. Get this out of the client before moving forward.

Technical Requirements

If it’s a poster, what are the dimensions, exact colors and number of copies needed. Would the client like to include any other elements in the design? If it’s a logo, have any colors or branding already been established? Does the client already have ideas for it? If it’s apparel, what dimensions, colors and templates are required?

With any graphic design, you have to ascertain certain fundamentals before getting started.

Forgetting something important could mean your having to redo a large part of the project… and earning less money than you had originally figured. Make sure to research and discuss all of these details before beginning the design phase.

Budget and Deadlines

You will also have to discuss the budget, deadlines and other business-related details that will go in your design proposal (discussed below). For one thing, this will weed out any misdirected clients right away: clients whose deadlines are too tight or whose budgets are ridiculously low.

Be sure to share with the client your pricing structure and reasonable deadlines, and ask if they have any other requirements to discuss. You can add a firm quote and specific deadlines to the proposal later.

Systematizing It

To systematize this initial communication with the client, use a pre-set questionnaire. This should cover most of the bases and keep you from forgetting anything important.

You can always customize the questionnaire to the project. The point is that the questionnaire is supposed to save you from having to rethink all of the basic questions for each client.

It might also help to get the client involved in some sort of collaboration tool, such as BaseCamp or Google Docs. Sharing and discussing questionnaires can be much easier without email, and it can set a good precedent for managing the rest of the project.

2. Write Out a Proposal, Firm Quote, Contract and Plan

You have a lot of ground to cover at this stage, but it doesn’t have to be a lot of work if most of it is systematized. All of these things (quote, proposal, contract and even the outline or plan) can come from templates that are slightly customized to the job. Systematization can take care of this portion of the project quickly and painlessly.

If you don’t already have a system in place, you’ll have to create these documents as soon as possible. This will take quite a bit of work up front but will make your life much easier down the road.

If you are employed by a company, you may already have access to some of these templates already. Freelancers, though, will have to start on their own.

Create templates for all of these documents, perhaps even basing them on templates that you find on the web. The ideal template would require you merely to fill in the client’s name and contact information.

The Proposal

The proposal is different because it will have to be customized for each client and project. Simply filling in the client’s name won’t work here.

A graphic design proposal should tell the client what the process will be, the final deadline and budget information. It should also formalize the information from the questionnaire: target audience, objective, etc. It is the overall plan for the project.

Templates will save time here, too, if section headings and routine bits are pre-written. Just add the content to the proposal and you’re done.

A Personal Plan

Your personal plan will contain much of the proposal but will be adapted to meet your needs.

For example, while the proposal might state a certain date as being the deadline for the initial mock-up, your personal plan would include deadlines for certain milestones that you need to reach in order to meet the deadline in the proposal. This could include days for brainstorming, implementing the initial design and finalizing and organizing.

You can use a template again, as long as you customize it for each project. The template is where you systematize the processes that work best for you.

Think about the regular tasks that you do for every project, and systematize them to make them more efficient. Write out a step-by-step process that is organized and easy to follow. You’ll save time and minimize the chance of forgetting something.

3. Brainstorm, Research and Inspiration

Many designers find that going straight to work after all the business details are taken care of doesn’t yield the best results.

Rather, you might want to take time to find inspiration, research similar or competing designs and brainstorm freely.

Without this part of the graphic design process, the designer may find himself continually starting over, or revising the same parts of the design, or just being inefficient. By taking the time to get inspired and organize our thoughts, you will actually work faster in the long run.

Inspiration

Inspiration is the first step and leads to the brainstorming and research. Below are some great ways to find inspiration:

• Read a book
  Many designers look to other graphic design or art for inspiration. One of my favorite ways to find it, though, is just by reading a book. Focusing on words alone makes your imagination do the work, and then you can transfer that creativity into your work.
• Visit a museum
  This is a more visual approach to inspiration, and a fun one. But it doesn’t have to be an art museum. I find that going to any museum can bring me inspiration and help me unwind.
• Free-write (yes, write)
  Like reading a book, writing can trigger the imagination in a way that the visual arts can’t. Many writers find inspiration by free-writing, which is writing without thinking, analyzing or planning. It is a great way to get your ideas down on paper and then build on them.
• Unwind
  Unwind, take a walk, get out, have some fun. Not thinking about work is a great way to stop those old ways of thinking that were getting you nowhere. It can open your mind and help you discover new things. Once you’ve unwound, you can go back into design mode and bring your new ideas with you.

Brainstorm

Brainstorming is the process of taking inspiration and organizing it in a form that can be incorporated in a design. Ideas, styles and elements that you’d like to include in the design are all a part of the process, even if they are still a bit rough.

Sketch some layouts, experiment with color schemes and typography, and try out different ways to present graphics. Sketching is a part of this phase, as is testing one’s creativity to the limit. This is when the general idea for the design comes into focus.

Research

This is when you research the final idea and how to make it happen. I like to collect examples of elements from other projects and see what works best. You could also look up tutorials on effects that the design calls for. This is a great way to try something new and get the perfect look.

Collect resources and learn a few new things. Then you should be ready to create a draft for the client.

4. Try Different Things

Having collecting resources and researched styles, you’ve probably come upon new ideas. Try a few different things, using your original goal as your reference point. Don’t just jump in, create something and leave it at that. Not only will you learn something new, you will also have a few other ideas to show the client if they want to see variations.

5. The Revision Phase

Many designers don’t appreciate the revision phase, especially if they feel a client has poor taste and wants to ruin the design they have worked so hard on. Don’t worry. It doesn’t have to be so painful.

Share with the client your initial design or, as many graphic designers like to do, multiple options for designs. Make sure the client feels free to share what they would like changed or to mix and match features from the different options you present.

It can be difficult to understand clients who don’t know what it is they don’t like about a particular design but just want “something different.”

Keep showcases and examples for inspiration on hand for the client. So, if the client doesn’t like a font that you used for the logo, share a logo design showcase with them. Ask them to choose a few that they like, to get a better feel for their style; that might be easier than getting someone who has no background in design to explain what they mean.

This part of the graphic design process requires the most attention and is the hardest to systematize, but keeping such resources on hand can help. Don’t be afraid to ask questions and collaborate with the client when they are being vague. Taking the time to tease out their thoughts is quicker than making revisions that they might not like anyway.

Wrapping Up

In systematizing any process, the tips we’ve shared can help. But you should also identify the tasks that you do regularly and figure out how to make them more efficient.

Don’t let the process we’ve outlined stop you from asking yourself what is unique about your way of working.

With a system, the correct tools and better overall organization, taking on more clients and getting projects done faster and with better results is possible.

Businesses have to take advantage of the opportunities that systematization holds.

Written exclusively for Webdesigner Depot by Kayla Knight.

Please share your tips and tricks for systematizing the graphic design process, whether during the design phase, client communication phase or production phase.

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: Z2Dn3e

Following the same principles, organic web design has recently emerged as a trend.

Professional designers and companies have taken a more natural approach to creating their websites, logos and packaging, leaving behind the overtly technological sheen of the early 2000s.

Yes, fellow designers, it is safe to say that the new age of organic design for websites and corporate logos has taken effect.

Whether overt or subtle, whether scanned elements or graphics that mimic nature, organic web design has taken on many forms. But what constitutes organic design? What makes it successful? Let’s find out…

What Makes an Organic Web Design?

Though the name suggests that some kind of ecological statement is being made, organic web design is more about bringing natural elements into a technological environment.

These elements could be the representation of natural materials in a design (wood grains, fabrics, earthy textures) or something more abstract that captures the ebb and flow of nature (items, materials, colors, shapes). Organic web design is a broad concept and can be divided into four categories.

• Using materials, textures and fabrics that hint at organic elements
  Objects such as muslin, burlap, papyrus, paper, tape and wood. These items come from the natural environment and thus give a layout a natural appeal.
• Using abstract essences of nature
  Colors, shapes, graphics, materials and brushes that mimic the “flow” of nature. These are subtler than wood grains and muslins and are intended to give but a hint of an organic essence. We see this on websites that have modern streamlined graphics and a soft natural touch. Oddly, plastics are the most common materials used to achieve an organic look: unlikely materials are fair game in web design.
• Creating a whole that is greater than the sum of its parts
  If an image is created that uses only brushes or graphics in order to create another image, we can say that we get more out of the image as a whole than the sum of its parts: the brushes or graphics. This comes more frequently in negative space, as brushes may be used to outline or fill in another image. When we add up the parts, we get one thing — the brush — but when we look at the whole, we are getting two things: the brush and the image created. This is common among typographies, as we may use them to create a totally different image, be it by playing with the negative space or adding brushes.
• A looser interpretation of “organic” web design
  We generally define organic as something coming straight from nature, but it can also be something created (and then neglected) by humans, such as an abandoned piece of wood from a building or materials that once decorated a home and are now stained. Organic in this sense means something completely different: it takes over objects that are left behind by society. Old photographs, ripped cloths, distressed wallpaper: these all can be as organic as a piece of wood or leaf.

In recent years, organic design has taken on an “essentialist” quality. Essentialist organic design is a more minimalist ideal: use only what you need to achieve what you’re after.

For instance, if we wanted to create an image of negative space and brushes, we could use only the amount of brush necessary to create that image. Essentialist organic design leads to a more contemporary look and is spreading in the web design field.

These four categories can be played with and manipulated to get the feel that is right for you and your client. Mix and match any of these: they can all work together successfully.

Hints for Successful Organic Web Design

• Earthy colors can be vibrant
  Burnt oranges, deep gray-purples and olives can be just as exciting as light yellows and bright reds. Plus, they work better together, and because you will more likely use neutral tones in your organic design, you can use more of these colors without overwhelming the design.
• Vibrant colors can be organic, too
  Fire-truck red or cobalt blue can be just as earthy and organic as browns and grays. Find these colors in a vintage image or natural pattern or distress a pattern that has these tones. They can be refreshing when used with a muted palette.
• Balance, balance, balance
  The environment remains stable through a careful balance of elements, and design is no different. This is even more important in organic design. Balance those gray hues with more colorful ones. Calm that wood background with flat, large or simple tables or div layers, or even a monochrome paper texture. One trap with organic design, as with all design, is that you can have too much of a good thing, and the line between successful and overdone can be fine.
• Organic doesn’t mean scrapping the modern
  Just because you want an organic design doesn’t mean you have to abandon your modern influences. You can keep your chrome-looking background, purple complementary color or non-organic fonts. Softening a modern design doesn’t take much, nor does it need a floral vector. A simple curl of a graphic, brush or vector can achieve a natural essence just fine.
• Think differently
  There is much more to nature than the obvious. Pick unlikely items that are natural but are less common, like light.
• Urban areas are environments too
  Just because it is removed from the forest does not mean it is no longer an ‘environment’. Think concretes or damask.

To see organic web design in action, check out the following websites. These websites illustrate all, or some of the four categories of organic web design explained above.

Mooi’s background, an intricate wood pattern, is the main- and natural- element here. To this, Mooi adds a vibrant red hue, just one of the few modern touches in this design that don’t strip away its organic feel.

30A Guide plays with the more abstract interpretation of organic design, involving rustic papers, old photograph negatives and stamps. In addition, 30A makes us feel we have stumbled upon an already existing, non-digital environment.

I Love Dust includes many modern elements, but it does have organic hints: the animated tear drop, the circular fonts and the floral-shaped vectors.

While the influence is not obvious, Entry 5 Productions’ layout does incorporate organic design: We get rounded edges on the header links and logo, as well as a good amount of soft, natural tones. While subtle, these organic qualities take the edge off Entry 5 Productions’ modern look.

We may typically think of papers, woods and cloths to portray organic design, but materials such as leather are equally natural and less commonly used in web design. In addition, Saddleback Leather gives us an organic feel by using old maps, tags and upholstery.

Web Maremma is a good example of how a whole is more than the sum of its parts. If we look at the logo, we see what is intended: a ‘W’ and an ‘M.’ However, when we break the whole into its individual parts, we get incomplete letters. Thus, what we gain as a whole is, you guessed it, more than the parts combined.

This modern piece includes a cement backdrop, rounded edges and organic-looking backgrounds for the bottom text areas. These types of additions are typical in organic design.

Not only is the background a rough paper texture, but Lorelei Web Design incorporates a red drip or spill of some kind. An unlikely element, yes, but it is natural.

Hub’s white bricks stand out here, but what’s more important to note is the dropshadow on the images and the soft movement of these images when you hover over them. The shadow makes us feel as if the images have always been there, and the movement of the images when hovered upon mimics the flow of nature. The green, though vibrant, is clearly organic as well.

What stands out for Kulturbanause is the broken wall, implying that this wall has crumbled away over time. In addition, we have water seeping in from the other side onto the islands of land. This uses two forms of organic design at once: the use of overt natural images and settings and the use of something that is worn and decaying.

Pixel Umbrella’s natural appeal is in its barely-there background- a textured gray wall that hints to concrete or plaster- and the soft curves of the font (namely, the ‘b’ in ‘umbrella).

The bird may be a good addition to gain organic flare, but the colors of font are what drive Janic Design’s layout. The CSS is a focus in this kind of layout, and Janic Design adds organic appeal by using different shades of greens, teals, yellows, browns and deep gray-blues.

When all else feels modern, add a little natural feel in your logo. Josh Puckett’s raindrop logo is overtly organic, and the colorizing of the droplet only enhances its natural essence.

What is not organic about I Love Colors’ site design? The colors, the vectors, the ripped papers and the textured background are all adding to the organic appeal of this layout.

Greydient uses a rotation in the large images, but each one has organic appeal, with additions including dilapidated items, like what you see here, and floral brushes.

Flowers, birds and cloud-like imagery. An organic design that’s so overt you can’t miss it.

The globe image is nice, but the Oypro logo – which looks like a few leaf petals – and the soft edges on the links are what finish off the organic feel. The swirls of natural color help too, of course.

Orange Label’s layout has many modern qualities, with the use of squared text areas and a simple color scheme. However, Orange Label adds in organic design with its use of outlines of natural objects, soft edges and, most notably, text areas that feel as if they are made from negative space.

Another example of overt organic design, VixML’s layout consists of watery and cloudy imagery, a city setting and rounded edges galore.

Brown Blog Films may have a heavy use of wood in its design, but the wooden planks as links and the ‘hung’ picture of the logo are what top off the organic charm here.

Aside from the tree and the curvy font on the logo, there are two organic items to note: the handwritten font on the navigation and main background.

What makes Got Aqua a particular example of organic design is not the image of the skull or the handwriting, but rather the cork background. It is an interesting choice for a natural feel, but it is natural and a great neutral texture.

What is fun to remember about nature is that it does not only consist of bark and birds (and the like). It also consists of light waves, gases, sparks, light, among (clearly) other things. Noe Design plays with these unlikely sources of inspiration, giving us intensified ribbons of color and text that seems illuminated.

Bell 2 Lodge sets itself apart in that the graphics are large and are an obvious combination of vector and photo. We can see that the wood is an image of actual wood, whereas the leaves used are clearly graphics that were built in a program. It is an exemplary play on what is man-made and what, essentially, is not.

DJ Folio’s logo is the main organic component on the site, using simplified, rounded shapes that possess a natural feel. Also, through the separate circles and graphical bits of the ‘J,’ we get a product that is more than the sum of the individual shapes.

The coding is what is of note here, aside from the overt organic additions such as color, leaves and sky. The coding used to run Mathieu Furnon’s portfolio makes the transition from image to image seamless and natural.

The combination of dark tones with cooler blues and creams, as well as the ‘drawn’ effect on half of the logo add subtle organic touches to the obvious woods and papers.

The addition of ‘handwritten,’ off-kilter font flanking the more graphical font is just one aspect of organic design here.

Natural auburns, oranges, melons and browns soften the crisp, modern white in this layout.

Look beyond the trees; the water colors and the deep-but-earthy hues in the header image add a dramatic but organic appeal.

Written exclusively for WDD by Sarah Thompson.

What textures and tones do you prefer when creating an organic feel? As a user, which do you think is more appealing: subtle or overt organic themes?

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: Z2Dn3e

The Internet has accelerated its growth in the form of “design contest” websites, and these businesses have advertising machines that draw in thousands of unsuspecting designers who think it’s normal to give away their intellectual property for nothing.

With the increasing prominence of “spec work” businesses, we’re witnessing more and more about the downsides of the practice, and there’s one initiative in particular that’s documenting what goes on — SpecWatch.

David Airey, a well respected graphic designer, has approached WDD with this important issue and we felt it was necessary to bring light to this important subject.

Here’s the exclusive interview David conducted with SpecWatch for WDD readers. Designers take note…

Many designers won’t be familiar with SpecWatch. Can you briefly summarize what it is?

One of the hot topics for the design industry is spec work, repackaged onto website forums and software-driven “marketplaces” that use crowd sourcing to host design contests.

Most boast about “transparency”. We decided to take them up on that claim.

How SpecWatch works is this — we monitor design contest sites, blogs and forums for design contests and spec work offerings.

We document some of the more “interesting” finds we make and catalog them in giant spreadsheet files.

At random times, depending on the time zone of who’s lead, we then issue brief summaries of these contests via Twitter, with links back to our website. We don’t editorialize. We generally don’t comment.

People can read our findings and decide for themselves. We’re not about subjective debate on good or bad design. We don’t care if contests are an effective way for buyers to obtain cheap design services.

We’re only about the objective goings on of actual contests. And whether these contests are a good idea for designers to participate in.

Why the anonymity? I’m sure a lot of folks are curious about who’s driving.

We are a group of designers and writers, concerned with the effect of spec work and design contests on the graphic design industry and other creative professions, but we didn’t want this debate to be about us. Nor did we want to become heroes (or villains depending on your perspective).

By making SpecWatch our personally branded project, we would have been criticized for foisting ourselves, or our practices, at the expense of others, a criticism that wouldn’t be without some validity.

Also, by making SpecWatch our own personal soapbox, we might have been seen as promoting ourselves as a better alternative to buyers and we might have had “fair use” complications when it came to using designs and examples from these sites.

When working out the underpinnings of SpecWatch, we also thought about “monetizing” the website through Google Adwords, but decided that wasn’t a particularly ethical approach either.

If we wanted our message to be “pure” we couldn’t benefit from it personally, either financially or for whatever “notoriety” we’d achieve in the design community.

Any expenses incurred comes out of our pockets. Any time spent comes off our clock. After debating the issue for quite a while (some weren’t convinced initially and wanted credit), SpecWatch as an entity is much more important than any of our individual identities and/or business concerns.

Being anonymous also ensures that we can move about design contest sites unmolested and unchallenged, critical to the accuracy of our reporting.

There are also some pragmatic personal security concerns. At present, SpecWatch consists of several designers and writers.

Some of us have day-jobs where our participation in SpecWatch activities might not be appreciated by our employers, especially when we’re challenging some pretty well-financed, high-profile organizations who aren’t opposed to playing rough.

Most design contest sites also have technically proficient people on staff — a concern for a small band of people going up against ALL the design contest sites without their resources.

If people want to attack SpecWatch, they are welcome to challenge anything we post on the Internet. That’s fair game. We’ve established a set of ground rules for ourselves and one of them is not to make this personal with anyone. We remove contest holder names. We remove designers names. We don’t even mention the site that we’re documenting unless it’s absolutely necessary.

We use Tinyurl.com to remove any potential “Google bomb” effect against the sites themselves. This isn’t personal. This is about an issue that affects the foundations of the entire design industry. We couldn’t count on our adversaries to follow the same rules, so we removed that option as much as we’ve been able.

The people that are volunteering for SpecWatch are doing so on their own volition, and we’re not going to expose anyone to personal attack. This policy may change in the future, but for the moment, there is no SpecWatch.

Did something in particular happen that led you to start the initiative?

If there was one thing in particular that helped formulate SpecWatch, it would be a Forbes article on design crowd sourcing and Crowdspring in which people in the design industry were called “snooty” for no other crime than expressing an opinion that professional designers should be compensated for their time and efforts.

It seemed like a rather adversarial position to take, while the business model was being presented as the new future of design.

We simply took a look at what that “promised future” held for designers, both those practicing now, and those laboring away in various art schools. The company featured claimed that they welcomed the debate. Fair enough. But rather than make SpecWatch about one company, we decided to monitor all design contest sites.

What we found out astonished us. Abandoned contests. No winners in a high percentage. Copied entries, both from other participants, stock sites and unrelated designers.

The amount of abuse heaped on designers by contest holders is breathtaking. The lack of respect towards designer time by the host companies is phenomenal.

So that people understand our bias, let’s get our positions out there — is spec work unethical? Participating as a designer? No.

But we would argue that the companies who are profiting, usually by a percentage of the take, from organized spec work sites are de facto unethical, regardless of what their PR agents tell us via articles and blog posts.

The same goes for buyers that use spec work to take advantage of young, inexperienced or hungry designers in order to obtain cut-rate design services and what one service describes as “Ridiculous Choices”.

We found that the discussion about “ethics” and “morals” often became mired in minutia and carefully scripted challenges. Some of these services have extraordinarily well-nuanced talking points which they’ll use in blog comments and articles.

They’re very, very good at controlling their message. The one argument that was being overlooked — for what we think are obvious reasons — was actually quite simple; “Do design contests work for designers?” Nobody was looking at the actual logistics of logo design contests. We decided to do that.

What’s the reason for publishing updates solely on Twitter? I’ve not seen any other websites do likewise. Have you?

None that we know of. Our methodology evolved quite organically. We originally planned SpecWatch as a Twitter-only initiative. A lot of these crowd sourcing and design contest companies are heavily active on Twitter, so that seemed like a good spot to start.

We originally registered the SpecWatch domain to protect the name — we figured the initiative would become fairly popular and sniping domain names is attractive for spammers or people who’d use the domain to masquerade as us.

Then we realized that 140-odd characters is not enough space to accurately describe what was going on, so the idea of Twitter bulletins linked to website expansions just evolved from there.

The format we’re using now works well in issuing communiqués while still adhering to the strict guidelines we’ve given ourselves.

We thought long and hard about adding a blog, or a forum, and decided that neither would work for us. Unfortunately, many spec work discussions are derailed by pro-spec trolls and bots.

They wish to cloud the discussion with minutia and heart-warming stories of how participating in design contests has been beneficial to them. While these stories may be true, we do not want to debate the benefit for one or two designers winning a design contest as in our opinion, isolated instances are not germane to how this issue effects the entire graphic design industry. Others can have that discussion.

We also don’t want to debate site owners, management or employees, often posing as someone else. Most site owners’ comments are merely cut-and-paste astro-turf talking points that long since ceased adding anything to the debate.

We’re not interested in how good, or bad, the design work obtained through spec work is. Those discussions are occurring right now, on blogs and forums all over the internet. Having the same tired, yet often heated, argument is also a distraction from our primary mission – the objective reporting of what’s actually going on out here.

Cynics will say it’s just “sour grapes” on your behalf. How do you respond to that?

We knew that this would be a criticism right form the start. Design contests, if run as advertised, should be able to stand up to scrutiny and we’d have nothing to write about.

If they don’t stand up to scrutiny, then there is an issue with crowd sourcing and design contests as they pertain to designers.

Simply cataloging a timeline of events in a publicly accessible contest is not picking on anyone or a case of “sour grapes”.

This potential criticism is also one of the main reasons we couldn’t be seen as benefiting personally or financially from SpecWatch. It’s why we took the “no editorializing” approach to our reporting methods. This isn’t about our opinion or “whining”.

But even if SpecWatch IS the largest case of “sour grapes” in history, we defy anyone to take a look at our postings and claim that these design contest sites and the proliferation of spec work is good for designers.

We see designers getting routinely taken advantage of, often promised things that never materialize. One of our “contest watchers” isn’t even a designer but from a related field that’s been placed in the target sights of a high-profile spec work “marketplace”. They’re fearful for their future and can see the parallel with what’s happening with graphic design.

We’d also point out that we’ve even helped designers participating on spec design contests to obtain what they were promised in the first place.

While we were initially cataloguing spec sites, we found lots of abandoned and forgotten contests — even when a prize was supposedly guaranteed according to site TOS — that were very quickly paid out once pointed out by our Twitter communiqués.

At the very least, we made sure that a few participating designers were selected and paid, something which most of the design contests sites neglect to do on a far-too-frequent basis. We’re not trying to sabotage design contest sites, their contests, designers or buyers.

If SpecWatch has had any effect, it’s been to encourage spec site owners, at the very least, to enforce their own rules and promises that have been used to lure designers to their “communities”.

Several have thanked us openly on Twitter for helping them “improve” their business models, and have even commented that they “appreciate” what we’re doing. Designers who are active on design contest sites agree with our basic premise — designers should get paid for their work when that work is being requested by professional entities.

We understand that spec work and design contest sites are here to stay. As competition heats up, more design contest sites will come online, and these services are going to become less beneficial to designers as the services have to charge less, promise more and be less restrictive on what contest holders can get away with, something which they’re quite liberal with as it is.

We’re of the belief that spec design sites, if they’re going to avail themselves of free work from designers, need to be exceptionally good stewards of those efforts. So far they haven’t been. If SpecWatch can help them “see the light”, that’s good. And hardly a case of “sour grapes”.

It seems you know a lot about how designers are treated on “spec websites”. Is there a specific statistic you’ve uncovered that surprises you more than most?

We issued several SpecWatch communiques for which we took actual figures from several spec websites, and performed some basic primary-school arithmetic.

We found the raw numbers astonishing. The amount of unpaid designer labor being submitted to these sites has a real world value that’s in the tens of millions of dollars. And those are conservative estimates.

The number of designers who aren’t making a penny, while entering dozens of contests, is in the tens of thousands, and you just need to look at the astonishing raw numbers for Crowdspring and 99designs to see for yourself. Wasted time, in terms of unpaid designs submitted, is, quite literally, in the hundreds of years. Yes, that’s hundreds.

In terms of overall conclusions, we don’t want to get into specifics, but let’s say there’s several main “spec websites” that we’ve been monitoring for several months. One gives the appearance of trying to do the right thing, at least on the surface.

Trouble is, the scope of their community and the nature of spec work combined with anonymous designers and lack of project management make it impossible for them to do so. Their service is teetering into the usual free-for-all territory.

Another is already a full-blown designer free-for-all, no project management, an incredible amount of design plagiarism and copying.

Things have become so bad that they started “locking” contests. We suspect this isn’t, as claimed, to protect their participants IP property, but instead to cover up the out-of-control nature of their contests, especially what goes on in the comment sections.

They don’t “lock” design contests that end “successfully” and the designers that participated see their work and IP exposed.

Another is breathtakingly dishonest, carrying on in a way that is tantamount to fraud. Another, in start-up, even seems to be hosting bogus contests, with non-existent designers and made-up clients, in order to attract buyers and participants to their new website.

On all the sites we’ve monitored, whatever “protections” that are in place are usually to protect the host company and website themselves, while designers are thrown to the wolves.

The lack of buyer feedback — the only other reason, other than pay, that all design contest sites claim is an advantage to participating — is stunning.

Overall, what truly amazes us is the amount of abuse designers are willing to endure, and the amount of time they’re willing to donate to another company’s bottom line while being cheated, copied and treated like chattel. It’s a sad development in the design industry and community.

While it’s highly unlikely SpecWatch will even make a dent in the rise of spec design sites — a couple are in start-up, there are several in BETA — at the very least we can help shed some light on the dark side to these services, the risks involved and the actual pitfalls of participating. If we can help one designer avoid burning out before having a chance at a decent career in design, our efforts will have been worth it.

David Airey: Those familiar with my own blog posts will know I have a strong stance against spec websites, and the most common explanation I hear from designers who participate is that they want to build their portfolio. How about trying this instead?

Approach local non-profits and offer them your skills, free of charge.

The experience gained will be so much greater than working on a spec website — you’re improving your face-to-face customer skills, giving back to the local community, networking with business owners, and standing a much greater chance of actually seeing your work used (excellent for your portfolio).

You’ll learn about your chosen profession much faster too.

The interview was conducted by David Airey, a graphic designer who runs his own blog and also authors Logo Design Love

What are your thoughts about the proliferation of spec websites? Please share your comments with us…

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: Z2Dn3e

But with so many tools out there, how do you ever determine which ones are really useful and which ones are just going to waste your time?

We’ve compiled a massive list of some of the best and most useful tools out there for web designers.

Purposely left off the list are common tools most designers are likely already using (like Dreamweaver or Panic’s Coda, Photoshop or GIMP, and similar common software programs that pretty much every designer already has in their toolkit).

These are tools that will save you time, make you a more effective designer, simplify or speed up your design process, or otherwise make your life easier.

Compilation of Offline Tools

Most roundups of useful web design tools only focus on online tools.

But there are a couple of very useful tools you can utilize to open up your options when it comes to design. These things can make certain tasks easier, including working with indecisive clients.

Graphics Tablets

Graphics tablets (also sometimes referred to as drawing tablets, graphics pads, or digitizing tablets) are an incredibly useful tool in a web designer’s arsenal. While most designers can draw pretty skillfully with a mouse, a tablet makes it a whole lot easier and faster.

Most tablets consist of two basic parts: the tablet itself and the pen (or stylus). Many also come with a puck (which works similarly to a mouse, but on the tablet itself instead of a mouse pad or your desk). The main consideration for the tablet is size, while the pen’s main consideration is pressure-sensitivity.

The tablets themselves are available in sizes ranging from about 4″ x 5″ up to 19″ x 13″. Of course, the larger the tablet, the more expensive it will be. For the most part, web designers can get away with tablets on the smaller end of the spectrum unless they plan to do a lot of illustration work (and even then it’s completely possible to get quality results from a mid-size tablet).

And smaller tablets are more portable, making them convenient for designers who don’t always want to be tied to their desk.

The pens are pressure-sensitive to give a more realistic experience. Common sensitivities range from 256 levels of pressure up to 2,048 levels. The higher the sensitivity level, the more it will feel like you’re actually using a pen and paper.

Popular Graphics Tablets

Wacom is probably the most popular tablet manufacturer out there. They have four different product lines: Bamboo (which includes their Bamboo Craft and Bamboo Fun products), aimed at consumers and hobbyists; Graphire, their Bluetooth tablet; Intuos, their mid-range line for creative professionals; and Cintiq, their high-end line that incorporates a monitor into the tablet for a “pen-on-screen” experience (one even features a 21″ screen).

Aiptek makes a line of low-cost tablets that start at only US$50. They offer a 12.1″ USB tablet for less than US$130 (compared to US$469 for a Wacom tablet of comparable size). Aiptek’s most interesting offering, though, is their My Note Premium (US$170) which lets you draw on a piece of paper on top of the tablet with a real pen and it records everything you do. There’s enough memory for up to 100 written pages and it comes with an SD card slot for expanding its capacity. And if you want to use it just for taking notes at a meeting, it can be run off of 4 AAA batteries, meaning you won’t have to bring your laptop along with you.

UC-Logic is the other major graphics tablet manufacturer. Their products fall in the middle range of prices for tablets, with a 9″x12″ tablet (the PF1209-Pro) coming in at around US$250. They have tablets available that start at only US$40.

Mood Boards

Mood boards (also called inspiration boards) are a great tool for designers who work with clients who might not have a clear-cut idea of what they want.

Mood boards often take the form of a collage that includes design elements for the project. Examples of elements included might be typography samples, color schemes, specific graphic examples, or general “mood” elements that reflect the designer’s vision for the impression the site should give to visitors.

Mood boards are often used in the interior design field to show clients ideas for redecorating a room or an entire house. They’re also used in the fashion industry to serve as inspiration and direction for a line or a season. But they’re just as valuable for graphic and web designers.

Depending on the type of client you’re working with, you might create a loose collage with samples overlapping in an organic fashion. If your client is in a creative field, or familiar with the creative process, this kind of mood board can work quite well.

If your client, on the other hand, is used to a more corporate or formal environment, creating a more organized mood board is probably more suitable.

Use headers to set apart the color scheme, specific design elements, typography, and other parts of your mood board to give the entire thing some structure.

If you have multiple ideas for directions in which a project can go, creating a few different mood boards can be a great way to get client feedback and further refine your own ideas.

Creating two or three different examples to show a client can be valuable in getting further direction from your client without spending hours or days on an actual site mock-up just to be told it’s nothing like what they’re looking for.

And that’s really the main benefit of using mood boards in your design process. A mood board generally takes a lot less time to create than a site mock-up.

Using mood boards to get further feedback from an indecisive or insecure client before committing hours to a design that will only be rejected makes everyone happier.

Resources for Creating Your Own Moodboards

We published an article on Why Mood Boards Matter at the end of last year. The article covers the basics of creating mood boards and why you’d want to use them. It’s a great starting point.

From the Couch has a video tutorial called Creating An Effective Mood Board. It’s around seven minutes long and covers the basics of creating a digital mood board for projects.

Flickr has an Inspiration Boards pool that collects mood and inspiration board images from across multiple design disciplines. It’s a good place to find some inspiration or just check out examples of how others are approaching their mood boards.

Compilation of Online Tools

Online web design tools are a dime a dozen. Sorting through them to find the ones that truly stand out can can seem to take more time than you might ever expect to save by using them.

But below we’ve found the best tools for typography, CSS, AJAX and Javascript, color selection, and tools to make creating individual page elements easier.

Again, these are some of the best tools available for what they do, so you won’t have to waste a bunch of time testing dozens of different tools.

Typography Tools

There are a host of online tools for experimenting with the typography on your website designs. Some allow you to compare different typefaces side-by-side. Some only let you sample one style at a time. And still others show you different recommended font stacks.

Other useful web typography tools include apps for converting pixel sizes to em units and a variety of Lorem Ipsum and other dummy text generators. In all, there are typography tools out there for just about every possible need a web designer might have.

Typetester

Typetester lets you compare up to three fonts side by side.

You can select any font from your own computer or use fonts from their menu of common system fonts and web-safe fonts. It also allows you to change the color, leading, tracking, size, and other style options.

It’s a great tool when trying to decide which fonts to use for different elements or even for compiling your own font stacks (since it lets you compare numerous fonts side-by-side).

CSS Type Set

CSS Type Set lets you paste any text you want to modify into one box, adjust sliders and choose other formatting options, and then copy the generated CSS.

It’s a quick and easy way to format any text you need, from paragraphs to head tags.

Options include text color, leading, tracking, baseline shift, text decorations, alignment, and more.

Better CSS Font Stacks

While not a traditional tool, per se, this article offers a number of alternatives to the standard font stacks generally used in CSS.

In addition to offering guidelines for creating your own font stacks, this article also provides a wide variety of sample stacks you can use. An excellent resource when you’re feeling a bit stumped over your typography options.

HTML-Ipsum

Most standard Lorem Ipsum generators online give you a block of text and nothing more. And that’s great if you’re just trying to fill up some space.

But HTML-Ipsum gives you text that’s already been marked up with basic HTML tags (paragraph, head, unordered lists, etc.) so you can see how all the different elements interact with one another. It’s a huge timesaver.

PXtoEm.com

PXtoEM.com does exactly what it says: it converts pixel-sized fonts into em-sized fonts.

The options it gives you are what make it a really impressive and flexible tool, though.

You can choose the base body font size and get conversions based on your browser’s default font size (so if, for example, you set your base font percentage to 62.5% so that a 10 pixel size is equal to 1em, you can select that as your default size).

Typechart

Typechart lets you browse a variety of web-safe fonts and view how they’ll look on both Windows and Mac systems.

You can find fonts based on size, whether they’re serif or sans-serif, or emphasis. It only includes web-safe fonts, so the options offered are limited. But for basic typography, it’s a great tool that can provide plenty of inspiration.

And you can copy and paste the CSS for each style without leaving the page.

Flipping Typical

Flipping Typical lets you view the common fonts you have on your computer in a grid format to make choosing the right font for your current project easier.

This is a great tool when you’re not interested in just using the standard web-safe fonts and want to see more options.

It’s especially useful if you don’t want to wade through a few hundred fonts installed on your computer and just want to see the more popular ones.

CSS Tools

CSS is almost as important in web design as HTML. And there are hundreds of tools out there to make your CSS cleaner, leaner, more effective, and generally better that save you the time and effort required to manually perfect your style sheets.

Compressing your style sheets, which can help speed up load time for your sites, is simplified by using an automatic online tool. There are tools available to eliminate duplicate declarations, too.

Cheat sheets keep the basic elements of CSS at your fingertips for when the coffee hasn’t quite kicked in in the morning and you’re having a hard time remembering which order your shorthand markup should be in.

While most of these tools do a great job at cleaning up your CSS, make sure you always keep a backup of your original and test the final product generated. Sometimes a cleaner or compressor will remove something that was necessary after all, breaking your site.

CSS SuperScrub

CSS SuperScrub aims to significantly reduce the complexity and size of your style sheets.

It gets rid of redundant calls, strips out unneeded content, and groups together remaining elements to make editing easier later.

There are a few options, including one to remove all the whitespace in your style sheet, or to insert a new line before opening braces.

Code Beautifier

Code Beautifier optimizes and cleans up your CSS files.

It offers a large number of options for formatting your text, including compressing colors, sorting your properties, converting all of your selectors to lowercase, converting your properties to either uppercase or lowercase, and choosing the level of compression you want to use.

You can either copy and paste your CSS into the app or supply a URL for your CSS file.

CSS Drive

CSS Drive is a basic CSS compressor.

You can set how compressed you want your CSS to be (light, normal or super compact), and how you want it to handle comments (whether to strip them out).

There’s also an advanced mode that gives you a lot more options, including removing spaces around certain characters, removing tabs, removing new lines, and more.

CSS Redundancy Checker

Sometimes in the process of designing a site, you might set up CSS selectors that don’t end up making it into your final markup.

These selectors do nothing more than make your style sheets bulkier and harder to edit later.

CSS Redundancy Checker goes through your style sheet and each of your HTML pages to see which selectors aren’t being used, and then removes them.

It’s a great tool to use if you think you might have unnecessary selectors in your style sheets.

CSS Property Index

The CSS Property Index lists every CSS property alphabetically.

Clicking on any of the included properties brings you to a definition and information about the default value, allowed values, and whether it inherits from a parent property.

CSS Shorthand Guide

Using shorthand CSS properties makes your CSS files smaller than using longhand properties.

But remembering which order all the different elements go in for all the different properties can be a headache, especially for those you might not use in every single design you do.

It also includes information on the default property values, so if you choose to leave out a property you’ll know what it will assume the value to be.

Color Tools

Choosing the right colors for your website designs can be one of the most important decisions you make in the entire design process.

Sometimes we come into a design with a predefined color scheme (such as when a client already has established brand colors) or immediately know what colors we want to use. Other times we might be free to create our own palette for the design.

If you’re creating a color scheme from scratch, color palette generators and galleries can be a huge help.

If you already have a color scheme, there are other considerations to take into account, such as accessibility and which colors to use on which parts of the site.

But there are tools out there to help with those decisions, too. Below are some of the best tools available for managing color schemes.

Colorblind Web Page Filter

Considering that somewhere between 7 and 10% of the male population has some degree of color blindness (according to Wikipedia), making sure that your sites are still accessible to that population isn’t a bad idea.

This tool shows you how your designs will appear to people with a number of different colorblindness disorders. You can view the results for your entire site or exclude images from the result.

They also provide a link to a colorblind-safe color selection tool.

Find Matching Colors for Your Website

This color palette tool finds colors that coordinate with any color you select.

You can either choose a color from their predefined options or enter any hex or RGB color value to get coordinating palettes based on complementary, split complementary, triade, tetrade, analogic or monotone color schemes.

The colors provided are all similar in intensity, though, which means this is really just a starting point for creating color palettes for your designs.

Color Palette Generator

Photos are great places to look for design inspiration. This tool can create a color palette from any image you choose (just input the image’s URL).

It provides both dull and vibrant color schemes based on the image you provide.

Being able to use any image online really makes this tool valuable, as it saves the time of having to download an image and then reupload to a site like this to generate a color scheme (or download and then open in a graphics program to manually create a color palette).

Kuler

Adobe’s Kuler color palette gallery is one of the better color palette galleries out there.

You can browse or search more than 10,000 color palettes submitted by Kuler users and then download or save your favorites for later reference.

Kuler also includes a really powerful palette creation tool that lets you select colors with sliders or based on HSV, RGB, CMYK, LAB or hex color values.

Setting any color as the base color will then change the surrounding colors to complement.

COLOURlovers

COLOURlovers is another great color scheme gallery.

You can search more than 800,000 color schemes (based on 20 schemes per page and 43,200+ pages of schemes). In addition to palettes, you can also search individual colors and patterns based on palettes.

One of COLOURlovers most useful features, though, is it’s pattern creation tool, which makes creating your own patterns based on either a predefined color scheme or one you create on the fly.

Just make sure you contact the copyright owner of the pattern if you want to use one for commercial work.

100 Random Colors 2.0

If you really just have no idea where to start on the color scheme for one of your designs, 100 Random Colors 2.0 might be just the right tool.

It does just what the name says: presents you with 100 random colors, including their hex values.

And if you don’t find anything in the first 100, you can just hit refresh and be given a whole new set!

Individual Element Tools

There are a lot of generators out there that make it quick and easy to create buttons, backgrounds, forms, and other design elements for your sites.

Some of them are just gimmicky, but others are a great help if you just want to quickly create something like a Web 2.0-ish button or a basic striped background.

Form-building tools can be very helpful, too, especially if you want your clients to be able to do some of their own admin work on their forms.

I know of at least a couple of designers who use these tools so they don’t have to build a custom, simplified interface for accessing the form database or for editing forms for their clients. They’re a great time-saver, especially for building more complicated forms.

Wufoo

Wufoo is an HTML form builder that offers more than 80 form templates and color schemes while also allowing you full control to create custom forms for your clients.

The templates make it quicker and easier to create standard web forms (like registration pages or contact forms).

Submitted forms are automatically collected in a database that makes it simple for your clients to print, email individual entries, filter, search, and perform other advanced functions without requiring you to build a custom interface.

You can even use Wufoo to create online order forms and integrate with Authorize.net, PayPal or Google Checkout.

BgPatterns

BgPatterns lets you create tiled patterns using a wide variety of different repeating elements.

You can select your background color, canvas texture, and the angle of the pattern. You can apply the backgrounds you create to the BgPatterns site to preview, and then download the image once you’ve finalized it.

You can also browse patterns created by others. It’s the quickest and easiest way to create simple, tiled backgrounds.

Stripe Generator 2.0

Creating repeating stripes for a website is time consuming.

Sure, you can create templates for common stripes you might use, but what if you want a pin stripe for one project, a wide stripe for another, and one at an odd angle for another? Soon those templates just don’t seem to cut it anymore.

The Stripe Generator 2.0 offers stripes at a variety of angles, in just about any width you choose, with or without shadows and gradients, and using any hex colors you want.

They also include a stripe gallery where you can see what others have built.

Tartan Maker

If creating striped backgrounds is time consuming, creating plaid backgrounds is a huge headache.

That’s where Tartan Maker comes in. Select the yarn size, the colors for your pattern and the angle and it creates it automatically.

You can preview your designs full screen and then download the file.

Pixelknete’s Background Dotter

This background generator creates a modern dotted background with progressively smaller dots as they move down the page.

You can select up to two dot colors and two colors for a gradient background (or just a single color for a solid background).

You can also specify the pattern’s height (the default is 700 pixels). The background created repeats on a horizontal axis.

As Button Generator

If you ignore the poorly translated text on this page, you’ll see that this is one of the smoothest button generators available. Add text, different gradients, stripes, images, and more to your buttons.

You can select the button and border colors, the overall size (using sliders or text fields) and the border thickness, and how rounded the button is.

If you include stripes, you’re given plenty of options, including color, transparency, thickness, the space between stripes and the angle.

This is definitely the most fully-featured button generator out there.

Button Maker

This button generator lets you easily create two-tone 80×15 pixel buttons.

Select the button colors, the border colors, where the split between the boxes should be, and enter the text for each side, and that’s it!

This is one of those tools that isn’t loaded with features but does what it was designed to do perfectly and seamlessly.

AJAX and JavaScript Tools

We all know Ajax can add a ton of functionality to your site. Whether you want to add a simple image gallery, an interactive contact form, or create an entire web application, Ajax is there to help.

But starting from scratch can be daunting, especially if you’re relatively new to Ajax. And even if you consider yourself a pro, it can still be time-consuming to start with a blank slate for each of your projects.

There are plenty of tools out there to speed up your Ajax development. From script collections to frameworks to specific element generators, there’s likely something available in the tools below that will make you a more efficient developer.

Ajaxload

Ajaxload is a generator to create Ajax loader icons. There are a ton of different icons to choose from.

All you have to do is set the foreground and background colors (or choose a transparent background) and then just download the generated script.

Quick and easy but it saves you a few minutes (or longer) of coding!

Mini AJAX

Mini Ajax is a gallery of downloadable Ajax and DHTML scripts.

It includes everything from modal windows to slideshows to more advanced scripts (like calendars and entire project management tools).

It’s a great starting point to find individual Ajax elements or even just to get some inspiration.

There are demos available for a lot of the scripts and all of them are downloadable from their original sources.

MooTools

MooTools is an Object-Oriented JavaScript framework. It’s definitely not designed for beginners, but can allow you to write flexible, powerful Ajax apps that are cross-browser compatible.

It’s also standards-compliant and incredibly well documented.

In addition to the core builder, there are also a ton of plugins available. MooTools can be used to create everything from simple image galleries to complete user interfaces.

jQuery

jQuery is a JavaScript library that simplifies a variety of JavaScript functions.

One of the best parts of this particular tool, though, are the number of plugins already available for jQuery.

There are ready-made plugins for everything from simple animations to forms to widgets to advanced user interface elements.

There’s likely already a plugin made for just about anything you might want to do with JavaScript or Ajax, or at least one to use as a basis for creating your own.

Script.aculo.us

Script.aculo.us is a JavaScript user interface library that includes an animation framework, Ajax controls, DOM utilities and more.

It’s used by Apple, CNN, Basecamp, and Ruby on Rails. It’s built on the Prototype Framework.

There’s extensive documentation available in the Script.aculo.us wiki, making it easy to get started.

Online JavaScript Compression Tool

Compressing your JavaScript files makes them load faster, eat up less of your bandwidth, and take up less space on your server. This tool makes compression easier.

Just copy and paste your JS files (or upload them) into this tool and then select whether you want to compress using Minify or Packer.

It automatically spits out cleaner, more efficient code. Just make sure you thoroughly test the results and always keep a backup of your original file.

JavaScript Beautifier

If your JavaScript is a bit messier than you’d like (or almost impossible to decipher because it’s so poorly formatted), run it through this beautifier to get neat, clean, consistently-formatted scripts that are easier to read and edit later.

The settings used are minimal, but you can choose how many spaces to use for indents, whether to detect packers, and whether to preserve line breaks.

Again, make sure you test the final code and keep a backup handy in case of any problems in your newly-beautified code.

BrowserShots

Unfortunately, different browsers render sites in slightly different ways. This can be a huge headache, especially if your clients are using one browser and you’re using a completely different one.

If they’re seeing things that aren’t showing up on your end (or vice versa), it can create problems on both sides.

You can always install multiple browsers on your computer, but a) that’s a waste of disk space and b) what about browsers that aren’t available for your OS? That’s where BrowserShots comes in.

You can choose from virtually every major browser in existence, including obscure browsers like Minefield and Epiphany.

BrowserShots shows you screenshots of only the browsers you’ve chosen to view, so you can choose as many or as few as you want.

Just remember that the more browsers you choose to test, the longer it will take. The way BrowserShots is set up, though, you can just bookmark the page and come back later to see your results.

Firebug

No list of web designer tools would be complete without mentioning the Firebug Firefox plugin.

Often thought of as the single most valuable tool in a designer’s arsenal, Firebug makes debugging and editing your code (whether it’s JavaScript, CSS, or HTML) infinitely easier.

You can tweak your CSS right in your browser. Visualize the way your CSS boxes are aligned. Edit any element on your page right in your browser.

Debug your JavaScript and find errors faster. And that’s just scratching the surface of what Firebug can do.

It really is a must-have tool for every designer out there. Once you use it, you’ll wonder how you ever designed without it.

Compiled exclusively for WDD by Cameron Chapman.

Which tools do you use the most? Which other tools do you use that we may have missed?

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: Z2Dn3e

Designers and developers often seem to come from different planets and have completely different brains.

Developers want a website to work right, designers want it to look right.

A few weeks ago, we explored the main pet peeves that web designers have with web developers, and suggested some solutions for them.

Today, we will discuss the other side of the coin: the five most common gripes that developers have with designers.

PEEVE #1: “Why do designers want to create everything in Flash?”

The website is a mere button and some text, but the designer insists on using Flash, even if it triples the downloading time.

Issue
For some designers, using core web technologies (HTML, CSS and JavaScript) to create a web page can feel like the death knell of innovation. They limit their creativity and force them to depend on the developer to realize their vision.

Flash gives designers potentially unlimited design possibilities, and they can retain far more control over the final product, especially if they know ActionScript. With Flash, designers can choose from any typography, tilt and skew elements, add animation and create special effects that are just impossible in boring ol’ HTML.

Solution
The first question to ask yourself as the developer is, “What is the best technical solution to the problem?” It may be core web technologies, or it could be Flash. Having an open mind is important. To determine what would work best, sit down with the designer and agree on a list of technical and design requirements for the project.

For example, explore whether the page has to load quickly, use a particular font for marketing purposes, meet accessibility guidelines or have animation. Once you answer these kinds of questions, you will be better able to weigh the pros and cons of using Flash.

Informing your designer about JavaScript frameworks such as Dojo and jQuery is a good idea. They may not realize the interactive functionality and special effects that can be achieved with AJAX and DHTML.

PEEVE #2:”Has the designer even heard of HTML CSS?”

The designer has created a great design using Photoshop, but the web just doesn’t work that way.

Issue
Some designers seem to be willfully ignorant of even the most fundamental aspects of web technology. This can result in designs that are plain unrealistic or extremely difficult to recreate on the web, that rely too much on images for simple typography or that lead to a subpar user experience.

Solution
CSS is the language of web design, and designers working in the medium really have no excuse not to understand its basics. I liken this to my earlier work in print design. I didn’t have to know how to run one of those mammoth industrial printing presses, but I did have to know about trapping, half-tones and CMYK.

I had to understand the fundamentals of the printing process if I wanted to achieve the best results with my designs. The same is true for web design. Designers don’t need to know how a server works, but they should have basic knowledge of line height, padding, background images and the other factors that make up the web development process.

PEEVE #3: “The designer gave me a PSD with 50,000 unnamed layers and no folders!”

You download the 50 MB Photoshop document, wait five minutes for it to finally open, start to cut a simple button background and are faced with a wall of unidentified layers in seemingly random order and half of which have been turned off.

Issue
Developers have to keep their documents well organized, or else they won’t be effective. However, if something looks right in the view port of Photoshop, then that’s often good enough for the designer. To a developer who is used to object-oriented programming (OOP) and a logical order for code, this can be a nightmare!

Solution
Developers aren’t the only ones who get frustrated by disorganized and cluttered PSD files. As a creative director, I sent back more than one PSD with a request that the designer organize and name all the layers. Address this issue with the designer as early as possible. Make it clear that you will need a clean and organized file.

If that isn’t possible (or the designer is just stubborn), one trick for finding the layer of an object is to right/Ctrl+click it in the view port with the Move tool (the keyboard shortcut is “v”).

A contextual menu of all of the layers and layer groups under the cursor will appear. Select the layer that you want and, if the Layer Palette is open, the correct layer will be highlighted.

I also highly recommend asking designers to learn how to use Photoshop’s Smart Objects. Smart Objects allow you to collect the various layers that make up an object (for example, the layers that contain a button) into a discrete file embedded in the main Photoshop file.

Smart Objects are easy to use and offer several benefits:

• They create an “object-oriented” Photoshop file, in which repeated elements have a single “symbol.”
• They can be output as web-ready elements without the need for messy layer-slicing techniques.
• They make organizing the PSD easier by reducing the number of layers in the master file.

PEEVE #4: “The designer didn’t accommodate for real-world content.”

We are using a CMS system that gives the client full control of the content. The design mockup, though, shows only one line of text for headlines and one paragraph of text for teasers.

The designer expects balanced module heights and columns, but we can’t anticipate the amount of copy that will need to fit there.

Issue
Generating Greeked (or “Lorem Ipsum”) text is a time-honored method of adding realistic-looking content, in the absence of the website’s final copy. However, because it’s not real content, it can lead designers to make erroneous conclusions about the page’s final design.

Solution
Design comps are static, but real-world web pages have to be fluid and dynamic. Designers should recognize this and cover all possible scenarios. This is one of the main limitations of creating static comps: they are not the real thing.

I find it helpful to define the height of areas that will be used to display elements such as headlines and teasers, rather than leaving them open-ended. This will help you ascertain exactly how much space they will take up in the final design.

PEEVE #5: “The designer expects me to guess what styles (s)he has used.”

The designer hands you a comp with no explanation and expects you to figure out the font family, line heights, colors, widths, padding, borders and margins.

Issue
Unlike creating a mockup in Photoshop, web development is generally not done in a WYSIWYG (what you see is what you get) environment. Rather, the developer assigns specific values for measurements, colors and typography.

Solution
I see this breakdown in communication in a lot of projects; it highlights one of the biggest differences between “design” and “development.” Even if the designer used a template with a predefined grid, the developer often has to eyeball other styles.

Having the designer create a style guide as a deliverable, then, is important. The style guide will serve as an agreed-upon blueprint for the design and reduce confusion.

Special Bonus Peeve: “I don’t need no designer telling me how to program!”

The designer wants something done a particular way, whether or not you, the developer, thinks that way is advisable.

Issue
Designers telling developers how to code is just as frustrating as developers telling designers how to do their job. But the line between designer and developer is often thin, and sometimes both roles are vested in the same person.

If you have clearly defined responsibilities for a project, hearing someone who was not involved in the decision-making process second-guess your conclusions is irritating.

Techniques that seem fine to others on the surface don’t always fit the programming environment you’re working in. Explaining the details of your technical decisions takes precious time, when all you want is for the designer to trust that you have made wise decisions.

Solution
Listen to what the designer has to say about technical alternatives; you may not have thought of all of them. More than once, I’ve been in discussions with designers who brought Solutions to the table that I was not aware of, like the first time I saw jQuery in action.

Remember that you and the designer (hopefully) share the same goal of creating the best product possible. If you keep an open mind and a level-headed approach, you can’t go wrong.

Written exclusively for WDD by Jason Cranford Teague. He offers specialized web consulting services and training sessions. You can pre-order his new book, Speaking In Styles: The Fundamentals of CSS for Web Designers at Amazon.com.

Which pet peeves do you have with designers? We’d love to know more about this, please share your comments below.

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: Z2Dn3e

There are apps for everything from business to shopping to image management to video editing.

And plenty of applications are useful to designers and developers, including HTML text editors, Flickr search apps, color palette management tools and even ones to help with the business side of the industry.

Below are 40 awesome AIR apps that we have selected to help you streamline your design and development workflow.

Color Tools

Kuler Desktop
View RSS feeds of the newest, highest-rated and most popular color themes, as well as random ones. You can browse or search for color themes and then import them directly into Creative Suite 3 Illustrator, Photoshop and InDesign.

Color Browser
The Color Browser application lets you store your color palettes locally. It works with ASE files, so you can import your Kuler and COLOURlovers palettes.

COLOURlovers Desktop Color Finder
The COLOURlovers Desktop Color Finder lets you search the entire COLOURlovers database, which contains over 300,000 color palettes and almost 1 million named colors.

Contrast-A
Contrast-A is a tool for checking the contrast between different colors, according to both WCAG 2.0 and 1.0. It allows you to view RGB colors in a three-dimensional model.

Image Tools

ImageSizer
A simple application to resize images in batches. It includes settings for quality and a crop tool for individual images.

Icon Generator
The Icon Generator helps you create CS3 and Web 2.0-style icons in three easy steps.

Shrink O’Matic
Shrink O’Matic is a batch image resizer that works with JPEGs, GIFs and PNGs. It resizes, names and formats images using a simple drag-and-drop interface.

Random Patter
Random Patter lets you create random patterns based on images and other parameters. The outputted file can be saved as an SVG document.

Splashup Light
An image editor for simple image enhancements. It allows you to adjust levels, contrast, brightness, hue, saturation and more.

JustResizeIt!
Resize images by dragging and dropping them in and out of this program. You can also create widgets that contain preset definitions for resizing.

PNG Icon Generator for Adobe AIR Applications
A simple app for creating AIR application icons in all four icon sizes out of one 256×256 PNG file.

BetaDesigns Caliper
Caliper lets you measure anything on your screen. It floats above other programs, can be rotated 360º and takes pixel-perfect measurements.

Flickr Desktop Search
Flickr Desktop Search lets you search for Flickr photos, groups and people right from your desktop.

WebKut
A screenshot application that lets you capture an entire web page, your current view or a section of the page.

Websnapshot
Capture a screenshot of any web page with Websnapshot just by entering the URL or dragging and dropping the page into the program. It also lets you select the type of image you want captured: thumbnail, browser size or full page.

Wireframing and Prototyping

iPlotz
iPlotz is a downloadable application for wireframing and creating clickable, navigable mockups of websites and apps. It comes with collaboration and project management tools. The desktop version is $75.

FlairBuilder
FlairBuilder is a wireframe, prototype and mockup builder. It supports multiple projects, includes a components library featuring common website elements (buttons, drop-downs, etc.), and has plenty of formatting options. The trial version is free, and the full program costs $99.

Balsamiq Mockups
Balsamiq Mockups lets you create website mockups in an environment that makes you feel as if you’re simply drawing a picture. The desktop Air version is $79, but you can try it for free (although you will not be able to save any of your files without a license key).

Typography and Fonts

.merlin
.merlin is a free font organizer. It handles OTF, TTF and Type1 fonts.

Font Picker
Font Picker does just what its name suggests: it helps you pick fonts for your design projects from the ones already installed on your computer.

SEO and Analytics Tools

Demandbase Stream
Demandbase Stream lets you see in real time and on your desktop which businesses are visiting your website. It allows you to filter the data, set up a watch list, see the search keywords that visitors used to reach your website and see the pages that visitors are currently viewing.

SEO Analyzer
SEO Analyzer checks your page rank and analyzes your links and keywords for their search ranking effectiveness.

Framework and Grid Tools

Boks
Boks is a free user interface for working with the Blueprint CSS framework. It handles baseline rhythm and grid configuration, CSS and grid.png exporting and HTML layouts.

Em Calculator
The Em Calculator calculates the vertical rhythm of your designs in em units rather than pixels.

Collaboration and Presentation Tools

Live Presentations
Its owners describe Live Presentations as “presentation software for the Internet generation.” It works online and offline, lets you share and collaborate with others and allows you to import and export to PowerPoint, among other things.

ConceptShare Desktop Companion
If you already use ConceptShare, the Desktop Companion makes it easier to share media files. Just drag and drop files from your computer to a new or existing ConceptShare workspace.

Business and Project Management Tools

Ora Time and Expense
Ora Time and Expense is a free, easy-to-use application for creating and managing timesheets, expense reports and invoices.

FEAT (Freelancer’s Estimation Assistance Tool)
This tool helps freelancers create more accurate pricing estimates. It stores values that you set to save you time when creating estimates in future.

Klok
Klok is a time-management and tracking application that simplifies the process of working with multiple projects, clients or tasks simultaneously. Just press a button when you start working and then again when you stop, and Klok tracks everything else.

Google Calendar Invoice Creator
If you use Google Calendar for time management, this app makes it easy to create invoices from your calendar’s RSS feed. It creates text and HTML-formatted invoices.

timeloc
Timeloc tracks the time you spend working on projects. It can handle multiple projects and clients, lets you edit the billing period and change the rate per client and uses audible alerts and reminders.

Doomi
Doomi is a simple app for to-do lists. It shows current to-do items, along with archived tasks.

Backup and Archiving Tools

Fireworks AutoBackup Utility
If you use Fireworks, this app will continually back up any PNG images you use in the background as you work. It automatically saves a copy of the working file at intervals that you specify.

BackIt Archive Tool
BackIt lets you batch archive and copy files from your computer to a USB drive or CD. It has a drag-and-drop interface and stores your settings and current selections.

Other Useful Tools

De MonsterDebugger
A free, open-source debugger for Flash, Flex and AIR. It includes live editing, method testing and a tree structure, among many other features.

Fnk
Fnk is a visual programming environment for using a dataflow approach to real-time analysis of data from images, sounds and other sources. It simplifies the creation of multimedia presentation prototypes that respond to a number of input and output devices.

SQLite Sorcerer
SQLite Sorcerer helps you perform the primary admin functions for your SQLite database. It supports the creation of new databases, opening recent databases from a list and retrieving the entire structure of a database. You can even compare the structure of two databases. You can also create, delete and modify tables and data and check the results of SQL that you write.

TweetDeck
This is a great app for managing you Twitter account(s). It lets you update, post images, shorten links, and group those you follow. And there’s even an iPhone app you can use that will sync with your Air version.

htmlText Editor
htmlText Editor is a simple visual WYSIWYG editor for HTML text editing.

Snippely
Organize all of your code and text snippets in one place with Snippely. You can also save snippets in groups for quick retrieval.

RichFLV
RichFLV lets you edit FLV files. It enables you to read, edit, modify and delete cue points, cut FLVs, convert FLV to SWF and modify the sound on FLV files, among other things.

Compiled exclusively for WDD by Cameron Chapman.

Which ones are your favorites? Please suggest other apps that we didn’t mention in this article…

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: Z2Dn3e

Well, anyone who says this is one of three types of designers:

One who copies, one who steals or one who admits that not copying and stealing is hard but still tries not to anyway.

For some reason, a lot of web designers believe that there’s nothing truly unique left to create and that there is no such thing as originality.

I disagree, or at least I don’t want to accept that notion. You shouldn’t either.

Designers who copy

These people are at the bottom of the design pyramid, which isn’t necessarily a bad thing. You have to start somewhere.

Designers who copy are novices who haven’t yet grasped what makes a great design great, and so they imitate.

They frequent web galleries, pick a site they like and find a way to recreate and adapt it to the project at hand. This is how anyone learns anything. In fact, this is how we learn to, among other things, walk and talk as babies. We imitate to build a foundation of experience.

My very first website was a fan site for the anime Dragon Ball Z, which I loved as a kid. In the process of creating this site, I taught myself HTML by copying the code from another Dragon Ball Z site that I liked.

I literally copied and pasted all of the code, but then I went through it line by line, learning what each tag did. By the time I designed my next site, I was able not only to understand code but to create my own code from scratch.

Designers who steal

These are, of course, the people who say, “Good designers copy. Great designers steal.” Filmmaker Jim Jarmusch once said:

“Nothing is original. Steal from anywhere that resonates with inspiration or fuels your imagination. Devour old films, new films, music, books, paintings, photographs, poems, dreams, random conversations, architecture, bridges, street signs, trees, clouds, bodies of water, light, and shadows. Select only things to steal from that speak directly to your soul. If you do this, your work (and theft) will be authentic. Authenticity is invaluable; originality is non-existent. And don’t bother concealing your thievery; celebrate it if you feel like it.”

This sums up these burglars well. Once a designer has copied another’s design and feel they have a grasp of what makes a great design great, their natural inclination is to go and create their own great and unique design.

But they soon discover that doing that is not as easy as the other designer made it seem. They learn that the dirty secret of many great designers is that they steal.

In design, to steal is to take inspiration from other people’s work. Designers who steal may frequent online design galleries, like designers who copy, but they know how to hide their sources.

“The secret to creativity is knowing how to hide your sources.” —Albert Einstein

They take only pieces of sites or just the overall concept or theme of something. In 2003, designer Cameron Moll wrote an article titled  “Good Designers Copy, Great Designers Steal” in which he shows the source of a logo he created.

Moll explains:

“The chances of someone else having used this particular piece of clip art were very slim. And the chances of the intended audience — or anyone else, for that matter — being familiar with such a piece were even slimmer. Translation? A perfect source for stealing.”

Designers who try not to copy or steal

It’s a fact that we can’t help but be influenced by our surroundings. Designers steal all the time without realizing it.

A designer may look at the curvy lines of Moll’s logo above and months later may create a logo very similar to it without actually recalling where they got the idea from.

Designers in this category are aware of this habit. They know that creating something truly unique is almost impossible, but they try anyway.

To try, they may start by looking at online print galleries, instead of web galleries. They may also begin looking at package design, architecture, photography, nature—anything but web design—in an attempt to be authentically inspired rather than simply steal.

They look not just for design that works but rather for ways to make designs better.

After walking around a park in search of inspiration for a blog on nature, a designer may find him or herself using images of grass and soil to dress up the footer of the site to look like ground. They might add some birds to the header.

Or, after sitting on a bench and noticing the relationship between foreground and background, they might play around with the user’s sense of perception.

The further a designer who seeks inspiration moves away from web design, the more likely their designs will turn out truly original.

To sum up…

The pursuit of originality on the web is not a lost cause. The web industry is still young, and some things have yet to be attempted.

Once you understand the basics of design, try to think outside the box, and try new and different things. Be atypical and unique. Experiment. Don’t be afraid to design from the heart. But keep this in mind:

“Things which are different in order to be different are seldom better, but that which is made to be better is almost always different.” —Dieter Rams

In our striving to be unique and original, trying different things for their own sake is okay because they could potentially lead to better things. It’s a lot like throwing darts at a target blindfolded. You may never hit the target, but you just might learn something in the process. But do try hard to make something better than just different.

Not too long ago, people thought the Earth was flat and the center of the universe. Not too long ago, either, designers used the <blink> tag and used tables to build websites.

Theories and conventions are always being questioned, challenged and broken, and they should. If you believe a better way is possible, you will often find your way to it.

“The most innovative designers consciously reject the standard option box and cultivate an appetite for thinking wrong.” —Marty Neumeier

Written exclusively for WDD by Lucian Tucker.

What type of designer are you? Please leave your comments below…

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: Z2Dn3e