hero-image-blueprint-sketching
Article
0 comment

A behind-the-scenes look at the illustrations for Blueprint

Net neutrality! Countries spending millions on social media advertising to subvert elections in other countries! The intersection of society, technology, business and government is getting more and more complicated.

Blueprint is an annual industry forecast by Lucy Bernholz, that looks into these sorts of issues, and a whole lot more. Blueprint is published by the Center on Philanthropy and Civil Society at Stanford University, about the ways we use private resources for public benefit. The Huffington Post calls Lucy a “philanthropy game changer” and Fast Company magazine named her blog Philanthropy2173 “Best in Class.”

You can download the 2018 edition of Blueprint here.

This year I was privileged enough to be asked by Lucy to do the illustrations for Blueprint. I thought it’d be helpful to show a step-by-step look at how I did them.

The all-important brief

The first thing I did was to take a brief from Lucy and the team, about the scope and nature of what they were after: who is the audience? What context do they bring to how they read Blueprint? What are the main messages to be communicated? What is the desired visual character and tone? And when does it all have to be done by?

Previous issues had used a mix of stock imagery, digital boxes and arrows and custom illustrations, so the set of each issue’s illustrations didn’t really have a visual coherence. I wanted to fix that.

Estimating for this sort of work is notoriously hard, mostly because I couldn’t know how many specific illustrations would be needed until I had read the draft of Blueprint and we had discussed a rough number and placement. To tackle this, we settled on a rough amount of time I would spend, where I would produce as many illustrations as I could within the directions of the brief and within that time.

Microsoft Word - Illustration styles.docx

I also provided a page of sample illustration styles I’ve done in the past; it’s much easier for clients to point to a visual style they like rather than describe it. The team preferred the sketchnote style.

Initial sketches

I read the draft version of Blueprint, as well as several back issues, to get a feel for where illustrations would benefit the most. Lucy also had some specific illustrations and placements in mind, too, which helped tremendously. I then spent some time just doodling and sketching up lots of different ideas to help enhance the text using Procreate (an amazing work of genius software made in Australia) on my iPad Pro (set to ‘HB pencil’ / Black).

Microsoft Word - Illustration styles.docx

The sketches above use three different kinds of representation:

  • Literal representation – all three images display some concepts as real-world objects, e.g. security cameras, people, and a dustpan and brush. They’ve been abstracted, but nonetheless are depictions of real-world objects
  • Diagrammatic representation – the first image displays literally represented elements grouped as three entities (civil society, government, markets) by circles, separate from one another. The circles belong to Venn diagram visual language, which our brains recognise as meaning separate non-overlapping entities.
  • Metaphorical representation – the second and third images are using metaphors to communicate their meaning. The second image has a fence around the figures, meaning that they are bound by something and can’t escape. The third image equates the digital traces we leave from our digital activity as tiny pieces that are inspected (magnifying glass), collected (dustpan and broom), and stored (bin).

Some of the draft sketches were fine as-is; most needed refining (as far as clarity visual meaning went), and some were just downright off the mark! But some of the off-mark drafts still triggered new ideas in the team for other illustrations to try. I always enjoy this stage, for those moments of serendipitous creativity.

Refining and finessing

Often the biggest challenge I find with freelance work like this is not being able to be physically in the room with the team. Sure, there’s lots of great digital tools we could use, but ultimately the most effective efficient way of sharing my work and gauging steering and feedback was just to email them in batches, and either have a group discussion (through Google Hangout) where I would capture their feedback, or an email chain.

By reducing each ‘HB pencil sketch’ layer to 50% in Procreate, I’m able to sketch over the top in subsequent layers, using it as a guide. I used the ‘Studio Pen’/Black setting at about 30% width, to get close to the sketchnote style they had seen (which was actually done with a real marker and pen).

bencrothers-sketching-iPad-Procreate

In the photo above, you can see the layers palette open, and the ‘pencil’ layer showing ‘underneath’ the black Studio Pen drawing.

Microsoft Word - Illustration styles.docx

At this point, I started to refine an overall visual style and character to apply to all of the illustrations. I parked the choice of colour initially, while exploring other elements to use. I ended up using a loose sketchy style overall, and a white grid in the background to be a uniting visual element.

Several of the sketches incorporated some text as well. I thought about just using my own handwriting, but in the end I opted for a font that was similar to my own handwriting (Draftsman), for consistency and ease of editing.

The final result

The colours in the style guide for the Center on Philanthropy and Civil Society were basically black and red; I wanted the illustrations to have a complementary colour to the red titles and call-outs, so I showed the team a range of options. I also showed them what they would look like using a dummy in-situ sample, like this:

StanfordPACS_BrandIdentity_DIG_V2_6.15.16

In the end, they settled on the gradation of a desaturated lilac to teal that you see here:

Microsoft Word - Illustration styles.docx

So there you have it! I hope it’s useful for you to see my process, and for how these sorts of illustrations come together. Do you do any digital sketching or illustration? What’s your process? I’m keen to find out how other people tackle illustrations like these.

Article
0 comment

Parliament (website) for the people

New Parliament website home pageThe Parliament of Australia has just released the new version of its website, and finally access to Parliamentary business and politicians has really opened up online.

‘Punter-centred’ design

Of course we’ve had online access to information about bills, committees and politicians’ speeches and so on for a long time now, through Hansard, XML feeds, and various pages throughout the old website. It’s just that it’s been so hard to find, for your average punter who doesn’t have an ‘inside view’ on how Parliament works.

But now you don’t have to go trawling through loads of search records and acres of text to find what’s actually important to you. The new website has been designed from an ‘outside-in’ approach, i.e. through the eyes and minds of the general public, rather than just those who are ‘on the inside’: politicians and their staff, media, and public service staff who really know their Senate Estimates from their Tariff Proposals.

Opening access to our taxes at work

A big focus of the new design is also about opening up access to politicians and their activities, which demonstrates the sort of mandated responsibility that Parliament has to the public:

  • You can track what your Member of Parliament (and state Senators) is up to, with access to their speeches, and which committees in which they have representation. You can also set email alerts, so you know their latest activities.
  • Don’t know who your Member is? It’s OK, most people don’t, but now it’s much easier to find out, with a handy location-based search.
  • You can easily see what bills are going through Parliament at any given time, and track updates to bills activity with email alerts.
  • A full list of Members or Senators, with their contact details, is only two clicks away from anywhere in the website. Plus each politicians’ profile page has their website links, twitter links, etc

Bringing an experience of the real building online

Love it or hate it, the Parliament House building is a grand statement in the Canberra landscape, and a visit to see the building, to walk its halls, is an experience I think everyone should have. The new website visually threads the presence of the building throughout the website, not only its appearance but the people who use the spaces inside.

The home page creates a dominating centrepiece for the building’s facade, in effect mimicking the experience you have when you first front up to the real thing. The architect Romaldo Giurgola had a finely honed sense of scale and substance for the building, and used surfaces of various types of stone, glass and metal to work with Canberra’s ever-changing light conditions. This is reflected in a little piece of eye-candy for the website: the background image changes depending on the time of day/night.

Other features use the virtual space to welcome people to the physical space:

An experience more than screen-deep

And why am I bothering to write this? I was fortunate enough to be involved in the research, concept and design of the new website, and I’m proud of the efforts of so many people involved in completing such a gargantuan project. It wasn’t the smoothest overhaul by any stretch, but it’s been fulfilling to have worked on something to do proper justice to Parliament and to its elected officials, as well as the building itself.

 

Article
0 comment

Love Food Hate Waste website design

Love Food Hate Waste website

Love Food Hate Waste website

Food waste is the largest single component of our garbage, and reducing food waste is good for the environment and good for the wallet. These were some of the key facts that the interface design process kept returning to as drivers for the Love Food Hate Waste website. It was also driven by weighty business goals: the program is to help NSW meet its municipal waste reduction target of 66% and commercial and industrial waste reduction target of 63% by 2014.

The website is to contribute to that by highlighting the issue to online visitors, educating them about food waste, the benefits of reducing food waste, and how to do it.

This project included hefty amounts of digital strategy, to conceive the best user experience features to have on a government website within very tight time constraints, NSW GCIO guidelines, accessibility standards, and limited content resources. It also involved the information architecture, user interface design (but not visual design), as well as end-to-end project management, and contractor management with the visual design and development teams.

During the interface design process, I got to trial some new ideas and approaches to prototyping the interfaces. Some of the features — especially the asynchronous recipe search results returns and portion calculator — came alive as clickable demonstrations, rather than being limited to static designs.

Go to: lovefoodhatewaste.nsw.gov.au

Article
0 comment

LivingGreener website

LivingGreener.gov.au home page

LivingGreener.gov.au home page

LivingGreener.gov.au centralises a lot of knowledge available on living more sustainably, especially government information about rebates, grants and loans available. Although there are many websites out there that tackle various aspects of sustainability and what we can do about it, this website’s unique strategic goal is to centralise lots of disparate informatio, encourage further activity, and increase the community’s awareness and uptake of rebates and grants available from the government.

I and other consultants were involved at PTG Global with the user experience design for LivingGreener, including:

  • Personas and want maps design based on user research, website traffic analysis and statistics from the Australian Bureau of Statistics
  • Information architecture, including an overall conceptual model based on leading people at whatever point they were at, on a journey towards being more active to live more sustainably
  • User interface design, with wireframes and prototypes and working with content writers to structure content to integrate action points throughout the website

Go to: livinggreener.gov.au