webinar: web design trends
TRANSCRIPT
![Page 1: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/1.jpg)
Web Design Trendsthen & now
A Beaconfire WebinarBy Steve MacKleyApril 22, 2015
![Page 2: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/2.jpg)
• Old School Web Design
• (Hip?) New Design Trends○ Layouts
○ Typography
○ Animation
○ Navigation
Topics to Cover
Webinar - ©2015
![Page 3: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/3.jpg)
Old School Web Design Select Examples
Image: http://keyezer.com/old-school-vs-new-school/
![Page 4: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/4.jpg)
Webinar - ©2015
![Page 5: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/5.jpg)
Webinar - ©2015
![Page 6: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/6.jpg)
WebMD 2005
Webinar - ©2015
![Page 7: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/7.jpg)
WebMD2012
Webinar - ©2015
![Page 8: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/8.jpg)
CNN 2009
Webinar - ©2015
![Page 9: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/9.jpg)
CNN 2012
Webinar - ©2015
![Page 10: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/10.jpg)
Macys 2013
Webinar - ©2015
![Page 11: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/11.jpg)
Komen 2013
Webinar - ©2015
![Page 12: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/12.jpg)
Starbucks 2000
Webinar - ©2015
![Page 13: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/13.jpg)
Starbucks 2012
Webinar - ©2015
![Page 14: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/14.jpg)
What layout and design patterns do we see?
![Page 15: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/15.jpg)
Webinar - ©2015
![Page 16: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/16.jpg)
• 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
![Page 17: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/17.jpg)
What design and layout patterns do we see now?
Hip(?) New School
http://i.huffpost.com/gen/1742862/images/o-HIPSTER-facebook.jpg
![Page 18: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/18.jpg)
Webinar - ©2015
![Page 19: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/19.jpg)
Why the change?
Webinar - ©2015
![Page 20: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/20.jpg)
Phone
![Page 21: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/21.jpg)
Mobile is not just the lite version of your experience
Webinar - ©2015
![Page 22: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/22.jpg)
So what has changed in design…
•Layouts
•Typography
•Animation
•Navigation
![Page 23: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/23.jpg)
Trend 1: LayoutsFluid Grids
Long Pages
![Page 24: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/24.jpg)
Grids are nothing new
Webinar - ©2015
![Page 25: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/25.jpg)
Fluid grids on the other hand…
http://www.smashingmagazine.com/2012/03/19/gridpak-the-responsive-grid-generator/Webinar - ©2015
![Page 27: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/27.jpg)
Long pages
![Page 28: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/28.jpg)
“Won’t somebody think of the children fold!
http://images.tvfanatic.com/iu/t_full/v1371141963/helen-lovejoy-pic.png
![Page 29: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/29.jpg)
The fold is a myth (kinda, sorta)
Webinar - ©2015
![Page 30: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/30.jpg)
http://blog.chartbeat.com/2013/08/12/scroll-behavior-across-the-web/Webinar - ©2015
![Page 31: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/31.jpg)
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
![Page 32: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/32.jpg)
OK, buts that’s just one study…
Webinar - ©2015
![Page 33: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/33.jpg)
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
![Page 34: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/34.jpg)
Alright, so when are long pages okay to use
![Page 35: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/35.jpg)
• 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
![Page 37: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/37.jpg)
• 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
![Page 38: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/38.jpg)
Trend 2: TypographyWeb Fonts
Modular Scales
Icon Fonts
![Page 39: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/39.jpg)
Web Fonts
![Page 40: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/40.jpg)
Arial is dead,
long live Arial
Webinar - ©2015
![Page 41: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/41.jpg)
• Roboto
• Lato
• Source Sans
• Open Sans
• Roboto Slab
• Merriweather
• Source Serif
• Lora
A great variety is now available
Webinar - ©2015
![Page 42: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/42.jpg)
• 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
![Page 43: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/43.jpg)
Modular Scales
![Page 44: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/44.jpg)
“Web Design is 95% Typography
-Oliver Reichenstein, Principle of Information Architects Inc.
![Page 45: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/45.jpg)
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
![Page 46: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/46.jpg)
What does this look like
Webinar - ©2015
![Page 47: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/47.jpg)
Icon fonts
![Page 48: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/48.jpg)
Webinar - ©2015
![Page 49: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/49.jpg)
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
![Page 50: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/50.jpg)
• 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
![Page 52: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/52.jpg)
• 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
![Page 53: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/53.jpg)
Trend 3: AnimationMotion
Parallax
Video
![Page 54: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/54.jpg)
Motion in Web Design
![Page 55: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/55.jpg)
How we can add motion to a design
http://markgeyer.com/pres/the-art-of-ui-animations/#/
Webinar - ©2015
![Page 56: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/56.jpg)
In practical terms
Webinar - ©2015
![Page 58: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/58.jpg)
Parallax
![Page 59: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/59.jpg)
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
![Page 61: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/61.jpg)
Audubon
Webinar - ©2015
![Page 62: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/62.jpg)
Video (in the hero/heroine space)
![Page 63: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/63.jpg)
Video is a simple means of adding greater visual engagement to a site
Webinar - ©2015
![Page 64: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/64.jpg)
Charitywater.org
Webinar - ©2015
![Page 66: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/66.jpg)
• 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
![Page 67: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/67.jpg)
Trend4: NavigationHamburgers
Footers
![Page 68: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/68.jpg)
The Hamburger
![Page 69: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/69.jpg)
Webinar - ©2015
![Page 70: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/70.jpg)
Source: http://techcrunch.com/2014/05/24/before-the-hamburger-button-kills-you/
![Page 71: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/71.jpg)
•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
![Page 72: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/72.jpg)
• 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
![Page 73: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/73.jpg)
![Page 74: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/74.jpg)
Mobile Menu A/B Tested: Hamburger Not the Best Choice?
Webinar - ©2015
![Page 75: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/75.jpg)
Source: http://exisweb.net/mobile-menu-abtest
The Results?
Webinar - ©2015
![Page 76: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/76.jpg)
• If you make it look like a button people are more likely to engage with it.
The Takeaway
Webinar - ©2015
![Page 77: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/77.jpg)
Adobe
Webinar - ©2015
![Page 78: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/78.jpg)
Adobe Menu Open
Webinar - ©2015
![Page 79: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/79.jpg)
Brooklyn Bridge Park
Webinar - ©2015
![Page 80: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/80.jpg)
Brooklyn Bridge Park Menu Open
Webinar - ©2015
![Page 81: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/81.jpg)
Super Footers
![Page 82: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/82.jpg)
Super footers have been around for a while, but have taken on a new life with long pages and hamburger navigation
Webinar - ©2015
![Page 83: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/83.jpg)
Home Depot
Webinar - ©2015
![Page 85: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/85.jpg)
Please don’t use a super footer with infinite scroll.
Webinar - ©2015
![Page 86: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/86.jpg)
• 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
![Page 87: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/87.jpg)
• 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
![Page 88: Webinar: Web Design Trends](https://reader033.vdocuments.mx/reader033/viewer/2022042701/55a5a4cd1a28abf50f8b460c/html5/thumbnails/88.jpg)
Thank You
Webinar - ©2015