Your SlideShare is downloading. ×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

The 3 voice of your design

699
views

Published on

Published in: Design

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
699
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Confidential and Proprietary Information v The 3 Voices of Your Site Design
  • 2. As important as your content is, your design speaks just as loudly. We’ve collected a showcase of X of our custom design projects to illustrate the three voices of a website’s non-verbal communication: Confidential and Proprietary Information If Content is King . . . Presentation is the King’s Herald Branding Layout Navigation
  • 3. Confidential and Proprietary Information Design’s Three Part Harmony 1 Branding 2 Layout 3 Navigation • Content shaping • White space • Header & footer placement • Menu theory • Product offerings & CTA call-outs • Custom 404 pages • Character • Color scheme & typography • Logo design
  • 4. Confidential and Proprietary Information v Branding: Your Personable Voice
  • 5. Confidential and Proprietary Information Your site’s branding is its voice of personality, establishing an identity in your visitors’ minds. When done effectively, a simple glance will differentiate your storefront from those of your competitors.
  • 6. Character Confidential and Proprietary Information MEElectronics • Minimalist design approach • Heavy reliance on photography over illustration • Modern sans-serif typography • Understated colors with vibrant hues reserved for focal points • Heavily product focused
  • 7. Character Confidential and Proprietary Information Even Sisters • Beach-inspired color scheme • Dramatic mixture of typography styles • Youthful, fun-loving imagery • Personal, emotionally-engaging language • A focus on exclusivity
  • 8. Character Custom Controllerzz • Vibrant color scheme and Confidential and Proprietary Information typography • Generous white space for product showcasing • Radical imagery inspired by the site’s products • Frequent calls to action • Energetic branding consistent with competitive customer base
  • 9. Confidential and Proprietary Information Logo Design Your logo is your brand’s crown jewel and its most wide-reaching presence, appearing everywhere from your site to print ads, merchandise and shipping labels. An effective logo . . . • Is attractive, professional, simple & memorable • Uses abstract design to convey clear impressions • Is versatile and scalable • Is attractive in black-and-white as well as in color • Relies on timeless design rather than “edgy” trends • Carries a color scheme & character that match your brand personality & your audience
  • 10. Layout: Your Conversational Voice Confidential and Proprietary Information
  • 11. Confidential and Proprietary Information Your site’s layout is its conversational voice, establishing a flow of thought and theme in your visitors’ minds. When done effectively, your branding elements and products will occupy prime digital real estate while visitors will intuitively find the content they need exactly where they expect to see it.
  • 12. The F-shape has risen to become the standard in ecommerce layouts, placing branding elements and helpful navigation in the areas of the page the command the most attention: the top and the left-hand side. Confidential and Proprietary Information Content Shaping: the F-Shape Left navigation Search box & shopping cart access Brand logo Featured images & specials
  • 13. Content Shaping: Alternative Methods Visually sensitive and product focused sites have bucked tradition and abandoned the F-Shape in favor of image-dominated layouts. These layouts preserve the top navigation, but often give social media icons the coveted top-right Confidential and Proprietary Information position. Emphasis on new products Modern design A single image dominates the visitor’s focus Photographs favored over illustrations
  • 14. Confidential and Proprietary Information White Space Even the “empty” portions of your site are an important part of your design, simultaneously preventing the theme from becoming overcrowded and drawing attention to the elements that they surround. Let your visitors’ eyes take a break, and use these areas to create islands of interest.
  • 15. Header Design Your header is your digital letterhead. Carefully incorporate branding and contact information along with navigation elements. Confidential and Proprietary Information • Your logo should take center stage or appear in the upper left-hand corner of the header • If you have a brick-and-mortar storefront, prominently display your address, hours & phone number • If you are solely a digital merchant, you should still display service phone numbers & any other contact information you are willing to provide • Your header will display on every page of your site, so invest your design efforts in an appealing aesthetic that establishes the theme of the rest of your site • Provide links to your About Us page as well as Login / Registration and Help pages
  • 16. Confidential and Proprietary Information Footer Design Your footer, like your header, appears on every page of your site. It’s less visible, however, and the focus should be on providing helpful links. • Reserve a complete column for company info, including your About Us page & your Privacy Policy • Customers should be able to access all account related pages—Order Status, Register, Shopping Cart, etc.—from the footer • Provide customer service related links, including shipping and exchange information & all available methods of contact • The footer is an excellent location for showcasing SSL certificates and other security-related badges • If room is available, do not forget to mention payment options in your site’s footer
  • 17. Confidential and Proprietary Information Navigation: Your Empathetic Voice
  • 18. Confidential and Proprietary Information Your site’s navigation is its voice of empathy, providing page pathways that anticipate your visitors’ needs and train of thought. When done effectively, visitors will easily find their destination regardless of their starting point.
  • 19. Confidential and Proprietary Information Menu Theory Your navigation menu—whether on the top of your site, the side or both—provides the chief means for visitors to find relevant pages. Few aspects of your site design will impact your conversion rate more than user-friendly navigation. Effective navigation menus. . . • Avoid unnecessary repetition • Use popout options if traditional navigation is too crowded • Maintain visual balance, with a similar number of pages appearing beneath each main category • Adapt to user behavior—poll friends to find ways to improve your navigation, and explore Google Analytics to find out how users are using your search box
  • 20. Confidential and Proprietary Information CTA Call-Outs Calls to action are not part of your top or side navigation, but they still act to create a pathway from the landing page to the appropriate products. In this sense, you should still consider them part of your navigation. Effective CTA call-outs . . . • Utilize changes in color and style • Contain verbal calls with active verbs, such as “Shop Now” or “Act Today” • Lead directly to well-defined category or product pages that will not require the visitor to continue clicking through subcategories
  • 21. Confidential and Proprietary Information Custom 404 Pages Inevitably, whether through a dead link or mistyped URL, visitors will reach a dead end. A custom 404 page makes these dead ends part of your navigation, guiding visitors back to the information they need. Effective 404 pages . . . • Maintains a sense of humor • Retains your site’s branding elements • Offers a means to contact the webmaster so that the issue can be corrected in the future • Provides a small handful of top-level category pages that are likely to put the visitor back on the right track
  • 22. Go Beyond Your Site’s Design & Voice As important as your site’s aesthetic appeal is, it is far from the only influencing factor. A powerful design can work hand-in-hand with marketing efforts, promotions, checkout tactics and technical changes to turn more visitors into customers. Download our free ebook to explore a complete overview of your conversion arsenal. Confidential and Proprietary Information Learn how to increase conversions through . . . • Integrated marketing campaigns • Creative product descriptions • Thorough marketing niche analysis • Careful category structuring • And much more