logo-bs logo-dxn logo-odl Group 19

The Design Team Review of 2015

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.

Oliver Chenery: One of my goals for 2015 was to learn the fundamentals of JavaScript and confidently write scripts for the projects I work on. I feel as though I have achieved this goal and now use JavaScript on nearly a day to day basis. Luckily for me, I have huge support, as always, from my team at JH either by having code reviews or taking five minutes with someone for troubleshooting and feedback; each time learning new and better ways to write code. This seemed like a natural progression in my mission to become a more rounded Front End Developer/Designer, building on my previous goal to clean up my code and adopt the BEM ethos.

Shane Osbourne: This year I’ve been able to dramatically improve the quality and reliability of the JavaScript code I’m producing at JH by deep-diving into some functional programming techniques. Embracing immutability and favouring pure functions helps make code easier to reason about and easier to test.

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”.

Jodi Warren: To focus! The web is filled with new and exciting technologies which demand your attention. But picking a core idea and sticking with it is much more rewarding in the long run. 2015 was the year where I worked hard to push myself out of my comfort zone with JavaScript. Familiarising myself with ES6 syntax clarified and made sense of lots of fascinating functional programming techniques. This has made it easier to distance myself from the jQuery-heavy days of yore (aka 2014 and earlier).

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.

Notable outside of web design are a redesign of sheet music, Saul Bass-esque Star Wars posters, and reductionist Muji’s huts (more photos).

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.

SO: The highly opinionated Eric Elliott, whilst sometimes controversial, always seems to deliver the goods when it comes to explaining the pros and cons of latest and greatest Javascript coding styles, tools and paradigms. His article 10 Interview Questions Every JavaScript Developer Should Know was another indicator that the JavaScript community as a whole are leaning towards a more functional style of programming.

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.

SO: RxJS, another open-source offering from Microsoft, is a Javascript library that helps to unravel traditional, callback-laden spaghetti code into observable streams. Already widely used by companies such as Netflix, it’s also making an appearance in the upcoming Angular 2 release and has also directly influenced an Ecmascript proposal which may see the Observable make it into Javascript as a new language feature.

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.

The Design Team Review of 2014

The Design Team Review of 2014

Read More >

Start the conversation

Whether it’s a new site or an existing one, Jamie’s ready to respond to you on
jamie@wearejh.com or +44(0)115 933 8784