. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
STEP 1: Contracts, Conversations and Checklist:
Client and DA have a meeting, discuss pricing, overall goals of the site, stake holders involved, back-end development options, overall aesthetics, etc. Client goes over the Web Design Checklist for overall organization of the project.
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
STEP 2: Information Architecture:
A. Client Fills Out Site-map and Questionnaire
Client fills out questionnaire in as much detail as possible. Client also writes up a rough cut site-map so DA can know what kind of content categories need to go up on the website. The existing site-map (if available) may be used as a reference. Questionnaire and site-map are then provided to designer at DA.
B. Discussion and Changes on Site-map and Questionnaire:
DA designer will then review the questionnaire to get a sense of the goals of the website (online organizing? brochure information site?) The suggested site-map may then be edited to better the user experience + to emphasize and categorize in accordance to the desired goals of the website. During this step, the designer and client will discuss the elements that need to be highlighted on the front page to use it as a portal to pull viewers into specific sections of the site (defined by the overall goal of the site stated in the questionnaire)
C. Wireframe Development
DA designer then proposes wireframes. These do NOT show any design elements, only information hierarchy, placement and prioritization on the front page. Multiple options are proposed, and the wireframe stage may go through a couple of rounds. See wireframe examples here.
*Once the wireframe and Site-map are final, they will be handed off the the CMS programmer in order to build the back-end. The programmer then works with the client on a parallel track (while the aesthetic design is being worked out) to fill in content into the different sections of the site and develop other functionality. The idea is that when the aesthetic design is done, the back-end complete with content and functionality, will just be married with the visual design and ready to roll. This allows for maximum time efficient.
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
STEP 3: Aesthetic Design
A. Client and Designer Discuss Aesthetics:
The conversation will be largely based on examples provided in the questionnaire by the client of sites that they like/dislike; it is important at this stage to think about the way that the organization wants to present itself to the public – formal/official? grassroots activisty?
B. Designer Presents Aesthetic Designs:
This is a long process that will begin with the presentation of multiple prototypes, and go through steps of tweaking and altering till a successful design has been decided upon. The designs are mostly shown on the front page. See visual design examples here.
Once the front page design is finalized. Landing page template + custom page designs will be presented. See some example of landing page templates here.
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
STEP 4: Passing on Design to Programmer
Once the designs are finalized, they will be passed on as FIREWORKS FILES to the programmer. The Designer then stands by for any last minute questions/additions while the design is being fit with the back-end.