Design is an industry that constantly evolves and adapts to new environments to reflect contemporary society. In an online context, where innovations usually move at light speed, the evolution of design can be even quicker than usual. So it's no surprise that with the convergence of design led thinking that puts the focus on creating frictionless a customer journey across a multiplicity of consumer devices, the evolution of HTML5 and the growing dominance of video, the 5 trends we outline below are gaining traction. Now is a great time to check out what the year has brought us in web design trends.
The widespread adoption of flat design, is still with us and unlikely to go away any time soon. But the increasingly urgent need for user-friendly designs that adjust to multiple devices, and the increasing availability of cutting edge technology, is seeing designers do test unconventional ideas. This list provides a brief hint at what's happening in web design in 2015.
Down to the bare minimum
Where once upon a time elaborate menus, borders and boxes split a webpage into easily digestible parts, 2015 sees designers stripping these organizing tools to the bare minimum. Instead of using these outdated design elements to break up the screen, designers now rely heavily on a well thought out design hierarchy to help guide the viewer's eye through a website.
In this trend, headers and footers become optional, and navigation can become an integral part of the brand rather than just a tool. Choice of typography becomes absolutely crucial in this trend, as its size, color and placement will influence design hierarchy and can become confusing if not deployed by an expert hand.
This incredible movie website has entirely done away with a traditional navigation bar and instead places navigation buttons on the north, south, east and west of the screen, letting the viewer explore the website like a maze, but always allowing for easy access back to the home page. The minimalist look draws all the attention to the large background illustrations and centered section headings.The beautiful font logo also adds that chic noir vibe.
Upon entering this website, the viewer is greeted by a minimalistic layout, with no header, footer or navigation bar. Granted, a navigational header does appear once you start scrolling, but the feel of the website is very basic and clean nonetheless.
Big impact images
A picture is worth a thousand words, or so the saying goes. A video can be worth twice that, probably. In any case, 2015 web designers have taken a liking to greet their viewers with full-screen images or videos on their homepages, with very little in the way of text. This trend follows the logic of "quality over quantity", assuming that one high-quality design element will have bigger impact than a page littered with competing elements.
There's a nice aspect of convenience to this trend as well, as high quality images are becoming more and more easily available through stock image pages, enhancements in html5 so designers can push the envelop further than before, and faster connection speeds can handle much higher resolutions and better quality. Plus, this type of layout automatically adjusts to any screen size, so it's a win on all fronts really.
Example 1 – BORN
Talk about big impact! The background of this homepage is a high resolution svg file playing on a simple loop, showing a silverback gorilla look directly at the camera amid what appears to be a snowstorm. This homepage also greatly illustrates the relationship between text and image of a website: The header in the middle of the page reads "Big Experiences", and looking into the primate's eyes sure make you feel like you're having one of those.
Example 2 – Hatch
It stands to reason that a web design firm would be at the cutting edge of company websites. Hatch is no disappointment here, with a gorgeous full scale picture of an English street and old-fashioned fish and chips shop taking center-stage, with only minimal information on the company until you start actively looking for it. The UI(user interface) design is focused on particular emotions that reveal the agency's values with a strong sense of character communicated about the brand.
Have a story to tell
Parallax design has been popular for a while, and in 2015 designers are finding a new application for the elegant and playful trend that creates screen depth via animation techniques. The basic idea is that through motion you can use your website to tell a story. For example, scrolling allows the website to move vertically as well as horizontally, and once the user comes to a specific position, 3D CSS animations, hidden images or text can pop up and engage the reader. Think of it as an interactive picture book – a sure-fire way to make your brand memorable and fun.
By only having a specific fragment of text or imagery visible at a time, the user is far more engaged, and is actively interacting with the content. This multi-layered approach to web design also allows for visual metaphors to be deployed, which many companies choose to do to communicate the principles or functions of their products and services.
This page seeks to educate users about credit unions and encourage them to join one. Sounds pretty boring, right? Think again. They manage to make a compelling case with minimal text by taking the user on an animated adventure along with their money. Along the way, you can find out how much money big bank executives earned of your investments, and discover how investing in a credit union can help your community. By the end of the story, we're pretty ready to start making our money matter.
Writers know all about telling stories, so it makes sense that this copywriting company is making great use of this new trend via Typography and a sectioned home page that makes scrolling fun. The story may be not as elaborately animated as our previous example, but the resulting message is just as persuasive, and the elegant simplicity makes us pretty damn certain that these guys know what they're doing. And that's all you really need from a company selling web marketing services, right?
Ghost buttons
Thought things couldn't get any more basic than flat design? Take a look at ghost buttons! A ghost button is essentially flat design on speed – you get a basic, usually geometric, shape with a simple outline and transparent surface area that lets the background shine through.
They're the perfect companion for that trend of the giant homepage image we mention above, as they are subtle enough to not take attention from the star of the show. But when teamed with a powerful headline and no where else for the user to click, they work. Often, they only light up or become really apparent once the cursor hovers above them. They're also perfect for 2015's obsession with minimalism. What's not to love?
Example 1 – Harbr
The prominent placement and relatively large size of this ghost button assure that it's not going to be overlooked, while its subtlety means it's not intrusive. The website overall adopts a minimalist, clean style, which is aided nicely by the low-key buttons throughout.
Here's another neat application for a ghost button – contrast! Set it next to a colorful flat button, and the eye will inevitably be drawn toward the more prominent option, while the ghost button fades into the background. This is useful for marketing, as it can quickly prioritizes the action you want to push your users toward – in this case, Dribbbox would much rather their users download their program than view the online demo.
Modular and/or grid based layouts
Many believe that the trend towards grid-based design emerged as a result of the popularity of the social media site, Pinterest. In reality, grids are much older than that. Grid-based design got its start in the print design world. During the 1970s, grid-based design was a standard part of most graphic design classes. Only within the last decade did grid-based design make the jump online.
Even though grid layouts are not a new thing, they are hugely useful in web design as they are very flexible and easily organize content. A grid can adapt to any available space, making it user friendly across different monitor sizes and devices such as smartphones or tablets. Their adaptability and neatness make grids especially useful for content-heavy sites such as news sites, blogs, graphic design jobs boards and social media pages,
Isn't this Portuguese website for a holiday destination the most vibrant, fun thing you've seen in a while? The only way that these amazing colors, animations and pictures can work together so well without descending into chaos is through some heavy-handed organization. Thankfully, a grid layout provides just that.
This gorgeous multimedia website is a perfect example of how grid design can work to organize information while working with different layers of images and video to create a visually arresting masterpiece.
With the speed at which web design innovation is moving, we have no doubt that by the time 2016 knocks on our doors we'll have plenty more to tell about the evolution of web design. Playing around with what's possible can be one of the most rewarding pastimes for ambitious designers, and there's no telling what the shrinking technological limits will allow for in the future. Stay tuned and rest assured that we'll be watching with interest and enthusiasm!
Comment on This Article:
Where do you think wed design will go in the next 6 months? Got a favorite cutting edge website? Tell us in the comments!
Want More?
DesignCrowd always has the finger on the pulse of design. Check out these other articles:
Design Principles: 6 Design Fundamentals to Guide Your Work
5 Visual Design Trends Brand Managers and Designers Should Embrace Now
20 Cutting Edge Website Designs and Trends
Written by Divya Abe on Tuesday, July 21, 2015
Divya Abe is an expert graphic designer ready to share her knowledge with the crowd. Besides spending quality time on the internet she enjoys anything to do with cats. Get in touch via Google+.
