Category Archives: Personal/Experimentation

Things I have done out of my own time or desires, or to experiment.

2013 Animation Showreel

I set myself the task of creating a showreel for use on my portfolio website, as way to present my past animation work (as detailed in this post). As mentioned in the linked post, the motivation to create a showreel stemmed from the design problem of presenting my animation work, as the clips were typically shorter ones that did not work as intended when taken out of context; they were frequently intended for use in larger projects, and as such it could be argued they might appear disjointed if presented in the same way as my other illustrations and 2D/3D work.

Hence, I decided the requirements for my showreel would be as follows;

  • Present the clips in a fluid manner
  • Reflect the pace of the clips in the overall composition
  • Be a minimum of 30 seconds, but no more than a minute, for brevity
  • Include my name, and contact details

I began by importing all the clips I wanted to use into Premiere, and creating a title slide stating my name, and the intentions of the video. I added clips in an approximate formation along the timeline whilst trimming any irrelevant sections that might’ve been too long for the context, or sometimes due to a lack of action in that range of frames, since the video was meant to be concise, doing this matched the brief.

Once I had an approximate layout for the clips I imported an audio track (Rats are Dancing – Mindwatcher, courtesy of the Creative Commons licence) into Premiere and re-aligned clips in order to synchronise with the music. I keyframed some opacity fades in and out of clips, to black, in order to give the video a fluid feel. Finally I added an ending slide with contact details.

The final showreel can be viewed here

Sources:

Mindwatcher. 2007. Rats are Dancing. Available at: http://www.jamendo.com/en/track/100244/rats-are-dancing [Accessed: 13 Mar 2014].

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.

Image

Image

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.

homepage

The finished showreel can be viewed here;

Sources:

No Margin For Errors. 2014. prettyPhoto jQuery plugin. [online] Available at: http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/ [Accessed: 25 Mar 2014].

Website re-design – Converting to one page

Armed with my template and good intentions I set to work on converting my previous portfolio website to a more dynamic and interactive one-page site. I started by copying the HTML from the other pages into the index page, adjusting the code where needed to ensure everything was correctly placed and sized. Obviously this meant unifying some of the styles in the CSS in order to make sure the content was all properly matched, as well as adding anchor links to each section so that they could be linked to, and the browser would know it was a location in the same file – not a different file.

Anchor Tags

I expanded the content wrapper slightly also, as it matched more suitably with the fluid, responsive style of one-page sites more than the traditional header and wrapper combination I had used before, where it was indeed better suited to have a thinner wrapper. I ensured that text remained in reasonably short lines however, for user comfort when reading – as scanning across text on a wide monitor is uncomfortable for the eyes.

IMG_0525

I changed the background to a heavily manipulated, yet fit for purpose photo that I had taken instead of the one I used in the mock, since I felt the render I made did not reflect my digital design style very well – which was mostly the purpose of this portfolio. It reflected my traditional style more and thus I felt it was not well suited to this particular site. I did still blur the photo for composition reasons though – bringing the foreground to the front and disconnecting it from the background giving a floating effect, nicely combined with the smooth scrolling and opacity effects.

bg

Website re-design – Planning stage

So for whats probably about the third time now, I’m yet again in the process of redesigning my portfolio website. Now, part of this is due to an upcoming assessment date for portfolio’s, but the real reason is as a result of feedback I received from peers and tutors on my last design; the general consensus being that while the design in itself was good, it lacked continuity as soon as you navigated away from the main paige, since the style changed to a more contemporary header/wrapper layout, rather than the previous design which utilised the entire viewport with a large, touch-friendly navigation bar at the top.

Website Sketch

I decided the best way to tackle this would be to convert the site to a one-page format, with scrolling content. This meant that, in the true essence of what a portfolio is intended to be, the information is easily accessible by the user, and minimal interaction is required to view the content. Besides, with only two more pages on top of the index it doesn’t make logistical sense to have links navigating away from the index when the same information can be accessed with a quick scroll. It could be argued also that any potential employers looking at my portfolio would much prefer to be able to have a quick flick down the site and see the work I’ve chosen to showcase than to click links, back and forth, and look for the content. I recognised my own shortcomings, condoled my designer’s pride, and devised a plan for improvement.

Mock website design

The only real change planned here was the lack of a secondary navigation header as was the case in my previous design, as well as using a texture or photo for the background. The one used here was a render I made in CINEMA 4D using arrays and cloners – which I blurred in Photoshop to give the effect of the content being at the foreground, as well as for legibility of the content itself – a common procedure in digital design and on many artistic websites.

Other changes I plan to include will be the conversion of all hyperlinks to other files on the server (other pages) to anchor links, within the same page. However doing this will mean I need to use jQuery to produce smooth scrolling once the user clicks the link, down to the where the relevant anchor is placed. Not doing this not only could confuse the user when the viewport changes without changing page, but enabling smooth scrolling lets the user see where they are in the page, giving them a sense of direction and thus, informing them of content they may have scrolled past and as such, may want to look back upon afterwards. I plan to include arrows of a similar function that will return the user to the top of the page too, for general usability.

Other issues to consider would be usage prompts in general for users who may be alien to the idea of a one page website, as they are a relatively new concept with the exception of Facebook, Twitter, etc, as well as other features my old site was missing such as social media icons, any reference whatsoever to animations that I have worked on, as well as contact information. I plan to produce a short showreel, 30 seconds to a minute, to showcase animations I have worked on as they have often been smaller pieces intended to be part of a bigger project that I have collaborated on – so hence would not be as prominent on their own. In addition to this, users may not be inclined to watch each animation separately in the same way one would view each static image separately, as they take longer to view. A showreel might solve this problem by running through them in a brief, succinct manner.

Website Re-design: Stage 3

I DID miss out documentation of stage 2 website re-design in the insanity of the Christmas period – however here I am armed with plenty to say about stage 3 of the site and why i’ve done this. Again.

I posted a while back with the first true incarnation of what I expected the site to look like once it had been finished, and, for the most part this concept was true to itself. In particular, the page template I had set aside for the “work” and “about” pages has not changed much since its conception. It’s manifested today much as it was when I was first designing it – with a contemporary layout and design scheme and a tried-and-tested style of navigation that should be familiar to everyone who uses it – navigation links and a header at the top, a wrapper allowing for changes in screen size and content scrolling down the center.

The splash, or homepage however I changed significantly soon after “finalising” the original concept. In trying to make the page super-responsive I experimented with re-positioning the elements and decided the page was much more uniform and intuitive if I put the links and logo at the top, in a uniform composition together. While it was still different to the rest of the site – which some critique I have received from peers indicates as being an issue due to inconsistency – it offered navigation in the same area of the viewport which users would find it elsewhere on the site, as well as unifying the complete set of links on the first page in a single location together. Furthermore, it leaves the rest of the viewport to be completely malleable – usable for other features or displays of featured content.

 

newsplashThe second big change, and only other big change really was the rapid change of style across the pages. I went from a contemporary, colourful polka-dot with black accents for all the interactive elements, with transparency, to a completely dark style with a wooden background and use of drop shadows. However, evaluating both of these design choices, I decided to move on further still. The polka-dot theme did not wholly represent my style of design, being rather erratic, nor was it in tune with the rest of the design industry (which was something I wanted to try and incorporate in the personality of the site). The wood style was generally considered by others, and by myself, to look good as a whole, after some careful alterations to the use of opacity and shadow in some places that caused issues with visibility. However, it did not work well for a digital design portfolio I felt, and actually was more suited that of a traditional artist, craftsperson, or photographer. I settled for a warm-coloured flat design scheme comprised of off-white, off-black colours and an orange accent throughout which I felt seemed to work well and complimented my work much more effectively. I also added a slider to the front page which can be easily updated to feature different slides and featured work.

updated work page

Updated work page

More pictures to follow.

 

 

Designing for design

Branding is an important part of any commercial venture, and it’s no different for an individual digital designer such as myself. I wanted to create a mark that was clean, was not over-complicated and thus could easily be replicated or changed into different forms to suit different environments, such as a social media icon format or in a header image.

I began by making some sketches on paper in order to get a quick idea of the designs that might have been possible – my one main criteria was to use my name or initials as the brand would be a personal, individual one due to its usage on a portfolio or blog such as this one. My main issue was the fact I had yet to develop a real personality in my work for which to base a logo around – which was the case in my “Fresh Tangerines” logo also on this blog, for example.

 Image

After making a few sketches and a few different Photoshop concept designs I submitted my most recent and slightly more polished ideas to a graphic design community on http://reddit.com (/r/GraphicDesign) for some feedback. Heres what they had to say;

“I prefer the first one out of lot. Blurriness is the opposite of you want to identify yourself with although its different. Now that you know it works without color try doing the first one with different schemes. The circle could become boring, maybe come up with a custom shape behind your initials.” (reddit.com, 2013)

Image

“It’s very good. Just go with a clean vector shape for true design. Dressing it up is just a distraction.” (reddit.com, 2013)

Image

“Don’t use the circle, and keep the TH rounded like the first one.

Clean vectors take preference to ANY Photoshopped work when it comes to logos. Photoshop is only good when using it for a specific application (like if you themed your webpage or something).” (reddit.com, 2013)

mjZnZaz - Imgur

“The reason is that the blurry ones simply look like low quality images and the circle design; the “high tech” lettering (?) is at odds with the organic semi circle element. They are both attractive in their own right but do not go well together.” (reddit.com, 2013)

lwlyFQO - Imgur

I took on board the advice given and rendered the logo again into a much cleaner, and simple vector design that still has the opportunity to be made into a more complicated or themed design should it be necessary; also, at 1.19kb and with transparency in the PNG format, the logo is ideal for web usage – you can see the end result at the top of this blog.

Source:

Beginner logo design feedback, /r/GraphicDesign [online], 3rd October 2013. Available from: http://reddit.com/r/graphicdesign [10/12/2013]

5nSskrI - Imgur

Conversations between code

“Why does responsiveness even cause such a stir in web development?” I hear you cry. Responsiveness refers to the ability of a web page to adapt to fit the form in which it is viewed – whether that’s a 40″ television or a 4″ smartphone, portrait tablet or landscape desktop, the term has become increasingly more important recently. In fact, Mashable named 2013 the “year of responsive web design” (Cashmore, P., 2012), and it shows unequivocally if you take a look around your virtual self – websites aligned left, right, and center have gone under the coder’s caret and made to play nicely with the myriad of new screen resolutions on the market today. Tablet sales are expected to continue to rise even more so than they already have (International Data Corporation, 2011), and web designers need to respond promptly or risk losing out on a significantly large, and growing, portion of the media consuming audience.

Responding to responsiveness

Of course, I made responsiveness a priority when designing my site and for the most part everything has turned out ok after a long and painful journey. Initially the main issue was keeping both the left and right elements at the same length, for balance and continuity on the splash page. However, when “solving” this problem to begin with by converting element dimensions to be rendered using percentages and vw/vh units, a new problem was created by elements stretching to fill the viewport – rightfully so as I had instructed them to behave in such a manner after all, however this did not work with the design. It was not an issue for the title on the left hand side, although caused a problem for the boxes on the right as they were designed with an equal aspect ratio in mind. After experimenting with various workarounds and serious considerations regarding my worth as a problem solver overall, I found that the best workaround would be to create a wrapper around the whole area that needs to be kept at a particular aspect ratio, and create padding at the bottom accordingly in order to force the aspect ratio when the viewport is resized. Aspect ratio could not be implemented natively in CSS as far as I am aware due to the lack of variables that could be used for such a thing – the only other methods involved Javascript which I did not feel comfortable using at this stage, plus it was a simple design problem (seemingly) and I wished to keep my code concise;

.aspectwrapper {
        display: block;
        width: 100%;
        position: relative;
}

.aspectwrapper::after {
padding-top: 56.5%; /* percentage of containing block _width_ */
display: block;
content: '';
}

Obviously after solving this I had enough issue to solve, which was the way text behaved inside the boxes. This was, luckily, short lived however. I learned there was a fairly common bug in browsers that meant the text was not resized until the page was refreshed, so I used a Jquery code snippet that essentially rendered the font again when it detected the viewport had been resized. This was preferable to refreshing the whole page obviously as the user would not lose their scroll state or wonder why the page refreshed upon a viewport resize, becoming confused and deranged as a result.

               <script>
                       $(window).resize(function() {
                       $("h4").css({ "font-size": "2vw" });
                       });      
               </script>

 

Sources:

International Data Corporation, 2013. Worldwide Tablet Market Surges Ahead on Strong First Quarter Sales [online], 1st May 2013. Available from: http://www.idc.com/getdoc.jsp?containerId=prUS24093213 [3/12/2013]

Cashmore, P., 2012. Why 2013 is the year of responsive web design [online], 11th December 2012. Available from: http://mashable.com/2012/12/11/responsive-web-design/ [3/12/2013]