20 . 01 . 15

A new look for adaptable

 

Several months ago, we re-evaluated how we’d like to present our portfolio, approach & process online. After months of planning, designing, re-designing, developing, building, re-designing & tweaking, we went live last week. As the whole process was quite extensive, we decided to briefly summarise the design process.

 

 

aprocess1

 

 

 

Olly, Creative Director;

 

Our old site didn’t show the processes we go through in order to produce the end product. Showing process is really important to us in order to give an insight into the amount of research & development that goes into every project, no matter how big or small. Introducing video content to the homepage allows us to immediately visualise the studio & briefly show how we work as a team. Our re-designed case studies are far more visual, taking advantage of available space to present our concepts, thoughts & deliverables full screen.

 

You’ll see by looking at some of the older concepts in the post that we explored a variety of visual approaches. We started off with a whitespace-heavy route, introducing a lot of black & monochrome imagery to the pages, before realising we were actually designing for ourselves rather than prospective clients. This is where we realised that ‘design that works’ isn’t always the most aesthetically pleasing option, we needed to get important information across in a clear & concise way.

 

Putting ourselves in the shoes of prospective clients, we looked at how we needed to present ourselves. We stripped back heavily, allowing all imagery & video content to do the talking. Using only black & white with blue for call to actions, we tailored the case studies to the clients colour palettes, allowing our work to be individually presented.

 

 

 

 

aprocess2

 

 

aprocess5

 

 

 

 

Luke, Developer; 

 

When we began the initial phases of development we wanted to not only re-present ourselves aesthetically, but also get creative with development. To begin, we felt it was important to set a benchmark for as close to cross browser support as possible, which concluded with IE9 & roughly 4-5 versions back in every other browser. Process is important to us and our web stack was no exception.

 

Therefore we spent time looking at Grunt & Gulp for automating our workflow and while Gulp was faster and less intense it still hadn’t gained as much traction as Grunt for task automation, so our decision was made.

 

 

 

 

aprocess3

 

 

 

 

Our previous site was built on WordPress but didn’t take advantage of it’s many features. We knew there was more power to draw, so that’s exactly what we did. This resulted in a highly increased overall site performance, which was a objective from the start. Along side this we also made as many optimisations where possible to overall enhance user experience, with a focus on page load time.

 

The approach to markup was that it needed to be maintainable, now and in the future. To gain a better understanding we researched into scalable and modular architecture for the web and found people like Harry Roberts and Jonathan Snook who had both written and spoken about this greatly. While this was a learning curve for us it benefitted us in the long run, building re-usable / inter-changeble components made our lives much easier, with the added benefit of being applicable to future projects.

 

 

 

 

 

aprocess4

 

 

 

 

 

b_adpt2

 

 

 

We now feel that our website best represents our approach & principles, allowing an insight into exactly how we work & what we can deliver. Oh, we also won the Site of the Day award over on awwwards!

 

 

 

awwwards

 

Post author:Olly Sorsby

Olly Sorsby

Creative Director