When
thinking about web design, you must consider the full
spectrum of possibilities that the internet presents. Done boldly,
designers can push the limits of human interaction and imagination on
a global scale – as is often seen with edgier industries, such as
creative agency websites.
In this article, we’ll boil down some of the
most prominent web design trends emerging in 2015. It is here
that we can find true innovation and new
opportunities – a few of which may completely change our
understanding of a “modern website”.
1. Make it big
“Make it big” seems to be the
single most important principle of web design today. Yet for many people,
it’s hardly acceptable that the homepage – specifically above the fold –
consists of just a few words overlaid on an image or a video. Sometimes, even
the navigation is removed or (at the very least) is hidden as a small
icon.
The two flavors of this web design trend can be labeled
as “Cinematic” and “Book Cover”. The first has been inspired by movies and TV
ads, while the second enhances the classic concept of printed book
and catalogue covers.
The reasons for
this trend are both visual and pragmatic. You’re able to give users
maximum impact as soon as they land on your site and it’s easier to
code, so it works well on mobiles and desktop computer monitors (the same
layout remains unchanged despite the display device size). Full screen
images came into vogue last year but with growing access to high quality images
and speedier technology we’re seeing websites take these “Book Cover”
layouts to the next level.
2. The multimedia experience
The multimedia concept is quite
dated. The word itself has been so used and abused that it’s
nearly lost its meaning. Nonetheless, armies of designers and programmers
are constantly fighting to create increasingly engaging multimedia experiences.
A while back, Flash was the platform for
these experiments. Presently it’s the HTML5 <canvas> element that
will eventually allow you to create almost any visual effect on the
website.
Another noteworthy
example of an interface built with HTML Canvas is community-driven DNA project by
Brooklyn-based musician Jonathan Dagan (aka j.viewz). Opening with a highly
visual background video, j.viewz tells us how he plans to build his new musical
album through his personal experiments (which users can download) and
other collaborators’ uploaded videos, music and feedback. Raise the River’s website is yet another fantastic
example not only because of its apt visual metaphor, but also its
presentation. The pace of animation and inability to scroll almost forces the
user to take a breath and adjust to the page timeline.
While designing interfaces, we usually do everything to
enable users. This website shows that disabling users for a certain amount
of time may sometimes enable a better experience.
3. The Parallax effect mutations
Parallax has evolved into many different mutations that
have one thing in common: designers use page scrolling or mouse movement to
animate elements or properties of the page. If you look carefully, most of the
websites showcased in this article use this logic. Here are some
additional examples.
It’s easy to
appreciate Mint Design Company’s creative use of an old CSS sprite
technique. The result is an engaging and unique take on an otherwise
straightforward company website.
4. Animated storybook
In this type of page, similar to
the first example, an animation sequence starts when a user reaches a certain
scroll position. Often, it is just a few elements that slide into the page
or use a fade-in effect to appear.
The Boldking product page (above) uses lightweight
SVG and Java Script to present a visual metaphor describing the way their
product works. Not only is the idea and animation amazing, but equally notable
is the fact that it was achieved within 1.5 MB total page weight. Sometimes a
single JS library has this size. One of the animated sequences is even
interactive.
Colin and Dewi’s wedding website
is a simple yet effective way to keep the user focused while reading a story.
You are presented with one fragment of the story at a time. To see
the next part, you need to scroll to it.
It sounds like generic scroll functionality, but 3D CSS
animation – as well as hiding and revealing text fragments –
makes the story much more engaging.
5. Flat design
During the last three years, flat
design has been hailed the “king” many times over. It’s still doing great
and is going to stay for good – especially in smaller elements
such as icons, menus and illustrations.
Not only do these elements look good (way better
than those glossy web 2.0 icons covering nearly every website a few years
ago), but they are easily scaleable and manageable, thanks to icon font
technology. icomoon.io is an example of one online
service allowing everyone to create their own icon fonts easily for free.
Rather
than imitating objects with skeuomorphic techniques (where a notepad
icon looks like real life notepad made of paper and bound in leather),
flat design tries to convey the idea of a notepad through a synthetic,
catchy and fun visual that works well in varied sizes.
6. No more boxes
Web designers always love to show they can
think outside of the box – in more ways than one. One could call this
trend “Draw a box and prove you can break it”. A rectangle screen is the frame
for every web design (as far as we know, we don’t have circular
monitors yet). Every HTML element of the page is a rectangle too.
But designers, like most people, don’t like to be
constrained. There are 3 distinct strategies to prove you are not a slave
to the rectangle – and all 3 seem to be on the rise.
Source : http://ezinearticles.com
Source : http://ezinearticles.com
No Comment to " The big web design trends for 2015 "