Website re-design – Content

I needed to ensure that I had chosen a suitable way to display my content in the one-page layout as opposed to how it might have been on the traditional layout. I stuck with the grid for my still work as I felt it offered a succinct way of communicating the work I did, my style overall, and without the requirement for the user to look through categories of work, as in my own experience I have often found myself simply skipping between categories one after the other in an attempt to gain an overview of someones work or style. I did enlarge the wrapper for the content grid to allow more thumbnails to be seen side by side, as is complimentary of the one-page layout.



In addition to this, i also opted to remain with the jQuery lightbox plugin I was already using, as it worked well and there was no need to change it. The problem I now faced was a way to display my animated work in a visually clear, summarising style, similar to the way in which my still work was displayed. I considered inserting the animated clips amongst my stills in the gallery with a lightbox plugin to view them, and differentiating them with “Play” icons overlayed over the thumbnail. I felt that the medium of a gallery did not work so well for my clips in particular however, and that’s because I am primarily involved in illustration/visual graphics, rather than animation or motion graphics. Hence, the majority of the clips I wanted to display were shorter clips intended for usage in other projects. I felt a showreel would be a better choice in which to display these due to the quick, fast-paced nature, as well as the feel of a summary of clips, rather than displaying each one in its own right. A showreel also matched the rationale behind a large grid of still images, as opposed to categories, as the clips were being showcased in an overview, not presented one by one. I produced a short showreel of my older work and installed a jQuery video lightbox plugin, linking to it at the top of my page alongside the prompt for the user to scroll down.

ImageIncorporating the showreel into the page avoids linking the user away from the site – promoting continuity and consistency when browsing work, as its all by the same person.

I made some technical adjustments to the site in general as well to improve the general experience for the user. I used a jQuery plugin called prettyPhoto (No Margin For Errors, 2014) for the video lightbox, and smoothScroll for the smooth scrolling to anchor links. This was an important consideration for user experience since if the browser was to navigate instantaneously to the anchor tag, the user may not realise the content they’ve missed and scrolled past and/or lose their general sense of direction on the page. Whereas, with smooth scrolling, the user can see all content being scrolled past and it most likely will inform their decision on what to visit next. I added some jQuery for the subtitle at the bottom of the homepage referring to scrolling down and viewing my showreel. This enabled a “falling and fading” effect when the user scrolls down, which, while mostly for aesthetic reasons, also helped create a fluid feel when the user scrolls down from the homepage as the subtitle disappears gradually, rather than scroll up the page (which looks awkward by itself) or disappear abruptly. I had to make some changes however for different types of mice – the common two which are the one-button mouse shipped with Mac OSX systems, which when scrolled is much more gradual, compared to lots of older mice intended for use on windows systems which jump larger areas at a time – meaning the fade effect would be lost. I had to convert font sizes and element dimensions to vw/vh units to show correctly on the majority of screen sizes also.


The finished showreel can be viewed here;


No Margin For Errors. 2014. prettyPhoto jQuery plugin. [online] Available at: [Accessed: 25 Mar 2014].


One thought on “Website re-design – Content

  1. Pingback: 2013 Animation Showreel | Tom Hawkins – Blog

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s