The document discusses current trends in web design and development in 2015 according to Amber Leigh Turner. Some of the key trends discussed include responsive web design which ensures websites can be viewed on all devices, flat design which favors solid colors and sans-serif fonts, simplicity in design and content by removing non-essential elements, and increased use of videos and custom photography. Performance and speed are also important as designers aim to create sites that load faster.

1. Current Trends in Web Design
and Web Developement 2015
by Amber Leigh Turner
Owner / Creative Director
January Creative
januarycreative.com
Vanderbilt University
DigitalVU
Nashville, Tennessee
January 28, 2015

2. 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.”

3. 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.

5. 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! :)

6. Responsive Web Design and Development

7. Responsive Web Design and Development

8. Responsive Web Design and Development

9. Responsive Web Design and Development

10. 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.

11. Flat Design

12. Flat Design

13. Flat Design

14. 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.

15. Simplicity in Design and Content

16. Simplicity in Design and Content

17. Simplicity in Design and Content

18. 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).

19. Large Hero Areas

20. Large Hero Areas

21. Large Hero Areas

22. 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.

23. High Quality Custom Photography / Visuals

24. High Quality Custom Photography / Visuals

25. High Quality Custom Photography / Visuals

26. 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.

27. More Videos

28. More Videos

29. More Videos

30. 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.

32. 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.

33. Large and Interesting Typography

34. Large and Interesting Typography

35. Large and Interesting Typography

36. 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.

37. Web and App Design Elements

38. Web and App Design Elements

39. Web and App Design Elements

40. 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.

41. 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