2015 is halfway done, and we are already looking toward the future of web design. What new trends will pop up? Which ones will finally be laid to rest? One can only predict, but we have some strong tell-tale signs of what we will be seeing in the year 2016.
Overall Prediction: More Unique Experiences
With Responsive Web Design becoming even more ubiquitous, laying out webpages has fallen into the same predictable patterns. A 3-up stack of boxes to point out sales features here, a 9x9 grid format on a photo gallery there, we’ve reached a point where the majority of “pretty websites” all look the same.
"We’ve reached a point where the majority of “pretty websites” all look the same"
In 2016, I predict we will see more well-thought out and unique user experiences. To achieve this, designers can integrate personal touches for a more unique feel, such as custom-created illustration work, hand-drawn artwork, a new way to incorporate a grid, or even an unconventional way of storytelling to their users.
Prediction 1: Unique Way of Using the Grid
Curious Space’s website is a great example of adding a pinch of organic freedom to an ordered grid layout.
![](png/xpredic_01_01__large.png.pagespeed.ic.jnzzq2pjub.png)
You’ll quickly notice the photos of this website stacked on top of each other. Stacking them isn’t a problem, as when a user rolls over on an image, the Z-index of the selected image shifts, so it is pushed to the top of the pile of photos.
![](png/xpredic_01_02__large.png.pagespeed.ic.8nxaz3cqhv.png)
Upon scroll, the haphazard arrangement of their logo falls into place to spell out their company name.
![](png/xpredic_01_03__large.png.pagespeed.ic.kgloejruhv.png)
Prediction 2: Custom-Drawn Illustrations
We’ve all thought it - “Why should I draw another [name of object] icon, when I can just grab it off an already existing vector pack from the web?” This line of thinking does save time and budget constraints, but how about integrating custom-made illustrations, or other artwork into the project budget in the first place?
Sites like Creative Freedom Guide, For Better Coffee, 2015 DConstruct Conference, or Ice & Sky all integrate custom-made / hand-drawn illustration work that greatly aid in telling their story and leaving a memorable experience for their users.
![](png/xpredic_02_01__large.png.pagespeed.ic.jvx1huljam.png)
![](png/xpredic_02_02__large.png.pagespeed.ic.ln4zo_8rbd.png)
![](png/xpredic_02_03__large.png.pagespeed.ic.misigqcjdp.png)
![](png/xpredic_02_04__large.png.pagespeed.ic.nkmdzdmciq.png)
Prediction 3: Better / More Access to Great Typefaces
We should all be thanking Google for its free font collection. Because of the company’s library, utilizing a great looking typeface on a limited budget can be achieved. With varying styles, weights, families, and the like, there is sure to be quite a few typefaces that are suitable for any website.
![](png/xpredic_03_01__large.png.pagespeed.ic.mjpcdvuwyw.png)
Prediction 4: Cinemagraphs
Did that picture just….move? I love cinemagraphs because like videos and photography, it enhances the desired mood for a website and gives it an additional layer of wonder, mystique, and elegance. Unlike videos, it won’t eat as much bandwidth, and unlike photos, it provides “something more” than a simple still shot. This technology has been around for a while already (since 2011), and I hope to see it integrated into more websites in the future.
![](gif/mti4otgzntq2mzgyntc3njm0.gif)
Great examples of cinemagraphs can be found here.
Prediction 5: Websites Through the Use of Storytelling
Storytelling through means of a website can be quite a complex endeavor. Nike and Lidyana did a great job with this website.
![](png/xpredic_05_01__large.png.pagespeed.ic.u-gq_z4_ro.png)
Best viewed on a high-speed internet connection, the website takes you through the morning workout routines of a young woman. The opening sequence is of her waking up in the morning. After she gets settled into her routine, the user has a choice of seeing her do different types of exercise activities, such as yoga, running, weight training, and the like. If the user clicks on one of the activities, they are then presented with the young woman performing said activity.
![](png/xpredic_05_02__large.png.pagespeed.ic.zb8qsnug6p.png)
![](png/xpredic_05_03__large.png.pagespeed.ic.t1mloilw1d.png)
The user is then presented with hot spots on the body of the young woman while she is working out, with links to Nike products she is wearing during her routines. This is a great way to showcase the product in-use, as well as providing the user with direct access to view the product details. If the user clicks on a hot-spot, the products she is wearing load in from the side, while pausing the video.
![](png/xpredic_05_04__large.png.pagespeed.ic.jb_ulefvly.png)
Through this type of interaction, the user can quickly run through all of the activities with the young lady, while browsing the products she is wearing, without even knowing they are shopping!
Earlier mentioned websites such as For Better Coffee or Ice & Sky also do a great job of integrating storytelling on their websites. Something as simple as teaching a user how to make the perfect brew, or being educated on the history of Antarctica can be fun, interactive, and a great learning experience!
Prediction 6: Semi-flat design
Flat design has slowly morphed over the past few years to semi-flat design. After Windows launched its Metro style, the design world became inundated with this trend. Unfortunately, this style did come with its usability pitfalls. This trend has slowly morphed into semi-flat design, largely in part due to both Android’s and Apple’s releases using this type of style. By integrating depth and dimension through the use of subtle shadows, card / tile concepts, and well-thought out transitions to help guide and orient users, semi-flat design aims to eliminate the problems that flat design had created.
![](png/xpredic_06_01__large.png.pagespeed.ic.ifimrsqura.png)
Continuation of Earlier Trends
Prediction 7: RWD
Let’s face it, after the implementation of RWD, there was no turning back. There will only be more devices sold on the market, so embracing and integrating responsive practices on websites will make the web sphere a better place for all.
![](png/xpredic_07_01__large.png.pagespeed.ic.wvsmjpjeu3.png)
Prediction 8: Parallax
A couple of the websites mentioned earlier already utilize parallax on their websites. As mentioned in a previous GRAYBOX article, parallax is a type of effect applied to the speed and movement of background imagery. The background of the website moves at a different speed than the rest of the page, thereby mimicking layers of depth on the page. As computers and related technology get better at handling such effects on the web, access to viewing these unique animations will only increase. Scroll For Your Health is a great example of a fun, interactive, and educational way to present information on different fruits, while employing parallax.
![](jpg/xpredic_08__large.jpg.pagespeed.ic.0j4un7yepj.jpg)
Prediction 9: Lazy Loading
On websites that feed content continuously, Lazy Loading aids in viewing immediate website content without waiting for the entire page to load.
This is especially helpful for websites that are highly visual, such as Facebook, Instagram, or Pinterest. In a society where information is constantly being fed into our lives, lazy loading helps to simplify viewing of said content by loading only small chunks at a time.
![](png/xpredic_09_01__large.png.pagespeed.ic.1htbiq8-cs.png)
Pinterest
We’re excited to see what new trends, styles, and stories 2016 will bring for us, and what trends and movements will fade out within the next year and beyond!