Post on 15-Jul-2015
Web Design Trendsthen & now
A Beaconfire WebinarBy Steve MacKleyApril 22, 2015
• Old School Web Design
• (Hip?) New Design Trends○ Layouts
○ Typography
○ Animation
○ Navigation
Topics to Cover
Webinar - ©2015
Old School Web Design Select Examples
Image: http://keyezer.com/old-school-vs-new-school/
Webinar - ©2015
Webinar - ©2015
WebMD 2005
Webinar - ©2015
WebMD2012
Webinar - ©2015
CNN 2009
Webinar - ©2015
CNN 2012
Webinar - ©2015
Macys 2013
Webinar - ©2015
Komen 2013
Webinar - ©2015
Starbucks 2000
Webinar - ©2015
Starbucks 2012
Webinar - ©2015
What layout and design patterns do we see?
Webinar - ©2015
• Single screen of content
• Higher info/content density
• Puzzle–pieced layout
• Hierarchy is more subtle
• Flow is still hierarchical and linear
• Composition mimics print/magazine
What Do We See Old Trends
Webinar - ©2015
What design and layout patterns do we see now?
Hip(?) New School
http://i.huffpost.com/gen/1742862/images/o-HIPSTER-facebook.jpg
Webinar - ©2015
Why the change?
Webinar - ©2015
Phone
Mobile is not just the lite version of your experience
Webinar - ©2015
So what has changed in design…
•Layouts
•Typography
•Animation
•Navigation
Trend 1: LayoutsFluid Grids
Long Pages
Grids are nothing new
Webinar - ©2015
Fluid grids on the other hand…
http://www.smashingmagazine.com/2012/03/19/gridpak-the-responsive-grid-generator/Webinar - ©2015
Long pages
“Won’t somebody think of the children fold!
http://images.tvfanatic.com/iu/t_full/v1371141963/helen-lovejoy-pic.png
The fold is a myth (kinda, sorta)
Webinar - ©2015
http://blog.chartbeat.com/2013/08/12/scroll-behavior-across-the-web/Webinar - ©2015
Chartbeat blog
• Many visitors scroll down the page before it finishes
loading, which means that no portion of a typical article is
viewed by 100% of viewers .
• The most viewed area of the page is just above the fold,
at about 550 pixels, with just over 80% viewership.
• From this peak at 550 pixels, there is a slow decay in
viewership. About 50% of readers see 1500 pixels down
the page on content pages, while on home pages and
section fronts 50% of readers make it to pixel 1000
Webinar - ©2015
OK, buts that’s just one study…
Webinar - ©2015
How about half dozen or so more..
• Heatmap service provider ClickTale analyzed almost 100.000 pageviews. The result: people used the scrollbar on 76% of the pages, with 22% being scrolled all the way to the bottom regardless of the length of the page. That said, it’s clear that page top is still your most valuable screen estate. -Unfolding the Fold and ClickTale Scrolling Report and Part 2
• The design agency Huge measured scrolling in a series of usability tests and found “that participants almost always scrolled, regardless of how they are cued to do so – and that’s liberating.” - Everybody Scrolls
• Usability expert Jakob Nielsen’s eye-tracking studies show that while attention is focused above the fold, people do scroll down, especially if the page is designed to encourage scrolling. - Scrolling and Attention
• Upon reviewing the analytics data of TMZ.com, Milissa Tarquini found that the most clicked link on the homepage is at the very bottom. She also points out that polls and galleries at the bottom of AOL’s Money & Finance homepage get a lot of clicks in spite of their position. - Blasting the Myth of the Fold
• Another eye-tracking study conducted by CX Partners confirms that people do scroll if certain design guidelines are followed. - The myth of the page fold: evidence from user testing
• Usability studies by the Software Usability Research Laboratory's show that users can read long, scrolling pages faster than paginated ones. Their studies confirm that people are accustomed to scrolling. - The Impact of Paging vs. Scrolling on Reading Online Text Passages
• Jared Spool’s usability tests from 1998 tell us that, even though people say they don’t like to scroll, they are willing to do so. Moreover, longer and scrollable pages even worked better for users. - As the Page Scrolls
• SURL conducted another usability study, confirming that people find both scrolling and paging natural on search results pages. - Paging vs. Scrolling: Looking for the Best Way to Present Search Results
• Luke Wroblewski provides small snippets of stats and advice on scrolling behavior - There’s No Fold
Webinar - ©2015
Alright, so when are long pages okay to use
• Your website heavily relies on mobile traffic as a key source of visitors
• Your website has information that can be chunked/grouped into discrete sections; or help to build a narrative
• Your content updates frequently and is presented in a reverse chronological order
When to go long
Webinar - ©2015
• Fluid responsive grids are the norm – users will see your site on too large a range of devices not to consider .
• Users scroll so don’t worry (too much) about getting above the fold. Long pages are fine.
• Long pages work best when you have a site architecture that allows users to scan groundings/chunks of content.
Trend 1: Layout Summary
Webinar - ©2015
Trend 2: TypographyWeb Fonts
Modular Scales
Icon Fonts
Web Fonts
Arial is dead,
long live Arial
Webinar - ©2015
• Roboto
• Lato
• Source Sans
• Open Sans
• Roboto Slab
• Merriweather
• Source Serif
• Lora
A great variety is now available
Webinar - ©2015
• Not all google fonts have great coverage (esp.ifyou have a global, international audience)
• Just remember that each font and weight (regular, bold etc.) is another server call, so there are performance implications for google fontsNote: this can be addressed through caching
• You can host these fonts yourself -fontsquirrel.com
Words of Caution
Webinar - ©2015
Modular Scales
“Web Design is 95% Typography
-Oliver Reichenstein, Principle of Information Architects Inc.
A modular scale, like a musical scale, is a prearranged set of harmonious proportions.
—Robert Bringhurst
Image: http://www.poetryinvoice.com/poets/robert-bringhurstWebinar - ©2015
What does this look like
Webinar - ©2015
Icon fonts
Webinar - ©2015
Scalability: they can be increased in size with no
loss of fidelity. Plus you can change their color
easily, or add shadows and change their
transparency…
Why…
Webinar - ©2015
• One is the potential problem with screen readers that might read aloud the icon as an alphabetical letter. Note: This is not a problem with well made icon fonts.
• Icon Fonts can only be presented in a single color (or in a color gradient using CSS3 gradients). But this can be wonderful if you logo is a single color?
Words of Caution
Webinar - ©2015
• Express yourself: use web fonts
• Modular scales allow for harmonious font sizes—set it and forget it.
• Icon fonts allow for scalable multi-device use of common UI elelements
Trend 2: Typography Summary
Webinar - ©2015
Trend 3: AnimationMotion
Parallax
Video
Motion in Web Design
How we can add motion to a design
http://markgeyer.com/pres/the-art-of-ui-animations/#/
Webinar - ©2015
In practical terms
Webinar - ©2015
Parallax
Parallax scrolling is when the background moves at a slower rate to the foreground, creating a 3D effect as you scroll down the page.
Webinar - ©2015
Audubon
Webinar - ©2015
Video (in the hero/heroine space)
Video is a simple means of adding greater visual engagement to a site
Webinar - ©2015
Charitywater.org
Webinar - ©2015
• Animation can be added many UI elements to increase engagement, grab attention, and communicate messaging quickly
• Parallax can be used to make points of engagement more compelling
• Video can condense a complex narrative into a simple expression.
• Reminder: animation is like candy—a little bit is a good thing, but you’ll get sick if you go overboard
Trend 3: Animation Summary
Webinar - ©2015
Trend4: NavigationHamburgers
Footers
The Hamburger
Webinar - ©2015
Source: http://techcrunch.com/2014/05/24/before-the-hamburger-button-kills-you/
•Simplicity and cleaner design
•The “reveal” allows for an element of whimsy and surprise
•Focus is placed on the content of the page
Not just for mobile anymore
Webinar - ©2015
• People may not know what it is
• Lower discoverability
• Not glanceable
• Make sure you taxonomy/site architecture can be broken down into a digestible chunks.
Words of Caution
Webinar - ©2015
Mobile Menu A/B Tested: Hamburger Not the Best Choice?
Webinar - ©2015
Source: http://exisweb.net/mobile-menu-abtest
The Results?
Webinar - ©2015
• If you make it look like a button people are more likely to engage with it.
The Takeaway
Webinar - ©2015
Adobe
Webinar - ©2015
Adobe Menu Open
Webinar - ©2015
Brooklyn Bridge Park
Webinar - ©2015
Brooklyn Bridge Park Menu Open
Webinar - ©2015
Super Footers
Super footers have been around for a while, but have taken on a new life with long pages and hamburger navigation
Webinar - ©2015
Home Depot
Webinar - ©2015
Please don’t use a super footer with infinite scroll.
Webinar - ©2015
• The hamburger can be used on desktops versions of you site.
• They work best when you want to focus the user onto on page content (esp. when coupled with grouped/chunked content on a long page layout).
• Make sure that your hamburger has affordance (it looks like something that can be clicked)
• The hamburger also couples well with super footers.
Trend 4: Navigation Summary
Webinar - ©2015
• User scroll, so longer pages are okay
• You don’t have to puzzle piece all your content at the top of the page
• Typography matters
• Animation and video adds as sense of engagement to you site – and it doesn’t have to be hard to add.
• Hamburger/new navigations patterns can be effective
In Summary
Webinar - ©2015
Thank You
Webinar - ©2015