The end

I’ve finished the course (ages ago) and I’ve pulled together the stuff for assessment and sent it off.  Have I learnt anything? Looking back at my reasons for doing the course:

• I have absolutely no formal design training, so would like to do this course to help with this
• I’ld quite like to do a structured course, and explore the subject a bit
• I’m particularly interested in colour, design for print, and the project management process of developing visual ideas with people
• I’m also interested in looking at the idea of design that ‘doesn’t look designed

I’ve discovered typography – before I started the course I thought you only needed three fonts, any more was frippery.  That’s certainly changed, but is this progression? I can now use Adobe Indesign and Illustrator, and I’m now selling artwork for publicity.  I can work much faster and more professionally, but does my stuff look any better? I am hooked into the learning process though, and moving onto kitchen table printmaking – looking forward to getting my hands dirty and chasing physical layers as well as electronic ones.

Assignment 5: feedback and review

Feedback on assignment 5 – the tutor report was really useful – thanks Christian – and following his suggestions I’ve revisited a few things, primarily logos.  So here goes… first, the Chance Housing Association logo,  picking up on this comment in the report:

The sloping text gives the piece a good visual dynamic but maybe suggests all their houses are at a tilt. The descending g of housing connects to the white space around the logo, finding an equivalent link with the word Chance could have pulled the whole thing together (or perhaps not connecting the g to the bottom would’ve given you a different dynamic).

De-sloping takes away a bit of the energy, but took ‘Housing Association’ out of the bottom block to see what happened.  Just used one font and tried to tie it all together…  and after a lot of re-arranging, added a baseline, hooked that g back onto it, and stacked the whole lot up on top.  Looks flat without the slope and slightly deflated, but maybe a bit more twiddling with the weight of the baseline might do it??

French Hen logo revisited: this was about taking out the block shape and using the text to replace the shape the hen stands on – this was the comment:

Logos are deceptively tricky things to pull off, and my only reservation was the object the Hen was stood on – it’s the largest visual element in the logo and the hardest to read – perhaps it would be worth thinking about whether you can get the typography to do the job of the mound…

The shape originally came about by accident – pressing the wrong button – but I quite liked it, so kept it and built the whole thing around it > in my head, looked a bit like an artist’s palette evoking Paris cafe scene at end of 19th century… Consequently better to ditch rather than twiddle – these are some ideas, and there’s some promise in here I think…

Gerald Anthony Furniture Store logo revisited: this was the logo for the assignment, for which I’ld had a complete ideas bypass in the first place, having had to give up on it while I did the rest of the assignment, to come back to it at the end.  Reflected in this comment:

The only element that I felt needed a bit of a boost was the logo itself – I thought it worked perfectly well in combination with all the other visual elements on the page, but once away from that it started to feel a little flat. Basically I think it could have done with a different typeface, just to pull it out.

I played around with a heavier typeface to try and pull out ‘furniture store’ more, and tried a few things with the pale green background – the latter didn’t work at all.  I also tried the other suggestion of adding a bit of furniture, and the following tryouts are the results.  I’m still not very happy with any of it!  But I did find this toy to help match up fonts: typeconnection A Typographic Dating Game

Enough of logos, but staying with Gerald Anthony Furniture Store, I picked up on a couple of comments on the Annual Review:

The only element I was less certain of was the block section headers, which felt a little heavy in comparison to the rest of the work – perhaps the corners needed to be rounded or the combination of colours lighter? Not sure about the first letter of each paragraph being pulled out either, perhaps a little over decorative given your aim to keep it simple?

I simplified the paragraph layout, broke up the text more, and made the font slightly smaller.  I also softened the edges of the block section headers and it looked better >  GAFS report v2 tryout1  On another couple of pages, I changed the block section headers to make the background lighter and the text brighter.  I also  added some green block-quotes into the article and re-balanced the two pages a bit > GAFS report v2 tryout2 – and this worked, it looked a lot brighter and lighter.  Finally, I swapped out the logos on the cover with one of the bolder versions, which looked better, but the basic problem here I think, is the fact they were added on at the end, and not designed into the pages with more emphasis > GAFS report v2 tryout3

Finally, the Singing Workshop poster:

However the rest of the poster (images in the background) felt a bit unnecessary visually, almost as if you were filling the space. Overall it worked but perhaps lacked the punch needed to compete on a busy noticeboard…

So much for my collage… but, when I was doing this, I wasn’t thinking about competing space on a noticeboard, I was thinking about it stuck up in a shop window, and that does make a difference.  So, I redid the background in black and white, zapped up the header and removed all the illustration layers apart from one.  The last remaining illustration would need a quality upgrade, if I was to go with this.  Singing lessons poster revisited is the new poster, and this is just the background image:

Assignment 5: notebook pages

Assignment 5: website mockups

Mockups for website home page, here goes… firstly structure > this is the basic container for web page content, based on the simple grid:

Adding boxes into the grid areas, to hold the content:

Thinking about how the boxes will behave in the containers when the web page is resized in the browser (think wide screens, tablets, phones here).  My idea is to make the top menu and footer containers fill the width of the screen, with the content centred on the screen.  Ideally, boxes in the main content areas (article, footer, sidebar) will re-arrange themselves in the horizontal space from left to right, and top to bottom.  Non-essential boxes can disappear if there’s not enough space.

For the mockups, I’ve used 3 sizes:
GAFS web mockup – medium
GAFS web mockup – widescreen
GAFS web mockup – phone

For the home page, the main article space under the header (in the blue box) would have an intro section at the top, and updateable news items underneath.  The right hand sidebar green box would contain key links to the main areas of interest for users and volunteers.  Essential details are in the footer boxes. Medium sized screens would display like this:

Wider screens  would have more detail in the header, and the articles container would be wider, allowing for a bit of re-arrangement of boxes:

Smartphones would see a single column display without the furniture header illustration to use the space better:

Assignment 5: logo and business stationery

This is the final logo, with an alternative black and white version.  I’ve tried to get it so that it’s ‘furniture store’ that hits you in the eye, and the ‘gerald anthony’ is a supporting act.  The black and white version doesn’t quite work like that, but it looks more interesting using the white text.  Both look ok really small, and really large too.

Business cards: GAFS business cards (pdf).  I’ve done these double sided, so as the brief is for generic cards, there’s room on the back for someone to scribble their name and phone number.  They’re meant to be printed on good quality recycled matte card, in preference to Vistaprint freebies.

Headed paper: GAFS headed paper (pdf) and GAFS headed paper b+w alternative (pdf) I initially did these with the Century Gothic font – but for some reason it looked dreadful on the black and white version, so I swapped to Myriad Pro.  I’m assuming the headed paper is most likely to be used as a template file in the printer, so it would have to be ok with different types of paper, which that font should be.  Here’s a couple of more contrasty versions of the coloured header: GAFS headed v2 (pdf) and GAFS headed v3 (pdf).

Assignment 5: the 8-page Annual Review

This is an 8 page ‘annual review’, which I’m anticipating will be printed as an A4 booklet, medium quality. I’ve designed it as a spread to be printed double-sided onto A3, folded and stapled.  The covers need to line up therefore. It also needs to work as a downloadable pdf document.   As I’m trying to decide if my design process is really working,  this is a step-by-step pdf history of how I put the report together:
GAFS report v1
GAFS report v2
GAFS report v3
GAFS report v4
GAFS report v5
GAFS report v6
GAFS report v7

At this stage I made some more changes and reviewed it… Review point notes
And this is the final version: GAFS report v8 – final version

The statistics: the infographic on page 5 is part of the brief to make the financials look a bit more interesting. There aren’t enough items to play with really (4 for the income, 3 for the spends) so my idea was to use a basic recognisable graph convention > block graph, bars, pies – and illustrate it with a piece of furniture in relative sizes – these were the tryouts:

Basically, the block graph doesn’t make for very interesting shapes, and the bar graph wastes a lot of space, and looks tedious… decided to turn the bars round to fit the page space better, see below. The furniture shapes were added for emphasis later, on the page layout > see page 5 in the final version, above.

A note on fonts: I’ve used Century Gothic as the lead display font – also chosen for the (final) logo as it looks nice and clean and balanced with that particular set of characters. My second display font for the annual review is Chaparral Pro – as a heavy and chunky contrast, it’s mainly used for the ad on the back. The body font for print material is Myriad Pro as it works best at small sizes (Century Gothic doesn’t) – so this also works for the business cards and headed paper. I’ve used (safe choice) Verdana as the the body font for the web page. I’ve also used Minion Pro for the annual review footer (not sure why) and Stencil Std Bold for chunky-and-legible numbers on the stats graphic. Century Gothic numbers are a bit pathetic (in this context anyway!)

Assignment 5: Visuals – logo, palette, illustration

The brief doesn’t give away a lot of clues, so I’m playing safe and following my research – aiming not to be gimmicky and evoke ‘crisp, clean, friendly and efficient’.

Logo – trying to avoid using images of vans and sofas.  Can’t think of any better images to use, so just play with the title text, which does have a nice ring to it.  Play with the acronym and the full name, and decide against using the acronym because it’s meaningless, and a bit counter to the idea of being ‘friendly’.  I like the font Century Gothic for this, as it’s open, clean and bold, and works well with this particular combination of characters (especially the ‘G’ and ‘A’ together).  However, can’t find anything I really like so decide to park it and come back to it later.

Typical photos – I’ve collected a set of photos from the websites/publications of similar organisations, aiming to be a representative sample of the photos that are likely to be used to describe this sort of organisation. Some are professional, some are not.  Colours and styles vary, and the furniture doesn’t look very appetising – but I like the idea of people being able to use their own photos, possibly taken on their phones – as a visual diary of their day to day activities, particularly for the website and flyers.  So, I’m looking for a way of making them look interesting and connected.

Colour palette – I wanted something fresh and clean to make the website attractive  to the  customers.  Preferring IKEA style and green/blue.  Thought about an alternative warm and welcoming red and orange theme, but having looked through my set of  ‘typical photos’ and looking at all the musty pink and brown sofas, I’ve decided to stick to the blue/green colours.  Later, I noticed my palette staring back at me from the kitchen windowsill…

To illustrate, I thought about using furniture symbols/icons, and looking around found a nice characterful set of furniture brushes I could use.  I also made my own set, but they didn’t look nearly as good.

Assignment 5: Grids and boxes

The focus of this chapter/assignment is layout.  The task is about designing a logo, letterhead, business card, annual review and a website front page mockup – presumably to a house style.  This means a generic design layout idea that can work across a range of mediums and sizes, and given it’s a small charity, it hasn’t got to be expensive or complicated.  It’s got to be adaptable and fit into all manner of rectangular shapes, basically.  Also thinking about the logo which needs to be the most adaptable of the lot.   Keywords here: flexibile, stretchy, responsive, proportionality, balance.  Looking for a method…

To start with, played around with some basic box shapes:

Thinking about the tools: websites often start with Photoshop.  Indesign is basically about boxes on grids – the boxes are stretchy, the grids are fixed.  Pixels and vectors – fixed and stretchy. Looking at web grids and the whole debate about working to fixed widths, or flexible relative widths, or some combination. Basically it’s about building boxes within boxes and creating the rules for what happens when there isn’t enough horizontal space for all the objects contained within a particular box.  Paper deals in fixed sizes, but designs usually have to work across a range of proportional sizes – ie A4 > A5 portrait > A6 landscape postcard > business card. So it’s pretty much the same.

Thinking about grid systems and proportionality, the ubiquity of the rectangle, and the biology of the eye… did a bit of reading round looking at grids based on the golden section (for proportionality).  I picked out one grid design to try out for the report > A4 spread and A4 single page:

Source: http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-designing-grid-systems-part-2

I tested the grid by adding the basic shapes to see if it works (ie creates balance) and it looked quite promising: A4 grid tryout,  A4 grid tryout 1, A4 grid tryout 2, A4 spread tryout.

I also picked out this more-basic-than-basic web design template to try:

Source: http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-designing-grid-systems-part-5

And finally a couple of ratios for reference: A4 paper > 1:1414, Golden section > 1:1.618

Pretty in pink

This is a diversion – it’s my notes from a look at the Richard Mosse exhibition at the Open Eye in Liverpool.  I went because I find the pictures intriguing, the technology interesting, and I’ve followed the debate a little.  This is what I saw – avoiding most of the accompanying text – and wrote down later.  It’s therefore very subjective, and full of personal cultural reference.

This is the photo that hooked me in … I found it on the net a while ago, looking for something else – my initial thought > pinup photo circa 1980s. All that pink. Me in my smart uniform and flashy watch.

All that contrast and magenta is an effective tool to hook you in. How clearly you can see huts, animals, tracks, the lines of the land – with this technology. Looking at one of the landscape photos across a village, picking out people and compounds and domestic activities. Tiny, tiny people walking along the road, trying to distinguish men, women, children, by their shape and body language.

Big landscapes, volcanoes, mud – an old memory of black mud and lorries churning through > looking for evidence of my memory.  A familiar scene of lads pushing a car, I’m looking for the mud – but the road is dry.

Soldiers – their physical body shape > square and compact, closed faces, uniforms neat, good wellies (always check what people have on their  feet).  What are the teenagers wearing? – football shirts, Obama shirts – we can’t remember the real colours of the American flag without thinking about it. Oranges and yellows look great with this film.

Centred image of a hut and banana tree enclosed in heavy, dense magenta foliage.  Remember the suffocating feel of hot damp rainforest.  These pictures with their careful arrangements are like Victorian terraced drawing rooms with  heavy lace curtains and pot plants centred on the windowsill.

Lads, groups and troops of lads with guns, lads and guns arranged amongst the flowers – Victorian drawing rooms again, dressed up for a family photo next to the best pot plant. Remembering a photo shop with a magical room at the back with three or four stylised sets where you could pay to have your photo taken (somewhere in Morocco). Wedding photos. Formal arrangements – another old memory of people posing for photos > this is my family, these are my best clothes, this is my bike and radio. Photo booths and borrowing the clothes to be photographed in. Trophy photos – these are my kids dressed up and  arranged on the sideboard (remembering scratchy clothes, being too close to my sister, not being allowed to move, itchy…)

The photographer  stands a long way back – very observational, patterns of people.  See this in the videos too. Also, cute sheep and twisted concrete, then the reality check. What is it about ruined buildings – why are they so entrancing?

Moving upstairs (Simon Norfolk)  to find a nice horizon photo of a desert and a big sky with two tiny sharp horseriders on the beach – they’re walk into photos, nice ones to have on the wall to stare into when you’re on the phone. The rest of the room is photos of shrines – their purpose I guess, is focussing on the memory. Wrecked buildings have more power, are more intriguing, more open-ended. And downstairs again, another video clip purposefully circling around the shrapnel, which parallels walking along a beach, picking at old plastic bottles, crates, beercans, bits of turquoise nylon twine, looking for clues and nice arrangements.

And finally on the pink film – altering realities make things more intriguing. As kids, looking at the world through transparent coloured sweet wrappers.

Assignment 5: Furniture recycle projects – annual reports compared

I picked out four of the published annual reports for these projects to have a look at.

The Furniture Station > Furniture Station Annual Report 2010

Cover images: full page of woman sitting on chair looking a bit needy. Inset photos of men fixing and moving furniture, a delivery van, and the same woman sitting on a sofa looking happy. The slogan is ‘Supporting people to turn a house into a home’.  The layout is professional,  style is consistent throughout, solid fresh blue and green colour scheme, simple typography, and black body text on white or tinted boxes. Illustrated with photos of furniture and people at work. Statistics are presented as brightly coloured pie charts. Lots of lists, various techniques to present them a bit differently. Boxed case studies. Fairly functional professional presentation > does the job.

Wesley Community Furniture > Wesley Annual Report 2009

Probably produced using a wordprocessing package, one and 2 column layout with inline photos and boxed accounts summary. Generous margins, the narrative section has big blocks of text and works well, but it gets messy on the last two pages where the lists are. This is where you need visual aids to make it a bit more readable – and deal with those default blue hyperlinks. Photos describe the building, activities, the furniture, renovating, sofas in the road, and the van. They make it look busy, friendly and fun to work there. It works, and it would be interesting to ‘professionalise’ it and make it glossier and shinier – and then see if it conveyed the same message.

Question > how much does the funding environment dictate the report style (as distinct from content).

Re>build > Re>build Annual Review 2011

This is similar to the Wesley but a bit more ambitious in the design. Layout is black on white, it uses a lot of boxes and a black footer (white text). Front page titles follow the style of the logo as close as they can – colour, font and stylistic use of ‘>’. Lots of lists and varied bullets. Use of angled photos, describing the organisation in a similar style to the Wesley.  As with the Wesley report, the people page is messy >there’s an issue here with not enough text to give it shape without some visual aids. Similarly the visual representation of the numbers page (that uses loads of clip art) – this could be ‘designed’ – but how little design would you need to improve it without changing the nature of it? Also, I don’t know if it’s designed to be printed or read on screen – I would want to tone down those black footers if it was intended to print it.

Shepherd’s Bush Housing > SBHG annual report 0910

At the opposite end of the scale, here the furniture store is just an aspect of a much bigger and wider service. This is a shiny and glossy production, it’s totally depersonalised, but technically looks quite nice. It’s designed to print (expensively) on the sort of paper the black will work on, it’s square, it uses a mock hand-drawn style, and the statistics are neat. Lots and lots of jargon. It’s interesting to see how the design resolves the layout difficulties of the people section by grouping and balancing the lists across the page.

Lessons to learn: consistency of style, make style appropriate to the scale of the organisation and it’s environment, no clutter, keep it simple, be careful with the lists.