Process Book 4

Page 1

//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


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.