Website Projects

Starting a new web project takes proper planning, milestone definitions, and a reasonable scope. Every project I have been on, at work or with my own business, almost always increase in scope and size beyond the initial talks. To keep everything together and to make sure we don’t have a runaway project, we can use tools to help keep everything together.

The first contact with the client tends to be the hardest as it gets a general idea and direction for a project. Tools can help you organize and better plan the project from the start and keep you on the right path. Everything from defining the needs of the project and legal to testing and billing needs to be done. Getting a project started can be overwhelming, but planning eases the process.

I’ll take you through the steps I go though when I take on a project with MowenWorks.

1. Meet with the client

My initial meeting with the clients are usually informal and we try to cover as much as I need to get started in order to give them a proper and usable website. Our meetings discuss, but are not limited to these topics:

  • Define requirements
  • Define website scope
  • Budget
  • Audience
  • Limitations
  • Website purpose
  • Suggestions
  • Website name?

Our meetings can be done over the phone or face to face. Always write notes down.

a

2. Agreements Defined and Paperwork

The second step I take is to have a client agreement written up along with other paperwork that is needed for the particular project. The agreement is essential, as it defines boundaries between you and the client, defines what you are going to do for them, and it outlines the responsibilities from each side. This helps to protect you and the client.

The deposit can help you with purchasing images, registering the website, or any other miscellaneous prices that are needed for a website to be created. Depending on what the client wants to get done with their website, such as the size of the project, the deposit might need to be adjusted. Be smart about it and don’t charge too much for the down payment.

  • Legal
  • Website maintenance agreement
  • Website name define
  • Requirements agreed
  • Project Priced
  • Deposit payments
  • Payment Schedule
  • Project time frame

You don’t want to be in a position where legal action has to be taken by either side, so make sure you are protected. EVEN IF THE PROJECT IS FREE OR FOR A FRIEND. have an agreement!

Samples

http://www.wilsonweb.com/worksheet/pkg-con.htm
http://www.ipower.com/legal/legal_website_agree.bml
http://www.allbusiness.com/legal/contracts-agreements-forms-internet/2984453-1.html

a

3. Registration

After the initial deposit is paid, we can start moving to register the domain and configure hosting. The deposit well help you purchase a domain name or pay for additional hosting. This step is usually the quickest step in the entire process.

  • Register domain name
  • Configure hosting
  • Configure email addresses
  • Email routing?
  • Create a “Welcome” or “Coming Soon” page
  • Create sub-domains if needed

Each hosting company offers different pricing and options that may appeal to you. Shop around for the best option that you want.

Examples

WordPress.com
Hostgator.com
InMotionHosting.com
DreamHost.com

a

4. Initial Design Review

The initial design review is a chance for the client to see the direction you are going with their website as well as give you feedback. You don’t want to go all-out in this stage, but you don’t want to hold back either. I usually give the client an image of the planned theme or layout of a project. It saves me time and changes can be done quicker with an image rather than an actual site.

  1. A good Wireframe of your project would be perfect here as it defines the navigation, layout, and look/feel of a project.
  2. A live Review Environment will allow the users to view the progress of their website anytime they want. Create an area on your own website for customers to navigate to and see their work in progress.
  • Define website elements
  • Define navigation/colors/layout
  • Interface Design
  • Create review environment
  • Collect images from uses
  • Discuss text content
  • Discuss any requested changes

Wireframes can help do a good majority of the work for you. You can also just create an image of the initial design and not the actual web pages to save time.

Resources

35 Wireframe resources
7 UI Design Techniques
– 40 Web interfaces
– Design Inspiration

a

5. Invoicing and Time Tracking

Invoicing your project and keeping track of expenses and time is important. Keeping track helps you price future projects so your profit margins can increase while reducing expenses. It also helps the client to give them a better timeframe of when the project is going to be completed. If you are charging by the hour, you will need to know how much to charge. You don’t want to be underpaid or over charge.

Expenses can be kept track of fairly easily with many different tools. You can use an electronic spreadsheet, such as Excel or Google, or an online service, such as Mint.com or Intuit.com.

Keeping track of your time keeps you on track of your project. It makes sure that you can complete a feature and gives you a reference for your milestones. For clients, they can be updated for their project and properly billed if needed.

Resources

Google Spreadsheet
Great Harvest
Mint.com
Toggl Invoicing/Time tracking
Simple Invoices

a

6. Design Revision and Dynamic Web Pages

The first design review also includes the start of dynamic web pages. And by dynamic, I mean pages that do things other than just display an image. This includes the contact form, and JavaScript/jQuery, or any other coding/scripting actions.

The first design revision includes any changes that the customer would like as far as basic function and look. The Final Review should be done after the customer gets a chance to demo the scripting or dynamic functions of a website. Most of the common request is a contact form, so I usually have a pre-made script for this. Then after the initial review, we can tweak the code accordingly.

Another feature that I would normally add for my clients would be an “Information Page”. I will usually be a subsite or my main site that includes an overview of the project, any notes included with the project, and ‘Where are we in this project’ section.

  • Coding
  • Review Environment
  • Scripting
  • Design Refined

Resources

Visual Studio Express 2010
Eclipse IDE
jQuery
W3School

a

7. Final Review

The final review phase should be close to the closing of the project. The design should be concluded and now you are working on function and/or navigation. This phase has almost all of the elements of the website completed with the coding portion wrapping up. Make sure your project is optimized for search engines and confirmed to be proper CSS, XML, and HTML formatting defined by WC3.org. Update your meta tags for easier website search engine indexing.

Your website is looking more and more like a website. You need to start writing up your invoice and calculating the final price of the project. Package up the source files for the project to hand off to the client. Create instructions for how to use the functions of the website, a list of pages and a navigation map, and an overview summary of the project. This gives the client a completion package that outline and describes what they paid you to do.

Any additional requests that exceed the initial request and scope should be planned for the next version. If the client needs on going maintenance of the website, additional update, or any other major changes, make them aware that the completion of the current project should be completed first.

a

8. Live!

Once you are ready to go live with your website, inform the client when this will happen. AFTER final payment, you will need to also add your new website to search engines so it can be propagated in the index. The maintenance schedule would begin if the client requires maintenance.

After the final payment has been received for the project, you can hand over the packaged source files along with any invoices or instructions to the client.

  • Client receives source files
  • Search Engine submission
  • Maintenance Cycle
  • Final Payment

Resources

Google Site Submission
Yahoo Site Submission
MSN Site Submission

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.