• Share
  • Email
  • Embed
  • Like
  • Private Content
Top 10 Design Rules and When to Break Them
 

Top 10 Design Rules and When to Break Them

on

  • 1,424 views

Join our team of all-star designers as they reveal the top rules of web design and how to use them for your online business!

Join our team of all-star designers as they reveal the top rules of web design and how to use them for your online business!

Statistics

Views

Total Views
1,424
Views on SlideShare
1,424
Embed Views
0

Actions

Likes
4
Downloads
23
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

Top 10 Design Rules and When to Break Them Top 10 Design Rules and When to Break Them Presentation Transcript

  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore Top 10 Design Rules and When to Break Them
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore Your Hosts and Design Gurus Jessica Mokrzecki, Sr. Manager – Design Services Camri Hinkie, Sr. Web Designer Wes Asbell, Web Designer
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore * #2 Don’t Use Too Many Colors
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore 1. DON’T USE TOO MANY COLORS • 2-3 colors • Brand colors • Convey the right message Following the Rule
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore *
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore *
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore *
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore 1. DON’T USE TOO MANY COLORS • Use color to draw attention • Make elements standout • Organize like things with color Breaking the Rule
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore *
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore *
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore *
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore #8 Keep things above the fold
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore 2. KEEP THINGS ABOVE THE FOLD Following the Rule • Term borrowed from newspapers • Things at the top of the site will be seen first
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore 2. KEEP THINGS ABOVE THE FOLD Breaking the Rule • Long scrolling sites • Frees the top area for visual impact
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore * #1 Use a Minimum Number of Fonts
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore 3. USE A MINIMAL NUMBER OF FONTS • 2-3 fonts • Each font has it’s own personality • Avoid Confusion Following the Rule
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore *
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore *
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore *
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore 3. USE A MINIMAL NUMBER OF FONTS • Draw attention using different fonts • Brand different sections or promotions • It’s all about pairing fonts Breaking the Rule
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore *
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore *
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore *
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore #6 Logo should be in the top left
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore 4. LOGO SHOULD BE IN THE TOP LEFT • Standard practice • Long, horizontal logos • Can help with header organization Following the Rule
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore 4. LOGO SHOULD BE IN THE TOP LEFT Breaking the Rule • Fits certain shapes better • Puts company name on display • Be careful to balance header
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore * #3 Stick to a Grid Layout
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore 5. STICK TO A GRID LAYOUT • What is the grid system? • Helps structure a site • Helps with organization and consistency Following the Rule
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore *
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore *
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore *
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore 5. STICK TO A GRID LAYOUT • Let a few important elements standout • It’s more organic • Keep it organized no matter what Breaking the Rule
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore *
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore *
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore *
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore #7 Buttons Should Be Rounded and 3D
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore 6. BUTTONS SHOULD BE ROUND & 3D Following the Rule • Should stand out from the page and look dimensional • Skeuomorphic design • A way to entice users to click
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore 6. BUTTONS SHOULD BE ROUND & 3D Breaking the Rule • Flat design • Scale and color, not effects
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore * #4 Always Have a Left Navigation Menu
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore 7. ALWAYS HAVE A LEFT NAVIGATION • Can hold a large number of categories • Height of a site changes, but width stays consistent Following the Rule
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore *
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore *
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore *
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore 7. ALWAYS HAVE A LEFT NAVIGATION • Doesn’t always have to be on the homepage • Frees up valuable real estate on the homepage • Helps consolidate and better emphasize your most important categories • Easier to navigate Breaking the Rule
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore *
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore *
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore *
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore #9 Put everything on the homepage
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore 8. PUT EVERYTHING ON THE HOMEPAGE Following the Rule • Visitors shouldn’t have to go looking for important information • Lots of content can help with SEO
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore 8. PUT EVERYTHING ON THE HOMEPAGE Breaking the Rule • Too much content = overwhelming • Highlight key selling points & products • Well structured navigation
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore * #5 Animation is a No No
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore 9. ANIMATION IS A NO-NO • Animation can be distracting • Static sites create a pleasant user experience Following the Rule
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore *
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore 9. ANIMATION IS A NO-NO • Subtle animations making a comeback • Animated GIFs • Javascript slideshows • Don’t go crazy Breaking the Rule
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore *
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore #10 Use all of the social media icons
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore 10. USE ALL OF THE SOCIAL MEDIA Following the Rule • Social media builds a community around your business • Gets the word out about your products
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore 10. USE ALL OF THE SOCIAL MEDIA Breaking the Rule • Only social icons you update • Connecting accounts so a single post can go to multiple platforms
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore CONCLUSION Trends or what to expect in the coming year •Flat design •Less left navigations •Larger photography •Longer pages •Transitions
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore * Q&A Thank you
  • Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore