Demo of Design
0 likes231 views
The document outlines the development of an analytical website for a client looking to enhance their web presence and facilitate information navigation. It details several phases of the project, including research, wireframe creation, content management, and client training. Additionally, it provides guidelines on site architecture, mock-up designs, and the use of branding elements such as color palettes and typography.
Demo of Design
- 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