Web Design + Development
| Question: | “What’s the difference between a $5,000 web project and a $10,000+ web project?” |
| Answer: | “A collaborative process that reduces uncertainty.” * |
Not all of DID's web projects are valued at $10,000+. Some are smaller and some are larger. However, the successful execution of any project, large or small, has to follow a process. Without this process, it’s very easy to lose control of the scope of a project, and no one wants that.
Donkey Ink Design (“DID”) has developed a time-proven collaborative process for developing database-driven websites and content management systems (“CMS”) over the years – a process that very much includes you, the client. This process fit very nicely with our decision to switch to working on the Drupal platform. This document outlines that process (with possible variations depending on the project).
Step 1. Discovery
The first step prior to designing and developing your website is to determine what DID is going to be building so that a quote can be presented. This is part of the process is called “discovery” and is executed by having our clients focus on 3 important questions:
- What is the purpose of the site?
- What kind of content will the site contain?
- How will the content be organized?
During the discovery process we will look at the answers to these questions and establish a sitemap, which is basically a structured list of pages and subpages your website will contain for the users and site administrators along with a brief description of the content types appearing on those pages. By creating a sitemap for your website, the scope of the project is determined and DID is able to prepare a quotation for the design and development of your website.
Step 2. Quote Presentation/Consultation/Approval
DID will then present you with a quotation for the design and development of your website and CMS. At this time you can make any changes/adjustments to the project outline and the quote will be adjusted if necessary. Once the quote is approved in writing or via email, a timeline is established and a deposit of 50% of the total agreed upon amount, accompanied by all collateral files (logos, images, textual content, etc.), is accepted by DID.
Step 3. Wireframing
The first and most important step taken for any website project is to establish the manner in which the website content will be organized and how the user will interact with your website to access the content. Working with the sitemap established in Step 1. Discovery, and tweaking it if necessary, DID will produce an interactive PDF wireframe. A wireframe is a rough sketch of your website’s page content and functionality and it’s achieved by creating the pages outlined in the sitemap using placeholder text and black and white boxes. The wireframe does not incorporate any design whatsoever and no final layout concepts are established, however one can click on simple buttons in the PDF that will work very much like they will on the finished site to navigate from page to page to get an idea of how users will interact with your site. Once the wireframe behaves more or less how the site should, DID requires written sign off on the wireframe(s) before we can move into the design portion of the project. Projects requiring more than one user interface will have more than one PDF wireframe.
Step 4. Overall Site Design, Look & Feel
At this point the desired visual direction is determined through consulting with you on what your clients respond to in terms of aesthetics and functionality, all the while keeping a mind to usability awareness. A conversation about the image sourcing process will take place during this step as well. Two versions of the home page design are created to choose from based on this discussion. Each page is designed and laid out as it will appear on the web. These design composites (“comps”) are static and non-functioning, though there will be instances of mouseover states (what a link will look like when the user has the cursor over it) to help give you an idea of the overall interactive colour scheme.
Step 5. Design Approval & Sign Off
The two home page comps are submitted for design selection. We request that you spend some time deciding which design you want to go with and then come up with one (1) reasonable revision list to ensure that the design meets your approval. Once DID has this list, the revisions are implemented and the home page design is resubmitted. Any design tweaks are then implemented if necessary. Once home page design approval is received in an email, we then design the necessary inner pages (or inner page layout templates) based on the approved home page design and the above process is repeated until you are satisfied with the site’s look and feel. Once this is achieved, we require written sign off on the design as a whole. Any design change requests made after design sign off will be billed separately and in addition to the agreed upon price. The reason for this is to ensure that we do not move into the next step, Site & CMS Development, and have to change the design, which would affect any programming that may already be implemented to make the design functional. Reworking code to incorporate design is a lot of work, which is why the design needs to be 100% complete and approved by you before programming begins.
Step 6. Site & CMS Development on the Development Site (“Dev Site”)
This is the most complicated and time-consuming step for most projects. The approved designs are now converted into functional web pages using development technologies/platforms including, but not limited to, HTML5, CSS3, jQuery/Javascript, MySQL, PHP and Drupal. Development and configuration of your Drupal CMS environment usually occurs alongside Steps 3 and 4 to prepare content, forms and Drupal modules so they will be ready to be integrated with your website design. When the website is complete or if we need your input during development, your website will be accessible to you on the Donkey Ink Design development server using a URL similar to http://YOURDOMAIN.dev.donkeyink.com.
Step 7. Site Introduction/Client Administrator CMS Training on the Dev Site
Once the Dev Site is functional and has gone through a thorough round of internal testing by DID, we go over the site with you during a training and site introduction session. This is when any desired revisions to the functionality will be requested and implemented should they be necessary. The CMS Training/Site Introduction session may differ for every site subject to variables such as client location and scope of the specific CMS attached to the project.
Step 8. Overall Project Sign Off, Final Payment & Site Launch
Once the training has been completed and you are satisfied with the website and have a solid understanding of how to administer it, DID requires a written or emailed sign off that the job is complete, accompanied by final payment. Once final payment is received, the entire site and CMS is uploaded – launched – to the proper servers and the site will be fully functional! The popping of champagne corks is optional and should occur a safe distance away from any computers.
…And of course, if there are any questions or issues after the site is launched, we’d be all too happy to address them for you.
*Thanks to the guys at Industrial Brand for the Q&A inspiration here
| Download as PDF |
|---|
| Web Design + Development Process (337.12 KB) |