this is a completed design from concept to full comps of website. it's the demo section for my Design for Drupal presentation.

1. Analytical Website
prepared by C.Goodrum

2. Table of Contents
Brief Understanding & Site Procedure . . . . . . . . . . . . . . . . 1
Content Summary. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Site Navigation/Information Architecture . . . . . . . . . . . . . . 3
Wireframe Layouts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Moodboard . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
Mock ups . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

3. Brief Understanding:
Client has been frustrated by lack of web presence. Wants to easily guide people online to find infor-
mation on lab’s site. Site to follow the path of rental.cleanair.com (client quote “I’d like to have clients
find what they need like on the rentals site”).
Phase I: Phase V:
Interviews and questionnaires with labora- Mock up Wireframes into Photoshop.
tory staff. Flush out mock ups.
Research top ten competitors websites and Present to client.
marketing material. Feedback.
Revisions.
Phase II:
Summarize questionnaires. Phase VI:
Report competitive findings. Drupal Implementation on MAMP.
Suggest feature components for users on Zen Sub eme
lab’s site. Input Content (copy, images, files)
Feedback. Style Sheets
Disk based page type templates
Phase III: Cross browser testing
Collect copy and create additional copy. Present.
Edit copy for web, reduce, revise, repeat. Feedback.
Present copy (document without layout). Revisions.
Present.
Phase IV: Phase VII:
Moodboard. Create client user, permissions, interface
Sketching and Wireframes. Train client
Present Wireframes and discuss placement
options of key features.
Feedback.
1

4. Homepage: News:
• Intro • Most Recent News briefs
• “Coda” slider featured section • Links to Individual News
• primary & secondary pages
navigation • primary & secondary
• Latest News teasers navigation
• Contact Us & Search • Contact Us & Search
Methods: Individual Services:
• Overview • Overview
• Listings by number, • What it does
compounds analyzed • What it measures
• Method summaries, link to • What method
pdf complete methods • primary & secondary
• primary & secondary navigation
navigation • Contact Us & Search
• Contact Us & Search
Contact Us:
Services: • contact form
• Overview • primary & secondary
• listing/links of Individual navigation
Services • Contact Us & Search
• primary & secondary
navigation
• Contact Us & Search
Resources:
• Overview
• Links to download files
• Listing and Summaries of
Resources
• primary & secondary
navigation
• Contact Us & Search
2

5. 3

6. Homepage
Contact Us
CleanAir
Logo Search
Tagline goes here
Services Methods Resources News
About Us
Services
Image Slider
Methods
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tortor metus, malesuada nec
porttitor et, convallis et tellus. Cras tempus, velit et scelerisque malesuada, libero nibh semper
sapien, et ultrices urna eros non odio. Quisque et nulla quam. Donec ac nulla id sapien
consequat porttitor. Cras nulla erat, imperdiet in Resources
Read More
Divisions INTRODUCTION Latest News
Heading 4 Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, 01/01/01
there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the
Heading 4 Semantics, a large language ocean. Far far away, behind the word
mountains, far from the
Heading 4 A small river named Duden flows by their place and supplies it with the necessary countries Vokalia...
regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your
Heading 4 mouth. 01/01/01
Heading 4 Even the all-powerful Pointing has no control about the blind texts it is an almost Far far away, behind the word
unorthographic life One day however a small line of blind text by the name of Lorem mountains, far from the
Ipsum decided to leave for the far World of Grammar. countries Vokalia...
Services page
Contact Us
CleanAir
Logo Search
Tagline goes here
Services Methods Resources News
INTRODUCTION
Divisions
Far far away, behind the word mountains, far from the countries
Heading 4 Vokalia and Consonantia, there live the blind texts. Separated
they live in Bookmarksgrove right at the coast of the Semantics, a Image
Heading 4
large language ocean.
Heading 4
Heading 4
Heading 4
Ion Chromatography Gas Chromatography Resistivity
Far far away, behind the word mountains, Far far away, behind the word mountains, Far far away, behind the word mountains,
far from the countries Vokalia and far from the countries Vokalia and far from the countries Vokalia and
Consonantia, there live the blind texts. Consonantia, there live the blind texts. Consonantia, there live the blind texts.
Separated they live in Bookmarksgrove Separated they live in Bookmarksgrove Separated they live in Bookmarksgrove
right at the coast of the Semantics, a right at the coast of the Semantics, a right at the coast of the Semantics, a
large language ocean. large language ocean. large language ocean.
more more more
Gravametric Scrubber Testing Titrations
Far far away, behind the word mountains, Far far away, behind the word mountains, Far far away, behind the word mountains,
far from the countries Vokalia and far from the countries Vokalia and far from the countries Vokalia and
Consonantia, there live the blind texts. Consonantia, there live the blind texts. Consonantia, there live the blind texts.
Separated they live in Bookmarksgrove Separated they live in Bookmarksgrove Separated they live in Bookmarksgrove
right at the coast of the Semantics, a right at the coast of the Semantics, a right at the coast of the Semantics, a
large language ocean. large language ocean. large language ocean.
more more more
4

7. Resources page
Contact Us
CleanAir Search
Logo
Tagline goes here
Services Methods Resources News
RESOURCES
Divisions
Far far away, behind the word mountains, far from the countries
Heading 4 Vokalia and Consonantia, there live the blind texts. Separated
they live in Bookmarksgrove right at the coast of the Semantics, a Image
Heading 4
large language ocean.
Heading 4
Heading 4
Heading 4
Chain of Custody Form Fee Schedule
Far far away, behind the word mountains, Far far away, behind the word mountains,
far from the countries Vokalia and far from the countries Vokalia and
Consonantia, there live the blind texts. Consonantia, there live the blind texts.
Separated they live in Bookmarksgrove Separated they live in Bookmarksgrove
right at the coast of the Semantics, a right at the coast of the Semantics, a
large language ocean. large language ocean.
more more
Image
Accreditations Quote Request
Far far away, behind the word mountains, Far far away, behind the word mountains,
far from the countries Vokalia and far from the countries Vokalia and
Consonantia, there live the blind texts. Consonantia, there live the blind texts.
Separated they live in Bookmarksgrove Separated they live in Bookmarksgrove
right at the coast of the Semantics, a right at the coast of the Semantics, a
large language ocean. large language ocean.
more more
Methods Page
Contact Us
CleanAir
Logo Search
Tagline goes here
Services Methods Resources News
Methods Page Title
Divisions
Far far away, behind the word mountains, far from the countries
Heading 4 Vokalia and Consonantia, there live the blind texts. Separated
they live in Bookmarksgrove right at the coast of the Semantics, a Image
Heading 4
large language ocean.
Heading 4
Heading 4
Heading 4
Methodology Table
EPA Methods Analytes Categorey
Method 1A Compound 1 Category 1, Category 2
Method 1B Compound 1, 2, 3, 4 Category 1, Category 2
Method 2A Compound 2, 5 Category 4
Method 2B Compound 2, 3 Category 1
Method 2C Compound 1 Category 1, Category 2
Method 2D Compound 3 Category 6
5

8. News Page
Contact Us
CleanAir Search
Logo
Tagline goes here
Services Methods Resources News
NEWS
Divisions
Far far away, behind the word mountains, far from the countries
Heading 4 Vokalia and Consonantia, there live the blind texts. Separated
they live in Bookmarksgrove right at the coast of the Semantics, a Image
Heading 4
large language ocean.
Heading 4
Heading 4
Heading 4
01/01/01 News Event 1
Far far away, behind the word mountains, far from the countries
Vokalia and Consonantia, there live the blind texts. Separated
they live in Bookmarksgrove right at the coast of the Semantics,
Image a large language ocean.
more
01/01/01 News Event 2
Far far away, behind the word mountains, far from the countries
Vokalia and Consonantia, there live the blind texts. Separated
they live in Bookmarksgrove right at the coast of the Semantics,
Image a large language ocean.
more
Individual News Page
Contact Us
CleanAir Search
Logo
Tagline goes here
Services Methods Resources News
NEWS Event 1 - 01/01/01
Divisions
Far far away, behind the word mountains, far from the countries
Heading 4 Vokalia and Consonantia, there live the blind texts. Separated
they live in Bookmarksgrove right at the coast of the Semantics,
Heading 4 a large language ocean.
Heading 4 Far far away, behind the word mountains, far from the countries
Image
Vokalia and Consonantia, there live the blind texts. Separated
Heading 4 they live in Bookmarksgrove right at the coast of the Semantics,
a large language ocean.
Heading 4 Far far away, behind the word mountains, far from the countries
Vokalia and Consonantia, there live the blind texts. Separated
they live in Bookmarksgrove right at the coast of the Semantics,
a large language ocean. Image Info/Caption
Far far away, behind the word mountains, far from the countries
Vokalia and Consonantia, there live the blind texts. Separated
they live in Bookmarksgrove right at the coast of the Semantics,
a large language ocean.
Far far away, behind the word mountains, far from the countries
Vokalia and Consonantia, there live the blind texts. Separated
they live in Bookmarksgrove right at the coast of the Semantics,
a large language ocean.
back to new
6

9. Individual Services Page
Contact Us
CleanAir
Logo Search
Tagline goes here
Services Methods Resources News
INDIVIDUAL SERVICE
Divisions
Far far away, behind the word mountains, far from the countries
Heading 4 Vokalia and Consonantia, there live the blind texts. Separated
they live in Bookmarksgrove right at the coast of the Semantics, a Image
Heading 4
large language ocean.
Heading 4
Heading 4
Heading 4
What is it? What we analyze? Methods we use
Individual Services
Heading 3 Heading 3
Heading 4 Far far away, behind the word mountains, Far far away, behind the word mountains,
far from the countries Vokalia and far from the countries Vokalia and
Heading 4 Consonantia, there live the blind texts. Consonantia, there live the blind texts.
Separated they live in Bookmarksgrove Separated they live in Bookmarksgrove
Heading 4 right at the coast of the Semantics, a right at the coast of the Semantics, a
large language ocean. large language ocean.
Image
Heading 4 Far far away, behind the word mountains,
Far far away, behind the word mountains, far from the countries Vokalia and
Heading 4 far from the countries Vokalia and Consonantia, there live the blind texts.
Consonantia, there live the blind texts. Separated they live in Bookmarksgrove
Separated they live in Bookmarksgrove right at the coast of the Semantics, a
right at the coast of the Semantics, a large language ocean.
large language ocean.
Contact Us Page
Contact Us
CleanAir
Logo Search
Tagline goes here
Services Methods Resources News
Contact Us
Divisions
Far far away, behind the word mountains, far from the countries
Heading 4 Vokalia and Consonantia, there live the blind texts. Separated
Image
Heading 4
Heading 4
Heading 4 Your Name:
Heading 4
Your Email:
Comment/Question:
Button
7

10. Moodboard
Project Title: Analytical web site
Sample Color Pallette Designer Notes:
The color palatte used supports the
CleanAir logo colors. It’s softer
palette that allows pages that
contain large amounts of text to be
read easily.
#858585 #E9CBC9 #C9C9C9 #367BBF #E7DECD #DFEAF5 #FFF1E6
Textures include rigid geometric
Sample Patterns & Textures patterns to compliment and con-
trast the soft color palette.
Imagery will consist of photography
from the laboratory as well as
supporting drawing of lab symbols
and equipment.
Other Elements / Sample Styles
Sample Photography & Illustrations
Sample Typography
Font: Helvetica Neue Bold Condensed
Font: Helvetica Neue Medium Condensed
Font: Helvetica
Page content text sample. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse in massa id augue
sodales tincidunt. Curabitur vitae enim aliquet tellus pulvinar suscipit. Vivamus ut erat laoreet pede luctus iaculis. In egestas
orci nec diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Quisque quis
neque. Phasellus adipiscing rhoncus magna. Sed nisi elit, pretium ut, ultricies ac, fermentum id, purus. Aenean pretium
libero ac quam. Ut risus metus, dictum nec, imperdiet vitae, malesuada at, ligula.
Font: Helvetica
copyright 2009 CleanAir.
8

11. Mock Ups
9

12. Mock Ups
10

13. Mock Ups
11

14. Mock Ups
12