process book 4

EDUCATION MFA Candidate (2010 - present)SavannahCollegeofArtandDesignGraphicDesign,3.5GPA

BFA (2009) UniversityofSouthAlabama Primary-GraphicDesign,Secondary-Painting.3.98GPA,SummaCumLaude

WORK EXPERIENCE Graphic Designer (June 2009 - present) Crown Products Responsibilitiesincludethedesignofallelectronicmediaincludingwebbannersand

graphics,e-mailmarketingandsocialmediamanagement.Additionally,Icreatespecialtyitemsincludingcustomdirectmarketingpiecesandhigh-endcatalogs.Otherdutiesincludeproductphotographyandproductdevelopmentdesign.

Art Director (June 2007 - present)Negative Capability Press Responsibilitiesincludeinteriorandexteriordesignandtypesettingofbooks.Additionally,

Iamresponsibleformostofthecompany’smarketingduties.

Student Assistant (June 2006 - May 2009)University of South Alabama Responsibilitiesincludedassistingstudentsandtroubleshootinggraphicdesignsoft-wareandMachardware.IalsooperatedseverallargeformatEpsonprinters.

ACHIEVEMENTS Silver Addy® Award(2010) PrintCollateral CrownProducts,AAFMobileBay

Silver Addy® Award (2010) InteractiveWebDesign(w/B.Davis) CrownProducts,AAFMobileBay

Progress Through Ideas Award(2010) EbscoIndustries Employee of the Quarter(2010) CrownProducts

SCAD Honors Scholarship Recipient

AFFILIATIONSAIGAAAFMobileBayGoldenKeyHonourSocietyPhiKappaPhiHonorSociety

TECHNICAL SKILLSAdobePhotoshopCS5AdobeIllustratorCS5AdobeInDesignCS5AdobeDreamweaverCS5AdobeFlashCS5AdobeAcrobatCS5XHTML/CSS

ADDITIONAL SKILLSCatalog&bookproductionWebsiteproductionE-blastcreationDigitalillustrationProductphotography&designCompetitiveanalysisCopywritingSocialmediamanagementQRcodedesign&optimizationResearch

Referencesavailableuponrequest.//M

EG

ANCARYg

raph

ic d

esig

ner

6711 Overlook Road // Mobile, Alabama // 36618 // 251 454 7510 // megan.cary@gmail.com

Megan Cary | GRDS 720-OL | Project B | Process BookProject B: Designing Websites with CSS

PROCESS BOOK 04

Megan Cary | GRDS 720-OL | Project B | Process BookProject B: Designing Websites with CSS

PROCESS BOOK

3

Assignment 4

Proposal 5

Site Map 6

Visual Research 7

Brainstorming 9

Thumbnail Sketches 10

Rough Sketches 13

Digital Roughs - Style 1 15

Digital Roughs - Style 2 18

Analysis & Execution 21

Final Design Solution - Style 1 23

Final Design Solution - Style 2 29

CONTENTS

Megan Cary | GRDS 720-OL | Project B | Process BookProject B: Designing Websites with CSS

4

ASSIGNMENT

Overview: The goal of this assignment is to create a generic website template for a genre of business. This template will be able to be styled inde-pendently by different external style sheets. For this assignment we will create two different styles of the same basic website. The primary objective of the assignment beyond designing a website is build skills with HTML & CSS that will help us see how CSS could easily change the look and feel of a website easily.

Requirements:• Create a proposal that includes the following: - Site Genre/Subject - Site Map - Thumbnail Sketches - Mood Board & Color Scheme for each site

• Create HTML Wireframes and upload to your student webspace

• Create Full Color Digital Comps of at three pages of your website

• Create the two websites and their corresponding CSS style sheets and upload to your student webspace

• Validate your code and save the results as a PDF

• Test your sites on www.browsershots.org and save the results

• Save your two site files and submit them in a compressed ZIP folder

Megan Cary | GRDS 720-OL | Project B | Process BookProject B: Designing Websites with CSS

5

PROPOSAL

Genre/Subject:I have decided to create a generic company website for salon and spa businesses. I will then alter the style of the website primarily via CSS to show the versatility of the template. There are thousands of spa and salon business around the world that need websites and I feel that it would be very appropriate to create a basic site that could be styled differently as needed.

Features:My two sites will include an about page, services page, team page, contact page, location page and links to social networking sites and/or a twitter feed so users can see and interact with the salon.

The two HTML documents will be almost identical, with an external style sheet primarily controlling how the two different websites look.

Megan Cary | GRDS 720-OL | Project B | Process BookProject B: Designing Websites with CSS

6

SITE MAP

SALON HOME

about services team location contact

Megan Cary | GRDS 720-OL | Project B | Process BookProject B: Designing Websites with CSS

7

VISUAL RESEARCH

visual references for site style 1 - earthy/calm

Megan Cary | GRDS 720-OL | Project B | Process BookProject B: Designing Websites with CSS

8

VISUAL RESEARCH

visual references for site style 1 - modern/chic

Megan Cary | GRDS 720-OL | Project B | Process BookProject B: Designing Websites with CSS

9

BRAINSTORMING

brainstorming word list

Megan Cary | GRDS 720-OL | Project B | Process BookProject B: Designing Websites with CSS

10

THUMBNAIL SKETCHES

Megan Cary | GRDS 720-OL | Project B | Process BookProject B: Designing Websites with CSS

11

THUMBNAIL SKETCHES

Megan Cary | GRDS 720-OL | Project B | Process BookProject B: Designing Websites with CSS

12

THUMBNAIL SKETCHES

Megan Cary | GRDS 720-OL | Project B | Process BookProject B: Designing Websites with CSS

13

ROUGH SKETCHES

Megan Cary | GRDS 720-OL | Project B | Process BookProject B: Designing Websites with CSS

14

ROUGH SKETCHES

Megan Cary | GRDS 720-OL | Project B | Process BookProject B: Designing Websites with CSS

15

DIGITAL ROUGHS – STYLE 1

Digital comp of home page for Style 1

Megan Cary | GRDS 720-OL | Project B | Process BookProject B: Designing Websites with CSS

16

DIGITAL ROUGHS – STYLE 1

Digital comp of about page for Style 1

Megan Cary | GRDS 720-OL | Project B | Process BookProject B: Designing Websites with CSS

17

DIGITAL ROUGHS – STYLE 1

Digital comp of services page for Style 1

Megan Cary | GRDS 720-OL | Project B | Process BookProject B: Designing Websites with CSS

18

DIGITAL ROUGHS – STYLE 2

Digital comp of home page for Style 2

Megan Cary | GRDS 720-OL | Project B | Process BookProject B: Designing Websites with CSS

19

DIGITAL ROUGHS – STYLE 2

Digital comp of about page for Style 2

Megan Cary | GRDS 720-OL | Project B | Process BookProject B: Designing Websites with CSS

20

DIGITAL ROUGHS – STYLE 2

Digital comp of services page for Style 2

Megan Cary | GRDS 720-OL | Project B | Process BookProject B: Designing Websites with CSS

21

ANALYSIS & EXECUTION

After creating my digital comps and receiving feedback from my pro-fessor I felt I was ready to start building my website. The first step in this process was building HTML wireframes of my content. As a new web designer, I have never built a wireframe before. I had some difficulty grasping the concept at first, but eventually realized that I just needed to get all of the basic elements of the page (text and im-age areas) created so that they could easily be styled in the external style sheets I would create.

After successfully building the wireframe, I uploaded it to my student webspace and submitted the link. I then began to style the first of the two sites with an external style sheet. After having some initial problems, I was able to successfully position my navigation, graph-ics and text divs within the style sheet.

After positioning, my final task was to specify the colors, graphics and typefaces that would be used for the first site. I did not have much trouble with this step and was able to move forward to the second site soon after.

With the first site behind me, I had an easier time styling the second site. I made a new root folder for this site and linked the wireframe to a new style sheet. I then began to alter the colors, images and other elements to create a new look and feel for the salon website, while retaining the core layout of the first site.

Megan Cary | GRDS 720-OL | Project B | Process BookProject B: Designing Websites with CSS

22

ANALYSIS & EXECUTION

After completing my sites, I uploaded them to my student web space and began testing the pages to make sure they were all functioning correctly. I then ran my pages through the validation tools as speci-fied in the assignment and checked for any major errors or problems that I needed to correct.

The next step for testing was to make sure that the sites functioned and displayed properly on multiple web browsers. I visited www.browsershots.org and submitted the sites for testing on several browsers. I then reviewed the results and found no major issues that I needed to change. Just in case, I also tested the website in Safari, Firefox, Opera and Chrome on my iMac and in Internet Explorer, Opera and Firefox on my PC.

Finally, I made final corrections and adjustments to the final two web-sites and reuploaded the sites to my student webspace. I feel that they both possess a unique look and feel that represents two major types of salons. They function correctly and convey the information that users would be looking for when visiting this type of website. I also think that the twitter feed adds to the experience and encour-ages customers to interact with the salon. Overall, I am pleased with the outcome of this project and feel that I have learned a great deal about web design and CSS.

Megan Cary | GRDS 720-OL | Project B | Process BookProject B: Designing Websites with CSS

23

FINAL DESIGN SOLUTION - STYLE 1

home page

Megan Cary | GRDS 720-OL | Project B | Process BookProject B: Designing Websites with CSS

24

FINAL DESIGN SOLUTION – STYLE 1

about page

Megan Cary | GRDS 720-OL | Project B | Process BookProject B: Designing Websites with CSS

25

FINAL DESIGN SOLUTION – STYLE 1

services page

Megan Cary | GRDS 720-OL | Project B | Process BookProject B: Designing Websites with CSS

26

FINAL DESIGN SOLUTION – STYLE 1

team page

Megan Cary | GRDS 720-OL | Project B | Process BookProject B: Designing Websites with CSS

27

FINAL DESIGN SOLUTION – STYLE 1

location page

Megan Cary | GRDS 720-OL | Project B | Process BookProject B: Designing Websites with CSS

28

FINAL DESIGN SOLUTION – STYLE 1

contact page

Megan Cary | GRDS 720-OL | Project B | Process BookProject B: Designing Websites with CSS

29

FINAL DESIGN SOLUTION – STYLE 2

home page

Megan Cary | GRDS 720-OL | Project B | Process BookProject B: Designing Websites with CSS

30

FINAL DESIGN SOLUTION – STYLE 2

about page

Megan Cary | GRDS 720-OL | Project B | Process BookProject B: Designing Websites with CSS

31

FINAL DESIGN SOLUTION – STYLE 2

services page

Megan Cary | GRDS 720-OL | Project B | Process BookProject B: Designing Websites with CSS

32

FINAL DESIGN SOLUTION – STYLE 2

team page

Megan Cary | GRDS 720-OL | Project B | Process BookProject B: Designing Websites with CSS

33

FINAL DESIGN SOLUTION – STYLE 2

location page

Megan Cary | GRDS 720-OL | Project B | Process BookProject B: Designing Websites with CSS

34

FINAL DESIGN SOLUTION – STYLE 2

contact page

Megan Cary | GRDS 720-OL | Project B | Process BookProject B: Designing Websites with CSS