WordPress theme development and design is quickly becoming one of the most popular forms of web development. Whether you’re building a custom theme for a client’s website or designing a theme for widespread distribution, WordPress theme development is one of the most sought-after skills in our industry currently.

As a freelance web designer specializing in WordPress, I spend roughly half of my time designing themes to release as commercial products through my company, ThemeJam. The rest of my time is spent building custom themes for clients through my consultancy, CasJam Media.

In this article, I will break down these two avenues of WordPress theme development and discuss how you, the designer/developer, might approach each situation differently.

For the sake of easy labeling, I’ll refer to each as follows:

• Custom Theme: Refers to a theme designed for a client or personal project.
• Public Theme: Refers to a theme designed for distribution as a commercial product or free download.

Getting the Gig

How does the task of designing a WordPress theme come about?

Custom Theme

If it’s a custom theme project, the job may have come about in a variety of ways. Perhaps it’s for a client that hires you directly. Or you may be working for an agency or acting as a sub-contractor. Perhaps it’s a custom theme design for your own personal project, like your portfolio website or personal blog.  

The one thing that all of these scenarios have in common is they come with a set of defined project requirements. Your job is to deploy a custom WordPress theme that delivers on these project objectives. 

Public Theme

Designing a theme as a commercial or free product? There are several ways to this:

• Submit your theme as a free download in the WordPress.org themes directory
• Promote and sell (or give away) your themes through your own website
• Sell your themes through one of the popular theme marketplace sites like Mojo Themes or ThemeForest.

The key difference between a custom theme and public theme is you’re designing for a wide range of users who will use your theme in a variety ways. Your job is to walk a balance between functionality and flexibility while ensuring a smooth user experience.

The Audience

Who are the consumers of your custom or public theme?

Custom Theme

Designing a theme (or any site for that matter) for a client begins with a careful analysis of their target audience. You want to analyze whom they are marketing to (age, gender, interests, industry, location, etc.). You also want to fully understand your client’s business goals and how they can be achieved through a WordPress-driven website.

In addition to designing for your client’s target audience, you must also consider the needs of the client who ultimately will be the one managing the site via WordPress. Is your client web-savvy? Have they used WordPress before? These things may affect the way you set up the admin side of your custom WordPress theme.

Public Theme

Designing a theme for public release requires a very different approach when considering the intended audience. This is mainly because you really have no way of knowing who the audience is. Consumers of your theme come from a variety of industries and they will deploy your theme in a variety of ways.

The general rule of thumb here is to design for universal appeal. You want to keep things flexible and open-ended so that consumers will be able to tweak your theme to suit their specific needs.

Even if you’re designing a niche theme, such as a WordPress theme for a wedding blog, you still want to be sure that it will appeal to a wide audience within that niche.

Lastly, you should construct your theme with both developers and non-developers in mind. A large portion of your theme’s consumers will be web developers seeking to use your theme as a basis for their customizations.

Make things easy for developers and they’ll come back to your themes for all of their client’s websites!

The rest of your theme’s consumers will be non-developers, so your theme must work flawlessly out of the box without technical issues.

Design Considerations

What things about the design of a WordPress theme do you need to take into consideration?

Custom Theme

When designing a theme for a client, you can custom-tailor every detail to their specific requirements. Every design decision you make should serve a purpose related to your client’s goals and how their audience will use the site.

You need to create a layout that frames and presents their content in the best way possible. You have to conceptualize the flow of information through the site and implement theme navigation elements accordingly. In this sense, you’re designing with very specific guidelines in place.

But there are some creative freedoms at play here as well. For example, you can explore and develop much nuanced styles and treatments that speak directly to your client’s audience. You can try very specific typography choices using a service like TypeKit, which is a luxury not usually available when designing a public WordPress theme.

Then you have several rounds of client review, revisions, and sign-off. The extent of this process can vary depending on many factors ranging from contractual agreements to levels of company bureaucracy on the client’s end. Sometimes it’s a painless process, sometimes we tear our hair out trying to satisfy a client from hell (we’ve all been there).

Public Theme

The thing I love most about designing themes to release as products is the design process itself. There is no back-and-forth with a client and no contractual "sign-offs" involved—things that often add a lot of stress to the process. I get to run with what I think are my best ideas and what users will find most useful.

That’s not to say the designs are not impacted by user feedback. I like to ask for design feedback via Twitter. I also take into account which design approaches translate into higher download counts and sales.

Without a doubt, you can’t go wrong with a clean and simplified design approach. This makes for the most universal appeal.

It’s also a good idea to take various forms of content into account. The design should be flexible enough to accommodate a text-heavy blog as well as a multimedia-heavy (image/photo and video) one.

I also like to make several design features optional, meaning the user can easily enable or disable them via the theme options.

In addition, I often package several color options with theme, which are activated via distinct CSS stylesheets.

Clean Slate, one of my commercial WordPress themes.

Development and Features

What are the differences in development processes and feature specifications between a custom and commercial WordPress theme?

Custom Theme

The nice thing about coding a WordPress theme for a specific client is that there are few unknown variables. You likely know where the site will be hosted, which version of WordPress they’re running (hopefully the most recent), what type of content will be managed using the theme, etc.

Generally speaking, theme options and multiple widget areas are not as important when designing a custom theme for a client. Sure, a widgetized sidebar or footer might prove useful, however, sometimes this can cause more harm than good.

Depending on your client’s comfort level, it may serve them better to hard-code certain elements that won’t be changing very often (such as the primary navigation menu). This can protect against potential damage done by a curious client tinkering with the settings.

Other functionalities (such as contact forms) can often be achieved through the use of a plugin. Working for a single client, you’re able to implement a plugin of your choice and ensure it integrates seamlessly with your theme.

Public Theme

One of the most difficult things about developing a WordPress theme for mass consumption is that you must anticipate many different variables. Some web hosts are more WordPress-friendly than others. Ideally, your theme will be compatible with all hosting environments, but some will throw you curve balls.

You also can’t predict which plugins will be installed in conjunction with your theme. It’s impossible to guarantee compatibility with all third-party add-ons, but ideally, it should work with most—assuming the plugin is coded properly.

Clean and organized code should be a given in any web development project. But this is super important when constructing a WordPress theme for commercial release. As discussed earlier, you want it to be developer-friendly. Make it easy for developers to navigate through your code and make modifications. That means thoughtfully commenting your code, employing proper indents, and adhering to web standards.

It’s also a good idea to keep your coding style consistent across all your themes, giving repeat customers a sense of familiarity with your code.

Theme options also play an important role in distributed themes. Things like adding your own logo, configuring a featured posts slider, or inputting Google Analytics tracking code are all useful features to include in a theme options panel. However, I prefer not to go overboard here. You want to meet your user’s needs for flexibility, while not confusing them with too many options.

Customer/Client Support

Supporting your product can be very different for custom themes and public themes.

Custom Theme

Many of the client projects I work on also involve a certain amount of consultation and support during both the design process and post-launch.

If the client is not already familiar with WordPress, you may need to provide written documentation or training sessions on how to create posts and pages, manage the home page content, and other content management tasks.

You may also be tasked with installing, activating, and launching the theme on your client’s live website. This may include additional debugging and ongoing consultation.

The benefit here is that you’re only providing customer support to one person or group of people: your client. Once all of their questions are answered, your support duties are pretty much behind you. There may be ongoing (paid) work involved (such as maintenance and updates), but for the most part, the project is complete.

Public Theme

Dedicated customer support is often one of the biggest selling points for commercial WordPress themes. It has become an expectation that if you charge for your theme, you guarantee some type of support. Many free themes also come with a varying level of support from the theme author.

Support can be conducted via a support forum, which is the most likely method for large theme companies.

If you’re releasing a single theme or two on your blog, you might answer support questions in your blog comments. Undoubtedly, some customers will seek personalized support via email, which may or may not be something you’re willing to provide. My stance is I don’t officially offer email support, but I usually try to help out whenever I can. Users and customers appreciate it when you go above and beyond, and it often results in more referrals to your themes.

Don’t underestimate the time commitment involved in offering customer support for a distributed WordPress theme. The more downloads/sales you have, the more support requests will come in. Support can — and likely will — be ongoing over the life of your theme company so be prepared to dedicate a significant amount of time to customer support. For commercial theme companies, support is usually the first thing to consider when building a scalable business.

To a certain extent, you can offset your customer support obligations by providing thorough documentation on using your theme.

In addition, it’s a good idea to have detailed instructions built-in alongside your theme options.

Finally, you must thoroughly test your themes to iron out all of the bugs before releasing it into the wild.

What’s Your Take on Custom vs. Commercial WordPress Themes?

Please share your thoughts on custom vs. commercial themes.

<!–

Related Content

• WordPress 3.0: Ultimate Guide to New Features
• 30 Excellent WordPress Video Tutorials
• Using XAMPP for Local WordPress Theme Development
• Related categories: WordPress and Web Development

About the Author

<!–

Brian Casel is a freelance Web Designer and WordPress Specialist. He operates ThemeJam, a premium WordPress themes company and CasJam Media, his freelance web design business. You can follow Brian on his blog at briancasel.com and on Twitter as @CasJam.

 

 

By Cameron Chapman

Because of the potential for variations in the different aspects of a web design project, creating a proposal or invoice for such a project can be trickier than that of another industry like accounting or legal services. If your proposal isn’t created carefully, it can lead to misunderstandings and unhappy clients (not to mention the grief it can cause you). The same is true for invoices: if it’s not clear what they’re paying for, clients can delay making payments or dispute charges.

There are two main factors to keep in mind when preparing a proposal or invoice: First, you’re likely dealing with people who are not yet your clients; and second, you’re dealing with clients who you (probably) hope will bring you repeat business. This article will offer a number of tips, based on those two principles, to help designers creative effective proposals and invoices.

Image source

Proposals

We’ll start with proposals, since you’ll have a need for them before you need an invoice. There are probably as many web design proposal formats as there are web designers. A lot of what you include in a proposal is a matter of personal choice. But there are a few things that every proposal should include.

The Basics

A proposal should include basic information about your company (contact info, mostly), information about who the prospective client is, and the fact that this is a proposal.

In many cases, you would include your logo and business name, along with your contact information, at the top of the page. Then, below that, you’d include your client’s contact information. Put the date somewhere near the top, too. Finally, put the word “Proposal” or similar, preferably in bigger type and bold. These things are just formalities, but they’re still important and it’s completely possible that some designers might forget to include one or more of these in their rush to get a proposal out the door to a new prospect.

The Project’s Scope

Somewhere in your proposal you’ll include information about the scope of the project. Is this going to be a simple brochure site? An online store? Will it have a blog? An intranet or members-only area? Community features? There are tons of variables that go into the creation of a website, and it’s important to describe at least the major ones here. Make sure you understand what your prospective clients are looking for before you send a proposal to them (this should be done in a discovery phase, with either a formal or informal client questionnaire).

This section should be clearly indicated, but can be formatted either as a series of bullet points or in paragraph form. Which one works best will probably depend on the type of site and how many features it will have. A bulleted list can give a more polished look and make it easier for the client to read — as long as there aren’t too many points. Don’t be afraid to use bold or underlined type to highlight particularly important sections.

Ideally, you want to include a problem statement at the beginning of this section (or possibly as its own section if it’s long enough), where you restate and rephrase what the client is looking for, to make sure you understand what they want, and to ensure they know that you understand their needs. Make sure you make it clear to your prospective client that you understand what their needs are, what their company is all about, and that you can help them reach their goals.

This is also the section where you want to make it clear what are your capabilities. The more specific you are about what you can and can’t do for a client, the less likely they are to make incorrect assumptions, and the more confident they’ll be in your abilities. By being honest up front, you build trust with your client, which makes them more likely to hire you, and, if the proposal is approved, they’ll be more likely to listen to, and trust, your suggestions during the course of the project.

The Project Timeline

Generally, web design clients want to know how long it will take for their website to be up and running. My advice: take a page from Scotty’s book

(from the original Star Trek series). Under-promise and over-deliver. In other words, if you think something will take you two weeks, tell your clients it will take three.

Image source

There are two reasons for taking this approach. First, every project will have its unexpected problems and challenges — maybe your client submitted artwork three days late, or maybe the domain they wanted was already taken and it took them a week to come up with an alternative, or maybe the hosting they purchased ahead of time doesn’t support databases or PHP5. Whatever the reasons, giving yourself some buffer time means you aren’t scrambling to meet deadlines that are suddenly unrealistic or delivering the project a week late.

But there’s an even more important reason to under-promise and over-deliver: If everything lines up properly and you don’t run into any problems, you will gain the reputation of being faster and more efficient than other designers. In both cases, you end up with happier clients without pulling out all of your hair!

So, come up with a realistic timeline for the project, breaking it down into milestones if it’s a particularly large or complicated site. For example, you might promise initial mockups in two weeks, a functional site for testing in a month, and the final site in two months. For a smaller site you might promise the mockups by the following week and the finished site a week after the mockups are approved.

In creating the written timeline, be sure to mention that some milestones may depend on the client’s approval. It’s not unreasonable to set incremental deadlines that require the client to review certain aspects of the project. In the documented timeline you want to inform them that any delays on their part will affect the overall timeline.

The Project Costs

Including project costs in your proposal in a well-outlined and well-explained manner can contribute to how happy your client is and how long it takes them to pay their bills. You’ll want to break down the costs based on phases or parts of the project. How you do this depends on how you normally bill clients and how complex the particular project is.

For very simple websites, you might write “Brochure site, 4 pages with contact form, $500″ or similar. For a more complex site, however, you’ll need to break it down into separate items. You might have a fee for the basic design, a fee for adding ecommerce capabilities, a fee for some original artwork, and maybe a fee for custom coding. In either case, make sure you outline whether this is a flat fee or based on an hourly rate (and how many hours that covers).

Outline potential additional charges, too. These might cover things like domain name registrations, hosting setup and monthly charges, and ongoing maintenance fees. Including these details in the proposal will help avoid any surprises from a client perspective.

Other Things to Include

There are other less important things you might want to include in a proposal, depending on your own normal business practices and your individual clients. These include:

Image source

• Make sure you’re accessible. Make sure you include multiple methods for the client to contact you by. At a minimum, the client should have your email address and a phone number, but also consider including your cell number, and one or more IM usernames, if it will fit the circumstances.
• A confidentiality clause. You may want to include a confidentiality clause in the proposal, making it clear to your prospects that the information contained in your proposal should not be shown to others (especially other designers).
• Technical specifications. Some designers like to specify exactly which browsers the site will work in, as well as any special or proprietary technologies the site will use. This might also include specifying a particular CMS.
• Original artwork creation. Sometimes a web design client will want you to revamp their logo (or create one from scratch) or do some other original design work for them. These things should probably be specified separately.
• Payment terms. If you have a payment plan worked out with your client, the proposal would be the best place to spell it out. You might also mention things like penalties for not making a payment on time.
• A short company or designer bio. Giving your prospective client some idea of who you are and what you’ve done in the past may make their decision a bit easier. Putting that information on the first page of your proposal makes it easy for them to remember why they considered hiring you in the first place.
• A cover page. A cover page is a great place to include things like your company bio and your confidentiality clause. It can also make the proposal look more professional, especially if the proposal is more than a couple of pages long.
• Headers and footers. Including a header and/or footer with your contact information and page numbers makes it easier for prospects to keep your proposal organized and for them to contact you without having to flip back to the front. This also helps it look more polished.
• Moodboards and/or wireframes. For particularly promising projects, or for ones where you’re pretty confident the client is going to hire you, including a couple of wireframes or moodboards (with color schemes or other design elements) can be a nice added touch. Just don’t put too much time into it or give too much away until you actually have the project.
• Case studies. Including case studies of similar sites or projects you’ve completed can also give clients more faith in your abilities. Include any relevant projects, but limit this to 2-4 strong and applicable examples, to avoid overwhelming your prospects.
• Include a cover letter. Give a very brief introduction and overview, in an email or cover letter, of what’s included in the proposal, what your qualifications are, as well as your contact information.
• Schedule a meeting. When you email or otherwise send the proposal to your prospect, include in the proposal a request for a meeting to discuss any questions they might have about your proposal or the project itself. Knowing there is a possible follow-up meeting might make it more likely that the client will review your proposal in a timely manner.

Don’t Forget…

Here are some other things to keep in mind when preparing your proposal:

• Spell check and proofread! There’s nothing worse than getting a proposal that’s littered with typographical and grammatical errors. Remember that your computer’s spell check isn’t foolproof. Do a manual proofread, too — preferably on a hard copy.
• Ask your client whether they prefer a printed or digital version of the proposal, and if digital, which file format they’d prefer.
• If it’s a print proposal, use high quality paper and ensure that your printer isn’t running out of ink; you want your proposal to look as professional as possible.
• Use a customizable template to make the creation of future proposals easier and more streamlined.
• Be neat and professional, but don’t over-design your proposal; its purpose is to get the information across, not to show off your design skills.

What’s Next?

So, you’ve crafted the perfect proposal and sent it to your prospective client — now what?

If you haven’t heard back from the client within a week or so after submitting the proposal (and assuming you didn’t schedule a follow-up meeting when you sent the proposal), it’s fine to follow up. Whether you want to email or telephone is up to you, and may depend on the type of client you’re dealing with. But get in touch to make sure they received the proposal, and to see if they have any questions. If they haven’t made a decision by this point, try to find out when they’re likely to do so. Then, plan to follow up again after that date if you haven’t still heard.

Image source

Now, assuming they decide to hire you, what are the next steps? You’ll want to get a signed proposal or contract from the client, along with a deposit. Whenever you’re working with a new client, you’ll always want to get a deposit of anywhere between 25-50% before you start work (which should have been specified in your initial proposal). Once those are received, you’ll want to schedule the milestones and deadlines that were outlined in the proposal’s timeline. Keep your client up to date on your progress, especially if it’s a long-term project (weekly or bi-weekly updates are often appropriate).

If you know you’re going to miss a deadline, let your client know as soon as possible. They’ll appreciate the advance notice, especially if the next milestone requires some kind of action from them (such as reviewing artwork or beta testing). Keep on top of your clients to make sure they comply with any deadlines agreed upon in the proposal (such as providing artwork, reviewing the site, or making scheduled payments). When you send them files to review, include a note to remind them of their responsibility to provide feedback within the specified time that was outlined in the proposal. This will help reinforce that you can only meet your deadlines if they meet theirs.

Constant communication with your client is key to making any project run smoothly. Make sure your clients know they can come to you with any questions or concerns they may have regarding the project. Do the same with them. If you have questions about something they’ve sent to you or some aspect of the project, ask them. It’s better to ask and get it right the first time than to spend hours or days doing something you’ll have to change later.

Further Resources:

Professional Web Design Proposal Template

A downloadable template for creating your proposals.

Writing a Website Design Proposal

A great post from Propaganda Party on what makes a great design proposal.

Write a Winning Graphic Design Proposal for Your Business

A very detailed article on creating proposals.

Creating a Winning Proposal for Web Projects

An awesome article from Peachpit about the web design proposal process.

Website Design Proposal Template

Another great template to serve as a basis for your own proposals.

How to Write a Web Design Proposal

A detailed post from Bidsketch on creating web design proposals.

7 Tips for Writing a Winning Web Design Proposal

This post from SitePoint offers some excellent tips for creating a proposal.

Secrets to a Great Sales Proposal

Another SitePoint post about writing a proposal, this one more focused on the sales aspect.

Deliverables That Work: Design Description Documents

An awesome post from Carsonified about creating a “Design Description Document”.

The UXD Stack

A great post from 404 User Experience Design about project management in user experience design that could be very useful for structuring your own proposals (or at least deciding what information you need to include).

45 Incredibly Useful Web Design Checklists and Questionnaires

Use some of these questionnaires to gather the information you need to create a better proposal.

Writing a Project Proposal

A step-by-step guide from Tutorial Blog for creating a project proposal.

Invoices

A clear and easy-to-understand invoice will contribute greatly to ensuring your clients pay their bills in a timely fashion. Below are some guidelines that will help you create an effective invoice.

What the Invoice Should Include

Your invoices should include basic contact information for both you and your client, as well as the date the invoice was issued and the date it’s due. Always include a sequential or date-based invoice number, to help identify the invoice at a later date.

Image source

The invoice should outline exactly what the charges are, which would be broken down in the same way they were broken down on your proposal, to make it easier for your clients to verify the charges. Include whether these are flat fees or based on hourly rates (and how many hours). Depending on your location, you may need to include some form of tax as a separate item. Check your local laws to see if this applies to you.

Finally, include how you want to be paid — by check, bank transfer, or PayPal. You might consider setting up a payment gateway on your website to make it easier for your clients to pay you. Offering a discount for prompt payment can also be a good idea. It’s common for payment discounts of between one and five percent to be given for payments made within five to ten days. You should also specify if there are any late payment fees or interest charged on payments not received by the due date.

Using an Invoice Service

There are numerous online services that offer invoicing ranging from full-featured bookkeeping to simple invoice-tracking services. Some of the better solutions let you create proposals from within the app, and can manage your entire project. These services can definitely make your life much easier when it comes to finances.

Another advantage to using an online invoicing app is that it can track payments, and sometimes even calculate your income taxes based on what payments you’ve received, saving you time and hassle. See the “Further Resources” below for an overview of some available invoicing apps.

Further Resources

• How to Invoice for Design Work — A Quick Guide

  A great post that covers not only how to invoice, but collecting payments in general.

• Ask Nubby #12: How to Design an Invoice

  A comprehensive article on invoice design, including some vintage examples for inspiration.

• Get Your Money: Best Invoicing Practices for Freelancers

  An excellent article from Freelance Switch on some best practices for invoicing.

• 20 Invoicing Tools for Web Designers

  This post from Six Revisions gives a rundown of some popular invoicing and bookkeeping solutions.

• 14 Web-Based Invoicing Tools to Make Sure You Get Paid

  Another roundup of web-based invoicing apps.

(ll)

 

 

By Cameron Chapman

Occasionally, clients might present us with inspiration for a design that doesn’t come in the form of other website or graphic designs. In many cases it’s their product, packaging, or something else closely related to their business. But in other cases, it’s something entirely unrelated that they just like the looks of. In either case, it can often lead us feeling a little puzzled. How, exactly, do you turn a teacup into an e-commerce site?

But if you learn to look at things objectively, you can turn virtually anything into a website design. By figuring out what it is about the thing your client has brought you appeals to them and then translating it into a design that captures those same elements, you’ll have happier clients and fewer headaches. While this has the most obvious applications when working with clients, it can also be valuable if you’re working on your own projects and are running a little short on ideas.

Look at the Overall Shapes

The shape of something can often be adapted to a design. Look at the curves or straight lines that make it up, the balance, the size and proportion, and even the negative space and what’s missing. Think of ways you can adapt these to a web or print design.

Balance and Symmetry

Is the object or image in question balanced? Is it symmetrical or not? Sometimes a lack of balance can be translated into a design, but the results are often not as visually pleasing as we’d like. In many cases, if the item in question isn’t balanced fairly well, it’s best not to mimic this aspect of its appearance and to focus on other things instead.

Image Credit: See-ming Lee

The image above has asymmetrical balance. While the bridge and buildings dominate the left-hand side of the image, the right-hand side is brighter, making the overall image feel balanced even though the subjects of the photo individually are not.

Negative Space

The negative space within and surrounding an object, either in an image or in physical form can give valuable hints as to what your client considers attractive. Is the negative space sharp and well-defined, or does it flow and blend more smoothly? When considering how to incorporate negative space, consider both the shape of it as well as the balance of how much negative space compared to everything else. If there’s little negative space, then it’s likely your client isn’t going to be too keen on big swaths of it in their design, and vice versa.

Image Credit: Matt McGee

There’s a lot of negative space in the above image. As such, when adapting that to an actual design, the final product would likely have a ton of white space surrounding the content. In all, it would end up with a very light and airy feeling to it.

Proportion

The proportion of elements to each other can also offer valuable clues to how a client will perceive your designs. If the image or object they’ve given you for inspiration has exaggerated elements, that’s a cue to make some parts of your design over-sized. On the other hand, if everything is perfectly proportioned, you’ll need to make sure all the elements within your design are also.

Image Credit: vauvau

The image above has exaggerated proportions (it’s a children’s play house). This would be a good indication that proportion is something you can adjust to create more of a fun feeling and a sense of whimsy.

Look at Color, Pattern, and Texture

Colors, patterns, and textures are some of the easiest things to adapt to a website or other design. They’re generally straight-forward and one of the most obvious things a client likely sees in whatever they’re presenting you for inspiration. Just beware of copying colors too literally, as just because something looks great on a t-shirt doesn’t mean it will work well on-screen.

Colors

Color is probably the easiest and most straight-forward element to adapt to website design. If a client gives you an object or an image to adapt, color is obviously the first place to start. Look at not only the colors, but also the way the colors are positioned in relation to each other for design cues.

Image Credit: zehhhra

If someone presented you with the above scarf as inspiration, there’s a good chance they’d want the final design to incorporate a rainbow of bright colors. One of the best parts about this is that there’s so much you can do with such a broad palette of colors.

Patterns

The most obvious way to adapt a pattern in a design is to use it as a background, either for the entire site or just certain elements. But consider how else you might be able to use elements from it. Maybe part of it could be adapted as an icon? The exact adaptation possibilities are dependent on how abstract you want to get and the pattern itself.

Image Credit: shaire productions

A wallpaper pattern like the one above could easily be turned into a background for a website. But instead of just turning it into a tiling background for the entire site, consider using it as the background for just the header, individual headings, or the site’s footer.

Textures

Texture is another element that’s relatively easy to adapt. Look at not only the texture itself but also the feeling it gives. Is it refined? Rustic? Edgy? Grungy? Textures can be incorporated in much the same way as patterns, either as backgrounds or adapted to individual site elements.

Image Credit: Seldom Scene Photography

The rope texture in the image above is rustic, and brings to mind a maritime theme. While a client might not be thinking that consciously, it’s likely they would relate to other maritime-related elements in the site. It also shows a strong affinity for geometric shapes and repeating elements, which could be easily adpated to a design.

Look at the Details

The details in an image or object are a great way to incorporate elements without basing your entire design on what your client has brought you. In fact, sometimes including a few details here and there can please your client more than abstractly adapting a design to their inspirational piece.

Decoration

Decorations on an object or in an image are often easy to incorporate into the design of any site. Look at purely decorative elements and think of how they can be incorporated. Maybe there’s a bit of filigree than can be used to accent the header. Or maybe there’s another element that could be adapted into icons or custom list bullets. Again, this is going to depend heavily on what you’re looking at.

This image has a ton of decorative elements you could pull from. There’s the scrollwork for one. That could be adapted to accent your header. There’s the latticework in the background that could be adapted into a background texture. And there’s the spiral of the columns that could be turned into a border. There’s also the general formal, traditional, and fancy feeling that these decorations give, another valuable cue for what your client is looking for.

Simplicity

If a client brings you something that’s very simple and minimalist in nature, it’s likely that’s what they’re looking for in a website. They don’t want something complicated or busy. At the opposite end of the spectrum is someone who brings you something that’s complex and full of layers (decorations, colors, patterns, and textures all competing for attention). That client probably isn’t going to be happy with a minimalist design and wants something with more visual complexity.

Image Credit: JoshuaDavisPhotography.com

The client who brings you the above image would likely be very pleased with a minimalist website with just a hint of color. If you delivered something filled with textures and patterns and fancy typography treatment, you could almost be guaranteed a very unhappy client.

Transitions

The transitions between elements of an object or image are another valuable cue into your client’s taste. Are elements obviously separated, or do they all flow together? Does one item overlap the next, or is there white space separating them? Again, it’s a valuable indicator of what your client is going to be pleased with and what they’re going to hate.

Image Credit: kevindooley

The transitions in this image are a great example of how to take more abstract images and adapt them to your designs. The way the light directs the eye from one part of the image to the other parts, as well as the elements that run from one section of the space to the others is a great place to start. Use similar visual cues to direct your visitors from one content area to the next.

The Overall Feeling

Sometimes whatever your client has brought you just can’t be adapted into a design. Maybe it’s hideously ugly, or there just aren’t any stand-out features that you can see. In those cases, it’s better to look at the overall feeling of the piece and try to incorporate that into your design.

Is the piece simple? Complex? Elegant? Fun? Goofy? Sophisticated? Rustic? Make a list of keywords that you associate with the piece and then go from there. This is a good idea even if you are going to incorporate specific elements, as it can add a sense of cohesion to the design.

Hypothetical Examples

Below are a handful of examples of how you can put the concepts above in practice in your own designs.

Image Credit: Bah Humbug

There are two things striking in this image. The first is the color of the background. That could easily be incorporated in any design. The other is the simplicity and negative space, also easily incorporated into any design. The other thing that stands out is the fact that the ladder is a little grungy, indicating grunge elements might be welcome in the design.

Image Credit: woodleywonderworks

The most obvious thing to adapt in this image would be the soft color scheme. Rounded elements would also be welcome in any design based on this. Subtle grunge details might also be welcome.

Image Credit: Ash-rly

The bright colors and slight glossiness of the candies here are the most obvious elements to adapt. Other, less apparent elements to adapt would include the subtle white striping and the pattern created by the candy wrappers.

Image Credit: Wonderlane

Any client who presents you with an image like this is obviously looking for something refined and upscale. Glitz and sparkle are a couple of keywords that come to mind. A dark but muted color palette would be appropriate. Lots of detail, textures, and layering would also fit well.

Image Credit: one2c900d

The soft blue color and gold detailing here stand out as obvious adaptation candidates. Incorporating either an actual rose or just the pink and green accents would also likely be welcome. Also look at the elegant, curving lines of both the teacup and the saucer. Scalloped edges would be a good element to adapt, as well.

Image Credit: wickenden

The overall feeling of this packaging is the place to start on a site for a company like this. It’s rustic, old-fashioned, and a bit cheeky. The color scheme could also easily be adapted (black, tan, and brown), as well as the slightly grungy texture of the label.

Image Credit: jlastras

Here we have a variety of chocolates and ingredients often included in gourmet chocolate bars. There are a few things to pick out here: the textures and colors are the most obvious. But there’s also the repeating geometric pattern in the chocolate bars, and the depth of field of the overall image. It’s sophisticated and relatively simple, but there’s still plenty of visual interest.

Image Credit: studiosmith

There are a few different things to work with here. There’s the strong geometric shape of the vase. There’s the bright, warm yellow background. There’s the texture of the wood. And there’s the negative space in and around the vase. All of these things could easily be adapted into a design that’s warm and modern.

Conclusion

Next time a client brings you something strange with the words, “I want my website to look like this,” you won’t need to cringe. Instead, just look at whatever they’ve brought you with the concepts here in mind and create a website (or other design) that captures the essence of what they’ve brought in a way they might not have been expecting. You’ll have a happier client and a site that you can be proud to include in your portfolio.

1. Be a Jack of all trades

It seems the conventional wisdom lies in how much you know rather than how well you know it. I see people who have skill sets that take up a lot of space on a resume. Admirable? I suppose so. Does it make you more valuable to a potential client? Absolutely not.

Think about it: has a client ever hired you just because you knew 8 programming languages and 10 web development frameworks? They hired you to work on a specific project that requires a specific skill set, and chances are you have represented yourself as an expert that is the best fit for that project.

If you can’t settle on a particular tool set, you won’t be able to gain that competitive edge we all desperately need to be successful. I know it sounds counterintuitive, but if you really think about it, no successful development company becomes so merely based on the size of their tool set. They become experts in a particular skill set, and they have value because they leverage their knowledge and find their competitive edge in that context. You can specialize in so many things; find a niche that works for you, and focus on that.

2. Take on every project that comes along

Getting work is great, isn’t it? As young, nubile professionals, there is a tendency to covet every job we get; billable time is billable time, right?

Inevitably, though, what happens as the workload increases? We gravitate towards certain types of clients that fit our skill set better, or people that we can tell understand our role as the experts versus "order-takers".

The point is this that you should be selective of who you work with. Don’t think of it as losing revenue as much as adding value for those you do choose to work with. Spread too thin, you lose the ability to be responsive to your client base; those people who are already sold on what you do, how you do it, and are willing to compensate you for the value you offer them.

3. Don’t have a business strategy

If business is good for you right now, then I would like to congratulate you on that. Often when business is good, it is easy to forge ahead and spend 8 hours in a day on billable work. You owe every moment in the office–and many of your moments out of it–to your clients first and foremost, right? It sounds harmless, but think of it like this: if you never sharpen your machete, how will you be able to cut a path through the forest?

It’s simply too easy to lose your competitive edge without knowing it, and then realizing as your clients move on one by one that the money didn’t come from manual labor, it came from your ability to continually improve upon the solutions you gave them in the first place, which in turn improves their ability to make money through the web channel.

On top of that, these are the people that are easiest to sell to. In sales, it’s called the low-hanging fruit.

4. Neglect your existing clients

Once you land a client and finish a project, be sure to put them on a nice ride that circles the park and walk away. They are happy and therefore they need nothing else from you. Time to hurry up and wait for the next word-of-mouth customer, right? Sounds like a safe plan. Occasionally you might need to call or email and see if they are doing okay, but that’s about it.

Now back to reality. When was the last time you reviewed your current client base looking at ways to improve upon their existing solution? Or talk to them for ten minutes and find out how things are going? If you are doing this, great, but all too often clients are left to grow old and hairy and slowly fade into the sunset.

Now imagine that there is a potential dollar figure that floats above each client and this represents lost potential revenue. You just can’t ignore your clients for long after that first project is completed. If they are happy with you, the first thing you have to do is think of another way to make them happy. You may want to give them some time to settle into their new digs, but at that point, you have a customer who understands the value you add to their company and will listen willingly to you for the next recommendation you can make to help increase their bottom lines. It really doesn’t get any easier than that to generate additional income.

It is good to talk to existing clients at least seasonally, but ideally to check in once per month and call it a value-added service because that is how attentive you are (to the money they are holding in their hand and ready to give to you for more awesomeness). Sounds exciting to me!

5. Don’t invest your revenue into your growth

Take the revenue, put it in the bank, and retire it from the business. "It’s been great working with you, but you can relax now and pursue whatever it is you like to pursue – maybe vacation in someone’s mortgage somewhere or take a ride in a 401K. Have fun".

Doesn’t that sound crazy? As crazy as that might sound, if you aren’t investing some portion back into growing your business (provided that is one of your directives), that is essentially what you are doing! You are sending perfectly good capital on a permanent vacation, perhaps eventually to be traded for a lifetime supply of unicorn glitter or a data plan for your cell phone.

It’s easy to be shy about using some of the capital you may have saved up to take a calculated risk on your business future, but then again, you took a risk going into business in the first place, didn’t you?

One entrepreneur thinks of his dollars as soldiers: they go out and they come back every day with hostages – more dollars. You can guarantee those dollars went out with a mission in mind though, not to wander aimlessly around waiting to be snatched up by someone else.

<!–

Related Content

• How to Design for Your Worst Client: You.
• A Simple Guide on How to Effectively Talk to Clients
• How to Get Your Ideas Across to Clients
• Related categories: Project Management and Web Development

About the Author

<!–

Fred Bliss is a slightly over-seasoned bleeding edge web-evangelist. He is a married father of 3 boys. He has been working for the past year on Isotope eCommerce (a hybrid solution built in with TYPOlight CMS/ Framework) as lead developer, and one third of Winans Creative.  Connect with him via Twitter: @fbliss and LinkedIn.

One of the most difficult aspects of being a web designer is dealing with clients that “just don’t get it”. In this article, we’ll discuss seven things that often make the job of web designers difficult when dealing with unreasonable demands from clients. The goal in this article is not only to identify these common situations, but also to share with you some ways to avoid them and explain to your clients why their demands can’t or won’t be met.

“I’m on a really tight budget and I need this done as inexpensively as possible.”

One of the most difficult situations to be in is a client that does not appreciate the value of the service you will be providing. Web designers need to make a living too, and if the compensation of the project is too low, a lot of times it’s better to just pass on it because of opportunity losses of taking on low-budget projects.

How to Deal

If you are looking to take on more clients, it doesn’t hurt to respond; but if you have a comfortable amount of work – consider passing this one up. Even though it takes a bit of consultation time to determine the final price of a project, it can be helpful to respond initially with:

“My minimum hourly rate is $XX/hr. I’d be happy to give you a more detailed quote for the entire project with more consultation if you’re interested.”

If they like your work enough, they may respond, and if not, it’s not wise to adjust your rate to gain a client. It’s better to wait for an opportunity and spend more time with your existing clients, than to take a low-cost job.

Some clients that just don’t get it may go further to devaluate our work with comments such as “my son said he could do it for $50! I was looking for someone a bit more professional…but that seems way too expensive, even for someone with more expertise.”

In this type of situation, it’s important to maintain your composure and professionalism. You must also explain to the client that difference between a professional and an amateur web designer.

“I could probably figure this out myself, but…”

This type of client is usually a professional that needs to outsource their own work, or an amateur web designer who feels that their level of expertise is on par with professional web designers. This type of work often starts of with the mindset of, “since I can do your job, I shouldn’t need to pay a lot”.

In addition, many clients like this seem to know what they’re doing all too well, and can be overbearing or can try to take the creative process away from you.

How to Deal

If I have enough jobs, again, I will generally stir clear from these types of projects because not only will the client expect a low-budget project, but will also want to drive the process or may be too overbearing, making it difficult for you to perform your job. A simple, “I apologize, but I’m really backed up at the moment with clients and don’t think I’ll be able to take on your project,” will do.

Now, what if you’re already stuck with an ‘I can do this myself’ client? A simple reminder that you were hired for your expertise will suffice. Try to outline the benefits of having a web designer use his or her professional skills to craft the design for them. If it’s for a startup/new company, you can say that by giving the reins of the web design process to you, they can focus on other things that they need to get up and running.

“It’s a bit boring…it just needs a bit more ‘pizzazz’.”

This statement could lead to a dreadful spinning logo, hot-pink marquee text, or a lime green background. Whatever they mean by it, not many clients who say this end up meaning subtle additions to make the design livelier; often it’s exaggerated features or obtrusive visual elements that throw off the harmony of your web design.

Another bad thing about this statement is that we can’t be sure what the client exactly means and how to address it to satisfy their desires.

How to Deal

Be careful of giving in to your client’s desire right away; you have to make sure that the revision you are doing is good for the design overall. This design is yours, and if you can’t be proud to show it off in your portfolio because of a design decision the client is trying to make for you, then that’s not a good thing for anyone involved.

If, based on your better judgment, it is not a good idea to go ahead with their suggestions, give valid justification as to why it isn’t a wise decision. More often then not, they see you as the expert in the relationship, and they’ll pay heed to your experience as long as your reasons are understandable.

But you should always pay attention to what they’re trying to say. Maybe their idea may not be the right choice, but the problem they’re trying to address may be valid. Work with them and help them articulate what it is, really, that they find “boring” and suggest good ways of addressing those problems.

“Oh, and by the way, I’ll need this coded into a blog.”

Increased project scope: every web designer’s worst nightmare. If what you agreed to wasn’t setting up a weblog or creating a WordPress theme, it is scope creep. While it may be annoying to be asked to do something that you did not agree to, we must realize that a client with no technical expertise has no idea what it takes to turn a web design into a blog theme, and most probably aren’t aware that programming isn’t a standard web designer’s job. This problem, of course, goes beyond turning a web design into a blog into a number of other added jobs: design, coding, picking the right blogging platform, etc.

How to Deal

It is best to define initially in the proposal exactly what you will do for this project: this avoids potential problems in the future. Outline all the things you’ll do for them, and stick to this outline; resist the urge to agree to items outside of scope without additional fees because it encourages demands outside of what the project entails.

Solid requirements gathering also steers you clear from these situations; by knowing what it is exactly the client expects, the more prepared you are to provide it to them. If they mention a need for a weblog set-up, then you either need to tell them that it is not a service that you provide, or that it will cost extra.

It can also help to lay out the quote, project plan, and timeline so that it is very detailed to what you are going. This way, the client can better see things from your perspective, and clearly see that a “quick blog upgrade” is not a part of this project.

When the client broaches the subject of converting a design into a blog theme, remind them that it wasn’t part of the contract and that there will be additional costs and time requirements.

“I don’t really want to [use that communication method/pay that way/have to do this your way]. Let’s do this instead.”

You’re just beginning a project, discussing initial details, and the moment you begin explaining to the client how you do business, they want it all done their way.

Let the small things slide, it will make for a better relationship and shows that you’re willing to accommodate their needs.

However, when you invoice through a certain system for financial security or collaborate through an online venue for organization and easier communication – a core business process – don’t cut clients slack just because ‘they don’t feel like it.’

There are a few problems with this. For one, you’ve likely spent time organizing your business in such a way that keeps in control of it; there’s a reasoning behind your system and you shouldn’t forget that.

How to Deal

If you’re in a situation where the client is trying to change a business process of yours, you can say something like:

“I understand where you’re coming from, but you should realize that I handle a number of different clients on a daily basis, and the reasoning for doing things this way it to help me run my business efficiently, and to get the project done for you more quickly with better results.”

Most clients will understand that their project is not the only project on your agenda. It also shows that you’re not bending to their demands for a reason.

Also, some clients may not want to use a certain tool, payment method, or service because they are unfamiliar with it. For example, most people will have heard of PayPal if they’ve done any sort of online transactions in the past, but it doesn’t mean that your client’s heard of it before. It’s your duty – as a business that relies on this technology – to help your clients be more comfortable with the tools you use. In the case of PayPal, you could say something along the lines of:

“If you’ve never used PayPal before, let me help clear a few things up. I use PayPal because it is a secure payment gateway for the internet – you can never be too careful these days. There is no commitment on your part. You don’t need to sign up with PayPal or add funds to a PayPal account. You can easily pay with a credit/debit card, as you would with any sort of online store. It is a way for my business to accept payments and offer security for the both of us.”

 Stick up for your business processes, and don’t be such a pushover.

“I need a website identical to [Example website]. It should function the same way as well.”

Clients who want to copy another website design happens more frequently than it should. Be careful: you don’t want to run into any copyright infringements.

There is a difference between creating a design that can compete with their competition and ripping off a website completely. When doing a website for a start-up business, it’s good to look at the competitor’s websites and find things that you can improve on, but you should never copy them directly.

How to Deal

The best way to deal with a client looking to copy another website is to explain to them the legalities of doing so. Instead, offer your ideas on how you can create a web design that can compete very well against their competition.

Additionally, make it clear that their website will benefit from being different.

“I needed this done a few weeks ago. When can you get it done for me?”

Many clients think that they are your only priority. If you have other things that you’re working on, it’s not reasonable to make deadline promises you can’t keep. You shouldn’t drop deadlines on your existing work to accommodate another project, because in the long run, everyone loses.

It wouldn’t be surprising when working with a client like this that they would not deliver their portion of the deal either. No type of web professional should have to work for a project months longer than expected, just because the client cannot give content or other needed information in a timely matter.

How to Deal

Make that client aware that you have other commitments that must be met and give them a realistic expectation of when you can get a project done based on their details, and set a reasonable timeframe for the project in the initial proposal. Just remember the fact that they needed it yesterday is their problem, not yours!

If your timeline is not suitable to them, in the long run, it’s better if they go somewhere else; for you, you won’t be rushing other projects to make up time, and for the client, maybe they can find someone who can get the job done in the timeframe they require.

Do you have other things that you hate hearing from clients? What are they? Join the discussion in the comments.

About the Author: Kayla Knight

Create a Menu and Scrap Hourly Billing Practices

As a buyer, I prefer a flat fee. It only matter how many hours are spent so I can factor an expected completion date into my project. Whether it takes a designer 4 hours or 50 hours, I’m just looking for a flat number to get the thing done. I’m buying the end product, not your time. I suggest developing a menu for your clients – so they know if they need a logo, it’ll cost $X; if they need a web site designed with a custom front page and layout for interior pages its $y; and so forth.

This helps me because I know the approximate cost for any project using outside (contract) designers.

New Clients Should Pay Full or Higher Rates

When working with brand new clients, I’ve observed companies charging lower rates – often to win the business. Guess what? The new client is the one with the highest risk.

There are a number of things that could go wrong with a new client – you don’t know their culture, expectations, and experience with earlier contractors, etc.

Always Add a Retainer Option in any Proposal

Any proposal offered to a prospect should contain certain elements. You can view a sample sales proposal over at my site. Always add in an option for ongoing work.
You know you’d like the work and the client would like to be able to call on you as needed. If you add in a fixed-price retainer for a year with auto-renewal and no opportunity to roll over the time, then you get bonus points for being a savvy business person.

Tie Your Payments to Milestones with Specific Deliverables

This tip is only applicable for longer term projects. As a buyer, here’s what I want to know:

• What’s the deposit to get started?
• When is the next deliverable? What is it specifically and what do I owe you at that point? What I owe you may be payment, comments, or media/content.
• When the project is complete, how will you deliver the source files, completed files, and provide any documentation?

Put this in a table or another easy to read format, too. When building that table, build the invoices in advance (with the date as the expected milestone delivery date) and deliver them with the proposal. This allows your client to have the invoices submitted in advance and they can give you a check when you deliver the milestone.

Develop a Plan for Change Orders Issued During a Project

Projects can change – bet you already knew that, huh? Well, what do you do on a project when you have a Change Order request from a client when you are almost done with the original scope of work? You were expecting that big final payment soon and now you have a Change Order that will delay the final payment.

My suggestion: in the Change Order, require a deposit for it and a percentage of that expected final payment
. If you don’t do this, you could be in a cash crunch until everything is done.

Conclusion

These five tips are some of the many sales tips I’ve learned over the years. Most of these tips I’ve learned through trial and error but sites like these offer the opportunity to share ideas without having to make mistakes. Feel free to share your ideas below in the comments.

Follow Bill Dotson on Twitter or visit his Business or Personal website.