1
Web Design Trends and User Experience 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 Buon Buon Buon LOGO Call To Action Company Name Street Address City, State Zip Phone 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 Contact Services Events 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 finibus. 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 LOGO About Portfolio Contact Services Events Our Latest Blog Posts Our Latest Work Gallery 2013 2015 2017 Ribbons 2014 Stripes Circles Triangles? Rhomboids? Angles 2016 Banner Image Text Buon Buon Buon Featured Article Home About Services Contact Buon 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 Glance Sharp & 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:

Web Design Trends and User Experience - · PDF fileWeb Design Trends and User Experience Trends Over Time ... UX Yes Improves Usability? ... About Portfolio Events LOGO Services Contact

Embed Size (px)

Citation preview

Page 1: Web Design Trends and User Experience - · PDF fileWeb Design Trends and User Experience Trends Over Time ... UX Yes Improves Usability? ... About Portfolio Events LOGO Services Contact

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: