of a Project for a Web Builder
by Rachel Goldstein owner of Allfreelancework.com
- 1000s of freelance jobs
a new freelancer, there is nothing scarier then starting
your first project. This article will take a closer
look at the steps you should follow when in charge of
a project. Hopefully, if you are aware of what the process
should be, you won't be as concerned about getting things
right. Since I am assuming that this is your first client,
return business is essential to growing your business.
Follow the below steps from start to finish and you
should have a happy client and a check in your hands.
is important to track your time when you are working
on a project. Start logging time as soon as you start
to give your attention to a project. Place a time log
into a new docket and write onto this log start and
finish times along with other detailed information every
time you work on this project.
a look at a good time log at Figure I.
several reasons, it is important to use the time log
accurately. First and foremost, your client might expect
you to break down your hours for him so they are aware
of where their money is going. Secondly, in order to
increase your productivity, examining where your time
is being spent is essential. After freelancing for a
while you will be able to figure out how much to bid
on projects easily from experience.
OPEN UP A DOCKET
docket is a huge envelope or sleeve to keep all papers
together. Nothing looks worse than going to a meeting
with a client and forgetting essential paperwork. In
order to escape this possibility, I suggest using a
docket for each individual project.
recommend using a black marker to distinguish this project
from other projects. I have always named my project's
computer files and dockets by the company's name and
then follow this with consecutive numbers. So for example,
XYZCompany001 would be XYZ Company's first project.
this client is working with you for the first time you
should start an information sheet on him or her. You
might not think that this is important, but if this
client ends up being a dead beat, you will be glad to
have his or her address and phone number. After you
have completed this form, place it in your docket.
SCHEDULE STAGES OF A JOB
every job with a piece of paper. List steps that need
to be involved in order finish production. Otherwise,
you might get stuck with having to go backwards three
steps in order to go forwards again. Sometimes stages
of a project will need to be reworked because you didn't
take the time to write down your game plan. Try not
to let this happen to you.
yourself against problem clients by writing a contract.
Make sure to have your client sign and send back the
contract before starting the project. You can find generic
contracts for your business on the Internet. Here are
some places to find contracts to customize for your
6. ORGANIZE YOUR THOUGHTS
great way to begin your project is to plan out how the
web site is going to be organized. A mind map is one
way to do this. You can do this by taking a blank piece
of paper and placing your pen onto the middle of your
page. Write down a word or two that matches the subject
of your previous notes. Branch out with lines to related
topics. Take a look at Figure II as an example.
mind map is now similar to a Flow Chart. Make sure that
all navigational routes have been mapped out. If possible,
have someone else take a look at your Flow Chart to
see if you have missed anything.
is a device used to layout the design and navigation
of a site. It could simply be a rough sketch on a scrap
of paper. However, I always send out a storyboard to
a client before starting to actually layout the site.
I recommend laying out rough sketches in Illustrator
or Freehand. Use your mind map or Flow Chart to help
guide you through this process. Ask your client to sign
off on the bottom of this Flow Chart.
of the most engaging attractions of a good web site
is its graphics. Listen carefully to your client carefully
in order to find out what he wants. If the client can't
explain what he is visualizing, help out with a few
questions. The following five questions can be used.
What sites are visually appealing to you?
2. On a scale of 1 to 10, how important is a fast-loading
site to you?
3. What colors are you partial to?
4. Do you already have existing collateral (brochures,
catalogs, etc.)? If so, what flexibility do I have with
your fonts, logo, and colors?
5. Do you have any art that we need in order to complete
you are having a hard time finding your creative self,
I suggest taking a look at CoolHomePages.com
to get a few ideas to build on.
you have an idea of what your client is expecting you
are ready to storyboard the site.
Now that your client has signed off on your storyboard
it is time to start the design process. Finally! Follow
these steps to ease the design process.
Take a screen shot of your browser.
2. Bring this image into Photoshop and save file.
3. Layout all design elements into layers for home page
of site first.
4. Design at least three different design variations.
4. Go to your local service bureau to print out 2 copies
of each design, one for you and one for the client.
Remember to charge the client for printouts with 5%
- 10% markup. Place one of each printout copy into the
project's docket, this is your copy.
5. Go to a business supply store, like Staples, and
buy black board, a portfolio case big enough to hold
several black boards, Utility knife, Exacto knife, spray
adhesive, labels, and a straight ruler.
5. Use an Exacto knife and straight ruler to cut off
excess paper of Client's printout copy.
6. Measure width and length of the printout.
7. Cut black board to be about 4 inches taller and wider
than the printout is.
6. Spray the back of the printout lightly with spray
adhesive. After spraying the back of the printout, put
one corner down about 2 inches from the top and 2 inches
from the left of the black board. Then pull printout
taut from the bottom right as you slowly press down
the paper from the upper left. This will keep bubbling
from happening. There should now be 2 inches of blackboard
framing each side of the printout.
7. Place a label on the back of black board with copyright
information, your logo, and a place for client to sign
your client is local, setup an appointment in order
to show him the mockups. If you have a long distance
relationship, I suggest using Fed Ex to ship the mockups
to your client. Ask your client to sign off on the back
of the mockup that he likes. However, if the client
doesn't like any of your layouts, which happens to the
best of us, you are back to the drawing board.
you get a layout that your client likes, you should
rename your Photoshop file to reflect this and move
the unused files into an "idea file". There
is no reason that these unused mockups cannot be modified
for your next client. Also, you should proceed to taked
the unused mockup copies out of the project's docket
and leave behind the chosen mockups. I would suggest
placing unused mockups in a binder for new clients to
look at to see what style they like.
is when you will be glad that you have created your
Photoshop files in layers. Duplicate the already existing
file and make mockup files for inside pages as well.
that you have all of your pages laid out in Photoshop,
it is time to cut out the images that you will use in
the web page. A good rule of thumb is not to exceed
30K per page. Otherwise, your web page will take too
long to load. Here area few more tips that you should
Illustrations should be saved as a gif.
2. Photographs should be saved as a jpeg.
3. Keep the amount of colors in an image to a minimum.
4. Aliased images are smaller.
5. The more compression you apply to a jpeg - the smaller
your printed mockups and Flow Chart. Place them by your
side and use them in order to layout your page. Create
your pages so that they are all linked together. The
following tips will help you organize your files.
Place all images in an images folder.
2. Place every section of your site in a separate file.
3. Structure your directories to roughly match your
4. Make sure that your file names make sense (It is
a good idea to have a company code in front of each
file. For example, for XYZ Company's About Us page,
I would use xyz_about.html.).
6. Have an archiving system in place in order to backup
your files. Name your files accordingly in order to
link all of your html files together in order to create
a working prototype that the client can test.
you send the prototype to your client, test out the
usability of the site with friends that haven't been
involved with this project. Write down all input that
they can give to you - both good and bad. Also, try
as many different browsers, plugins, and operating systems
as the visitors are likely to use. Make sure to fix
any problems that you find and make a mental note for
further projects on what works and what doesn't.
After internally checking the site, upload the site
to the host server to test out access speed, plugins,
and configurations. When you are sure that things are
in working order, it is time to let the client test
out the prototype site. There will likely be several
things that your client won't like. Listen carefully
to your client and make sure to give merit to all suggestions
that the client makes. Make sure to have the client
sign off on the prototype in order to make the site
MAKE IT LIVE
the testing phase is complete, it is time to make the
site live. Cross your fingers and hope for the best.
Inevitably, visitors will always find something that
they aren't happy with. You should always give support
to your newly launched sites for at least 2 to 4 weeks.
REVIEW AND INVOICE JOB
that you have completed the project it is time to fulfill
your administrative duties. It is time now to review
your time sheet. Add up all of the columns to calculate
total hours spent on the project. Break this number
into how many hours were spent on each phase of the
a copy of the time sheet for the client and create an
invoice to reflect your agreed upon hourly fee. Always
reference the client's purchase order number on your
invoice. Otherwise, many Accounts Payable departments
won't pay your invoice. If your client has not given
you a PO# then you should contact him to make sure that
there isn't a PO# linked to this project. Include all
necessary information on your invoice. I always include
Your logo, name, company name, address, and phone number
2. Client's Contact name, company name, address, and
3. Purchase order date (date job was ordered)
4. Invoice date
5. Invoice number
6. Payment terms (for example, net 45 days)
7. Break down of how many hours were spent on each phase
of the project
8. Add on expenses (Printing expenses - remember to
add 10% - 15% markup)
the purchase order to the invoice. Make sure that your
invoice is neat and professional and then send it out
to the client.
ARCHIVE THE PROJECT
that you are finished, you can use the docket to archive
this project. Remember the black marker and label that
previously was used to name your project's docket? You
are now going to file your project by this number. In
order to find this project easier, I suggest placing
a filing tab on each docket. Place everything in alphanumeric
sure everything that belongs in the docket is there.
Place all corresponding files on a Zip or Jazz disk
and then place it in the project's docket. All administrative
documents, such as invoices and POs, should be placed
in the docket. Also, any printouts, emails, or notes
that correspond to this project also belong in the docket.
EVERYTHING IS REUSABLE
shouldn't ever reuse projects that are copyrighted by
your client. However, portions of every project are
reusable. For example, you wouldn't reuse a design that
you specifically created for a client. But, you could
reuse Photoshop paths or textures that you created.
will find that as you complete more and more projects,
each one becomes a little bit easier. As you start out
in freelancing, use each project as a learning experience.
Each project completed results in a more experienced
and valuable freelancer. Good Luck!
- 1000s of freelance jobs, articles, and resources.