15
The Gary Wright Project presents

Coffee Café Sample Page Layout Presentation

Embed Size (px)

DESCRIPTION

Brought to you by:Zarna Doshi (FearlessLeader)Michael Sharkey (DesignGuru)Corey Blackburn (PixelMeister)Jean Tuttle (TextMaster)

Citation preview

Page 1: Coffee Café Sample Page Layout Presentation

The Gary Wright Project

presents

Page 2: Coffee Café Sample Page Layout Presentation

Sample page presentation | April 5, 2011

Page 3: Coffee Café Sample Page Layout Presentation

Designing a website• The Premise & Challenge

• Target Audience: Who is the Customer?

• Competitors We Can Learn From

• What Are The Specific Goals for Our Site?

• Creating a Structure That Reflects Our Priorities

• Creating a Palette That Appeals to Our Audience

• Reinforcing Our Message via Logo, Type & Copy

• Our Layout: Design Principles Demonstrated

• Our Final Design: Close up View

• In Conclusion

Page 4: Coffee Café Sample Page Layout Presentation

The PremiseOnce a person visits Coffee Café they'll return often and bring their friends.

The ChallengeCreate a fun, appealing, easy-to-use Web Site that gets the Customer “in the door.”

Page 5: Coffee Café Sample Page Layout Presentation

Client Expectations• Make it easy for existing and new customers to find

basic information regarding hours, location, weekly music features, weekly specials, and their monthly featured artist.

• Drive more traffic to the bricks and mortar location.

• Increase their customer base by 150-200 in the first six weeks following the launch of the new site, and increase attendance at weekly music shows by 20%.

Page 6: Coffee Café Sample Page Layout Presentation

Who is the customer?• The target audience for Coffee Café are a lively

group of professionals in their mid to late twenties who are single or married but without children. They have the luxury of time and money and love what Coffee Café has to offer. Most are employed and working their first job out of college. They are web savvy and utilize all the internet has to offer. They demand full-time access to the web no matter where they are. Coffee Café is just the place for them.

–Chicagoans, in the Bucktown neighborhood and beyond

–Young professionals

–Mid to late twenties

–No children

–Users of social media

–They care about Organic and Fair Trade products

–Into local music scene

Page 7: Coffee Café Sample Page Layout Presentation

Who’s the competition?

• StarbucksLarge, very successful coffee chain

• @Spot CafeA small Chicago coffeehouse with a youthful, hip vibe

• StarbucksA coffee bar lounge that’s slightly more upscale, and features live music

We analyzed several competitors’ sites for strengths & weaknesses:

Page 8: Coffee Café Sample Page Layout Presentation

Competitor Strengths• Starbucks

Presentation, Color, Graphics– Information is well organized, easy

to find.– Logo is nicely designed and

consistently used & placed throughout the site

– Palette ties in with product (green & brown symbolize coffee bean roasting cycle)

• @Spot CaféAppeal to Target Audience, Palette

– Fun & trendy design sensibility targets young, hip customers.

– Warm golds and reds echo a décor which is similar to Coffee Café’s “warm earthtones”

• TazzaStylish Design & Palette, Effective Layout

– Colors are contemporary, organic, and warm in feel, but cool in attitude

– Compelling, interesting information “above the fold”

– Engaging main image invites the viewer in (“Picture Yourself Here”)

Page 9: Coffee Café Sample Page Layout Presentation

Goals of Coffee Café website

• Drive more traffic to the bricks and mortar location:– Increase customer base by 150-200 in first 6 weeks

– Increase attendance at weekly music shows by 20%

• Make it EASY to find:– Hours– Location– Weekly Music Events– Monthly Featured Artist– Weekly Specials

Page 10: Coffee Café Sample Page Layout Presentation

Structure

Page 11: Coffee Café Sample Page Layout Presentation

Color SchemeWe reviewed a number of variations before settling on our final palette:

– Rust, Espresso & Olive for “earthiness”

– Bright Gold for warmth & light

– Cool blues for contrast & crispness

Page 12: Coffee Café Sample Page Layout Presentation

Logo, Fonts & CopyOur lead designer created a distinctive logo incorporating the cafe’s earth tone décor. The logo can be used horizontally or vertically, depending on the application.

Sans serif fonts Arial & Verdana are used forheadlines, subheads & body copy, complimenting the serif font. Caslon that is used in the logo.

Taglines and text are written to be concise, incorporate keywords, and reflect key concepts.

Page 13: Coffee Café Sample Page Layout Presentation

Design PrinciplesAlignment, Contrast, Proximity, Repetition

Elements line up within an “ice” page layout; Type is centered or flush left as appropriate. Background gradation creates contrast against foreground boxes of varying tones/colors. Bright yellow, orange & blue type “pops” against dark rust or brown backgrounds. Ochre box contrasts against olive for extra emphasis, highlighting event information. Related information is clustered together within boxes. Consistency of font usage (size, weight, color) helps to organize information.

Page 14: Coffee Café Sample Page Layout Presentation
Page 15: Coffee Café Sample Page Layout Presentation

In ConclusionWe believe that a Web Site developed from this Sample Page will meet the goal of building the Coffee Café brand and customer base through:

Its appeal to the young, tech-savvy Target Audience

Use of an attractive, well-structured layout

Organized, easy-to-find content

A versatile, well-designed logo

Quality photography & simple, clean typography

A modern palette combining warm earth tones with brighter accents

Smart & concise body copy

The Gary Wright Project are:Zarna Doshi (FearlessLeader)Michael Sharkey (DesignGuru)Corey Blackburn (PixelMeister)Jean Tuttle (TextMaster)