For
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.
2.
OPEN UP A DOCKET
A
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.
I
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.
3.
NEW CUSTOMER?
If
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.
4.
SCHEDULE STAGES OF A JOB
Start
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.
5.
CONTRACT
Protect
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 own business:
Manage
Jobs Software
Digital Contracts Online
Smart
Agreements
Contract Swipe File
Law.net
Legal Documents Online
Sample
Freelance Contract
6. ORGANIZE YOUR THOUGHTS
A
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.
FIGURE
II.
Your
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.
7.
STORYBOARDING
Storyboarding
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.
8.
THINK ART
One
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.
1.
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 this project?
If
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.
Once
you have an idea of what your client is expecting you are ready
to storyboard the site.
9.
PHOTOSHOP
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.
1.
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.
5. 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.
6. 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.
7. Use an Exacto knife and straight ruler to cut off excess paper
of Client's printout copy.
8. Measure width and length of the printout.
9. Cut black board to be about 4 inches taller and wider than the
printout is.
10. 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.
11. Place a label on the back of black board with copyright information,
your logo, and a place for client to sign off.
If
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.
Once
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.
Now
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.
10.
OPTIMIZE IMAGES
Now
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 image optimization tips that you
should follow:
1.
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 the image.
11.
PROTOTYPE IT
Take
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.
1.
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 Flow Chart.
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.).
5. 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.
12.
TESTING PHASE
Before
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 live.
13.
MAKE IT LIVE
Once
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.
14.
REVIEW AND INVOICE JOB
Now
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
project.
Make
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 the following:
1.
Your logo, name, company name, address, and phone number
2. Client's Contact name, company name, address, and phone number
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)
Staple
the purchase order to the invoice. Make sure that your invoice is
neat and professional and then send it out to the client.
15.
ARCHIVE THE PROJECT
Now
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
order.
Make
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.
16.
EVERYTHING IS REUSABLE
You
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.
You
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!
PRODUCTS
