The Digital Creative Process
Upcoming SlideShare
Loading in...5

Like this? Share it with your network


The Digital Creative Process

Uploaded on

This is a summary of the process to follow when creating and building websites and other such online media. It's a project process overview for thos in need of such a structure to help run their......

This is a summary of the process to follow when creating and building websites and other such online media. It's a project process overview for thos in need of such a structure to help run their projects and for clients to get a better idea of how the whole process works. There ar of course other ways of running your projects but this is a good tried and tested stage by stage way of doing it. I've included responsibilities and example outputs as well as key things to do and watch out for each stage.

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 226 87 46 43 32 4 3 3 2 2 1 1
http://localhost 1 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. The Digital Creative Process.
    Website overview
    Online ads overview
  • 2. Introduction
    I created this process document to inform and help the staff at the global media company I have recently been working at, in the role of Digital Creative Services Director. It is a very tried and tested process evolved over many years working with some of the top agencies in our industry. To be blunt, it works.
    That is of course not to say that there are not other processes and methodologies that are equally as beneficial and may suit your project better. There are. The ‘Agile’ way of working for instance. My process here will work to keep inexperienced teams and clients on track and can of course be utilised by more senior teams and for large projects to. It is a summary though and not intended as a tell all teaching aid of course!
    The online advertising process can be very similar to the website one and thus has the same breakdown of responsibilities as for websites.
  • 3. Web design and build process
  • 4. Web design & build process overview
    e.g.Duration: 1-2 weeks
    Work streams
    Duration: 3-4 weeks
    Work streams
    • Further requirements meets & creative inspiration
    • 16. Creative brief
    • 17. Information architecture
    • 18. Sitemaps / wireframes
    • 19. Update SOW & sign off
    • 20. Design concepts
    • 21. Home + section
    • 22. Documentation
    • 23. Functional spec
    • 24. Technical spec
    • 25. Testing plan
    Duration: 6-8 weeks
    Work streams
    Duration: 1-2 weeks
    Work streams
    Key outputs
    Key outputs
    • Creative brief
    • 44. IA / Updated SOW
    • 45. Design concepts
    • 46. Specifications
    Key outputs
    • Design templates
    • 47. Dev iterations for testing
    • 48. Website into UAT
    Key outputs
    • Deployed, signed off & live
  • Initiate – stage 1
    This is our initiation stage and commences the project in a structured but stimulating fashion. The aim is to encourage participation and enthusiasm within the agency and the client, as well as to define the important initial project details, prior to beginning the project itself.
  • 49. Initiate – stage 1 output examples
    Initiation – Betty Crocker client initiation presentation
    Note that the ‘scope of work’ on the agenda below will be largely going over the original client brief and the proposal (if applicable). We are setting the stage for the project here and have a good idea of what is required, but this is nowhere near set in stone and the scope can change dramatically before we finally have the proper project SOW document agreed.
  • 50. Initiate – stage 1 output examples
    Scope of Work document
    • Vital to be agreed before moving into the Create stage.
    • 51. Can include information architecture and design work from the proposal as this example does, but the scope informs the next stage of evolving these or often their creation from scratch.
    • 52. All scope changes should be managed via a change control process.
    • 53. Testing / QA plans to be created from the SOW & strictly followed in the QA parts of the project.
    • 54. Larger projects will have functional & technical specifications produced based on the SOW but which are far more detailed and supersede the SOW.
  • Initiate – stage 1 output examples
    Master project plan
  • 55. Initiate - Key points
    • Do not set budgets & deadlines before the internal & client initiations (kick-offs). If you do then you risk limiting the scope, creativity, number of design concepts etc not to mention the huge risk of putting yourself up against a very difficult deadline.
    • 56. Conduct a structured internal initiation before the client initiation.
    • 57. Ensure that roles and responsibilities between all parties are defined at the outset. Have just one point of contact in the main for your agency, the client and any external third parties working with you.
    • 58. The main point of contact at your Agency team must be in a project management / producer role and NOT the designer or developer.
    • 59. Set weekly / fortnightly internal and client meetings at the outset.
    • 60. Agree the Scope of Work / Specification before any design or development work begins. This greatly helps to avoid things being missed by the web team.
    • 61. There is an over-reliance on emails to communicate desired changes. Try to meet face to face and use a change control form that can then be signed off and the SOW updated. Introduce the change control process and stress the importance of adhering to the SOW to the client at th
    • 62. Always produce a detailed project plan & present this face to face with the client to ensure that they understand what is going to happen, their responsibilities & the impacts if they do not stick to the schedule.
  • Create – stage 2
    Where the creative thinking and conceptual work comes in. We have our project base set so can now get stuck into the fun and interesting stuff. There are still some requirements finalisation to attend to of course but we are underway now.
  • 63. Create – stage 2 output examples
    Information architecture - sitemap
  • 64. Create – stage 2 output examples
    Information architecture – Home Page wireframe
  • 65. Create – stage 2 output examples
    Design iterations – 1st iteration in concept phase.
  • 66. Create – stage 2 output examples
    Design iterations – Final concept work.
  • 67. Create - Key points
    • Ideally, do not begin this stage until the Initiate stage has been closed.
    • 68. Have as many of the team involved in workshops.
    • 69. The Creative Brief should be written by the client based on an Agency team produced template. Reverse briefs are not ideal. Most agencies will have a briefing questionnaire that can be discussed direct with the client to help them in writing the brief. This may lead to a further enhanced brief internally from the producer and creative director for the design team to use.
    • 70. Information Architecture (IA) – Sitemaps and Wireframes are vital to lead both the design and functional development. Do not skip this step and do present the IA face to face, ensuring the client understands what these elements mean and how they dictate the next steps.
    • 71. Design concepts – agree how many will be created and how many iterations will be produced at the initiation stage and document in the Scope. Usually you will agree to create 2 to 3 concepts with one of these chosen to be taken forward into to more iterations (or review and enhancement periods). Be as strict as you can on this or you will find yourself 2 months down the track on your tenth iteration.
    • 72. Present design concepts face to face and ideally with the designer who created them, or at least the Creative Director. The designer (or CD) will be best placed to explain their creative thinking and benefit greatly in receiving the feedback, emotion and reactions first hand.
  • Develop – stage 3
    The actual build of the site, application and / or online advertising. We will complete the agreed design templates and imagery / illustration digital production and have these signed off. The build will then move into actual development and a thorough quality assurance stage.
  • 73. Develop – stage 3 output examples
    Design realisation – example page design jpeg templates.
  • 74. Develop – stage 3 output examples
    Quality Assurance and Testing – testing issue tracker
  • 75. Develop - Key points
    • Before you start coding the website and back-end (database and so forth) make sure that you have a detailed testing plan to be followed throughout the development and quality assurance phases here. This should have been created by the project manager / producer (or, if you are really lucky, an actual test manager) at the Create stage, based on the Scope.
    • 76. Make sure that they use issue tracking software such as the Gemini Issue Tracker on the previous slide.
    • 77. Make sure that adequate time has been set aside for reviews, amends and full testing. The temptation is often to eat into testing time if budgets and timings require there to be less of some task or other but this is really bad.
    • 78. It is better to push back the live date to allow for proper testing, amends and re-testing than to go live with harmful and possibly critical bugs.
    • 79. Ensure the agency has the ability to test across all modern Operating Systems (i.e. Windows, Mac , Linux etc) and browsers (IE6, 7, 8, Firefox, safari etc.) There is nothing worse than a client using IE 6 noticing a major bug that does not exist on the more up to date browsers that the Agency team use. This happens more often than you would think.
    • 80. Ensure the client knows what their role in testing is and what they are testing for. They should sign off that they are happy with everything and have tested thoroughly before the staging site is deployed to live and then again before it is set live.
  • Develop - Key points (2)
    • CHANGE CONTROL – Any changes to the Scope of Work should go through a thorough change control process that has been detailed during Initiation. Changes should been completed on a change request form and signed off by the agency and the client. The Scope of Work should also be updated by the producer.
    • 81. Changes during development should be designated as essential for live or scheduled for a further phase after live. The more changes during development in the run up to live you have the more risk of errors there are.
    • 82. REMEMBER – a change request can impact both the design and layout of the website as well as the coding and back-end. A seemingly small change can have a big impact, involve several skill sets and will always require re-testing. And possibly re-testing of the whole website.
    • 83. Design realisation – The Information Architecture will dictate how many design templates for the site sections, forms, generic and certain non-generic pages. Ensure these are signed off before going into development.
  • Launch – stage 4
    Final deployment to the live environment (and staging environment). Further QA and testing is required with any amends completed. Also includes the finalisation and implementation of overall launch strategy.
  • 84. Launch - Key points
    • Ensue that the staging and live environments are set up at the outset of the project and not left until the last minute.
    • 85. Define who controls the domain name and has responsibility for instructing the switching of this in order to make the website live. Note this can take up to 24 hours and should ideally be in client control. Though lack of technical knowledge will probably mean that the Agency team requests the actual switch once the client has signed off the site for live.
    • 86. The DNS provider (the technical company that controls the domain name i.e. will need the website IP address and DNS record to switch live. Get your agency team to send this well in advance and not last minute.
    • 87. DO NOT SCRIMP AND CUT BACK ON TESTING TIMES! Once again, it is better to delay live than put a website out there for the world to see that has bugs in it.
    • 88. Change control – remember that not all client change requests are really necessary for live despite what they might think. Life will be more comfortable if non-essential changes are undertaken after live.
  • Online advertising process
  • 89. Online advertising process overview
    e.g.Duration: 1 week
    Work streams
    • Initiation / kick-off
    • 90. Project initiation (internal and client)
    • 91. Contract / budget agreement
    • 92. Requirements meets
    • 93. Specification / SOW
    • 94. Project planning
    • 95. Project plan
    • 96. Media planning
    • 97. Initial briefing
    Duration: 2-3 weeks
    Work streams
    Duration: 2-3 weeks
    Work streams
    Duration: 1-2 weeks
    Work streams
  • Online advertising - Key points
    • Have a creative and planning discussion at the outset, before setting plans and budgets. Otherwise you will miss creative and innovative opportunities by only being able to design for the specs already booked. Run it as a proper project with the stages outlined.
    • 128. Final costs can not be produced without the plan and the specification. Don’t expect your agency team or external 3rd party design teams to be able to go through the plans and notice every format etc they have to build. You MUST lay it out clearly in the specification.
    • 129. Try and get creative assets before costing as well. Always remember to ask for the source Photoshop (PSD) file.
    • 130. What’s the clients goal? To drive sales? Inform on new features? Brand awareness? These affect placement and creative.
    • 131. Like the websites and other digital media, the client should write the initial creative brief.
    • 132. Simple and clear for the ads themselves. People skim read and have ‘banner blindness’ for the most part. Get to the point and give a very clear call to action and incentive to click through.
    • 133. We are telling a story so when they click-through they should end up where they expect i.e. the competition entry form or the product details page. Just plonking them on the home page is not good enough. Create tailored landing pages with the website.
    • 134. Note that on some majorly interactive sites that static banners might well work better than animated ones.
  • Thanks.
    Bruce Waskett
    Director - Feels like mine