Talking of Design

Blog Home

Project workflow for a web project

A project work-flow ensures I am able to apply my quality control procedure to a project, so that the ‘final product’ will be as good as it can possibly be, and so that everyone is happy.

Oh, and don’t worry about the date this article was published — it’s still relevant today, and I keep it updated at all times as well :)

Here are the stages of the work-flow:

Research, discovery & consultation
Site map and plan
Wire framing key pages
Flat visual designs
Build of all key pages using HTML & CSS
PHP programming and CMS integration (optional)
Initial content implementation
Initial on-page SEO set-up
Testing, bug fixing and tidying pre-launch
Launch
Sandwich and drink
Nap

Here be each stage explained:

1. Research, discovery & consultation

A brief (and sometimes a brand guidelines document) supplied by client.
This is stage is worked on by both myself and the client.
General notes and sketches are often made.
Points of reference are made in terms of design and functionality (this could be competitor websites, websites liked or similar etc.).
General discussion and communication is had between the designer and client about the project.

For more information on the consultation area of this stage, you can read my article on the importance and best methods of communication when working with a freelancer like myself: “The Skype’s the limit”.

I have also written an article outlining what is required at the initial enquiry stage of a project: “How I spin a good web”.

2. Site map and plan

This stage is worked on by both myself and the client (and often a programmer colleague, if required).
The site map is a list of all pages in the form of a nested list.
The site plan is a document where all pages are listed as headings with each page explained in detail (including the elements likely to be seen on the page).
I often favour googledocs as my environment to create this document, as both myself, programmer and client can work on the document simultaneously in real-time to ensure the plan is sound from all perspectives.
Requires signing off before stage 3

3. Wire-framing key pages

Wire frames are black and white line diagrams.
They are the arrangement of elements into the correct place and order on key pages — as specified by the client as important content, and also based on the recommendations from the expertise of the designer and developer.
When developing a responsive website (a website that adjusts to different screen resolutions and such) it may be that 2 or 3 wire-frames are produced to demonstrate layouts at key resolutions (mobile and desktop for example).
Requires signing off before stage 4.

4. Flat visual designs

The adding of style, branding and aesthetics to the site design.
Visuals of key pages supplied to the client as flat jpegs / pngs.
The “designing” is the responsibility of the designer, based on the visual requirements specified in the brief and/or brand guidelines document.
I don’t mind if a client wishes to supply their own ideas, but they will often need to be refined with best practice in web standards and the best interests and core needs of the project in mind, as per the recommendations of the designers and developers.
Visuals aren’t completed coded web pages, merely flat representations of what they will generally look like.
Design will also take place during stage 5, where it is deemed more appropriate to solve criteria within the web browser itself.
Requires signing off before stage 5.

5. Build of key pages using HTML & CSS

This is in preparation for either static or dynamic content (either direct input by myself, or by the client using a Content Management System).
If the site requires a Content Management System, I would build the pages so that the system can be easily integrated into the system, and in preparation for the involvement of a programmer.
If the site does not require a Content Management System, then all content needs to be supplied in a digital format by the client (word docs, .txt files, jpegs etc.) for myself to implement.
Any animation that may be requested / required will be used on non-dynamic areas (content not controlled by your content management system) and only on areas where it would be deemed to have no negative effect on the site in terms of web standards best practice. Appropriate use can often be: on your logo, as a platform to play a video / audio file or on a static banner.

6. Programming and CMS integration

This is the ‘glue’ stage of the project — pages will be linked and the functionality of forms and searches will be added
The database is set-up to hold any user data and also the content that is displayed on the site
Set-up up of a secure development area (a website address) where the site can be viewed
The CMS, with any bespoke modules, is programmed and installed so the client can keep content up to date
The functionality of the site modules are added (e‑commerce, blog, or picture gallery related, etc.)
Security is added to the site for log-in systems and payment systems for e‑commerce solutions

7. Initial content implementation

Mainly for testing purposes
Content supplied by the client in digital format
Once the site has been tested with an appropriate amount of real data, it is then the responsibility of the client to use the system to add any remaining content pre-launch

8. Initial on-page SEO set-up

SEO stands for ‘Search Engine Optimisation’
This would include dynamic title tags, page URLs, meta descriptions and meta keywords to help search engines read your pages and index them correctly
The HTML on pages will already be set-up to be as Search Engine friendly and semantic as possible at stage 5

9. Testing, bug fixing and tidying

The fixing of any errors or issues that may arise from testing and content implementation
The splatting of bugs with a massive digital spatula. Splatula.

10. Launch

The publishing of your site at “www.yourchosendomain.com” or wotnot

11. Sandwich and drink

Jam and squash, respectively

12. Nap

The most important stage of the work-flow. If I don’t have a nice snooze I get grumped.

So, that is my work-flow for a web project. I am sure that many providers work to a similar method.