Virgin has gone and blown everything we knew about airline websites out of the water with its latest redesign. Together with Brooklyn-based digital company Work &Co, and London-based design studio Build, Virgin has created a slick user experience that actually makes booking a flight fun Fantastically creative animations and characters make the whole process very enjoyable, while illustrations representing the cities that the airline flies to add a touch of humour.
“Virgin thrives on being different and I think this project completely nails that perspective,” says Build studio manager Sophie James. “There’s ever/thing from taco-eating Pandas to Obama taking a selfie with his security detail – not to mention a windy Michael Jordan.”
With extra touches that step outside the website, such as a printable boarding pass that folds perfectly to pocket size, this redesign has raised the bar for how we book flights. Everyone else, take note.
HUMAAN.COM
Humaan is an award-winning digital agency based in Perth, Australia. For its recent redesign, it stripped everything back to the essentials, with a focus on its story and impressive body of work.
Its new site reflects these values. There are some beautiful uses of animation throughout – the Humaan logo switches from ‘Humaan’ to ’Home’ with a cute icon to match. There are also some more powerful uses: for example, when you navigate from the homepage to a project, the whole site rotates in the case study, which creates a beautiful full- page experience. Further animation is used within the case study pages themselves, and the content loads in softly and is easily digested. These are just d few little touches that make the site a pleasure to browse.
Recommended Post for you: Adobe Creative Cloud: Saving Design Solutions
“After working through the development of our new brand and direction, we wanted a website that better reflected our evolution as an agency, our voice and our focus on human interaction/’ says Humaan designer Kylie Timpani.
“WP incorperated a number of different technologies to bring the site to life, including css and SVG-based animation; HTML Canvas, JavaScript and good old animated GIFs. The ultimate outcome is one that we feel outlines our vision and communicates purpose, while also providing visitors with an exceptional experience.”
PH7LABS.COM
ph7labs is the website of user interface designer and illustrator Camilo Bejarano. With a plethora of big brand clients such as The New York Times, Disney and Digital Arts to name just a few, it’s obvious that Bejarano is doing something right.
His new portfolio is beautifully simple in terms of structure but incredibly bold when it comes to showing his work. Every case study is a full-page experience, delivering stunning illustrations along with highly detailed photography. These case studies have been put together to show the diversity of Bejarano’s skill set, from character design printed product’s. The purpose is clear and each offers an in-depth view of the work involved in each project. The mobile experience on ph7labs is wonderful, too. Subtle animations and quick access navigation make this site incredibly intuitive and easy to use.
GECKOBOARD.COM
The recently redesigned Geckoboard offers up a stunning example of how simplicity can be big, bold and beautiful. The work of UK-based designer Oli Lisher, it’s clear that the purpose of the redesign was not just for the sake of trends, but to enable the user to understand what Geckoboard does as quickly as possible.
“We decided that: using photography to show Geckoboard dashboards being used by different types of users, in various situations, along with a simple graphic approach would be the ideal way to go,” says Lisher.
He also developed a strong illustration style for the site: “Geckoboard is all about displaying metrics and information in the most easily understandable way possible, very often in the form of graphs and display graphics. Taking inspiration from this, I created a supporting line-illustration style to use throughout the site.”
The company also went under a complete rebranding exercise. The logo has been simplified and the typography choice works beautifully with the new site design. Lisher used Mixture to mark up his designs, which were then provided to the team at Geckoboard and integrated seamlessly into their CMS.
OYSIERBOOKS.COM
Oyster really stands out for me as an exquisite example of – how simplicity can be incredibly powerful. Dubbed the ‘Netflix for books’, Oyster has left nothing to chance, and it all starts with a wonderfully designed homepage that delivers its core message with zero distractions.
Two custom typefaces have been created to be used on Oyster, each one designed to perfectly compliment the other. When it comes to the colour palette, Oyster continues its mantra of keeping things simple and uses predominately white and grey throughout the site, with two accent colours to draw attention to links and calls to action.
The main area of the site, the library, is a beautifully presented collection of books that draws you in to explore more. The presentation of each book ensures that the experience is consistent and every book looks great.
If you’re using Oyster on a mobile device, you’ll be pleased to know the site is fully responsive and has been very well thought-out and delivers the same flawless experience across these devices. The site is supported by a fantastic looking app, but this is sadly only available in the US.
WILD.AS
Wild is an exciting new agency based in Vienna. The team may be small (just four people) but they sure do pack a punch. The design of their company portfolio is an incredible showcase of graphic design and current web technologies.
The full-page experience on this site is one of the best I’ve used. You can control the content with your mouse or by dragging the screen, and each section uses video and subtle animation to draw attention to the content, be that a case study or blog post.
The navigation that Wild uses is particularly interesting. We’re fairly used to seeing the ‘hamburger’ icon now, but when you open what you’d expect to be a menu, the site surprises you with a mission control-esque view, where you’re able to quickly access the case studies and blog posts.
Recommended Post for you:
The case studies themselves use parallax to introduce content as you scroll, making the whole site feel very immersive. It would have been easy to go over the top here, but Wild has done a wonderful job of being bold with its design but keeping things functional at all times.
“We built our website with the purpose of representing our skills in the best way possible. It should be fun, engaging, professional and a fine example of what we do,” says lead designer Matthias Mentasti.
MASTERDYNAMIC.COM
Master & Dynamic is known for its fantastic products and with this site you really get a sense of the craftsmanship that goes into everything it makes. Created by New York-based digital agency Wondersauce, the site lets incredibly detailed photos do all the heavy lifting. The product pages have been elegantly put together with minimal typography that gives you the vital product details and no clutter.
“We ruthlessly minimised the visual interface to direct all focus to the product and the message,” says Brett Waszkelewicz, creative director at Wondersauce.
One of the highlights is its approach to navigation. As you click a category, you’re presented with a visual sub-navigation that shows the products within that category, both reducing clicks and showcasing Master & Dynamic’s product line in a really elegant way.
Recommended Post for you: Online Billing, Invoicing & Time-Tracking With Invoicera
Wondersauce opted to build the site on Shopify Plus. “An advanced API gave us greater control over the shopping experience,” says F.ric Mayville, director of user experience. “It provided simpler integration of third party services and our own custom solutions, making store management more seamless.
The post Gallery: Sensational design and superb development appeared first on Cloud Media News.