Post on 19-Aug-2015
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 GurusJessica Mokrzecki, Sr. Manager – Design ServicesCamri Hinkie, Sr. Web DesignerWes 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&AThank you
Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore