These days, most designers worth their salt know that the way to approach modern website design is mobile-first. Mobile devices have overtaken desktop PCs as the viewing platform of choice, and 85% of smartphone usage is done through apps rather than the mobile web. It is safe to say most websites are seeing better conversion rate when they are utilizing responsive design websites.
How has this new landscape affected mobile website design?
It's made mobile design, as a whole, more “amplified.” Both app designers and responsive website designers are focused on the user experience for mobile users, and new visual standards—like the ones below—have taken root. If there’s one thing in common among these effects, it can probably be summed up with one phrase: visual interest. The 10 effects below all work to add maximum visual impact to an experience that is packed into a very small screen.
1. Parallax Scrolling
Parallax scrolling is one of the biggest modern website design trends, and it has literally turned the design world on its ear. Rather than the traditional, horizontally focused page design that has been popular pretty much as long as there’s been an Internet, parallax sites embrace a completely vertical page orientation. Sites are often one page—total—and traditional site “sections” are stacked one on top of the other to create a motion-rich scrolling experience that alternates images and solid text areas. The end result can be incredibly clever, and occasionally breathtaking.
2. Modular Scrolling
Modular scrolling is another interesting scrolling effect that allows for a more vertical page orientation—but in this case, different parts of the same page scroll independently. A page that might display in a stacked format on a smartphone can broaden to a side-by-side display for tablets and provide a compelling visual display for users.
3. Infinite Scroll
Scrolling effects are definitely a theme in the mobile design world. Infinite scroll is an effect that makes pages seem bottomless—rather than the scrollbar running top to bottom, the page loads as the user scrolls down, continually presenting additional content.
4. Blur Effects
Blur effects are a popular aesthetic trick that allow designers to create a more rich and layered look on-screen. Blurred images can be placed behind display copy in an artful fashion, leaving content readable but adding visual interest to the design. Blurred images are often layered behind regular images to create more visual impact, as well.
5. Light Copy
As visual storytelling—using photos, videos, infographics, etc.—becomes more prevalent in modern website design, heavy blocks of text are becoming a thing of the past. Instead, designers and producers work to create a rich display where the visuals carry the story, with minimal keyword relevant text provided as needed.
6. Swipe-Reveal Photographs
These photographs are invariably cool, and they provide an interesting comparative experience for users—they’re often used for “before and after” images, and they work brilliantly with the smartphone’s inherently swipe-friendly style. These photos, once again, create a rich, interactive storytelling experience that can be condensed into a small space.
7. Interactive Images and Animation
Since mobile devices are not Flash friendly, designers tend to look for ways to use HTML5 for interactive images and animation to liven up the user experience. Subtle animation of photographs is one way to create motion and interest without having to actually embed video.
8. Rich Arrows
Why have a plain old navigational arrow when you can make one that animates or expands to reveal contextual images related to the content on the other side of the click-through? These arrows are aesthetically pleasing but also contribute greater context to the user experience, making them more than just eye candy.
9. Sliding Navigation
This navigation technique is another employed to add both interest and a richer information experience on very small screens. By creating navigational elements that are triggered by the user to “slide” into place—for example, a top or side nav bar that expands or overlays to display options—designers can keep page designs uncluttered and yet keep needed information available with just a click.
10. Dynamic Charts
Dynamic charts add—you guessed it—greater visual interest to the page, but they can also be used to great effect. Simple charts might load animations as content scrolls into view, but more complicated information can be communicated very effectively by presenting facts that are revealed to the user in a specific, controlled fashion.
The mobile experience is still in its infancy, but if modern website design trends are any indication, the Internet will be an increasingly visual experience. Of course, trends come and go, and the latest technology is replaced with something newer and better every day. But it definitely seems that our devices are going to be more centered around looking and touching, and less around just reading, as we move into the future.
Subscribe to our BLOG
Stay in touch & learn how to attract customers, become a thought leader, create effective marketing campaigns, & more.