Jane at Red Lantern just got wind of a big potential client: the Foo Bar, a popular restaurant that needs an online presence. After all the work you did for Jane with Red Lantern, she’d like you to take on the work. She’s willing to pay you well and give you a stake in her company if you can get the Foo Bar gig.

By now, putting together a mockup should be a piece of cake. Let’s look at some XHTML for a simple version of the Foo Bar:

Exercise

Create a new stylesheet, screen.css, and add in color and font faces. Use what you’ve learned so far to give Foo Bar a nice contemporary look. Make sure you create a logical directory structure and link all the files properly in your index.html file, too.

Exercise Solution

Here are the parts of the CSS file that needed our color treatment. Let’s take a look at the final code and see what the finished site looks like.

Test Drive

Create (or download) index.html, screen.css, and the Foo Bar images. Fire up your browser, and show the Foo Bar owner your layout and color scheme.

It’s been said that imitation is the highest form of flattery. But what happens when you come across a site that’s clearly lifted your design? The problem is that the Web makes copying (and stealing!) really, really easy. Source markup is easily viewable (and copyable), images are easily downloaded to a desktop, and CSS is quickly copied.

So what exactly can you do? First, it’s important that you know that if you created your site (and your design really is an original work), you own the copyright. Second, you don’t have to put a copyright notice on the pages in your site for them to be copyrighted. So your design is already copyrighted!

There’s more than one type of web designer.

Some folks just want to design sites. Others have visions of starting companies and pouring over spreadsheets. Of course, most folks fall somewhere in the middle. There are lots of different roles, even just in the web design universe. Are you wondering what parts of web design you need to worry about?

Which of these types of web workers do you think you are?

Choose your job—and your business—based on knowing who you are in the web universe.

If you’re happy being a designer for a web firm, then copyrights probably aren’t going to be a problem anytime soon. Then again, with all the good work you’re doing for Jane (and your own boss!), you might get asked to join the leadership team of a company one day.

Or if you’re really into control and entrepreneurship, you may want to start a company yourself. Knowing who you are helps you choose the right company and the right people to put around you.

And if you are into starting a company, there are lots of different types... just like there was more than one type of web worker:

Exercise Solution

Let’s take a look at how these different companies are structured and organized.

Jane’s just received an email from a little San Francisco-based startup called Trilobite Labs, who needs a new site ASAP. Trilobite Labs is building a series of really cool iPhone apps, and they need a site that really reflects their design sensibilities, but don’t have the time (or the expertise) to build it themselves. They love Red Lantern’s site aesthetic, and Jane needs you to replicate success one more time.

Here’s what Trilobite’s looking for:

Client Requirements

	A static website with a front page, an About page, a contact page, and three separate product pages.
	Standards-compliant code. Trilobite’s site has to work on all sorts of devices, too.
	Some type of screen effect for their product portfolio. Trilobite wants to appear cutting edge to represent their work on iPhone apps.
	Several different designs to choose from (paper is fine), and an ability to provide design feedback that will get incorporated into the final site.
	Low-key usability testing to make sure there aren’t any problems before the site goes live.

Sharpen Your Pencil

Now that you know what the requirements are for the site, take a few minutes and think about how much a site like this would cost and roughly how much time it would take you to complete. Write down your estimates in the space below.

You need to know your hourly rate before bidding on any contract work.

Whether you’re working for yourself, Red Lantern Design, or a huge company, you should have an idea of what your hourly rate of work is. Then, you can figure out the time it will take to complete a project and turn that into a real, fair price.

The worst thing you can do is overbid... or underbid. One will leave you out of work, and the other out of money! Here’s a really easy way to come up with a reasonable hourly rate:

Sharpen Your Pencil

Now think about how much time might go into each part of the web design process and write your estimate in the space provided.

Initial Input Time This is the time spent initially meeting with clients and getting to know what their needs are and what they expect from you.	Note Write your total hour estimate in this column. ______________________
Conceptual Time/Pre-production Pre-production is where you will look at site content, design an information architecture, and come up with storyboards.	______________________
Drafts and Design Revisions This is where you will go through the draft and design revision phase, honing in on a final concept for the client’s site. Be sure and include time for client feedback!	______________________
Production Time This is where you start writing code. HTML, CSS and Javascript could all make an appearance at this stage. Final designs are delivered.	______________________
Other Costs These costs could include travel, supplies, and other time or material that should be billed to the client.	______________________

There are no Dumb Questions

Q:	Q: Woah, I have no clue how long any of this stuff will take!
A:	A: That’s okay... just take your best guess. Think about similar projects where you’ve worked on the various stages, and try and remember how much time you spent working. It’s okay to just estimate.
Q:	Q: And I only estimate actual time that I’m working, not breaks or anything, right?
A:	A: Actually, your estimates should include the entire project time: that means including breaks, trips to get supplies, and anything else related to working on this particular project.
Q:	Q: What if I’ve got other people on my team?
A:	A: Good question. In those cases, two people working for an hour each is two hours of work time. So you’re estimating the total “person hours” a project will take, not the number of hours in a day or week.

Sharpen Your Pencil Solution

What really goes into designing a website?

Figure out a total bid...

There are no Dumb Questions

Q:	Q: Do you need all the people in the web design universe to successfully complete a site?
A:	A: No, not really. If you’re a freelance web developer, you may wear many hats and be able to work with your clients throughout the design process. If you need to, you can bring in a contractor to complete work that you can’t do yourself (like back-end programming).
Q:	Q: What’s the difference between an LLC and LLP?
A:	A: The two types of structures are essentially the same thing. LLP stands for Limited Liability Partnership and is just an LLC with more than one shareholder or owner. Most of the time, you will see professional services like accounting and law firms organize as LLPs.
Q:	Q: Is $50/hour the average? What’s the range of hourly rates you can expect to find at design firms?
A:	A: $50/hour is actually on the low end. Professional hourly rates range anywhere from $50-$75/hour all the way up to above $200/hour. These rates vary depending on location, experience, and size of company.
Q:	Q: What happens if I underestimate the time it takes to complete a project?
A:	A: This is common. Most projects are quoted on a job estimate and the final price can vary up or down from the original quote. The most important thing you can do is communicate with your client and let them know where you are in your process and how close the final price will be to what you originally quoted.
Q:	Q: Is there a resource for finding out what other people are charging and what services cost in other design-related fields?
A:	A: Occasionally the American Institute of Graphic Artists (AIGA) publishes their Pricing and Ethical Guidelines for design professionals. This includes web design and has information on salaries, hourly rates, and industry standards for the field.

Note

AIGA’s Pricing and Ethical Guidelines book.

Sharpen Your Pencil

Now that you have a better idea of the time and costs of a typical web project, let’s use the Red Lantern estimate worksheet to generate a quote for the Trilobite Labs project. Check off the client requirements as they are covered in the estimate.

Client Requirements
	A static website with a front page, an About page, a contact page, and three separate product pages.
	Standards-compliant code. Trilobite’s site has to work on all sorts of devices, too.
	Some type of screen effect for their product portfolio. Trilobite wants to appear cutting edge to represent their work on iPhone apps.
	Several different designs to choose from (paper is fine), and an ability to provide design feedback that will get incorporated into the final site.
	Low-key usability testing to make sure there aren’t any problems before the site goes live.

Red Lantern Project Estimation Worksheet (RLPEW)

Job Description:

Client Name: __________________________________________
Project Description: ____________________________________
	_____________________________________
	_____________________________________
	_____________________________________

Initial Input Time:

Pre-production Time:

	Hours		Rate		Total
In-house Meetings:	____________	×	____________	=	____________
Information Architecture:	____________	×	____________	=	____________
Wireframes:	____________	×	____________	=	____________
Theme Concepts:	____________	×	____________	=	____________

Drafts and Design Revisions:

Client Meetings:	____________	×	____________	=	____________
Storyboards:	____________	×	____________	=	____________
Storyboard Revisions:	____________	×	____________	=	____________

Production Time:

XHTML and CSS:	____________	×	____________	=	____________
Back-end Programming:	____________	×	____________	=	____________
Graphics and Artwork:	____________	×	____________	=	____________
Copywriting:	____________	×	____________	=	____________
Validation and Debugging:	____________	×	____________	=	____________

Copy this sheet!

We know you won’t have any good ideas of all these costs. The idea here is to see what a real bid sheet might look like.

In fact, you may want to copy this sheet for your own bids. The next page has some sample entries for what a real web design job might cost, too.

Miscellaneous Expenses:

Fonts and Graphics:	____________	×	____________	=	____________
Software:	____________	×	____________	=	____________
General Supplies	____________	×	____________	=	____________

Totals

_______________ Total Project Hours

_______________ Total Cost

Sharpen Your Pencil Solution

Now that you have a better idea of the time and costs of a typical web project, let’s use the Red Lantern estimate worksheet to generate a quote for the Trilobite Labs project. Check off the client requirements as they are covered in the estimate.

Client Requirements
	A static website with a front page, an About page, a contact page, and three separate product pages.
	Standards-compliant code. Trilobite’s site has to work on all sorts of devices, too.
	Some type of screen effect for their product portfolio. Trilobite wants to appear cutting edge to represent their work on iPhone apps.
	Several different designs to choose from (paper is fine), and an ability to provide design feedback that will get incorporated into the final site.
	Low-key usability testing to make sure there aren’t any problems before the site goes live.

Red Lantern Project Estimation Worksheet (RLPEW)

Job Description:

Initial Input Time:

Talking back is highly recommended.

It’s pretty much a foregone conclusion that you’re going to have potential clients who’ll look at your estimates and immediately start to argue that the price tag is too high. If you’re experienced, confident in your design skills, and have done a good job estimating project costs, it’s part of your job to explain to a potential client why the cost estimate is what it is.

It isn’t “against the rules” to respond to a client with a justification for your bid. Unless you have a really solid reason, you shouldn’t let a client bully you into lowering your price. This not only devalues your skills as a designer, but might put you in a position where you’re putting more work into a project than you’re actually getting paid for–which is a good way to ruin a business, rather than run one.

A proposal letter details all your costs to a client. But it can also make it clear exactly how you came up with your bid. Sometimes outlining individual costs is all a client needs to understand the value you could bring to their project.

Exercise

Using the template below, outline the project for Trilobite Labs in a proposal letter so they can see what we’re doing and where their money is going.

Exercise Solution

Let’s look at a completed proposal letter for Trilobite Labs:

In the midst of waiting for a decision from Trilobite Labs about your bid, you get a call for their CEO. Over lunch a couple of days ago, the guys at Trilobite came up with another idea that they want to throw into the mix: podcasting. Trilobite really wants to start an official company podcast that covers all of the intricacies of developing for the iPhone and iPod Touch. It’s up to you to work out how podcasting fits into the bid you’ve already put together.

But there’s a wrinkle: Trilobite’s really worried about protecting their podcast. They want people to be able to download the podcast for free (and share it with anyone they want). What they don’t want, though, is for some other website to take their podcast and re-sell it. It’s up to you to handle this problem, along with the rest of their web-related design issues.

Copyright law is complicated. (Remember our issues with the Foo Bar stealing our design?) So where does this leave the average artist, producer, writer, developer, or musician who wants to communicate how they want their work used by others, but doesn’t want to swim in the shark-infested waters of traditional copyright? It leaves us with the Creative Commons.

The Creative Commons (http://creativecommons.org/) is a non profit organization dedicated to expanding the range of creative works available for others to build upon legally and to share. They’ve developed a series of simple copyright licenses that protect the “base rights” of the creator. These Creative Commons Licenses have become an enormous force in the modern world of media production.

At this point, it’s time to take things out into the world. Stop reading. Well, read the bullets below, and then stop reading. Or maybe after you read the appendix...

...in any case, you’re a web designer! Put this book down and go design. Go make beautiful, accessible, usable websites. The Web could use a lot more of ’em.