The design team share their personal highlights from 2015, including their important lessons, thought-provoking reads, and favourite pieces of design.
The design team was busier than ever in 2015. For clients old and new, we produced highly effective e-commerce designs that married brand and usability to achieve commercial improvements. We saw particularly impressive results for projects that invested in performant, responsive design to service their mobile customers. For example, in the lead up to Christmas, Sunspel’s new site achieved a mobile revenue uplift of 250% on the previous year.
That work is complemented by our ongoing commitment to community projects. We’ve run more workshops and lectures for budding web designers, launched a brand new design event, and earned a net award nomination for an OSS project.
Here’s some personal highlights from across the design team…
What was the most important thing you learned?
Chris Bailey: One of the biggest changes for me last year was moving away from Photoshop and using Sketch. Sketch was launched in 2014, however last year we saw huge swathes of people making the transition. Even with Photoshop’s introduction of Artboards, I still prefer Sketch for it’s lightweight UI and quick prototyping focus. I used it for the first time while we redesigned the Radial website, and the experience was a stand out moment for me last year.
Joseph Russell: My biggest lessons have revolved around managing the design team. If the previous year was about refining processes, then 2015 was about nurturing the team culture. This steers individual attitudes, builds team cohesion, and ultimately produces better work. I’ve been using a mixture of things like design principles, code standards, project scrums, one-to-ones, and team outings, to build relationships and discuss what we mean by “good design”.
What piece of work, big or small, are you most proud of?
CB: Browsersync 2.0 was released last year along with a new visual identity and website. I was tasked with designing the logo, logotype, typography and palette. The brief was to create a modern logo that works well across all digital platforms including the website, GitHub, Twitter, and Slack; something that would stand shoulder to shoulder with other NPM projects. I was particularly proud of how quickly the project came together and pleased with the approach I took. This was largely inspired by the book Love Design Love by David Airey.
OC: Peyote was my first fully-editable WordPress theme build using custom content and fields. The project was well managed and ran smoothly from start to finish. I took great pride in building the site which had some really nice features and subtle animation, such as an editable food menu slider, reservation form, Ajax post loading, latest Instagram, Tweet blocks, and a complex post layout and gallery (which unfortunately are not currently being used). A really nice small project and a pleasure to work on.
SO: Getting the Browsersync UI launched and seeing the downloads shoot up past 400k per month, at times, was not only an amazing achievement by everyone at JH (along with other contributors), but a real personal highlight for me given the sheer amount of personal and work time I’ve poured into the project.
JR: I’m really pleased with how Design Exchange came together in a short timespan. In the two weeks between kick-off and launch, I developed the concept, name, identity, and website. Having spent a couple of months on high-level design for client roadmaps, it was refreshing to be rattling off brainstorms and sketches with pen and paper; giving the mind a good workout. I’m particularly proud of the how the logo is going to adapt to the range applications we’ll be using.
JW: I’m relatively new to JH, having only started in the last week of November. I don’t have a live project that I can shout from the rooftops about, but I am proud to have joined such a capable and progressive team.
What design were you impressed by?
CB: Love it or hate it, Google’s new visual identity is now everywhere. Designing such an identity is a near impossible task; one to both relish and fear if the project landed on your own desk. I admit I wasn’t a huge fan of the new logotype and logo at first, however what impressed me right away has the scale and complexity of the project. What then impressed me more was the speed of its roll-out across all its app and how they all fit together. It’s hard to believe it was only September of last year the new identity was introduced and already it feels like it’s always been there.
OC: Edwin, a denim brand, are a fantastic example of breaking e-commerce convention ‘the right way’, and what I expect to see more of over the next year. The site utilises the full width of your browser window, which allows you to see more information and products, and uses a sidebar navigation (which I am a massive fan of). It’s super clean and has very subtle animations that enhance the user experience. I also love the monochrome look with hints of colour; very classy and lets the images lead. Overall a beautiful site that has been well executed.
SO: Given how hard documentation is to write in the first place, any project that that can also make it look incredible is a winner in my eyes. Vue.js have made this look easy, which is no surprise given that the creator has a history in design.
JR: Tens Life is e-commerce without the BS. A perfect blend of attractive lifestyle content and straightforward interactions. Cutting more BS, “Give me answers” makes a potentially boring referendum on EU law approachable and understandable; let’s hope the British vote is as well communicated.
Central Park Zoo, Nördlicher Schwarzwald, and Formula 1, demonstrate what makes a great responsive site right now. They have rich content that is cleverly organised, presented using clever patterns and a attractive style, all while maintaining fast performance. Meanwhile, Species in Pieces and St. Louis Browns show the engaging experiences that can be built with the latest front-end technologies.
JW: I’m a big fan of Unmade. It’s a progressive, playful, and intrinsically digital knitwear retailer. The classically clear and simple layout shows off the dramatic designs effectively.
The real core of the site is the customisation possible on each pattern. Some designs allow you to simply scale and move them, some allow you to pause a frame of an animation, others allow you pull and pinch a stark grid, throw splats of paint, or nudge elements around in physical interactions. The user darts between each product, eager to find out which new and fun changes they can make.
By inviting the user to remix and glitchify the otherwise stark designs, Unmade turn their knitwear from the most staid of clothing types to the most uniquely modern and personal.
What did you read that changed your thinking?
CB: David Airey’s book Love Design Love talks about his own love of logo design and walks you through his visual identity process. The book focuses on logos and wordmarks and talks about everything from how to get the most out of your client by asking the right questions, to how to present your ideas in meetings. What I like about the book is it is easy to digest with practical examples and it talks about why his examples work and the psychology behind them. Reading this book has helped me refine my own process and came in incredibly useful while working on the Browsersync logo.
OC: Last year was all about learning for me, so any extracurricular activity has been spent in Treehouse and Code School going through the JS courses. Both offer similar learning experiences and I would recommend them as a great start if you are a beginner. It also helped that I was able to use my new found knowledge on a daily basis within projects and instantly talk about it with other people, which for me is the best way to learn. Having completed these courses, my next online learning tool I will use is egghead. They provide concise videos on specific subjects which I hope will help refine my skills even further.
JR: My holiday book was Thinking, Fast and Slow by Daniel Kahneman. The Nobel Prize winner boils down a lifetime of research to explain how a two-state mind of fast, intuitive thinking, and slow, rational thinking affects our decision making. In particular, he explains that we lean heavily on the intuitive half, using heuristics that make choices quick and effortless but also cause biases that impair our judgement. The books is chock-full of simple experiments that instantly change your thinking, while real-world scenarios like hiring and statistics show just how easily we make poor choices. Like Donald Norman’s The Design of Everyday Things, this a book that should sit on every designer’s shelf; once read, you’ll constantly finds yourself spotting bias and taking a little longer with important decisions.
JW: I’ve loved some of the forward looking articles about components existing beyond set screen spaces. My favourite of those, both in terms of enthusiastic writing and just a great reading experience, is Frank Chimero’s The Web’s Grain, a companion to his earlier piece What Screens Want.
I’ve also enjoyed some good writing about accessibility and usability. Perhaps my favourite example of this was a talk by Alice Bartlett about select boxes and the many problems therein. It’s been given at several conferences over the last year or two, but I first saw it on a video from Front-end London. There’s a lot to take away from her talk. I especially like the idea of critically considering native browser UI elements.
What do you think will be a game changer in 2016?
CB: Online learning is going to be a big part of my development for 2016, both as part of my career and part of my personal development. I’d tried a few of the online learning site last year Treehouse, Skillshare, Code School and Egghead, to name and few, however over the Christmas period I’ve signed up to Lynda.com and Yousician. Both of these I’ve been incredibly impressed with so far. Lynda has a huge video archive of tutorials and documentaries. The variety of creative and technical topics is unrivaled. It has courses on 3D, audio and music, Business, CAD, design, development, marketing, photography, and video. The tutorials and documentaries are well put together. The website and apps are super easy to use with author profiles and transcripts of the audio. Premium comes with an offline mode and supplies all source files.
I signed up to Yousician as I’m learning the guitar. The app gives you instant feedback as you play and teaches you step by step. The practical lessons are accompanied with introduction videos and feature in-depth techniques. The app also features perform mode, practice mode including customisable tempo, and a built-in metronome and tuner.
OC: Adding classes to everything, literally every element you can. It was brought to my attention late 2015 and was something I was unsure about; at first I found it a bit overkill and tedious as it meant more markup, repeated classes and naming issues. But, if you use a class naming system — I use BEM — it gets easier and actually forces you to improve your naming conventions. The biggest benefits of doing this is fewer nested elements in your Sass files and maximum control over your element styling. This was a big game changer to me for 2015 and will continue to be so in 2016.
JR: Thinking about the world of e-commerce, big name brands and their customers have enjoyed the integration of online and offline commerce, through solutions like click and collect, for a couple of years. I think 2016 will see this approach trickle down to the next tier of retailers where such service offerings provide a valuable differentiator. Meanwhile the I expect the market leaders to continue merging these two worlds, especially as online reaches towards parity with offline. I look at the boom of similar fulfilment innovators like Uber and Deliveroo in 2015 which demonstrates the wider consumer demand. Ultimately, personalisation is the big driver; delivering a product or service that suits the consumers needs, tastes, and schedule.
JW: When iOS9 launched, the built-in support from content blockers set off the biggest backlash against web page weight to date. The weighty JS and CSS added to pages by many ad networks was deservedly an especially prime target. I think this trend is going to continue into 2016, and page weight will hopefully be one of the most important metrics tested.
This might not happen in 2016, but I believe we’re close to the time when tools and browsers will evolve to a state which will enable designers to confidently create solid and usable HTML and CSS without a deep knowledge of code. Along with capable hosted options like Squarespace, this low-hanging fruit for web developers will quickly dry up. Whether or not this happens in 2016, it’s inevitable sooner or later. The cost of carefully crafting and fine-tuning a static design will soon be only relevant for a relatively small selection of especially demanding projects.
The good news is that there’s an increasing amount of support for front-end developers wanting to take on more ambitious projects. Front-end-heavy web apps have seen a substantial rise in popularity over the last few years, and this only increases the general appetite for them.