Process Book 8

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 | ITGM 715-OL | Project A | Process BookProject A: Dreamweaver Web Site

PROCESS BOOK 08


PROCESS BOOK

3

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


CONTENTS

4

ASSIGNMENT

Description: Using Adobe Dreamweaver and any tools you want to use for creat-ing images (Photoshop, Illustrator, ImageReady, Fireworks, a digital camera, a scanner, etc.), create a fully functioning site about an art-ist 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, includ- ing the following:

• 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-and-feel 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.


5

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, Illus- trator, 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.


6

TOPIC

Topic:Throughout my life I have often encountered Stefan Sagmeister’s work. I have looked and owned album covers that he designed, ad-miring 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 de-sign, 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 Sag-meister, 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.


7

SITE MAP


8

VISUAL RESEARCH


9

VISUAL RESEARCH


10

BRAINSTORMING


brainstorming word list

11

THUMBNAIL SKETCHES


12

THUMBNAIL SKETCHES


13

THUMBNAIL SKETCHES


14

THUMBNAIL SKETCHES


15

ROUGH SKETCHES


16

ROUGH SKETCHES


17

ROUGH SKETCHES


18

DIGITAL ROUGHS – CONCEPT 1


Digital comp of home page for Concept 1(photographs of name would rotate)

19



Digital comp of biography page for Concept 1

20


Digital comp of home page for Concept 2(photographs of work would rotate)


21


Digital comp of biography page for Concept 2


22

CONCEPT FEEDBACK


Luciano CarfagnaI 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. What-ever you choose, keep that image.

Professor Nikhil DeshpandeMegan - 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 GambrellNice 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 ClausHi 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 be-come the hierarchy without it. Good job I’m looking forward to seeing this develop more.

Concept 2 was the clear favorite

23

REVISED COMPS


homepage

24

REVISED COMPS


biography page

25

REVISED COMPS


impressions page

26

REVISED COMPS


gallery page

27

ANALYSIS & EXECUTION


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 Dream-weaver. 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 float-ing 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.

28

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 cre-ated 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 dif-ficult to implement. I knew I could create a simple gallery in html and CSS, however I had come across several interesting Javascript gal-lery 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 aes-thetic that I prefer while showcasing what the site is about – Stefan Sagmeister. I am also pleased with the technical skills I gained dur-ing 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.

29

FINAL DESIGN SOLUTION


home page

30



biography page

31



impressions page

32



gallery page

33



resources page

Process Book 8

Documents

Transcript of Process Book 8