The web is an ever-evolving, exciting ecosystem of development and change. Some of the web design trends that have been around for the last few years will continue this year – responsive, flat, clean. Site speed and performance is critical across all devices. Card design is the design pattern of choice for the mobile web. UX and UI design needs even closer attention due to the rise and rise of mobile and mobile apps, which means that designers have to take greater pains to ensure that visitors to the web have have a great user experience, with smaller screen sizes, flicks, swipes, taps and gesture-driven interactions. With the growth of mobile and mobile payments, users’ love of sharing selfies and user collections, social sharing and usage design patterns are undergoing changes faster than you can blink. All of which affect how designers approach the 3D, deep-linking, seamless web.
Responsive web design is the new standard
RWD is a given for all websites, as mobile usage continues to grow by leaps and bounds and your website may be accessed on any device, on the go or at home. While we prepare for the age of wearables and the “Internet of things“, the best approach to stay with is platform-agnostic, responsive design. Responsive typography that adapts to devices at arm’s length or room length will also be a key factor here. Perhaps Scalable Vector Graphics (SVGs) will finally be accepted as the perfect graphic format for the responsive web as they scale to any size without losing clarity.
Scrolling vs clicking
Users like to scroll for information, they are used to scrolling and prefer it over clicking. On infinite scrolling sites like Twitter, Pinterest and Facebook, user generated content loads as the user scrolls, and pages are out. Parallax scrolling with a layered effect creates an interesting 3D experience as the user scrolls down.
Flat, clean design
Flat design is here to stay, although some shadows and nuances relieve the total unrelieved flatness of it, even in Google’s Material Design (Google’s conceptual framework and visual language for users for how digital products should be laid out and rationalized.) Clean is in, clutter is out, yet there are a wide range of designs and styles to choose from out on the web today.
Simplicity and white space
Cut your site down to the bone. No superfluous details. Let information be centerstage – remove distracting background colors and elements. A smooth UX is where it’s at. All this fits in with the need for speed in page ranking.
Site speed and performance on all devices is vital
“Make your web pages fast on all devices”, says Google’s Page Speed Insights. Rapid display, site performance, site speed = better ranking for onsite SEO. Your site has to work everywhere and on any device, whatever network it’s on. Slow page loading time causes abandonment of the site by the user and a drop in revenue. Image compression using a wide variety of tools speeds up page load times. Large sites with huge amounts of content can use CDNs (Content Delivery Networks) to deliver content faster to users located in a closer geographical area to the network. Focusing on important content and keeping page content small will keep your pages loading faster. Gzip compression will enable webpages with large amounts of content to consume less bandwidth, thus making them load faster. The user’s browser then unzips the file and displays the content.
Microinteractions
While designers were encouraged to look at the macro level and provide “big picture’’ solutions, some were quietly looking at how to delight the user at a micro level. That’s how microinteractions were born – they are aimed to accomplish a single task – done well, whether it is a sound, an animation or a line of text. Liking a Facebook post is a microinteraction – it enables Facebook to collect information on your tastes and preferences, and you stay within your context and continue doing what you were doing while you can also see what others liked. Subtle animation – a button wiggling on hover or a picture growing on scroll – can pull a user’s eye to calls to action on a page.
Cards, micro-experiences, collections and sharing
Cards are portable embeddable components that are easily readable, shareable, flippable, sortable, navigable on mobile and swipeable – providing not just an interface but an action to help a user engage with relevant data in a personal way. Twitter, Pinterest, Tinder, Spotify, Google Now, Facebook Paper, Kik and a host of others use cards to display extended information beyond online content that is referenced and shared. Cards are the best design pattern for the mobile web. Design-wise, cards can be vertically or horizontally stacked. You can embed video, slides, or music, or calls to action.A Tinder card is a unit of content while a Twitter card is a platform.
Users love to collect and share (and sell) playlists, photos, handcrafted and digital items, recipes, coins and art, amongst a host of other stuff. Cards can create micro-experiences that keep the user coming back for more of the same. These micro-experiences can be at deeper levels of engagement depending on whether the user is walking down the pavement casually looking at his mobile phone or whether he is relaxed at home.
Twitter’s extended information goes far beyond a hyperlink when you click a tweet – to display more than first party data from an internal API to displaying data from referenced remote data – a variety of third-parties using first-party data in Twitter’s internal architecture. You could see a video or a description, or sign up for a newsletter or product using different structured card formats for different purposes created by Twitter. Since Twitter cards tap into mobile streams and are a way to aggregate and distribute content + context, they become significant ways for users to engage with and share content that is relevant to them.
Ghost buttons – minimal, flat, interactive, attractive
Ghost buttons are those subtle, transparent rectangular button shapes which keep the background visible, usually on a large image. They are hollow, with thin elegant lines that change color on hover or the button fills color with an animation effect. Text on ghost buttons is unobtrusive while giving a call to action. Designed to delight the customer and attract him to click through, these interactive devices make a welcome change to website design.
Modular content
Chunking content, both visual and text, into modular blocks helps to keep it easy to skim and scan and read one section at a time. Large visuals and video, grid and section content, infographics and quotes, allow sections to be viewed or shared individually or as part of the larger whole. Design your content to be flexible and adaptable for the fluid grid.
Stay with clean layouts, provide calls to action where necessary and use the hamburger menu navicon to keep navigation hidden till required.
Content lives longer in different formats
Repurposing existing content in various formats with flexible visual storytelling extends the shelf life of content. For example, a Slideshare presentation, cartoon or quote can be designed from an article, an infographic culled from a chapter of an e-book.
Handmade fonts and illustrations
Hand-lettered fonts and hand-drawn elements bring back artistry and personalization to the web, despite advances in technology with tools like The Grid. The Grid harnesses the power of artificial intelligence to create an A1 custom web development experience for you… a website that “builds itself.” However, the power of human intelligence isn’t going anywhere fast and cannot be underestimated in creating a personalized web experience for you, even while using the latest technology and tools.
One-page websites and pageless design
Entrepreneurs and personal sites have thrived on the one-page format which is ideal for mobile, building on the user’s tendency to scroll vs. click. The influence of one-page websites on web design in general, can be seen on homepages giving a capsule view of the company and what it does, placing the main message upfront with hero images or video, giving a quick introduction to the company and its team; providing statistics, portfolio and contacts – so that the user does not have to leave the page. These interactive homepages create enough user interest to attract them deeper into the site. “Pageless design” has been predicted by some as the way of the future, and it does make for compelling storytelling, an immersive experience and can enable better sales conversion – yet it does not serve the purpose of large enterprises and multi-page websites.
Movement will be the new normal
We will see more video replacing the hero image, more sleek, interactive, animated icons, more gesture-enabled interactions.
Mobile usage going skywards, apps growing substantially
The growth of the mobile web has been exponential. Mobile commerce grew more rapidly than desktop e-commerce. Consumers are spending significantly more time using apps on their phone than browsing the web, and the falling cost of app design and development will drive the growth of high-quality single-function enterprise apps.
Mobile payments change the way marketers do business
Just a few weeks after the launch of Apple Pay, this mode of payment supports cards that represent 90% of the credit card purchase volume in the U.S. and can be used at 220,000 national to neighbourhood outlets. Walmart Savings Catcher program for iOS and Android and Starbucks’ mobile marketing strategy show how these large companies stitch together online and offline information to create real value for their clients. With Starbucks’ recently enhanced payment app for iPhone, customers just need to shake their phones for the payment barcode to display. And customers can even tip their barista through their phones through digital tipping! At this rate of growth, mobile payments will move toward an international level of functionality.
These are just some of the many trends that are impacting web design today. With all the new ideas buzzing around, we’re sure to see a whole lot more!