We’re continuing to produce industry led films for Heriot-Watt University which will be featuring an interesting cast list, and we’re just about to kick-off filming on another project for Alzheimer Scotland about the benefits of Self Directed Support, following on from our recent work on the incredible Dementia Champions. We’re also looking forward to starting pre-production planning on a few more jobs, but they are hush hush at the moment! We Love Video!

A contingent of Heehaw developers headed over to Glasgow on Saturday for this year’s DrupalCamp Scotland. This year’s event included the inaugural Scottish Drupal Awards, and I was excited to collect the “Scottish Drupal Design of the Year” award on Heehaw’s behalf, for the Carnival Films website.

The conference had something for everyone, with a wide range of topics through the course of the day. These included the keynote, “Project Management Revolution: Why the Fortune Teller Must Die”, a look at the architecture for plugins in the next version of Drupal (Drupal 8), and indeed my own presentation, “Site building with the Features module”.

We can barely wait for the next one, but that’s a while off yet! Thankfully, the regular Drupal Drinks meet-ups are there to keep us all going… the next Edinburgh one is hosted as usual at our office, on 1 May.

TL;DR; The number and size of every file on your website (its page weight) impacts the total time it takes to display a page. Reducing the number of files and the size of them will help make your site a nicer place to visit – and possibly help prevent users leaving immediately.

Page weight

Page weight (the size of all the files on a single page) matters a great deal – especially in the age of mobile browsing. It matters to your users and it matters to Google when it’s thinking about ranking your site.  If you care about how quickly your site loads, you care about your users and your business.

When was the last time you complained about a website loading too quickly?

A brief history of (download) time

In the days of old (in the late 90s) when the web was called Ye Worlde Wide Webbe there was a rule of thumb about website creation which said that “A user will not wait more than 10 seconds for your site to load”; this was in the days of dial-up when you were lucky if you had a 56K modem (max download rate of maybe 5-6Kb per second); meaning that your entire page had to be under 50Kb including all images.

Nowadays you would be lucky to see a single image below this size and the number of seconds in the rule has diminished. 2-4 seconds seems to be about as much as the modern net user can tolerate before they start to say “Is the internet down?” So speed remains vital.

Why download speed matters

Not all users are created equal, some have super-fast fibre optic connections, some are in locations that for one reason or another cannot get broadband (e.g. a remote farm or an island); others are mobile users.

Mobile users are the new frontier, they are the equivalent of the modem users of old; their net speed varies greatly depending on their current location, the network they use and even how fast they are moving. As you probably know from your own experience – surfing the web on a mobile can be slow. (Is your site optimised for mobile?)

So, pushing a large number of files on the user before they’ve gotten through the door is going to detriment their experience; and possibly cause them to go away. A user rarely notices if a site loads quickly, but they will notice if it loads slowly.

Added to all of this is that search engines such as Google pay attention to site load speed and use it in their rankings.

What can you do to make your site quicker?

Two significant factors in page load time are: number of files requested on each page and the size of those files. When we build sites, optimisation is always on our minds, but we then hand them over to our clients so they can add content via the content management system. Therefore it’s important to understand how you can impact the speed of your site by the design decisions you take and the way you treat the images you upload.

1. Reduce the number of files requested at once

Placing all your images in a slideshow/carousel on the home page may look nice, but it isn’t helping the page load quickly. Keep the number of slides to a minimum, most users won’t see past the first couple anyway. Remember – all images used on a page are downloaded even if they aren’t displayed.

Alternatively, consider moving these images into a gallery page with a call to action (a prominent link), this will allow a user that is interested in your images to see them with a single click and you’ve cut down the number of files you’re forcing the user to download. A side effect of having a separate gallery page is that you can, if you wish, gather statistics on how popular your imagery is, a harder thing to do when it’s all on a page that every user gets given anyway.

2. Reduce the file size of your images

Reducing the file size of all images you place on your site will reduce the total time taken to load the page.

One way in which you can reduce the size is by using the correct file format for the type of image, a general rule is to use JPG for photos and detailed illustrations and PNG for simple graphics like logos or icons.

The JPG format is best used for photos, and implements something called lossy compression, which shrinks the amount of information used to store your image by discarding less necessary portions of it and implementing a way of filling in the gaps later.

If you use a program like Photoshop, when you choose to “Save for web”, you will be presented with a dialogue that gives you a choice of “quality”. The natural assumption for most people is “I want the highest quality you can give me”, the problem with this is that the higher the “quality” of the image, the larger the resulting file will be. In most cases, photographs will look perfectly fine in the range of 60-80% quality.

PNG uses lossless compression, when dealing with images with more than 256 colours (24 bit colour or PNG-24), you get a high quality image (as high as the original), but a large file size. 8 bit colour (PNG-8) PNG however is very good for artwork like icons and logos since they tend to have a restricted colour palette and is, more often than not, better than the older GIF format.

A useful website for helping you optimize your files is http://smushit.com, this can reduce the size of images by stripping out unnecessary meta information written to the file by your graphics software.

Another way is to make images physically smaller by resizing them in your graphics editor NOT by resizing in the editor provided by your CMS (usually with resize handles that appear around the image when editing it in place). If you do this, the width and height attributes of the image tag used to refer to the image are changed, not the file itself. This can also have the effect of making the image look blurred or blocky.

Some stats for your consumption:

In 2012, 93 per cent of households with Internet access used a fixed broadband connection, of which 30 per cent used a cable or fibre optic connection.
http://www.ons.gov.uk/ons/rel/rdit2/internet-access—households-and-individuals/2012/stb-internet-access–households-and-individuals–2012.html

Access to the Internet using a mobile phone more than doubled between 2010 and 2012, from 24% to 51%.

In 2012, 32% of adults accessed the Internet using a mobile phone every day.
http://www.ons.gov.uk/ons/rel/rdit2/internet-access—households-and-individuals/2012-part-2/stb-ia-2012part2.html

Before I begin to answer that, it’s vitally important to remember that the web is primarily a content delivery network. The majority of traffic on the web comes from people looking for information; whether it’s for educational purposes, reading the latest news articles or connecting socially with others. Knowing this, it’s important that we design our products around our users.

“As far as the customer is concerned, the interface is the product.” – Jef Raskin, Interface expert at Apple Inc (circa 1970).

Interface design is the art of making the interaction between the human and the computer seamless and as effortless as possible. Everything (at some level) on your computer is an interface, created and designed to allow you access to the data you want.

The 6 main principles of user interface design

According to Larry Constantine and Lucy Lockwood, taken from the wiki article:

• The structure principle: Design should organize the user interface purposefully, in meaningful and useful ways based on clear, consistent models that are apparent and recognizable to users, putting related things together and separating unrelated things, differentiating dissimilar things and making similar things resemble one another. The structure principle is concerned with overall user interface architecture.

• The simplicity principle: The design should make simple, common tasks easy, communicating clearly and simply in the user’s own language, and providing good shortcuts that are meaningfully related to longer procedures.

• The visibility principle: The design should make all needed options and materials for a given task visible without distracting the user with extraneous or redundant information. Good designs don’t overwhelm users with alternatives or confuse with unneeded information.

• The feedback principle: The design should keep users informed of actions or interpretations, changes of state or condition, and errors or exceptions that are relevant and of interest to the user through clear, concise, and unambiguous language familiar to users.

• The tolerance principle: The design should be flexible and tolerant, reducing the cost of mistakes and misuse by allowing undoing and redoing, while also preventing errors wherever possible by tolerating varied inputs and sequences and by interpreting all reasonable actions.

• The reuse principle: The design should reuse internal and external components and behaviors, maintaining consistency with purpose rather than merely arbitrary consistency, thus reducing the need for users to rethink and remember.

Interfaces on the web

As web designers (developers, interface designers, ninjas or whatever you want to call yourself) we have a responsibility to design intuitive and well thought-out interfaces for our users. There should be no difference between the design process for the web and the process of designing for any other platform. In other words, we should use the same basic principles we would for an application for a desktop, a mobile or a tablet device.

Understanding the user

Great designers do their research; they find out exactly who they are selling to and they design their application to their target audience. Knowing who your users are going to be is the starting point of a great interface design.

Take children as an extreme example. That’s a target audience that if you don’t take into consideration from the start you’re going to fail. Some of the key elements to a site designed for children are bold, bright colours, elements from nature they can relate to and large type. These are things you may not consider when, for example; designing for a broadsheet newspaper.

Put it into practice/measuring good design

After you’ve put some thought into your design and you’re happy with it, test it on a working build. How does it feel? Did you have to think about what your doing when browsing around? Did your colleagues or friends know exactly how to navigate around your site without giving them a hand? These are the types of questions you should be asking yourself.

Great interface design examples

There are many great interface designs out there and you will probably use them every day without noticing (which is a good thing!) but here are a few of my personal favourites. Note: some of these designs are purely conceptual and may not exist in a working format.

Facebook redesign concept – by Fred Nerby

“A conceptional and systematic design approach encouraging user behaviour and a greater control of data within a responsive grid.” – Taken from the blurb on the project’s Behance page, check it out.

The dark background of the interface really helps to bring out the content; the images and the text stand out to the user. This gives the site a much more personal feel to it than the current Facebook interface, allowing the user’s images to come to the forefront.

Kit Digital iPad interface – Martin Oberhäuser

“Interface design and development for an iPad app for the company kit digital. The app will be used on trade shows and events to explain the companies operation methods to interested customers. A lead generation form helps to gather customer informations.” – from the Behance project page, check it out.

This app is used to demonstrate services to customers on a one-to-one basis which means the app has to be quick, fast and easy to use in the short time they have with a potential client. The design of the app is the perfect solution with its use of large, touch-screen friendly buttons and it’s simple left-hand navigation.

BFC Partners mobile site – by Ali Ghandour

“Mobile site for BFC Partners, a large construction company in New York.” – Taken from the project on dribbble, check it out.

When creating a design for mobile, the importance of getting the content to the user quickly is heightened and with this simple navigation and content areas, they have achieved this perfectly.

Want to know more?

I hope I’ve helped shed some light on interface design, although to be honest this is really just the tip of the iceberg. If you’re interested in diving into the deep stuff then feel free to check out these pages for more information:

http://en.wikipedia.org/wiki/User-centered_design – A branch of interface design.
http://en.wikipedia.org/wiki/Principles_of_user_interface_design – The principles.
http://en.wikipedia.org/wiki/Human-computer_interaction – The core.
http://en.wikipedia.org/wiki/Interaction_design – A branch of interface design.
http://en.wikipedia.org/wiki/Interaction_design_pattern – Interactive design patterns.
http://en.wikipedia.org/wiki/The_Humane_Interface – “The humane interface” by Jef Raskin (2000).

Slow Motion (or overcranking as it’s sometimes known) has been a part of cinema since the early 1900’s, but it’s only since the turn of the century that its popularity has skyrocketed from its use in commercials, sports coverage and feature film. Furthermore, the emergence of ‘affordable’ high speed cameras such as the Phantom and RED cameras have made this slow motion effect achievable for most production companies.

This year Sony released their successor to the tremendously popular NEX-FS100EK; the NEX-FS700. Not only is the camera 4K Ready (roughly 4x the resolution of 1080p high definition); it is capable of shooting super slow motion. With a price tag of under £8,000, it’s easy to see why this camera is in such high demand.

Our video productions department have been lucky enough to get our hands on the FS700 on a few occasions since its release – for use on a couple of exciting client projects (more on those soon). The camera shoots 250fps (frames per second) at full 1080p HD; that’s 10 times slower than ‘normal’ speed.

Shooting with high speed cameras isn’t without its problems though. To successfully ‘freeze’ each frame and avoid motion blur when the subject is moving quickly, the operator must increase the shutter speed (effective length of time a camera’s shutter is open) to around 1/10,000 seconds. This means very little time is given for light to hit the sensor, meaning very fast (large aperture) lenses must be used, and indoor scenes often need to be flooded with light to even see anything through the lens. This makes lighting a subject and scene artistically very difficult.

Slow motion, like many elements of filmmaking, has its time and place. It’s about choosing the right tool for the right job. As with 3D filmmaking, it isn’t necessary all of the time. A good director or cinematographer must decide ‘what will help me tell the story’. Slow motion has opened a whole world of possibilities, allowing filmmakers to show us things humans couldn’t possibly have seen before. Aspects of nature are revealed, and the tiny details in animal activity and behaviour, such as the beating of a bee’s wing, become perceptible and measurable. Hypnotic shapes of water and fire that once seemed beautifully random, start to become understandable and logical. Everything starts to make a little more sense when we slow down and pay attention.

Light painting is a technique more often associated with stills photography.  It can bring movement and dynamism to an otherwise still image.  The technique involves long exposures which allow the movement of single points of light to be captured as streaks.  This also means the person doing the ‘painting’ effectively becomes invisible as they are in constant motion and generally not illuminated.

Like other photographic techniques it has found its way into the world of moving images.  There are different ways this can be achieved, using a stills camera to create a stop-motion video for example or with a very slow shutter speed on your video camera and a very steady tripod.  Both of these present their own issues – you would need a lot of stills to create a smooth stop motion and with a slow shutter on your camera every other moving element in your shot would be reduced to a blur.  That’s why this video really caught my attention, it is essentially ‘live action’ light painting.

Having recently made use of physical graphics in a number of projects I couldn’t help but think this would be an interesting and different way to approach them.

The makers of the video aren’t giving away their secrets but I would imagine it involved a LOT of post production working using various layers and masks.  So what’s the point? Sure, you could just create the ‘light painted’ parts in After Effects…but where’s fun in that!

This technique is now well established and widely used due to the many advantages it offers over attempting to achieve similar results with a standard video camera, even for productions with a moderately high-budget. Achieving the effect isn’t particularly straightforward, the still requires a lot of preparation before any animation or treatment can begin. Also, a high quality image with clearly established planes of depth is essential in order to recreate a plausible 3D environment for your composition.

However, once the groundwork has been completed you are left with a composition over which you have a great deal of control. The ability to manipulate your image and create otherwise unachievable animations is the main attraction of using the 2.5D technique. Advantages such as creating virtual camera movements and the ability to control the ‘action’ within your image mean there are far more opportunities to achieve the required result. Furthermore, using a still photograph provides the opportunity to work with images at a much higher resolution, enabling greater control over reframing and better results when colour grading. These opportunities for trial-and-error and experimentation, that are unavailable when on-location, have made 2.5D a valuable and popular technique.

In 2012 our video productions department worked closely with The Real Mary King’s Close to create their new online video and we were delighted to be asked to pitch for the overall 2013 Campaign. We’re super excited to be working with such a famous Edinburgh Visitor attraction and looking forwards to getting the word out – if you haven’t been, check it out!
http://www.realmarykingsclose.com

You’re not my type

Designers often feel a little uncomfortable when asked what they do for a living.

Especially by non-agency folk. It can be hard to explain easily and for those in the digital realm it’s getting even harder to define day by day. Family still find it easiest to tell friends that I work with macs.

One of the most cutting responses I have ever had to this conversation came from a lass I was desperately trying to woo at college with tales of heroic late nights designing the next aesthetic and breaking new creative ground. ‘What, you mean choosing fonts and stuff’ came her reply. It’s obviously far easier for fireman.

Turns out she was actually on the money. Typography and the carefully selected words they shape are the fundamental building blocks of any brand. So why is it often left to whim and design trends? Are there any fundamental rules or guidelines for choosing one typeface over another?

Well yes and no. Whilst certain typefaces communicate a message overtly like comic sans, others influence the subconscious with subtle shape and visual tone. Certain styles of typefaces have different embedded connotations through their prolonged usage with established products and brands.

Going old skool

To understand where all this comes from we need to go way back to the days of hot metal (movable) type and the printing press. Early printing pioneers such as William Caslon, Giambattista Bodoni and John Baskerville developed their own typefaces based on humanist forms. Pushing towards greater readability as much as convenience and efficiency in print.

Nothing much changed until the 1900s – 1950s when designers in Germany, Holland, Britain and Switzerland brought a new sans serif or ‘Gothic’ aesthetic. This movement from various foundries brought us legends like Futura, Frutiger, Akzidenz, Gill, Rockwell and later Helvetica and Univers, all timeless.

Fast forward another 50 years and digital typography heralded a new era, allowing anybody with access to a few software tools the ability to make a typeface and publish it. There was an explosion of new type foundries during the 1990s. Emigré, t26, Fuse, to name but a few. All creating a new movement aimed at deconstructing everything that went before them. Not all of them legible.

What about now? Today, the rapid rise of web font services like Typekit, Fontdeck, Typotheque, Google, FontSquirrel and Fontspring have dragged the web away from the meagre choices forced upon us by technology and software companies. With these choices however comes a responsibility.

Some of the world’s best known and much lauded graphic designers consciously restrict their type choice for any piece of work to just one of three or four favoured typefaces.

Thankfully, we are now seeing the emergence of a few of these timeless and classic fonts properly hinted for web format, but not all yet. As more of the bigger font foundries join the @font-face race, we can start to talk less about technical restrictions and more about good old fashioned type theory. Design methods that have been tried and tested over centuries are getting their chance to shine again on the web.

So where does that leave me? Well, for me, when choosing a font for any project it’s all about designing a typographic theme with the right relationship and contrast for the brand. It’s a tricky balance but you’ll know when you’ve found ‘the one’.

But you’re not finished there, it’s only the start. Why not take a look back at how print designers and typographers solved these issues centuries ago. You might learn something.

Go classic with a modern twist

Classic with a modern twist

Go modern with a classic twist

Modernist with a classic twist

P.S. I managed to find love in the end, but she’s a type bore too. We’re like two Ps in a chase.