//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 05 References available upon request.
6711 Overlook Road // Mobile, Alabama // 36618 // 251 454 7510 // megan.cary@gmail.com
Megan Cary | GRDS 720-OL | Project A | Process Book
Project A: Website Design
PROCESS BOOK Megan Cary | GRDS 720-OL | Project A | Process Book
Project A: Website Design
Assignment
4
Proposal
6
Competitive Analysis
7
User Profile 10 Site Identity 11 Site Map 12 Home Page Goals 13 Brainstorming 14 Sketches 15 Digital Roughs 18 Analysis & Execution 23 Final Design Solution 24 Revised Final Design Solution 29
3
Megan Cary | GRDS 720-OL | Project A | Process Book
Project A: Website Design
CONTENTS
Proposal:
1. Select one of the following site genres on which to base my design: • News Mosaics • Community Conference • Self-Service Government • Nonprofits as Networks of Help • Grassroots Information Sites • Valuable Company Sites • Educational Forms • Stimulating Arts and Entertainment 2. Choose a group, organization, or company to build the site around. It is acceptable to choose one I have worked with in previous courses, something in my real life, or something completely new. 3. My site design must include a logo and site branding elements. If I am able to re-use a logo I have created in a previous course or for a past client (with the client’s permission), I can save myself the work of creating a new logo for my site. 4. Define what the group, organization, or company does. 5. Define the target audience for the site. 6. Define goals for the site, answering questions such as: • What is the purpose of the site? • What do I want to say? • What image do I want to portray? • What do I want my audience to do with my site?
Competitive Analysis:
1. Find at least three Web sites.
4
2. Using techniques described in the unit content and readings, perform a competitive analysis, considering such things as: features, navigation, use of text and images, use of color 3. Consider what elements work and which don’t. Consider ideas you can borrow from the competition, and what things you can improve upon with your own site design. 4. Document your competitive analysis, including screen shots as you find appropriate.
User Profile/Case Scenario:
1. Using the techniques described in the unit content and readings, create a profile for a fictional user of your site: demographic information (name, age, gender, nationality, and place of residence) relevant attitudes and beliefs lifestyle information (e.g., busy soccer mom or male undergraduate student living on campus?) interests, hobbies, and favorite Web sites expectations of your site computer skills technical information, including type of computer, browser, and connection speed. 2. Using techniques described in the content and readings, create a use-case scenario that tells a story of how your user will find and interact with your site. 3. Refer to the course content and readings for guidance on creating the user profile and scenario. Your goal is to paint a picture of a “real” person who will be using your site. 4. Document your user profile and scenario, and save it as a PDF or RTF document for submission.
Megan Cary | GRDS 720-OL | Project A | Process Book
Project A: Website Design
ASSIGNMENT
Site Identity:
Sketches:
2. Define other branding elements for the site, including signature colors and/or fonts.
2. Create three rough sketches of your home page, based on your thumbnail sketches.
3. Note: As a graphic design student, you should be experienced in creating brand identity elements. If you are not familiar with the process of creating logos and other identity elements, contact the course professor for guidance.
3. Draw thumbnail sketches of lower-level pages, concentrating on varying layout grids.
1. Create a logo for your site. You may use or adapt a logo that you created in the past, but it must fit the site you are designing.
4. Colors should be websafe*
Site Goals/Site Map:
1. Determine the goals for your home page, considering issues such as: message features overall visual effect navigation 2. Determine the general content you will present in the lower-level pages of your site. 3. Using techniques presented in the unit content and readings, create a site map for your site 4. The site map should include the home page and at least one level of pages below that. You will only be responsible for designing four of the lower-level pages, but the site map should reflect the entire site as you envision the final product. 5. Label each page on the site map with the page title.
1. Draw thumbnail sketches of your home page until you come up with three different layout ideas that you like.
4. Based on your thumbnails, create hand-drawn rough sketches for four lower-level pages, using at least two different grid styles. Within the sketches, include simplified text location and image placeholders, as well as designating navigation and any special features (such as search functions, drop-down menus, breadcrumbs, and other navigational elements).
Final Site:
1. Also by 11:59 p.m. U.S. EST/EDT on the last day of Unit 3, upload your Part 3 work to your course portfolio site, either as a downloadable document or as one or more HTML pages. 2. Share your work for peer review by posting a link to your portfolio site in a new thread on the Unit 4: Project A, Part 3 forum.
*After finishing the assignment I consulted with the professor and my peers and the general consensus was that adhering to websafe colors is an outdated procedure. It was decided that revising the site to allow for softer colors would be advisable.
6. Document your site map. You may present the map as a scanned hand drawing or as a file created in a drawing or flowchart application.
5
Megan Cary | GRDS 720-OL | Project A | Process Book
Project A: Website Design
ASSIGNMENT
Proposal:
Cake Patisserie is a fictitious local bakery in Mobile, Alabama. It is a new company that specializes in cake, specifically gourmet cupcakes. They also sell coffee, cocoa, tea and assorted treats that are offered in limited quantities. They have a small eating area for those who would like to dine in, but they primarily offer their cupcakes to go or for delivery as catering orders. They also offer a small amount of branded merchandise, such as t-shirts, aprons, and stickers for local fans.
The image that Cake Patisserie would like to portray is that of a modern bakery with a hint of traditional bakeshop charm. It should be fun and sophisticated, they are not opposed to mixing in a slight retro vibe. Overall the audience should be able to use this site to find out everything they would want to know about Cake Patisserie without actually being in shop, allow them to purchase branded fan merchandise and let them know that Cake Patisserie is a fun and special place.
Cake Patisserie is interested in creating a basic company website for their bakery. The target audiences of this site will be adults, primarily women and aged 25-55, who have an interest in baking and/ or food. Because of the gourmet aspect of the bakery, their audience probably has a college degree and earns over $35,000 per year. A secondary audience for this bakery would be families, who fit within the same age, educational and earning demographic and consider visiting bakeries and ice cream shops as a fun family outing. The purpose of Cake Patisserie’s website will be to provide information and online advertising about their bakery. It will also offer a limited selection of branded merchandise, available for purchase. The website will tell customers basic information about the bakery, such as hours and location, news, menu selections, merchandise, special offers, directions, and contact information.
6
Megan Cary | GRDS 720-OL | Project A | Process Book
Project A: Website Design
PROPOSAL
Frosting Cupcakes:
Frosting is a local cupcake shop in Ocean Springs, Mississippi, which is a nearby city to where my proposed cupcake shop is located. The color scheme is pink, brown and lime green. The site features a striped lime and green background that I feel is a quite overwhelming for the average viewer. It is very vivid and powerful for this type of website. Frosting features a flash entry page and uses live text throughout their website for body copy. The primary navigation at the top of the page consists of image sliced roll over buttons that link to home, about us, menu, frosting club, party info, retail, and hours and locations. Most of the primary information is above the fold, but the social network links are below. The menu link features a listing of all of Frosting’s menu items with the ability to hover over the menu items and see detailed information and images of each cupcake. I found this information to be slow to load and often the live text loaded as a reddish brown on top of a dark background before the lighter background appeared behind the menu information. While there is a link for retail merchandise, the website does not offer any online ordering of any kind.
http://www.frostingshop.com/home.html
The locations link offers a map of the location of every store. The maps are reversed where white streets are on brown backgrounds. The brown of the backgrounds are the same color of the polkadot border around the directions, so the browns bleed together and form odd negative shape circles around the map. The colors are distracting and the reversed type is hard to read.
7
Megan Cary | GRDS 720-OL | Project A | Process Book
Project A: Website Design
COMPETITIVE ANALYSIS
Sprinkles Cupcakes:
Sprinkles Cupcakes is a national chain of cupcake shops that have many locations around the country. The company has become quite famous and been featured in numerous press items and on television shows like Oprah. Sprinkles website features a very simple color scheme. The dominate color is a clean white and the accent colors are primarily dark brown and red. Because of the dominate white color the website appears minimal, contemporary and current design wise. As I visited the site I attempted to copy some of the type on the entry page and was unable to do so. This leads me to believe the type on the home page for Sprinkles is not live which may cause issues for some visitors and search engines. The primary navigation links are located at the top of the page and are made of image slices, as is the logo. There are links to every area of the site including, order, flavors, calendar, gifts, party, wedding, accessories, locations, press, community and about us. All of the vital information for the website is located above the fold, including social networking links.
http://www.sprinkles.com/
Sprinkles not only sells branded merchandise on their websites, they also allow customers to order cupcakes online. Their menu page features a rollover description of every cupcake and the day it is available. This rollover description is fast loading and easy to read, compared to Frosting’s website.
8
Megan Cary | GRDS 720-OL | Project A | Process Book
Project A: Website Design
COMPETITIVE ANALYSIS
The Cupcake Shoppe Raleigh:
Cupcake Shoppe Raleigh is a local cupcake shop located in the city of Raleigh whose size and region is somewhat comparable to my proposed company. The Cupcake Shoppe features a white, brown and pink color scheme that is vintage inspired. The homepage resembles a box of gourmet chocolates to me. The colors are muted and easy to look at for extended periods of time. This website features live text throughout, which is good for viewers of all types and search engines as well. All of the vital links and information are located above the fold for easy access. One of the only instances of not using live text is the primary navigation buttons at the top, as they are made of image slices as are all of the analyzed sites that I have reviewed. The primary top navigation features links to the home, about us, menu, gallery, press, and contact us page. It is worth noting that the menu page is probably the most user friendly of all of the analyzed websites. The menu is made of image slices and live text in a simple table that does not have to load or be viewed layered over other information, as was the case with roll over descriptions both Sprinkles and Frosting offered.
http://www.thecupcakeshopperaleigh.com/
The contact us page offers a map of the location of The Cupcake Shoppe Raleigh, the map is clear and easy to read as compared to Frosting’s website.
9
Megan Cary | GRDS 720-OL | Project A | Process Book
Project A: Website Design
COMPETITIVE ANALYSIS
Name: Heather Hanson Age: 30 Occupation: Administrative Assistant Marital Status: Married, 5 years Children: One Daughter Detailed Profile and Scenario: Heather is a thirty year old, female, Caucasian administrative assistant in Mobile, Alabama. She has been married to her husband, George, for five years and they have a four year old daughter named Brianna. Her job keeps her quite busy, as does taking care of her daughter. Heather enjoys reading, cooking and watching television in her free time. Since she loves to cook some of her favorite websites include www.foodtv.com and marthastewart. com, both of which contain recipes and food that she has seen on television. Heather expects websites that she visit should have all of the pertinent information about a company or organization, including products they offer and location. She uses a computer on a daily basis for her job and is comfortable surfing the internet for things she is interested in. However, she does not consider herself a techy person and does not like visiting websites that are hard to find or visit. Heather and her family own a desktop dell computer that is about two years old and they use Internet Explorer and Firefox as their primary browsers. She has high-speed broadband internet through the telephone company.
10
One of Heather’s co-workers recently told her there was a new cupcake shop in town called Cake Patisserie. Since she loves to bake and eat sweets she has decided to go for a visit with her daughter one weekend. Cake Patisserie is not listed in the phonebook yet and Heather is interested in their menu and hours. She decides to look on the internet and see if the shop has a website. Heather uses the search engine, Google, to find most things she is looking for. This time is no different and she goes to www.google.com and types “cupcake shop mobile, alabama” into the search screen. Cake Patisserie has live text on their homepage that includes a brief description on their homepage. This description includes a sentence like “Cake Patisserie is a brand new gourmet cupcake shop in Mobile, Alabama.” Because this is included on their page, Google has scanned the page and remembers this information, so when Heather searches, Cake Patisserie appears in the results. As the website appears for Heather she immediately notices the top navigation that includes easy to read links. She notices links for menu and hours and clicks on them first. She then begins to browse the other links, like shop and about us, since they are available. After about five or ten minutes of browsing she has the information she wanted to obtain about Cake Patisserie and logs off the site satisfied and prepared to visit the shop for a closer look the next day.
Megan Cary | GRDS 720-OL | Project A | Process Book
Project A: Website Design
USER PROFILE
11
Megan Cary | GRDS 720-OL | Project A | Process Book
Project A: Website Design
SITE IDENTITY
12
Megan Cary | GRDS 720-OL | Project A | Process Book
Project A: Website Design
SITE MAP
The main goal of the home page for Cake Patisserie is to be clear, consise and convey the information that the audience of the bakery needs to know. In order to do this the navigation should be simple and easy to understand. There will be five main links secondary links in the main navigation bar of the homepage. These links include about us, menu, events, store, and contact us. These links are self explanatory and should not confuse the viewer. There will be drop down menus that occur on two of the main secondary links – About Us and Store. The About Us link will break down into Story (featuring a brief summary of how the bakery was founded) and Hours & Location (featuring hours, address and a map of the site). The Store link will break down into two sections Apparel and Swag. The Apparel link will feature t-shirts, hoodies and aprons. The Swag link will feature branded stickers and mugs. Other than the main secondary links there will also be a shopping cart link at the right-hand top of every page of the site so that users can easily access things they have decided to purchase. The visual effect of the site is clean, simple and easy to read. The color palette primarily consists of muted browns, peaches, and pinks. There are some stronger secondary colors that will be used only as accents. It should invoke a contemporary yet slight retro or vintage feel that is created from simple color blocking. The background of the page may feature light stripes that imitate a bakery box.
13
Megan Cary | GRDS 720-OL | Project A | Process Book
Project A: Website Design
HOMEPAGE GOALS
brainstorming word list
14
Megan Cary | GRDS 720-OL | Project A | Process Book
Project A: Website Design
BRAINSTORMING
15
Megan Cary | GRDS 720-OL | Project A | Process Book
Project A: Website Design
SKETCHES
16
Megan Cary | GRDS 720-OL | Project A | Process Book
Project A: Website Design
SKETCHES
17
Megan Cary | GRDS 720-OL | Project A | Process Book
Project A: Website Design
SKETCHES
Digital comp of about us page
18
Megan Cary | GRDS 720-OL | Project A | Process Book
Project A: Website Design
DIGITAL ROUGHS
Digital comp of menu page
19
Megan Cary | GRDS 720-OL | Project A | Process Book
Project A: Website Design
DIGITAL ROUGHS
Digital comp of events page
20
Megan Cary | GRDS 720-OL | Project A | Process Book
Project A: Website Design
DIGITAL ROUGHS
Digital comp of store page
21
Megan Cary | GRDS 720-OL | Project A | Process Book
Project A: Website Design
DIGITAL ROUGHS
Digital comp of home page
22
Megan Cary | GRDS 720-OL | Project A | Process Book
Project A: Website Design
DIGITAL ROUGHS
After creating my digital comps and receiving feedback from my professor I felt I was ready to start building my website. I built the entire website in Adobe Dreamweaver. This was our first assignment and we had not begun the bulk of our CSS training yet. While some of this website is styled in CSS, much of it is also broken up into tables and image slices. The assignment sheet stated that we were to create the site entirely out of web safe colors. However, in our class discussions we were learning that most web development is no longer restricted to web safe colors. I felt somewhat restricted because of this requirement and throughout the design process was never truly satisfied with my results. The resulting website as documented on the next few pages is strongly branded and reflects the design goals that I established for myself early on and that the assignment required. It received a strong grade and excellent feedback from my peers.
23
Megan Cary | GRDS 720-OL | Project A | Process Book
Project A: Website Design
ANALYSIS & EXECUTION
home page
24
Megan Cary | GRDS 720-OL | Project A | Process Book
Project A: Website Design
FINAL DESIGN SOLUTION
about page
25
Megan Cary | GRDS 720-OL | Project A | Process Book
Project A: Website Design
FINAL DESIGN SOLUTION
menu page
26
Megan Cary | GRDS 720-OL | Project A | Process Book
Project A: Website Design
FINAL DESIGN SOLUTION
events page
27
Megan Cary | GRDS 720-OL | Project A | Process Book
Project A: Website Design
FINAL DESIGN SOLUTION
email page
28
Megan Cary | GRDS 720-OL | Project A | Process Book
Project A: Website Design
FINAL DESIGN SOLUTION
Even though the original final design solution received a high “A� grade, I felt that the site was not strong enough so I consulted with my professor and my peers. My professor agreed that I could alter the layout and colors slightly to create a more refined website that would fit the company profile better. I believe the revised final design solution on the next few pages to be stronger, lighter and more sophisticated than the orginal. I also think the CSS based code is more efficient.
revised design solution
29
Megan Cary | GRDS 720-OL | Project A | Process Book
Project A: Website Design
REVISED FINAL DESIGN SOLUTION
home page
30
Megan Cary | GRDS 720-OL | Project A | Process Book
Project A: Website Design
REVISED FINAL DESIGN SOLUTION
about page
31
Megan Cary | GRDS 720-OL | Project A | Process Book
Project A: Website Design
REVISED FINAL DESIGN SOLUTION
location page
32
Megan Cary | GRDS 720-OL | Project A | Process Book
Project A: Website Design
REVISED FINAL DESIGN SOLUTION
menu page
33
Megan Cary | GRDS 720-OL | Project A | Process Book
Project A: Website Design
REVISED FINAL DESIGN SOLUTION
events page
34
Megan Cary | GRDS 720-OL | Project A | Process Book
Project A: Website Design
REVISED FINAL DESIGN SOLUTION
store page
35
Megan Cary | GRDS 720-OL | Project A | Process Book
Project A: Website Design
REVISED FINAL DESIGN SOLUTION
contact page
36
Megan Cary | GRDS 720-OL | Project A | Process Book
Project A: Website Design
REVISED FINAL DESIGN SOLUTION