KevAdamson.com

KevAdamson.com :
Freelance Illustration, Web Design, Graphic Design and Animation




RSS Subscribe to my blogRSS


Project workflow for a web project : Apr 05 2009

Services, Web Design / 2 comments

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 your 'final product' will be as good as it possibly can be, and so everyone is happy smiley balls of fuzzy light for ever more.

Here be the stages of the work-flow:

  1. Research, discovery & consultation
  2. Site map and plan
  3. Wire framing key pages
  4. Flat visual designs
  5. Build of all key pages using HTML & CSS
  6. PHP programming and CMS integration
  7. Initial content implementation
  8. Initial on-page SEO set-up
  9. Testing, bug fixing and tidying pre-launch
  10. Launch
  11. Jam sandwiches
  12. Horlicks then nap

Here be each stage explained:

1. Research, discovery & consultation

  • Brief and (usually if medium / large company) brand guidelines document supplied if they haven't already
  • This is stage is worked on by both myself and the client
  • General notes and sketches are often made (and sometimes screwed up and thrown in the bin)
  • Points of reference in terms of design and functionality (this could be competitor websites, websites liked or are similar etc.)
  • General discussion and communication between 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 a "damn fine if i say so myself" 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 my programmer chap)
  • 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 (the elements likely to be seen on the page)
  • I 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. Wireframing 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 our recommendations from our expertise in prioritising elements as coded html on a web page
  • Requires signing off before stage 4

4. Flat visual designs

  • Adding style, branding and aesthetics to the site design
  • Visuals of key pages supplied to the client as flat jpegs / pngs
  • The "designing" is obviously the responsibility of ourselves, based on the visual requirements specified in the brief and/or brand guidelines document

    We encourage ideas to be supplied by the client, but they will often need to be refined with best practice in web standards web design, and the best interests and core needs of the project in mind, from our recommendations as web designers and developers, if 'yer get meh'.
  • They aren't completed coded web pages, merely flat representations of what they will look like
  • Requires signing off before stage 5

5. Build of all key pages using HTML & CSS

  • This is in preparation for either static or dynamic content (either put in 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 my PHP 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 Flash 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, on a static banner ...

6. PHP 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 (be them 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' (and not 'shave endangered owls')
  • 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 pre-launch

  • 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. Jam sandwiches

I like jam sandwiches

12. Horlicks then nap

The most important stage of the work-flow. If I don't have a warm belly and 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. If you have any thoughts or, possibly, anything I have left out, feel free to comment.


COMMENTSCOMMENTS

  1. Thank you for sharing all this information, not just this article but all of them really!

    I am 19, a developer for a big advertising agency, and have dreams that one day I will do what you are doing! So this info is priceless. Thanks!

    Matt

  2. @ Matt : No worries chum. Good luck with that :)



SAY STUFFSAY STUFF

Details






Note: This is for commenting on the above article - not for sending me a general enquiry. My enquiry form can be found here.

Submit

The following html can be used: em, strong, a (although "www" or "http" will auto-magically get converted to links)


ILLUSTRATION

WEB DESIGN

GRAPHIC DESIGN

ANIMATION


BLOG : “ TALKING OF DESIGN

FIND AN ARTICLE FIND AN ARTICLE

Keyword Search for an Article:

Article Category List:

Article by Date:


READ AN ARTICLE READ AN ARTICLE

Latest Articles:

My site in Web Designer Magazine (again)

24/02/10
Web Design

A couple of years ago I was featured in a double page spread in the national publication: Web Design Magazine. Well, I'll...  ( more )


Twitter & Flickr

TWITTERING TWITTERING

Ug. Can't sleep. Neuro senses seem to have been turned up to a high setting of 'meh'. Going to scoff some nytol to numb the nog.

3 hours ago