Web Design Trends and User Experience - · PDF fileWeb Design Trends and User Experience...

Preview:

Citation preview

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:

Recommended