Large Typography. Studio Lovelock

Transcription

1

2 Large Typography Pique the attention of your page visitors by using typography instead of photos and videos. Short statements in large lettering can help quickly communicate the purpose of a site and encourage users to explore the content a bit further. As a general rule, just be sure to toss aside the Times New Roman. If you re going to opt for a big hulking font, choose one that is more personalized so you can stand out from the crowd. Type-kits are becoming increasingly more affordable (hey there, free Google Fonts!) so there are options even if you re working with a little bitty budget. Studio Lovelock

3 Kill your sidebar The rise of the mobile web has the design world re-thinking navigational menus, and they continue to improve in Give up the sidebar in favor of a slide-out or a small button that opens the menu; it helps your site be more responsive, and delivers a simpler, clearer design overall. The slide-out menus can appear from various sides of your website and can have horizontal or vertical orientation. When the navigation is closed, the user is able to see a full view of your site s homepage, using the space you have (especially on mobile) to its biggest advantage. Reflex Agency

4 Storytelling Content is key for any website, but being able to tell a story through your content takes everything a step further. Using sophisticated imagery, animation, and other design elements allows you to create a site that is more than just an information dump. With careful application and a solid dose of creativity, you can capture your audience s attention and guide them through an interactive experience they won t soon forget. If you re interested in playing around with this concept without writing a ton of code, check out the Aesop Story Engine plugin for WordPress. The open-source framework allows you to create stories from thirteen different story modules (including image galleries, content columns, and podcasts) that you can arrange and customize to create your narrative. Museum of Mario

5 Scrolling > clicking As the mobile web continues to grow, more and more sites will encourage visitors to move from the mouse to the wheel. Scrolling is more intuitive, cuts down on load times, creates smoother transitions between blocks of content/ information, and keeps visitors on your site longer. The most talked-about trend in this area is Parallax, a neat little technique where the foreground images move faster than the background images, creating a 3D effect as you scroll up or down the page (yep, there s a plugin for that). Just be wary of opting for the infinite scroll, which can cause users to lose a sense of orientation and get bored/confused with a site. For Better Coffee

6 Card-based design You can blame Pinterest s popularity for more than the rise of weird DIYs or wedding photographers; it s also one of the biggest proponents of card-based design. While it s not a new concept, the arrangement of information in the form of small cards or tiles is often a clean and versatile solution for designers working on responsive websites. It s an easy way to keep things modular and allows content to work across all platforms and still prompt the users to drill down and see more of the site. MAP

7 Large background images and video I sincerely doubt that a single one of you is surprised to see this one make the list. Indeed, large images are here to stay during 2015, as designers will continue to use beautiful full-screen imagery to connect with viewers and tell a story. Huge brands like Paypal, AirBNB, and Uber have adopted this trend. If you want to take it to the next level, a video background is a great way to make users stop, stare and spend more time on your site. It turns a typical visit into a moving, immersive experience. When used properly, it s an excellent way for brands to demonstrate their product in action or tell a story that wouldn t have been as easy or engaging with a boring old static page. Omaha Video Solutions

8 Ghost buttons A carry-over from 2014, the transparent ghost button is a trend that shows no sign of stopping. Ghost buttons typically have a basic shape form, thin border, and internal text in a plain, light, sans-serif font. These buttons are often larger than the traditional clickable buttons on websites and are placed in prominent locations, such as smack dab in the center of the screen. While they lend themselves well to a variety of designs, ghost buttons typically perform best on top of large-scale photo/video backgrounds or on sites that have a minimal or flat user interface. WeatherJams

9 Material design Google s new visual language, Material Design, features a mostly flat design that uses subtle layering, animation, and gradients to create a blend of the tangibility of a pen-and-ink physical world with the playful imagination of the digital sphere. The look is bold, graphical, and intentional. While it s just a little level up from the ever-popular flat design, it s a style that will certainly inspire designers this year and beyond. Google

10 Microinteractions Microinteractions are contained experiences or moments within a product (or perhaps a module on a website). Favoriting something, filling out an signup box, hitting a 404 page, or clicking a call-to-action are all microinteractions. They re a small bit of functionality that provides the perfect opportunity to surprise and delight the user; plus, they promote the engagement of your visitors and make your website more likable. They can be silly (if you favorite an item in the Zappos app, a kitten with an umbrella floats across the screen) or practical (rating a movie on Netflix) or anywhere in between. Modcloth

11 Hand-drawn elements In the quest to differentiate digital experiences, many sites are now incorporating hand-drawn elements for their icons, illustrations, buttons, imagery, and more. They add a unique, creative spin to your design that helps it stand out among a sea of stock images. It s not a new trend by any means, but it works well for any business that s looking to tell their own story outside of the cookie-cutter world of web sites. Rebecca Sehn

12 Made with love by Flywheel getflywheel.com