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 // [email protected]

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

PROCESS BOOK 04


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


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


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.


6

SITE MAP

SALON HOME

about services team location contact


7

VISUAL RESEARCH

visual references for site style 1 - earthy/calm


8

VISUAL RESEARCH

visual references for site style 1 - modern/chic


9

BRAINSTORMING

brainstorming word list


10

THUMBNAIL SKETCHES


11

THUMBNAIL SKETCHES


12

THUMBNAIL SKETCHES


13

ROUGH SKETCHES


14

ROUGH SKETCHES


15

DIGITAL ROUGHS – STYLE 1

Digital comp of home page for Style 1


16


Digital comp of about page for Style 1


17


Digital comp of services page for Style 1


18


Digital comp of home page for Style 2


19


Digital comp of about page for Style 2


20


Digital comp of services page for Style 2


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.


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.


23

FINAL DESIGN SOLUTION - STYLE 1

home page


24

FINAL DESIGN SOLUTION – STYLE 1

about page


25


services page


26


team page


27


location page


28


contact page


29


home page


30


about page


31


services page


32


team page


33


location page


34


contact page


process book 4

Documents

digital roughs style

final design solution

corresponding css style

basic website

generic website template

student webspace

html css

contentsmegan cary grds