Process Book 4
-
Upload
megan-cary -
Category
Documents
-
view
219 -
download
0
description
Transcript of 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
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