All of the many trends in web design have their own best practices and provisional guidelines for creating a great design. Although many rules are borrowed from traditional art, these techniques differ in the realm of digital design. When people are expected to interact with your design you’ll need to approach each problem from an experiential viewpoint.
Parallax web design is a tricky subject because it encompasses many different ideas. But most of these ideas follow a similar trajectory of dynamic navigation, fluid content, and visualized ideas. This post delves into some practical methods for crafting usable parallax layouts that people will enjoy. At times it can be a balancing act but once you have a direction the whole creative process becomes much clearer.
Auto-Sliding Content Sections
Since most parallax layouts are built using a single page it’s important to place information naturally. This often results in large content sections which span the full width of the page and squeeze down into the height based on browser size.
For example take a look at Bistro Agency. Their site uses a parallax scrolling feature to move about horizontal content sections. When you scroll one notch down on the mouse wheel or tap the down arrow key it’ll animate to a completely new page view.
Not everybody loves this feature because it removes the usefulness of a scrollbar. Animations can appear choppy when there’s no inbetween motion to scroll from section-to-section. But it’s also a classic choice for dynamic content which can fill the entire screen.
These parallax layouts often incorporate dot navigation elements on the left or right side of the page. Social King uses a dark parallax layout with each major content section outlined on the left. You can jump between sections by clicking on any of the dot navigation elements.
It would be a good idea to increase the size of these dots so they’re easily accessible. Visitors often want to move about content in a linear fashion so they consume the page more naturally.
Take a look at the homepage for Eat Sleep Work. Their dot navigation element uses large circular icons with hover details. While this effect may require a lot of code to create, it certainly improves the user experience and gives visitors a more direct look at the overall layout.
Background Motion Graphics
The parallax scrolling effect is often considered to be a single-page layout which scrolls dynamically. However the actual definition of parallax relates to artificial motion or movement, almost like an illusory design state.
Background motion creates a true parallax effect which can be applied onto any style of layout. When users scroll down the page graphics can move along with the background entering a transition from another page area. Take for example the Fireworx Creative homepage.
In each content section you’ll notice background content which animates down beneath the page. This is a relatively common approach to parallax design because it captures attention while also enhancing the design.
The effect can be created by using a solid background image in one section coupled with a transparent image on top. So for example on the Rimmel London page you’ll notice that each section has various objects which appear in the foreground. As you scroll these foreground objects animate and move like motion graphics.
The nice thing about this effect is how it can be created without excessive animation. Most parallax plugins will support motion-sensitive backgrounds without a lot of extra code.
Practical Animation
What parallax layout could be complete without some animation? These effects can range from hovers to page transitions and motion graphics as previously mentioned. But an important point with parallax animation is that it should be practical.
Large parallax designs tend to slow down on computers with older processors or weak GPUs. This isn’t great for performance or visitor retention. Perhaps the designer isn’t concerned with people using older computers, but that attitude seems like the Scrooge McDuck of web design.
Animation should add something of value to the page. Make sure the animated elements are pretty to look at while also appearing vitally important to the layout. The homepage for Electric Labs uses scrolling animated elements which move as the user scrolls up/down the page.
An important point to note about their design is that it’s not very slow at all. Everything feels quick and snappy. The most ideal parallax layout would be animated and dynamic while still feeling snappy in any browser environment.
And if you’re really interested in custom animation try building a horizontal scrolling layout. The webpage for History of Automobile Safety uses this horizontal scrolling feature in an infographic design style.
Admittedly this can be a very difficult method of website design because horizontal layouts are divergent from traditional norms. However most parallax layouts tend to diverge with their own trends so it’s not as much of a surprise. The key is to design animation tastefully by fulfilling a purpose in the website.
Create the Illusion of Depth
Some parallax layouts attempt to create the illusion of depth on a 2-D flat monitor. This same technique has been used for years by photo compositors and video effects animators. But recently advancements in JavaScript and browser support allow for more depth-based artefacts.
This can be accomplished by first layering objects on the page. Take a peek at the Boy-Coy homepage and scroll down a bit. You’ll notice that some of the elements fall behind a background while others continue moving “on top”.
The illusion of depth is solidified in the viewer’s mind without any C4D renders or 3D modeling. In fact the depth mostly appears when scrolling because static elements on the page tend to look relatively normal.
At the bottom is a contact form with an interesting animated effect on the nav links & letter envelope. I simply love the style of this page and in my mind Boy-Coy does parallax right.
Tell a Great Story
Ultimately the parallax design trend should be used to tell a story. This doesn’t need to be the next great Hollywood screenplay but it should entice visitors with some type of message, moral, or final conclusion.
Websites that tell stories are often like dynamic infographics. This is why parallax design is so alluring because it offers dynamic features crammed into a single layout. And the parallax style can work regardless if your site is a portfolio, agency, or corporate landing page.
For example The Beauty of Brewing is owned by Heineken and meant to promote their products. But the page itself is quite formal and doesn’t feel like promotional material. Content is altruistic and the design itself is simply phenomenal.
Another similar layout with storytelling features can be found on Follow The Poppy. It uses a series of vector graphics to illustrate scenes and explain background details about The British Royal Legion.
The best websites will always have a story to tell. These don’t always need to be in the style of an infographic but there should be real, consumable information which is valuable to visitors. Parallax features are just a means of sprucing up the content with a fancy cocktail dress.
Closing
There’s never been a better time to get your hands dirty with parallax design. With hundreds of live examples online coupled with open source plugins you should have no problem getting a simple parallax layout up and running. By incorporating the methods from this post into your project you’ll have an easier time creating a brilliant parallax layout while also learning about design along the way.
Source: http://ift.tt/1ekrYCv
No comments:
Post a Comment