Coffee Café Sample Page Layout Presentation


Published on

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

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Coffee Café Sample Page Layout Presentation

  1. 1. The Gary Wright Project presents
  2. 2. <ul><li>Sample page presentation | April 5, 2011 </li></ul>
  3. 3. Designing a website <ul><li>The Premise & Challenge </li></ul><ul><li>Target Audience: Who is the Customer? </li></ul><ul><li>Competitors We Can Learn From </li></ul><ul><li>What Are The Specific Goals for Our Site? </li></ul><ul><li>Creating a Structure That Reflects Our Priorities </li></ul><ul><li>Creating a Palette That Appeals to Our Audience </li></ul><ul><li>Reinforcing Our Message via Logo, Type & Copy </li></ul><ul><li>Our Layout: Design Principles Demonstrated </li></ul><ul><li>Our Final Design: Close up View </li></ul><ul><li>In Conclusion </li></ul>
  4. 4. The Premise <ul><li>Once a person visits Coffee Café </li></ul><ul><li>they'll return often and bring their </li></ul><ul><li>friends. </li></ul>The Challenge Create a fun, appealing, easy-to-use Web Site that gets the Customer “ in the door.”
  5. 5. Client Expectations <ul><li>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. </li></ul><ul><li>Drive more traffic to the bricks and mortar location. </li></ul><ul><li>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%. </li></ul>
  6. 6. Who is the customer? <ul><li>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. </li></ul><ul><li>– Chicagoans, in the Bucktown neighborhood and beyond </li></ul><ul><li>– Young professionals </li></ul><ul><li>– Mid to late twenties </li></ul><ul><li>– No children </li></ul><ul><li>– Users of social media </li></ul><ul><li>– They care about Organic and Fair Trade products </li></ul><ul><li>– Into local music scene </li></ul>
  7. 7. Who’s the competition? <ul><li>Starbucks </li></ul><ul><li>Large, very successful coffee chain </li></ul><ul><li>@Spot Cafe </li></ul><ul><li>A small Chicago coffeehouse with a youthful, hip vibe </li></ul><ul><li>Starbucks </li></ul><ul><li>A coffee bar lounge that’s slightly more upscale, and features live music </li></ul>We analyzed several competitors’ sites for strengths & weaknesses:
  8. 8. Competitor Strengths <ul><li>Starbucks </li></ul><ul><li>Presentation, Color, Graphics </li></ul><ul><ul><li>Information is well organized, easy to find. </li></ul></ul><ul><ul><li>Logo is nicely designed and consistently used & placed throughout the site </li></ul></ul><ul><ul><li>Palette ties in with product (green & brown symbolize coffee bean roasting cycle) </li></ul></ul><ul><li>@Spot Café </li></ul><ul><li>Appeal to Target Audience, Palette </li></ul><ul><ul><li>Fun & trendy design sensibility targets young, hip customers. </li></ul></ul><ul><ul><li>Warm golds and reds echo a décor which is similar to Coffee Café’s “warm earthtones” </li></ul></ul><ul><li>Tazza </li></ul><ul><li>Stylish Design & Palette, Effective Layout </li></ul><ul><ul><li>Colors are contemporary, organic, and warm in feel, but cool in attitude </li></ul></ul><ul><ul><li>Compelling, interesting information “above the fold” </li></ul></ul><ul><ul><li>Engaging main image invites the viewer in (“Picture Yourself Here”) </li></ul></ul>
  9. 9. Goals of Coffee Café website <ul><li>Drive more traffic to the bricks and mortar location: </li></ul><ul><li>– Increase customer base by </li></ul><ul><li> 150-200 in first 6 weeks </li></ul><ul><li>– Increase attendance at weekly </li></ul><ul><li> music shows by 20% </li></ul><ul><li>Make it EASY to find: </li></ul><ul><li>– Hours </li></ul><ul><li>– Location </li></ul><ul><li>– Weekly Music Events </li></ul><ul><li>– Monthly Featured Artist </li></ul><ul><li>– Weekly Specials </li></ul>
  10. 10. Structure
  11. 11. Color Scheme We 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
  12. 12. Logo, Fonts & Copy Our 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 for headlines, 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.
  13. 13. Design Principles Alignment, Contrast, Proximity, Repetition <ul><li>Elements line up within an “ice” page layout; Type is centered or flush left as appropriate. </li></ul><ul><li>Background gradation creates contrast against foreground boxes of varying tones/colors. </li></ul><ul><li>Bright yellow, orange & blue type “pops” against dark rust or brown backgrounds. </li></ul><ul><li>Ochre box contrasts against olive for extra emphasis, highlighting event information. </li></ul><ul><li>Related information is clustered together within boxes. </li></ul><ul><li>Consistency of font usage (size, weight, color) helps to organize information. </li></ul>
  14. 15. In Conclusion We believe that a Web Site developed from this Sample Page will meet the goal of building the Coffee Café brand and customer base through: <ul><li>Its appeal to the young, tech-savvy Target Audience </li></ul><ul><li>Use of an attractive, well-structured layout </li></ul><ul><li>Organized, easy-to-find content </li></ul><ul><li>A versatile, well-designed logo </li></ul><ul><li>Quality photography & simple, clean typography </li></ul><ul><li>A modern palette combining warm earth tones with brighter accents </li></ul><ul><li>Smart & concise body copy </li></ul>The Gary Wright Project are: Zarna Doshi (FearlessLeader) Michael Sharkey (DesignGuru) Corey Blackburn (PixelMeister) Jean Tuttle (TextMaster)