Every project Drift Industries takes on is different and unique in its own way. To ensure these under takings are delivered to the expectations of our clients, as well as yours, we’ve honed and refined an approach that produces exceptional work. Not every project will follow this process verbatim, but it’s a good starting point.
The Process:
Stage 1 – Defining the Project
The first and most important step in our process is to define the project. During this phase we spend as much time as possible gathering information through client surveys and research.
Client Survey – Before we get started on research we require you to complete a client survey. The survey is used to get an understanding of your audience, analyze your industry and determine the goals and programming needs of the project.
Set the Budget – The budget will define the size, boundaries and feasibility of the project. If the project is looking bigger than expected it can be broken down into different phases.
Prepare Creative Brief – The creative brief is a summary of the overall visual and conceptual goals. This document restates the target audience, user experience goals and communication strategy.
Stage 2 – Strategy
Before we fire up photoshop we need to put a plan in place to deliver the final product.
Create Schedules and Milestones – Enables both parties to see the big picture, the schedules and milestones will state when and what deliverables will be due.
Address the Content – Content should be addressed as soon as possible. Where will it come from and in what form? Will a copywriter need to be hired? A Photographer? In a redesign, a content audit of the existing site will be performed, how much will need to be revamped or rewritten. The earlier we get the content the better, it’s hard to design a site without knowing what will be displayed in it.
Define Key User Tasks – to help create information architecture and site organization we’ll define common user task and how the user will complete them.
Sitemap and Information Architecture – The sitemap shows the proposed links and main navigation. It will outline content organization and some functionality.
Wireframes – A wireframe is purely informational, non-designed layout that outlines content, primary and secondary navigation and light functionality. By putting all the page elements down on paper, you can see what is being built before you start the design. Plus, looking at a wireframes in relation to each other gives you an idea of page flow and user interaction.
Address Navigation – Navigation connects the user with the content. Buttons, links and graphics can be used to maintain a sense of place, offering users familiarity: Where are they in the site? Where do the need to go? How do they get back to where they were.
Naming and Labeling – The naming of buttons and labels, including the tone of the wording, should be consistent throughout the site. We’ll determine the type of cues (icons and/or text) necessary to support the naming, labeling and navigation. Consistency is key.
Prototypes – For complex user interactions a prototype may be needed. They allow us to examine content, navigation, page flow and test functionality.
Stage 3 – Visual Design
After the wireframes are done we start designing the home pages, internal pages and develop the styles and layouts that will be used throughout the site.
Home Page Design – The homepage usually has a unique design that differs from the interior pages, it’s purpose is as landing page which directs the user to complete their intended tasks.
Interior Page Design – The interior page template will be used on common content pages throughout the site.
Specialty Page Designs – Specialty pages are pages with a special purpose, selling a subscription or products for example.
Create a Design Style Guide – For the purpose of ongoing production, design, and maintenance, a style guide is an excellent reference document. The design style guide lists established standards for fonts, colors, headers, and many other treatments to help maintain the integrity of the design.
Stage 4 – Production
Once the design has been signed off on, we head into development. All sites, whether static or dynamic, start with an HTML template. These master pages will be used to create the rest of the site. We build sites with a close eye on the details. Templates are optimized for performance and SEO, code is lean, clean and commented.
Static Templates – Using the page structure we defined in stage 2 and the visual design from stage 3 we will implement the HTML structure. When the main structure is ready, we’ll continue with the CSS code to add styles to your website.
Client Side Functionality - We implement ‘Ajax’ features such as drag and drop, animation effects and validation, this ads responsiveness to the website.
Database Design + Development – If a database is needed we’ll create it and write SQL code defining tables, attributes and relationships.
Server Side Programming – Implement business logic, database interactions, queries, and everything else that requires server-side interaction.
Testing – Testing is done throughout the development process. Once the templates are completed they are tested in various browsers on different operating systems. Client side functionality and server side programing are tested as code is written.
Stage 5 – Content
Content is king – After the templates have been built and optimized the content will be added to them.
Populate Individual Pages – This is usually the spot the process will meet a bottle neck. It is important that content is received as soon as possible.
Stage 6 – Testing / Checklists
Testing - During this step we “stress” the application or website, executing code in various conditions (for example using different browser or various types of user input), trying to break it to discover bugs. As bugs are discovered they are fixed and retested.
Final Checks – Before moving the site to the live server a final check is conducted on design, content, production and functionality.
Stage 7 – Rollout
Finally we are ready to release your application or website! In the final stage we migrate from development server to live server. Hosting is secured and changes are made to server setup where needed. Databases are created and connections made and tested.