Taking a little longer than anticipated, we are pleased to say that our portfolio is back, alive and kicking in the online realm! So, why was our website down in the first place? Back last year when we moved into the new studio we had every intention of giving our old website a bit of a nip and a tuck and update it with some current design projects, as to be honest a fair amount of time had flown by since we last showed it any love. Last May we sat down, ate too many biscuits and reviewed the site, discussed every aspect of it and how it related to us and what we do.
The elephant in the room – your own stuff!
It’s fair to say I think that when you are in this industry one of the hardest things is actually designing your own stock, developing expertise in creating tone and voice for so many clients with so much variety and difference in their proposition is no mean feat and we have spent years perfecting this. So we sat down with our own website and brand and arrived at that same old stumbling block “how do we sum up and project what we do on so many different levels”… It’s a tough one and always ends up with lots of gnawed down Noris HB’s, lot’s of meaningless doodles and far too many coffee rings staring back up at us from the table. The simple answer is, that we don’t. Looking at our previous website, compared to the previous iteration, we concluded that it was in fact a little fussy with a few visual elements that were simply not needed. We felt that this would inadvertently risk projecting a particular style of working on to the user and we really did not this to be a factor and felt that the work should be free to speak for itself, without competing with clutter and decoration. After all our visual sensibilities have to and do cater to a variety of different messages, all with different context, tone and voice – we concluded simple is best. We put our old site into hibernation and started to plan our new incarnation.
Portfolio, not website
We started to think about our website and how people would use it, what they would want to see and ultimately what would show us off and what we could offer. From the outset we established that it would not be about the website itself and be all about our offering, to the point where we no longer referred to it as our website but our portfolio. Whilst there is so much that goes into creating the work that we do, the end product in it’s physical form is by it’s nature very visual, the direction that we took with the portfolio we felt really had to convey that. Looking at our old portfolio, whilst obviously we were very proud of the work we had displayed, we felt we could present it better with greater consistency in our style of presentation. Also some of the projects that were showcased on our old site were only ever partial or a portion of a project, we had done so much more but with the inevitable daily commitments to our studio work, we had neglected to keep on top of updating the portfolio, so top of the list was to work in a photography style that would really showcase our work and is simple enough to replicate going forward.
After speaking to some of our clients in what they would look for in a portfolio, looking through the google analytics on our previous portfolio to see what worked and what didn’t, we started wireframing some potential layouts for the website. Now, usually we completely champion the importance of employing a content first approach to creating a website but in our own case we started to think about the layout before we had even taken a single portfolio picture! A perfect example of the age old adage of a dentist with bad teeth! It’s one of the issues that comes with designing your own stuff, trying to fit it in between studio work and pinching time to do it when you can. Well, as we should have known, it simply did not work out. It’s one thing to start creating slick looking considered layouts but they instantly fell apart, when we used our then existing project photography, it proved the sheer importance of actually designing the style of our portfolio photography, to suit and compliment the image orientated layouts we were proposing.
We put the designing of the actual portfolio on the back burner and started right back where we should have, with the content. We audited all our old portfolio work and added in new to decide what would make the cut and what wouldn’t. We started sketching out thumbnails of potential layouts for the work, how we would consider close ups and detail shots in order to express the tactility of some of design work. Once we had a guide and a storyboard going we set up a mini photography set in the studio and got down to business, taking shots of all our work, ready to review what would make the grade and what would not.
Definitely content first!
After a week of shooting we had some 3,000 shots to go through and whittle down to our final batch that would potentially be used to showcase, we spent a lot of time ensuring that our lighting was correct and the portfolio samples were pristine, which meant post processing was minimal. We corrected anything that needed doing so and tweaked colours etc to ensure consistency across the board using Adobe Lightroom. With our final collection of shots we got back to the drawing board and started to look at the structure and layout. Having the content first changed things dramatically, we were now designing in context and not presumption, meaning our layouts were taking the best possible shape in relation to the content we had to work with. This also dictated our development approach too, we are huge proponents of WordPress as a content management system and as such elected to develop using WordPress. With such a strong focus on imagery we ascertained early on that our approach to administering the content into the site would need to be flexible, we didn’t want a formulaic, template structure that was the same for every project, we needed a layer of flexibility so that each project could be displayed appropriately. One of the things we love about WordPress is that from it’s raw form it’s almost infinitely customisable, we have never used the default WordPress admin options and always opted to modify the admin area so that each website we build can be customised as needed and it also means we can drop the default and somewhat archaic WYSIWYG editing approach. Our portfolio was no exception here and we customised WordPress to allow us to be completely flexible in the way we use the CMS going forward, rather than filling predefined content areas within a custom built template, we built everything to be flexible. Essentially this allows us to create content in any way that we like and easily move things about to suit the needs of a particular project, blog post, page etc…
Squeezing pixels
As the portfolio has been designed to display a lot of imagery from the outset, we knew that this would have implications on the size of our site in terms of loading and page weight. We already knew the potential issues of dealing with a lot of imagery on the web and its drawbacks but since we are in the business where image really does matter, why should we let that stop us?
We researched and tried several techniques in which to squeeze every last bit of data out of images whilst also retaining visual integrity. The first and foremost step in this was compressing them in a software editing programme – we chose Adobe Photoshop. Firstly because we know it inside out, and secondly it is really good at packing those images up without losing too much detail and introducing too many jpeg artefacts. Usually with such a labour intensive task, where the outcome needs to be the same we may use an automated action to complete the compression in “bulk” no such luck here unfortunately. Every image, so different in its levels of detail and content, meant for the best results each image had to be treated individually in order to ensure the tuning was the correct balance of quality frugal file sizes. Additionally we developed the CMS to create 4 different image sizes at the point of upload, integrating this with Foundation’s interchange a Lazy Loading couplet with the srcset attribute means that we can serve up different image sizes based on the size of the users viewport, meaning that there is no bandwidth waste on smaller screens that are likely to rely on mobile bandwidths. Also if bandwidth is scarce, a default minimally sized image is served until there is enough bandwidth to serve a more robust image, another plus side to this is if we need to we can easily specify a different focal point in our image crops for smaller view ports should we need to. The compression of imagery for web is an art in itself and it really is knife edge precision ensuring the correct balance and trade off, there is a lot of trial and error involved and there are a few valuable pointers we learned along the way.
- Shoot all images for web at source
It is tempting to shoot the imagery at full resolution as it can be used wider than the web alone but if it the goal is for screen use it’s definitely better to start of with a lower file size from the offset.
- Ensure all images are flattened before saving for web
We found that any images we edited that had adjustment layers in Photoshop, would save for web at a larger file size than if we flattened them before saving.
- Try to keep images as clean as possible.
Images with extra pixel detail, such as grain or noise, will compress at significantly higher file sizes, so where possible, and of course appropriate, always try to keep photograpy at lower ISO’s.
- Remove EXIF data
Hidden EXIF data in an image will create additional megabytes, if it is appropriate to do so, remove it to save a few valuable bytes.
The overall aesthetic of the portfolio is simple in nature and this really allows us to create a sense of impact where our work is concerned, to compliment this approach we set out to find a new typeface that would deliver our content and honour the sense of simplicity – one which would compliment a new iteration of our brand identity too. After several days of researching and testing typographic samples we were unanimous in our choice of Zimmer. Zimmer is a very well crafted typeface that really hit the mark on several levels, it has an air of simplicity that really compliments our layout it is fantastic for display text and most importantly it is also highly legible when used for body copy.
Overall we are really pleased with our new portfolio and chuffed to have finally launched it! As is always the case with any website we still have further plans to tweak things and add content and reconfigure things as the time becomes appropriate and needs change, until then, we hope you enjoy browsing just as much as we have enjoyed designing and developing.