//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 08 References available upon request.
6711 Overlook Road // Mobile, Alabama // 36618 // 251 454 7510 // megan.cary@gmail.com
Megan Cary | ITGM 715-OL | Project A | Process Book
Project A: Dreamweaver Web Site
PROCESS BOOK Megan Cary | ITGM 715-OL | Project A | Process Book
Project A: Dreamweaver Web Site
Assignment
4
Topic
6
Site Map
7
Visual Research
8
Brainstorming 10 Thumbnail Sketches 11 Rough Sketches 15 Digital Roughs - Concept 1 18 Digital Roughs - Concept 2 20 Concept Feedback 22 Revised Digital Comps 23 Analysis & Execution 27 Final Design Solution 29
3
Megan Cary | ITGM 715-OL | Project A | Process Book
Project A: Dreamweaver Web Site
CONTENTS
Description:
Using Adobe Dreamweaver and any tools you want to use for creating images (Photoshop, Illustrator, ImageReady, Fireworks, a digital camera, a scanner, etc.), create a fully functioning site about an artist or work that has inspired you. You might choose a visual artist, a performer, a curator, a film, an exhibition, etc. Choose someone or something influential so you can find plenty of information and imagery to work with. Your Web site should present your subject in a compelling way so as to communicate to others what you like about it.
Requirements:
• Your site must be well designed and must communicate clearly to an intended audience. To be well designed, your site should:
• be laid out in a clear and organized manner • indicate a hierarchy of information • include typefaces that are appropriate for headings and sub headings and contribute to the look and feel of the site • have a consistent and coherent scheme of colors and decora tive elements • have a strong composition.
• You must post a design brief to the Unit 2 discussion forum. The brief should indicate the overall concept of your piece, i.e., its subject and presentational context. Indicate your intended audience and how you wish to address them. • Your design must be uniquely yours. • Your site must have at least four separate sections or pages, including the following:
4
• background or historical information about the subject • your interpretation and impressions of the subject • a gallery with imagery and examples (which may require sub pages) • resources for additional information.
• Each page must have a means to access any other page in the site using a device such as a global-navigation system. • All links must contain default and rollover graphics. • Site content should include both text and imagery. • Include at least one external link that opens in a separate browser window. • Define CSS styles and use them to format your HTML text. Store the styles in an external CSS document to be used site-wide.
Deliverables:
Project deliverables include concept sketches, a site map, look-andfeel explorations, design comps, and fully functioning site files. You will submit your site files in a folder compressed into a single ZIP file.
Timeline:
Unit 1: • Begin thinking about your project topic and jotting down ideas in your sketchbook. • Prepare your design brief (as described above), your concept sketches on paper, and a site map created in Illustrator or another drawing program.
Megan Cary | ITGM 715-OL | Project A | Process Book
Project A: Dreamweaver Web Site
ASSIGNMENT
Unit 2: • Project A, Part 1: Submit your design brief, concept sketches, and site map on Day 1 of this unit. • You should have documents showing your exploration of look and feel, along with initial design comps prepared in Photoshop, Illustrator, or another drawing program. Comps should show at least two separate concepts, with two site pages from each. Unit 3: • Submit Project A, Part 2, your comps on Day 1 of this unit. • Revise and flesh out the comps. Choose one design direction and make changes to it in response to your most recent critique. Unit 4: • Submit Project A, Part 3, your final design comps on Day 1 of this unit. • Finish your Web site. Unit 5: • Submit Project A, Part 4, your completed, functioning Web site on Day 1 of this unit.
5
Megan Cary | ITGM 715-OL | Project A | Process Book
Project A: Dreamweaver Web Site
ASSIGNMENT
Topic:
Throughout my life I have often encountered Stefan Sagmeister’s work. I have looked and owned album covers that he designed, admiring them but never realizing the person behind them. Years later while watching the movie Helvetica I began to realize that he had a lot to say about design. I began to research him and eventually stumbled across three talks he had contributed to TED - happy design, what he has learned in his life and the power of time off. These videos changed the way I viewed design, and to some extent, life. Because of the impact he has made on me personally as a designer, I would like to create an informational website about Stefan Sagmeister, his life, work and philosophies for this project. The site would be aimed at professional designers and design students. It would include a biography detailing his early years, career and current projects; a section of my impressions on his personal philosophies about design and how they have impacted me; a media section with a gallery of images and videos; and finally a resources section that includes links to his website, books and the movie Helvetica.
6
Megan Cary | ITGM 715-OL | Project A | Process Book
Project A: Dreamweaver Web Site
TOPIC
7
Megan Cary | ITGM 715-OL | Project A | Process Book
Project A: Dreamweaver Web Site
SITE MAP
8
Megan Cary | ITGM 715-OL | Project A | Process Book
Project A: Dreamweaver Web Site
VISUAL RESEARCH
9
Megan Cary | ITGM 715-OL | Project A | Process Book
Project A: Dreamweaver Web Site
VISUAL RESEARCH
brainstorming word list
10
Megan Cary | ITGM 715-OL | Project A | Process Book
Project A: Dreamweaver Web Site
BRAINSTORMING
11
Megan Cary | ITGM 715-OL | Project A | Process Book
Project A: Dreamweaver Web Site
THUMBNAIL SKETCHES
12
Megan Cary | ITGM 715-OL | Project A | Process Book
Project A: Dreamweaver Web Site
THUMBNAIL SKETCHES
13
Megan Cary | ITGM 715-OL | Project A | Process Book
Project A: Dreamweaver Web Site
THUMBNAIL SKETCHES
14
Megan Cary | ITGM 715-OL | Project A | Process Book
Project A: Dreamweaver Web Site
THUMBNAIL SKETCHES
15
Megan Cary | ITGM 715-OL | Project A | Process Book
Project A: Dreamweaver Web Site
ROUGH SKETCHES
16
Megan Cary | ITGM 715-OL | Project A | Process Book
Project A: Dreamweaver Web Site
ROUGH SKETCHES
17
Megan Cary | ITGM 715-OL | Project A | Process Book
Project A: Dreamweaver Web Site
ROUGH SKETCHES
Digital comp of home page for Concept 1 (photographs of name would rotate)
18
Megan Cary | ITGM 715-OL | Project A | Process Book
Project A: Dreamweaver Web Site
DIGITAL ROUGHS – CONCEPT 1
Digital comp of biography page for Concept 1
19
Megan Cary | ITGM 715-OL | Project A | Process Book
Project A: Dreamweaver Web Site
DIGITAL ROUGHS – CONCEPT 1
Digital comp of home page for Concept 2 (photographs of work would rotate)
20
Megan Cary | ITGM 715-OL | Project A | Process Book
Project A: Dreamweaver Web Site
DIGITAL ROUGHS – CONCEPT 2
Digital comp of biography page for Concept 2
21
Megan Cary | ITGM 715-OL | Project A | Process Book
Project A: Dreamweaver Web Site
DIGITAL ROUGHS – CONCEPT 2
Luciano Carfagna I like parts of both concepts. The colors of concept one are very cool and make the site pleasing to the eye. That image on the homepage of concept 2 is amazing though! I keep wanting to look at it. Whatever you choose, keep that image. Professor Nikhil Deshpande Megan - both options look good. I personally like the second one better because its a lot cleaner and using the space in a better way. Also like the landing image better - the final pick is up to you but you have a good start here. Jarred Gambrell Nice samples here! They both take on a clean professional look and gives plenty room in the body section for either text or imagery. I find myself leaning towards the second concept the most, mainly for its cleaner appearance which would place all viewer attention on the content. The first concept feels to place a setting with the wood grain background and this may or may not mesh well with images or content you plan to show. Ryan Claus Hi Megan, I think both options are a great start. However I also lean towards your second option. I like the textured background in your first option but I think your information and images pop more and become the hierarchy without it. Good job I’m looking forward to seeing this develop more.
22
Concept 2 was the clear favorite
Megan Cary | ITGM 715-OL | Project A | Process Book
Project A: Dreamweaver Web Site
CONCEPT FEEDBACK
homepage
23
Megan Cary | ITGM 715-OL | Project A | Process Book
Project A: Dreamweaver Web Site
REVISED COMPS
biography page
24
Megan Cary | ITGM 715-OL | Project A | Process Book
Project A: Dreamweaver Web Site
REVISED COMPS
impressions page
25
Megan Cary | ITGM 715-OL | Project A | Process Book
Project A: Dreamweaver Web Site
REVISED COMPS
gallery page
26
Megan Cary | ITGM 715-OL | Project A | Process Book
Project A: Dreamweaver Web Site
REVISED COMPS
With my revised comps created, I had a clear vision of what I wanted the final website to look like. I analyzed the comps in order to figure out the necessary layout items I would need to create in Dreamweaver. I began by creating the basic box model in Dreamweaver for the homepage. I then began to style the page on an external CSS style sheet. It took me two days to get the basic navigation menu created. I tried several different approaches completely in CSS to create the floating arrows in the navigation menu unsuccessfully. I ultimately chose to use graphics to create the roll over buttons because I knew the sub-navigation at the bottom of the page would be live text, making it readable by search engines. My next major hurdle was the rotating banner image. I knew that I could leave the home page as a static image, but I felt that it was important to have some dynamic content on the homepage. I knew I could create the effect easily in flash. However, flash is not always supported on mobile devices such as iPhones and iPads and often users do not update their browser plug-ins. I often work in tandem with my company’s web developer, so I asked his advice and he suggested I use Javascript. After reading several Javascript tutorials I was able to create a simple rotating display of images related to Stefan Sagmeister on the homepage.
27
Megan Cary | ITGM 715-OL | Project A | Process Book
Project A: Dreamweaver Web Site
ANALYSIS & EXECUTION
After laying out the home page I was able to simply rework the layout I had already created to complete the biography and impressions pages. The text was too long to display in the space allotted so I created a scrolling text box to hold the copy. I also chose to complete the resources page at this time, because it was simple a matter of altering the layout. I saved the gallery for last because I knew it would be the most difficult to implement. I knew I could create a simple gallery in html and CSS, however I had come across several interesting Javascript gallery techniques in my research for the homepage. I chose a jQuery technique that would allow me to implement a floating thumbnail navigation menu at the bottom that displayed a full size image at the top. While it took me several tries to implement it successfully, ultimately I believe it brought the site to the next level. I am very proud of this website. I feel that it presents the clean aesthetic that I prefer while showcasing what the site is about – Stefan Sagmeister. I am also pleased with the technical skills I gained during this project. Being a relative beginner in regards to web design, I am happily surprised that I was able to learn to implement dynamic content effectively in a short amount of time. Overall, I feel that this project was a success.
28
Megan Cary | ITGM 715-OL | Project A | Process Book
Project A: Dreamweaver Web Site
ANALYSIS & EXECUTION
home page
29
Megan Cary | ITGM 715-OL | Project A | Process Book
Project A: Dreamweaver Web Site
FINAL DESIGN SOLUTION
biography page
30
Megan Cary | ITGM 715-OL | Project A | Process Book
Project A: Dreamweaver Web Site
FINAL DESIGN SOLUTION
impressions page
31
Megan Cary | ITGM 715-OL | Project A | Process Book
Project A: Dreamweaver Web Site
FINAL DESIGN SOLUTION
gallery page
32
Megan Cary | ITGM 715-OL | Project A | Process Book
Project A: Dreamweaver Web Site
FINAL DESIGN SOLUTION
resources page
33
Megan Cary | ITGM 715-OL | Project A | Process Book
Project A: Dreamweaver Web Site
FINAL DESIGN SOLUTION