web design trends and user experience - · pdf fileweb design trends and user experience...
TRANSCRIPT
Web Design Trends and User Exper ience
Trends Over Time
Design Homogenization
Web trends, like fashions, come and go; very few become classics. However, good user experience never goes out of style.
When trends take hold, all websites start to look alike. That's not so bad, if the trendy elements harmonize into a good user experience. Pages designed in 2016 tend to look like this:
Long web pages show bite-sized content per screen and invite users to scroll when ready. Mobile users, especially, like scrolling.
Hamburger menus are delicious. They take up a mere dot of real estate and work on mobile and desktop.
Long Pages = Fewer Pages = Less Thinking & More Scanning
Breaking Down the 2016-'17 Web Fashion Trends
Anchored Navigation
About Products News Contact
ButtonButton
Button
LOGO
Call To Action
Company NameStreet AddressCity, State ZipPhone Number
Hero Image
Keep your navigation visible at all times.
Yes Improves Usability?
UX
Yes Improves Usability?
UX
Workshops Newsroom Careers
Website Design, Software Development & Digital Marketing
Search
LOGO
About Portfolio ContactServicesEvents
Our Latest Blog Posts
Gallery
Call to Action
Read More Read More Read More
Lorem ipsum dolor sit amet, consec tetur adipiscing elit. Donec in nisl sit
amet sapien rutrum luctus quis ac orci. Vestibulum ultrices eu leo in
porttitor.
Ut rhoncus ut tellus posuere �nibus. Phasellus vel dui id libero feugiat
tincidunt. Nulla enim felis, eu blandit turpis, sceleris que et tristique.
Etiam at euismod ex, nec sodales risus. Etiam porta lorem sed rutrum eu blandit turpis eu blandit turpis
porttitor.
Read More Read More Read More
LOGOAbout Portfolio ContactServicesEvents
Our Latest Blog Posts
Our Latest Work
Gallery
2013
2015
2017
Ribbons
2014Stripes
Circles
Triangles?Rhomboids?
Angles2016
Banner Image Text
Button
Button Button
Featured Article
Home About Services Contact
Button
Teaser text that lets users know what to expect if they click on
the button.
Teaser text that lets users know what to expect if they click on
the button.
Teaser text that lets users know what to expect if they click on
the button.
Teaser text to draw readers into a particular piece of content.
Contact Information Learn More Option
Navigation on Top
Hero/Banner Image
Icons
Social Media Icons
3 Columns of Something
Stripes of Information
Large Footer
Shrink nav to the top, to make it less intrusive, once your user scrolls down the page.
Yes
Improves Usability?
UX
Cliched in layout and elements? Maybe. But it works. It's familiar. Users get it intuitively.
Yes Improves Usability?
UX
Ghost buttons draw attention because they're different. Once everyone has them, they won't be different. Fashion fad.
Not Really...
Menu
Improves Usability? UX
Ghost Buttons
Trend 4: Hamburger Menus
Clean, thoughtfully shot and selected pictures should tell your company's story and add visual excitement.
Flat design eliminates drop shadows, gradients and other 3D effects. Its benefits include:
Mobile Friendly
Faster Page Speed Readable at a GlanceSharp & Clean
Minimal Distractions Easy to Build
Yes Improves Usability?
UX
Yes Improves Usability?
UX
Trend 6: Flat Design
Who Knows?
Trend 1:
Trend 2:
Trend 3:
Trend 5: