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: 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:

simple layout for web page based on the proportional grid

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

showing content boxes arranged in containers

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.

narrower layout to show re-arrangement of boxes in smaller containers

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:

website mockup

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:

website mockup

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

website mockup

Assignment 5: logo and business stationery

coloured version - green and blue text

black and white text

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.

3 coloured and 3 b+w logos in 3 sizes

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

final front page layout

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:

1st graph layout for income and expenditure

2nd graphic layout for income and expenditure

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.

3rd graphic for income and expenditure

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.

various logo designs

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…

picture collage of typical photos, furniture graphics, and blue-green palette

kitchen windowsill with blue and green labelling on soap and washing up bottles

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.

hand drawn furniture images

drawn furniture icons

blue and green chairs