DESIGN SPECIFICATIONS CAITLYN DEPP 4 APRIL 2014 Mid-Semester Project:

17
DESIGN SPECIFICATIONS CAITLYN DEPP 4 APRIL 2014 Mid-Semester Project:

Transcript of DESIGN SPECIFICATIONS CAITLYN DEPP 4 APRIL 2014 Mid-Semester Project:

Page 1: DESIGN SPECIFICATIONS CAITLYN DEPP 4 APRIL 2014 Mid-Semester Project:

DESIGN SPECIFICATIONSCAITLYN DEPP4 APRIL 2014

Mid-Semester Project:

Page 2: DESIGN SPECIFICATIONS CAITLYN DEPP 4 APRIL 2014 Mid-Semester Project:

DESIGN ANALYSIS

Part 1

Page 3: DESIGN SPECIFICATIONS CAITLYN DEPP 4 APRIL 2014 Mid-Semester Project:

Background Statement

Design and develop a professional (responsive) for Go Green organization

The site provides: 1.)information about ways to promote a clean

environment 2.)green resources 3.)contact information 4.)ways to make donations 5.)information about products to help clean the

environment 6.) news about the environment 7.)a form to request an appointment

Page 4: DESIGN SPECIFICATIONS CAITLYN DEPP 4 APRIL 2014 Mid-Semester Project:

Background Statement (cont.)

Individuals, businesses, and corporations promoting a cleaner environment

The goals of this website are to help achieve an awareness of information for a cleaner environment and ways to help advertise the cause/donate

Page 5: DESIGN SPECIFICATIONS CAITLYN DEPP 4 APRIL 2014 Mid-Semester Project:

Site Requirement

Responsive Design Information about ways to clean the environment Green Resources Contact Information Ways to make donations Information about products to help clean the environment A form to request an appointment Graphics Flat Design Type Scale

Page 6: DESIGN SPECIFICATIONS CAITLYN DEPP 4 APRIL 2014 Mid-Semester Project:

Description of Users

StudentsAdvocatesResearchersGeneral Public

Page 7: DESIGN SPECIFICATIONS CAITLYN DEPP 4 APRIL 2014 Mid-Semester Project:

DESIGN SPECIFICATIONS

Part 2

Page 8: DESIGN SPECIFICATIONS CAITLYN DEPP 4 APRIL 2014 Mid-Semester Project:

Typography

Alegrya-Sans for headings H1: 3.25em; /*16 x 3.25*/ H2: 2.5em; /*16 x 2.5=24*/

Cantarell for body text font-style: normal; font-weight: 200px;

Page 9: DESIGN SPECIFICATIONS CAITLYN DEPP 4 APRIL 2014 Mid-Semester Project:

Color Scheme

#060 (green)#FF6 (yellow)#999 (grey)

Page 10: DESIGN SPECIFICATIONS CAITLYN DEPP 4 APRIL 2014 Mid-Semester Project:

Breakpoints

@media screen and (max-width:480px) @media screen and (min-width:481px) and

(max-width:768px)

Page 11: DESIGN SPECIFICATIONS CAITLYN DEPP 4 APRIL 2014 Mid-Semester Project:

PENCIL SKETCHES

Design Process

Page 12: DESIGN SPECIFICATIONS CAITLYN DEPP 4 APRIL 2014 Mid-Semester Project:

Pencil Sketches (Home Page)

Page 13: DESIGN SPECIFICATIONS CAITLYN DEPP 4 APRIL 2014 Mid-Semester Project:

Pencil Sketches (Products Page)

Page 14: DESIGN SPECIFICATIONS CAITLYN DEPP 4 APRIL 2014 Mid-Semester Project:

Pencil Sketches (Request Appointment)

Page 15: DESIGN SPECIFICATIONS CAITLYN DEPP 4 APRIL 2014 Mid-Semester Project:

Pencil Sketches (Make Donation)

Page 16: DESIGN SPECIFICATIONS CAITLYN DEPP 4 APRIL 2014 Mid-Semester Project:

Pencil Sketches (Contact Info)

Page 17: DESIGN SPECIFICATIONS CAITLYN DEPP 4 APRIL 2014 Mid-Semester Project:

Pencil Sketches (News Page)