The New Year is well and truly underway, and there are already some clear trends emerging in the web development and design world that our developers are getting excited about. Here are a few of our favorites, along with some examples of what these look like on screen.

Responsive Design with Better Speed and Performance

Designers and developers alike are putting more emphasis on a websites weight, with the goal to keep it as light and nimble as possible. Responsive web design has brought performance concerns to the forefront, with things like slow network speeds (mobile networks or home networks) and the endless array of users’ devices available forcing us to pay close attention to the file size of websites, how fast the website loads, and the limitations of restricted data plans.

Responsive Design

Line Icons and Ghost Buttons

With the rise of full screen image/video background images, line icons and ghost buttons are becoming all the rage due to their minimalist style and subtle hover over effects. While standing out from the background they don’t detract from the overall design, instead enhancing and complementing it.

Ghost Button Icons

Focus on Typography

For the longest time web type-kits for beautiful fonts and typefaces have been prohibitively expensive. This meant only websites with large budgets could afford to use fonts other than the standard Arial and Times New Roman styles. Type-kits websites like Google Fonts have now enabled us to use different and cool fonts on any website we design, and designers and developers are continuing to increasingly take advantage of these type-kits websites.

Examples:

Typography Examples

Full Background Images & the Rise of the Video Background

Large ‘hero’ images or videos are now starting to replace simple slideshows. They are a simple way to make your site stand out, by having great content displayed in front of stunning images or videos. There is still a place for stock images in other situations, but these hero images/videos sections need to be extremely high quality and unique. Using custom images and videos takes the design a step further, and encourages visitor trust by appearing personable and transparent.

Examples:

Full Background Image

Interactive Storytelling

Static infographics are still useful, but interactive versions are more visually appealing and effective at story telling. Interactive infographics allow users to connect with the content which builds a more engaging experience for the user.

Examples:

Interactive Storytelling

Improved Parallax Websites

Parallax websites have been around for a while now, but the movements of the websites sections are getting smoother. Designers and developers are getting more and more inventive with how content appears and moves into view as its section moves up through the browser window. These include using a combination of vertical and horizontal scrolling, animation dependant on mouse movement, and smoother fading and movement effects.

Examples:

Improved Parallax

Responsive SVG’s

SVG (Scalable Vector Graphics) is one of the best formats for responsive web design, and the best for flat and material design. Because SVG’s are in a vector format and keep its sharpness after scaling, you can manipulate them using CSS or JavaScript to create awesome animations.

Responsive SVG

Flyout/ Slideout Menus

Navigation design has taken giant leaps forwards recently, and it has a lot to do with responsive web design moving toward making every aspect of a website look great – no matter the device. Websites are now being developed with application like menus that flyout/ slideout. Check out the examples below for different transitions for menus and sidebars.

Flyout/ Slideout Menu

Masonry Design

Websites with masonry layouts have been around for a while, and they are a great way to keep products, posts and projects modular, and rearrange columns without content getting disorganised. You can also use filters so that users see certain content. Masonry layouts are simple but versatile, which is what the internet needs, so expect to see more of it throughout 2015.

Example:

Masonry Design Examples

The Rise of Material Design

Flat design has been taking over the industry ever since Windows 8 was revealed. Flat design is influenced from various styles of art including Swiss style, minimalism and styles coming from Bauhaus.

Google has attempted to rewrite the rule book on interactive design with ‘Material Design’ (its take on Flat Design). Material Design comprises specific components, patterns, style, and interactive design which allows you to create beautiful layouts, transitions, scrolling effects and awesome interaction designs across different types of devices.

Google even launched the Polymer library, to help developers easily create material design components and applications for desktop or mobile. To learn more about Material Design click the link below.

Material Design Introduction

Material Design

Micro Interactions

Micro interactions can improve how users experience your website. They are the small moments that accomplish just one small task. When you use the Like button on Facebook or update your status message, you’re experiencing a micro interaction.

The difference between great products and those that we just endure are often the small things like micro interactions.

The best micro interactions are when you know what you want the user to accomplish, and where and when this is to occur within the product and the user’s environment. These are also a great metric to track when looking at your websites conversion rates and user experience.

Facebook Like Button