the future of website design - 11 trends for 2017 and beyond
TRANSCRIPT
![Page 1: The Future of Website Design - 11 Trends for 2017 and Beyond](https://reader035.vdocument.in/reader035/viewer/2022081600/587840cf1a28ab707b8b66c3/html5/thumbnails/1.jpg)
The Future of Website Design - 11 Trends for 2017 and Beyond
www.Inspiredgm.com
![Page 2: The Future of Website Design - 11 Trends for 2017 and Beyond](https://reader035.vdocument.in/reader035/viewer/2022081600/587840cf1a28ab707b8b66c3/html5/thumbnails/2.jpg)
1.Flat + Material Design
www.Inspiredgm.com
![Page 3: The Future of Website Design - 11 Trends for 2017 and Beyond](https://reader035.vdocument.in/reader035/viewer/2022081600/587840cf1a28ab707b8b66c3/html5/thumbnails/3.jpg)
Expect an increase in the combination of both these design
models to achieve the intuitive learnability of
flat design and the modern, physical
aesthetic of material design.
www.Inspiredgm.com
![Page 4: The Future of Website Design - 11 Trends for 2017 and Beyond](https://reader035.vdocument.in/reader035/viewer/2022081600/587840cf1a28ab707b8b66c3/html5/thumbnails/4.jpg)
2. Illustrations
www.Inspiredgm.com
![Page 5: The Future of Website Design - 11 Trends for 2017 and Beyond](https://reader035.vdocument.in/reader035/viewer/2022081600/587840cf1a28ab707b8b66c3/html5/thumbnails/5.jpg)
Illustrations are a new way to make websites unique and original.
Not to mention it gives the site a personality of its own.
www.Inspiredgm.com
![Page 6: The Future of Website Design - 11 Trends for 2017 and Beyond](https://reader035.vdocument.in/reader035/viewer/2022081600/587840cf1a28ab707b8b66c3/html5/thumbnails/6.jpg)
Try adding an illustration to your loading page to make it more fun and less frustrating your visitor
www.Inspiredgm.com
![Page 7: The Future of Website Design - 11 Trends for 2017 and Beyond](https://reader035.vdocument.in/reader035/viewer/2022081600/587840cf1a28ab707b8b66c3/html5/thumbnails/7.jpg)
Use small and few illustrations to make certain areas of your page pop and/or to highlight places you want your visitors to click
www.Inspiredgm.com
![Page 8: The Future of Website Design - 11 Trends for 2017 and Beyond](https://reader035.vdocument.in/reader035/viewer/2022081600/587840cf1a28ab707b8b66c3/html5/thumbnails/8.jpg)
3. Cards / Grid Structure
www.Inspiredgm.com
![Page 9: The Future of Website Design - 11 Trends for 2017 and Beyond](https://reader035.vdocument.in/reader035/viewer/2022081600/587840cf1a28ab707b8b66c3/html5/thumbnails/9.jpg)
Pinterest was one of the leaders when it came to using cards and the grid format. Since this style’s growth in popularity on other SM platforms it has spilled out to other websites.
Use cards and grid as a way to organize your site
Even use them as navigation to other pages instead of having a long indepth menu
www.Inspiredgm.com
![Page 10: The Future of Website Design - 11 Trends for 2017 and Beyond](https://reader035.vdocument.in/reader035/viewer/2022081600/587840cf1a28ab707b8b66c3/html5/thumbnails/10.jpg)
Use of cards as Navigation
Symmetrical Grid Format
www.Inspiredgm.com
![Page 11: The Future of Website Design - 11 Trends for 2017 and Beyond](https://reader035.vdocument.in/reader035/viewer/2022081600/587840cf1a28ab707b8b66c3/html5/thumbnails/11.jpg)
4. Microinteractions
www.Inspiredgm.com
![Page 12: The Future of Website Design - 11 Trends for 2017 and Beyond](https://reader035.vdocument.in/reader035/viewer/2022081600/587840cf1a28ab707b8b66c3/html5/thumbnails/12.jpg)
Microinteractions turn a good website into a great one. They let your user know your page is reacting to their actions and ready to respond.
These come in all sorts of formats, buttons that change color, cards that move, areas that become highlighted (right)...etc the possibilities are endless!
www.Inspiredgm.com
![Page 13: The Future of Website Design - 11 Trends for 2017 and Beyond](https://reader035.vdocument.in/reader035/viewer/2022081600/587840cf1a28ab707b8b66c3/html5/thumbnails/13.jpg)
5. Videos and Animations
www.Inspiredgm.com
BTW this is just a gif
Continue
![Page 14: The Future of Website Design - 11 Trends for 2017 and Beyond](https://reader035.vdocument.in/reader035/viewer/2022081600/587840cf1a28ab707b8b66c3/html5/thumbnails/14.jpg)
In this example:
Cards move in from the left + Content appears as you scroll + Animated logo = High engagement!
Use animations sparingly to give life to the website and attract the user's attention to certain areas.
www.Inspiredgm.com
![Page 15: The Future of Website Design - 11 Trends for 2017 and Beyond](https://reader035.vdocument.in/reader035/viewer/2022081600/587840cf1a28ab707b8b66c3/html5/thumbnails/15.jpg)
Here's an example of incorporating animation in a much larger way, by Coin
www.Inspiredgm.com
![Page 16: The Future of Website Design - 11 Trends for 2017 and Beyond](https://reader035.vdocument.in/reader035/viewer/2022081600/587840cf1a28ab707b8b66c3/html5/thumbnails/16.jpg)
Video Currently Accounts for 50% of mobile traffic
By 2018: 79% of all consumer internet traffic will be video
www.Inspiredgm.com
![Page 17: The Future of Website Design - 11 Trends for 2017 and Beyond](https://reader035.vdocument.in/reader035/viewer/2022081600/587840cf1a28ab707b8b66c3/html5/thumbnails/17.jpg)
Coin also has a video loaded onto their homepage that automatically plays. It’s a great way to incorporate a customer testimonial
Bonus Tip: make sure any videos uploaded are set to mute so the user isn’t alarmed by unexpected sound
www.Inspiredgm.com
![Page 18: The Future of Website Design - 11 Trends for 2017 and Beyond](https://reader035.vdocument.in/reader035/viewer/2022081600/587840cf1a28ab707b8b66c3/html5/thumbnails/18.jpg)
6. Storytellingwww.Inspiredgm.com
![Page 19: The Future of Website Design - 11 Trends for 2017 and Beyond](https://reader035.vdocument.in/reader035/viewer/2022081600/587840cf1a28ab707b8b66c3/html5/thumbnails/19.jpg)
Storytelling makes the user feel like the website has a logical beginning, middle and end - the website becomes a journey they immerse themselves in
Knuckles is a designer who works with metal. His images and textual elements is how he tells his story. The user goes on journey about his passion
www.Inspiredgm.com
![Page 20: The Future of Website Design - 11 Trends for 2017 and Beyond](https://reader035.vdocument.in/reader035/viewer/2022081600/587840cf1a28ab707b8b66c3/html5/thumbnails/20.jpg)
7. Typography
www.Inspiredgm.com
![Page 21: The Future of Website Design - 11 Trends for 2017 and Beyond](https://reader035.vdocument.in/reader035/viewer/2022081600/587840cf1a28ab707b8b66c3/html5/thumbnails/21.jpg)
Expect Big, Loud, Bold Text!Pro Tip: Keep the different types down to 2 (3 max) to maintain consistency
www.Inspiredgm.com
![Page 22: The Future of Website Design - 11 Trends for 2017 and Beyond](https://reader035.vdocument.in/reader035/viewer/2022081600/587840cf1a28ab707b8b66c3/html5/thumbnails/22.jpg)
8. Bold, Vibrant Colors
www.Inspiredgm.com
![Page 23: The Future of Website Design - 11 Trends for 2017 and Beyond](https://reader035.vdocument.in/reader035/viewer/2022081600/587840cf1a28ab707b8b66c3/html5/thumbnails/23.jpg)
www.Inspiredgm.com
![Page 24: The Future of Website Design - 11 Trends for 2017 and Beyond](https://reader035.vdocument.in/reader035/viewer/2022081600/587840cf1a28ab707b8b66c3/html5/thumbnails/24.jpg)
Colored sections with rounded edges are helpful to draw the viewer’s eye around the image instead of focusing on one area
www.Inspiredgm.com
![Page 25: The Future of Website Design - 11 Trends for 2017 and Beyond](https://reader035.vdocument.in/reader035/viewer/2022081600/587840cf1a28ab707b8b66c3/html5/thumbnails/25.jpg)
Duotone - used for dramatic effect
www.Inspiredgm.com
![Page 26: The Future of Website Design - 11 Trends for 2017 and Beyond](https://reader035.vdocument.in/reader035/viewer/2022081600/587840cf1a28ab707b8b66c3/html5/thumbnails/26.jpg)
9. Centered / Split Screen Content
www.Inspiredgm.com
![Page 27: The Future of Website Design - 11 Trends for 2017 and Beyond](https://reader035.vdocument.in/reader035/viewer/2022081600/587840cf1a28ab707b8b66c3/html5/thumbnails/27.jpg)
Centered content is usually paired with a bold visual. The text may appear as the focus but the image is what creates that dramatic effect.
Centered content is easy to follow and digest, and lets the user know that this is what your website is all about.
www.Inspiredgm.com
![Page 28: The Future of Website Design - 11 Trends for 2017 and Beyond](https://reader035.vdocument.in/reader035/viewer/2022081600/587840cf1a28ab707b8b66c3/html5/thumbnails/28.jpg)
This company uses split screen content to tailor the website to each user.
As a result the user feels as though the website was designed with them in mind and are more likely to enjoy their experience.
www.Inspiredgm.com
![Page 29: The Future of Website Design - 11 Trends for 2017 and Beyond](https://reader035.vdocument.in/reader035/viewer/2022081600/587840cf1a28ab707b8b66c3/html5/thumbnails/29.jpg)
10. Parallax Scrolling
www.Inspiredgm.com
![Page 30: The Future of Website Design - 11 Trends for 2017 and Beyond](https://reader035.vdocument.in/reader035/viewer/2022081600/587840cf1a28ab707b8b66c3/html5/thumbnails/30.jpg)
This technique is all about layering images on top of each other and timing them differently so it gives the appearance of movement
In this gif the tree images are:● The ground and bushes● The hills● The sky
All timed differently so it gives the impression that we’re moving from left to right
www.Inspiredgm.com
![Page 31: The Future of Website Design - 11 Trends for 2017 and Beyond](https://reader035.vdocument.in/reader035/viewer/2022081600/587840cf1a28ab707b8b66c3/html5/thumbnails/31.jpg)
Here’s a modern example: Seattle’s Space Needle
www.Inspiredgm.com
![Page 32: The Future of Website Design - 11 Trends for 2017 and Beyond](https://reader035.vdocument.in/reader035/viewer/2022081600/587840cf1a28ab707b8b66c3/html5/thumbnails/32.jpg)
Hapnotic Feedback
(Haptic + Hypnotic)
Sense of touch+
Captivation
www.Inspiredgm.com
![Page 33: The Future of Website Design - 11 Trends for 2017 and Beyond](https://reader035.vdocument.in/reader035/viewer/2022081600/587840cf1a28ab707b8b66c3/html5/thumbnails/33.jpg)
In the far future (+5 years), Hapnotic feedback will allow us to do things like:
Combine pulse/vibrations with an animation of a button to prompt the user to click
Use Sound waves broadcasted from behind the screen, to make it feel as though it has a texture to it.
...and more!www.Inspiredgm.com
![Page 34: The Future of Website Design - 11 Trends for 2017 and Beyond](https://reader035.vdocument.in/reader035/viewer/2022081600/587840cf1a28ab707b8b66c3/html5/thumbnails/34.jpg)
www.Inspiredgm.com
Happy Designing!