current trends in web design & development

Current Trends in Web Design and Web Developement 2015

by Amber Leigh TurnerOwner / Creative DirectorJanuary Creativejanuarycreative.com

Vanderbilt UniversityDigitalVUNashville, TennesseeJanuary 28, 2015

About Amber Leigh Turner

•Owner and Creative Director of January Creative - Nashville, TN.•Self-employed graphic and web designer for almost eight years.•Consult and work with clients in visual identity design and marketing.•Professional degrees - B.F.A. Visual Communications and B.B.A. Marketing.•Write for several industry websites including The Next Web.•Published “Student Freelancing 101: A Start to Finish Course to Becoming a Student Freelancer.”

Introduction

•Web is changing faster than most other technologies.•Web Design and Web Development are no longer mutually exclusive.•Trends in Web Design and Development come and go quickly.•Overview of the biggest trends and upcoming trends.

Responsive Web Design and Development

•Ethan Marcotte - A List Apart/A Book Apart “Responsive Web Design” (May 25, 2010).•Ideas, theories, and practices in designing and developing a device-independent Web.•Websites should be easy to view and navigate on ALL DEVICES.•Should be sensitive to varying network types, configurations, speeds, and limitations.•Adaptive: fix width layouts. •Responsive: fluid width layouts.•Mobile First / Desktop First - depends on site traffic (very heated argument).•Responsive Design and Responsive Development go hand in hand - can’t separate them.•Vanderbilt.edu: Responsive! :)

Responsive Web Design and Development

Responsive Web Design and Development

Responsive Web Design and Development

Responsive Web Design and Development

Flat Design

•Dropping elements such as drop shadows, gradients, textures, patterns.•Favors solid colors, basic shapes, san-serif fonts, sharp edges.•Microsoft was the first major pioneer of flat design with Metro Design.•Apple followed with iOS7 shaking Skeuomorphism in favor of a more flat design.

Flat Design

Flat Design

Flat Design

Simplicity in Design and Content

•The idea that a design is complete when all of the non-essential elements have been removed.•Helps make sites load faster for RWD.•Reducing the amount of content - visitors have short attention spans.•Keeps things clean, easier to find.•Simpler color schemes.

Simplicity in Design and Content

Simplicity in Design and Content

Simplicity in Design and Content

Large Hero Areas

•The “intro” area at the top of a website, often an image with a little amount of text.•A borrowed term from print design.•Quickly replacing sliders as attention grabbers.•Most feature an image as a background with text on top (next trend).•Some also contain videos (coming up).•More recently, larger headers are dropping background images in favor of text only (previous trend).

Large Hero Areas

Large Hero Areas

Large Hero Areas

High Quality Custom Photography / Visuals

•Designers are moving away from stock imagery in favor of custom imagery.•Lots of money and time invested in creating powerful photography.•Makes you unique because no one else will have your images.•Can be used for a more personal effect.

High Quality Custom Photography / Visuals

High Quality Custom Photography / Visuals

High Quality Custom Photography / Visuals

More Videos

•Also replacing sliders on most websites.•Increases interaction with visitors.•Powerful demonstration tool.•Becoming easier to produce and easier to view on the Web.•Can take up a lot of data, so use sparingly and don’t auto-play.•Some services allow analytic tracking.

More Videos

More Videos

More Videos

Longer Scrolling Sites

•More designed sections.•Allows better division between chunks of content.•Easier to scroll on mobile devices than to click to navigate.•Behavior to scroll has been conditioned over seven-plus years of smartphones.•Most commonly the home page is the longest page (different from years past).•Visual impact and helps with visual hierarchy.•Works great for product pages to showcase different features.•Some sites add slick animations to make scrolling even more interesting.

Large and Interesting Typography

•Typography is starting to become more lively, can stand on its own.•Making visual impact with larger size typography (billboard size).•Improves visual hierarchy of a page with a “look at me” feel.•CSS3 allows for more custom fonts with @font-face property.•Not only seen in hero areas, but as headings throughout sites as well.

Large and Interesting Typography

Large and Interesting Typography

Large and Interesting Typography

Web and App Design Elements

•Flyout/slideout app-like menus appearing on websites no matter what size.•More sites are using things commonly used for smaller screens on larger screens.•Some sites are hiding their main menus in their header in favor of a hamburger icon.•Hiding the menu behind a hamburger icon (or other icon) allows for more creative freedom.•These behaviors are conditioned over last few years of smartphone apps.•Adding these elements helps make the experience more consistent no matter what device the site is being viewed in.

Web and App Design Elements

Web and App Design Elements

Web and App Design Elements

Performance and Speed

•Both a design and a development issue.•Designers and developers are becoming more keenly aware of site load times and sizes.•Mainly motivated by responsive web design, data caps.•Make sites load faster, load lighter.•Takes into consideration mobile users, users of slower networks, those with data limits.

Thanks Vandy!

Ways to connect:•januarycreative.com•amber@januarycreative.com•615.544.5010•Twitter: @amberlturner and @januarycreative•Facebook: facebook.com/januarycreative•Read my related articles: thenextweb.com/author/amberturner