//MEGANCARY graphic designer
EDUCATION MFA Candidate (2010 - present) Savannah College of Art and Design Graphic Design, 3.5 GPA
BFA (2009) University of South Alabama Primary - Graphic Design, Secondary - Painting. 3.98 GPA, Summa Cum Laude
WORK EXPERIENCE Graphic Designer (June 2009 - present) Crown Products
Responsibilities include the design of all electronic media including web banners and graphics, e-mail marketing and social media management. Additionally, I create specialty items including custom direct marketing pieces and high-end catalogs. Other duties include product photography and product development design.
Art Director (June 2007 - present) Negative Capability Press
Responsibilities include interior and exterior design and typesetting of books. Additionally, I am responsible for most of the company’s marketing duties.
Student Assistant (June 2006 - May 2009) University of South Alabama Responsibilities included assisting students and trouble shooting graphic design soft- ware and Mac hardware. I also operated several large format Epson printers.
TECHNICAL SKILLS
ACHIEVEMENTS
Silver Addy® Award (2010) Print Collateral Crown Products, AAF Mobile Bay
Silver Addy® Award (2010) Interactive Web Design (w/B. Davis) Crown Products, AAF Mobile Bay
Progress Through Ideas Award (2010) Ebsco Industries Employee of the Quarter (2010) Crown Products SCAD Honors Scholarship Recipient
AFFILIATIONS AIGA AAF Mobile Bay Golden Key Honour Society Phi Kappa Phi Honor Society
Adobe Photoshop CS5 Adobe Illustrator CS5 Adobe InDesign CS5 Adobe Dreamweaver CS5 Adobe Flash CS5 Adobe Acrobat CS5 XHTML/CSS
ADDITIONAL SKILLS Catalog & book production Website production E-blast creation Digital illustration Product photography & design Competitive analysis Copy writing Social media management QR code design & optimization Research
PROCESS BOOK 04 References available upon request.
6711 Overlook Road // Mobile, Alabama // 36618 // 251 454 7510 // megan.cary@gmail.com
Megan Cary | GRDS 720-OL | Project B | Process Book
Project B: Designing Websites with CSS
PROCESS BOOK Megan Cary | GRDS 720-OL | Project B | Process Book
Project B: Designing Websites with CSS
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
3
Megan Cary | GRDS 720-OL | Project B | Process Book
Project B: Designing Websites with CSS
CONTENTS
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 independently 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
4
Megan Cary | GRDS 720-OL | Project B | Process Book
Project B: Designing Websites with CSS
ASSIGNMENT
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.
5
Megan Cary | GRDS 720-OL | Project B | Process Book
Project B: Designing Websites with CSS
PROPOSAL
SALON HOME about
6
services
team
location
contact
Megan Cary | GRDS 720-OL | Project B | Process Book
Project B: Designing Websites with CSS
SITE MAP
visual references for site style 1 - earthy/calm
7
Megan Cary | GRDS 720-OL | Project B | Process Book
Project B: Designing Websites with CSS
VISUAL RESEARCH
visual references for site style 1 - modern/chic
8
Megan Cary | GRDS 720-OL | Project B | Process Book
Project B: Designing Websites with CSS
VISUAL RESEARCH
brainstorming word list
9
Megan Cary | GRDS 720-OL | Project B | Process Book
Project B: Designing Websites with CSS
BRAINSTORMING
10
Megan Cary | GRDS 720-OL | Project B | Process Book
Project B: Designing Websites with CSS
THUMBNAIL SKETCHES
11
Megan Cary | GRDS 720-OL | Project B | Process Book
Project B: Designing Websites with CSS
THUMBNAIL SKETCHES
12
Megan Cary | GRDS 720-OL | Project B | Process Book
Project B: Designing Websites with CSS
THUMBNAIL SKETCHES
13
Megan Cary | GRDS 720-OL | Project B | Process Book
Project B: Designing Websites with CSS
ROUGH SKETCHES
14
Megan Cary | GRDS 720-OL | Project B | Process Book
Project B: Designing Websites with CSS
ROUGH SKETCHES
Digital comp of home page for Style 1
15
Megan Cary | GRDS 720-OL | Project B | Process Book
Project B: Designing Websites with CSS
DIGITAL ROUGHS – STYLE 1
Digital comp of about page for Style 1
16
Megan Cary | GRDS 720-OL | Project B | Process Book
Project B: Designing Websites with CSS
DIGITAL ROUGHS – STYLE 1
Digital comp of services page for Style 1
17
Megan Cary | GRDS 720-OL | Project B | Process Book
Project B: Designing Websites with CSS
DIGITAL ROUGHS – STYLE 1
Digital comp of home page for Style 2
18
Megan Cary | GRDS 720-OL | Project B | Process Book
Project B: Designing Websites with CSS
DIGITAL ROUGHS – STYLE 2
Digital comp of about page for Style 2
19
Megan Cary | GRDS 720-OL | Project B | Process Book
Project B: Designing Websites with CSS
DIGITAL ROUGHS – STYLE 2
Digital comp of services page for Style 2
20
Megan Cary | GRDS 720-OL | Project B | Process Book
Project B: Designing Websites with CSS
DIGITAL ROUGHS – STYLE 2
After creating my digital comps and receiving feedback from my professor 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 image 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, graphics 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.
21
Megan Cary | GRDS 720-OL | Project B | Process Book
Project B: Designing Websites with CSS
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 specified 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 websites 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 encourages 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.
22
Megan Cary | GRDS 720-OL | Project B | Process Book
Project B: Designing Websites with CSS
ANALYSIS & EXECUTION
home page
23
Megan Cary | GRDS 720-OL | Project B | Process Book
Project B: Designing Websites with CSS
FINAL DESIGN SOLUTION - STYLE 1
about page
24
Megan Cary | GRDS 720-OL | Project B | Process Book
Project B: Designing Websites with CSS
FINAL DESIGN SOLUTION – STYLE 1
services page
25
Megan Cary | GRDS 720-OL | Project B | Process Book
Project B: Designing Websites with CSS
FINAL DESIGN SOLUTION – STYLE 1
team page
26
Megan Cary | GRDS 720-OL | Project B | Process Book
Project B: Designing Websites with CSS
FINAL DESIGN SOLUTION – STYLE 1
location page
27
Megan Cary | GRDS 720-OL | Project B | Process Book
Project B: Designing Websites with CSS
FINAL DESIGN SOLUTION – STYLE 1
contact page
28
Megan Cary | GRDS 720-OL | Project B | Process Book
Project B: Designing Websites with CSS
FINAL DESIGN SOLUTION – STYLE 1
home page
29
Megan Cary | GRDS 720-OL | Project B | Process Book
Project B: Designing Websites with CSS
FINAL DESIGN SOLUTION – STYLE 2
about page
30
Megan Cary | GRDS 720-OL | Project B | Process Book
Project B: Designing Websites with CSS
FINAL DESIGN SOLUTION – STYLE 2
services page
31
Megan Cary | GRDS 720-OL | Project B | Process Book
Project B: Designing Websites with CSS
FINAL DESIGN SOLUTION – STYLE 2
team page
32
Megan Cary | GRDS 720-OL | Project B | Process Book
Project B: Designing Websites with CSS
FINAL DESIGN SOLUTION – STYLE 2
location page
33
Megan Cary | GRDS 720-OL | Project B | Process Book
Project B: Designing Websites with CSS
FINAL DESIGN SOLUTION – STYLE 2
contact page
34
Megan Cary | GRDS 720-OL | Project B | Process Book
Project B: Designing Websites with CSS
FINAL DESIGN SOLUTION – STYLE 2