The Process

This website was created as a tool to help you with the web design process.  You can type your ideas into each bar of each phase of your design, see below.

This website is not connected to any database, but you can retain all the information that you typed in from each phase by saving this website's web design data just by going to "File" and then choosing "Save as.." and then choosing "Web Archive" as the format on a Safari browser, or "Webpage Complete" on a Chrome and FireFox browser.  Whatever browser you chose it will save your work as an html file.

Once, you have saved your html file - you can copy that file into 'Google Doc' or 'DropBox'.

Google Docs is a free web base office suite.   This is a great service.  It allows you to create and edit documents. You can drag and drop any file in to the Google Drive which you can access anytime as long as you have a browser and internet. Great Stuff!

Drop box is also a wonderful website where you can drag and drop any files.   You just need to create account with them. Did I say that it is free.   You can access DropBox on any computer, IPad and smart phones. Or you cant send the html file via email.

Phase 1: Define the Business Requirements, Analysis-Specification

The first step is to define the business requirements.   Here is where we get to think about all the great ideas for a website. We look at the bad ideas as well.  The goal for this step is to get an idea of what the client want to achieve with their website and write down the requirements for this project, like keeping the website simple, concise and efficient.

Click into the blue editor bar and start typing below:

Phase 2: Briefing-Quoting, Competitive Analysis (Research)

After defining the business requirements.  This step is where we talk to others to discuss the specifications and narrow it down to what they really want and that will fit their budget.  Try and get the brief and spec down to as fine a detail as possible, it will only help later down the road.

Plus, we conduct research amongst competitors and similar leading websites.  The goal here is to analyze and assess the competitor designs and identify areas where improvement can be made.

Click into the blue editor bar and start typing below:

Phase 3: Brainstorming, Conceptual Thinking, Sketching and Content Writing

Brainstorming, conceptual thinking and sketching out ideas is the most exciting and important phase in the design process.  Individually or as a group, this is the opportunity to be creative, generate new ideas and concepts.  The ultimate goal in this phase is to finalize a rough concept of the design.

We start the content writing phase earlier, this phase is sort of flexible to a degree, but we write the content before the design, as it just gives us that extra bit of information and understanding of what the clients are looking in their site.  It also gives us the ability to design around the content, rather then later.

Click into the blue editor bar and start typing below:

Phase 4. Design a Lo-Fidelity Wireframe

Using the results from the brainstorming session, we mock-up a lo-fi wireframe using tools such as Balsamiq or a web-based wireframing application like Gomockingbird or just a simple pen and paper.

Click into the blue editor bar and start typing below:




Phase 5. Design a Hi-Fidelity Wireframe

Once satistied with the initial draft, using Adobe Illustrator we will create a detailed wireframe with specific fonts, icons and container sizes.  We will also use fluid grids from 960gs or from Elliot Jay Stocks.

Click into the blue editor bar and start typing below:


We will be using the fluid grid at 1000px using Photoshop or Adobe Illustrator.   Once, the mockup is created there, we will pass the PSD or AI file to the developer.   The developer will slice the mock and create a fluid website using the below fluid grid.  As you can see every columns are created using percentages whch make the fluid action.

1000px = 15%
 
1000px = 15%
 
1000px = 15%
 
1000px = 15%
 
1000px = 15%
 
1000px = 15%
2 columns: 320px / 1000px = 32%
 
2 columns: 320px / 1000px = 32%
 
2 columns: 320px / 1000px = 32%
3 columns: 490px / 1000px = 49%
 
3 columns: 490px / 1000px = 49%
6 columns: 1000px / 1000px = 100%

The below fluid grid was created with 1020px in mind.   The chart is broken down from 940px to 1020px. As you can see everything is measured for you - making it easy to create your website.   Both charts are responsive.


Phase 6: Wireframe Review and Corrections

Once satistied with the initial draft, using Adobe Illustrator we will create a detailed wireframe with specific fonts, icons and container sizes.

Click into the blue editor bar and start typing below:

Phase 7: Add specifications and Finalize

The final wireframe includes instruction and detailed specifications.   This document is then used as a reference for designing visual mock-ups. Here we provide the details of the different elements, like navigation, header, body, tabs and all div with precise measurements

Click into the blue editor bar and start typing below:

Phase 8: Design Visual Mock-ups

With the final wireframes and specifications completed, the visual design mock-up is produced.  This phase is important to the website, content is KING after all.  We design content right into the site, but we also load in content using technolgy like Ajax.

Click into the blue editor bar and start typing below:

Phase 9. Testing

We test and test again.  It is always good to over test, and get additional parties to test or view from a different perspective, but remember when doing this not to stray from your original goals, ideas will be thrown up but not everything has to be done at once.  It is better to have a live site that does your core goals well, than have a site in a never ending cycle of development.

Click into the blue editor bar and start typing below:

Phase 10. Launch / Promotion

The day of the launch, it's D-Day and the client is stressed out and wants to get the site live.  Now, since it's replacing an old site we make sure that we put a pre-live version first so that we can continue testing.

Click into the blue editor bar and start typing below:

You can test your websie using several tools on the web.   One of the tools that you can use to test your website is located at Responsinator. You can also use Screenqueri.es

Phase 11. Growth and Development

This comes back to what our client want and need. We listen and review the stats and reports. We use Google Analytics to gradually improve the client site.

Click into the blue editor bar and start typing below: