Client: Zurich

Agency: Ogilvy One

Year: 2011

Role: Web design, illustration

Software: Photoshop, Illustrator

Usage: Used (Heathrow Airport)

Location: London, UK

Brief

Design a touchscreen for Zurich’s HelpPoint kiosk desks, located at major airports. The feel has to be friendly and open, and give the impression of Zurich being a helpful and giving brand.

Project

The HelpPoint kiosk was made to be a central hub for users to be able to check email, facebook and twitter, search the web, as well as a chance for Zurich to promote their services and case studies.

The screens had to incorporate a rotating video carousel, functional area (search etc), prominent links to social media and email, as well as forms to leave comments and guestbook entries, and to sign up to an email newsletter.

Touchscreen main page

Touchscreen guestbook panel

HelpPoint kiosk at Heathrow Airport

HelpPoint kiosk touchscreen at Heathrow Airport

Built in flash by inhouse developers.

Client: American Express

Agency: Ogilvy One

Year: 2010

Role: Web design, illustration

Software: Photoshop, Illustrator

Usage: Used

Location: London, UK

Websiste

Brief

Design landing page sites for a range of American Express cards, including affiliated cards, using brand guidelines for each card but making sure the landing pages work together.

Project

The challenge here was to create pages that worked together yet maintained the branding of each of the cards, which was done by containing the design inside an area, with the cards underneath. The designs were based on wireframe IAs, but the layout was changed slightly (eg. originally the illustration area was in the centre) to divide the open space of the card area and illustration against the bulk of the copy. There were 9 cards in total and 9 different brand guidelines. The consistency was kept through the use of repeating element areas (eg. illustration area, copy and card placement).

Client reactions:

“WOWOWOWOW!  This looks amazing! Great work, it’s so exciting to see this in HTML coming together! Great work team.”

“Again thanks a million – this site is amazing, I’m very pleased!”

Used and unused typographic illustrations in the RTP brand style

A designer is someone who understands design principles, typography, user journeys and other theoretical aspects of design, has skills in design software (eg. Photoshop, Indesign, Illustrator) and uses these to create visual solutions to problems and needs of their clients/projects. They may work alone, or with art directors or creative directors (this is usually in agency type of settings) but will lead or have a high amount of input into the direction and visual aspects of the project or design.

Designers can range from junior or entry-level, middle-weight to senior level, depending on their skills and experience.

Artworkers usually work in production environments and have less or no input into the design. Usually the design has been made already and just needs to be updated or made across other templates or sizes (eg. different banner advertising sizes). The artworker may be highly skilled in the software programs which is why the role of an artworker is often confused with that of a designer.

Often designers are called to roles which just require following instructions and making designs to exact specifications, where an artworker would suffice. Other times, artworkers may be called in to lead projects or make design decisions which should be given to a designer. Even in agency settings these roles can often overlap!

Client: Barclays

Agency: Redwood

Year: 2010

Role: Flash animation

Software: Photoshop, Flash, Illustrator

Usage: Usage unconfirmed

Location: London, UK

Brief

Based on provided storyboards (provided as Indesign files), make 3 looping animations in Flash to be projected on plasma screens throughout Barclays branches in UK. Text must look as if it is being typed, and at reading speed.

Project

The storyboards were animated in Flash to seamlessly loop. The clients were particular that close attention was paid to the layout, margins and kerning of text in order for the animation to resemble the provided designs as closely as possible. This provided a few problems as Flash does not have the tight text control that Indesign has. All assets and imagery had to be recreated in Flash. Time taken was 2 1/2 days for all 3 animations.

Still frame: Pension calculator with mock mouse cursor

Barclays 'Take one small step' campaign

Animations

These are the actual animations, at smaller scale:

Agency work for Redwood. Design and concept by Redwood.

Client: Inhouse

Agency: Firebelly

Year: 2010

Role: Photoshop compositing, design/art direction

Software: Photoshop

Usage: Used for concept pitch, usage unknown

Location: London, UK

firebellycreative.co.uk

Brief

Put together a toolkit for House Season 6 (layout based on previous toolkits by Firebelly for earlier seasons) which features a microsite with an ‘Operation‘ style game that users can play, based on the show’s themes. Also mock up an alternative microsite concept with a ‘Which Character Are You Most Like?’ Quiz.

Project

Using the official House Season 6 assets, I was immediately drawn to the image of the House character as a medical symbol (with wings and snake wrapped around him). Firebelly had previously made an x-ray style visual for a quiz which worked well and they wanted to somehow continue with the theme, so I applied an x-ray style to the operation game. The skeleton was retouched to match the pose and colouring of the character in the image, and the objects ‘embedded’ inside of him relate to the character himself.

Microsite ('Operation' game concept)

The second concept was a quiz where fans could, based on answers to various scenarios with screenshots of the show, figure out which character of House they were most like. This had the potential also be translated into a Facebook quiz in the future.

Microsite ('Which Character Are You Most Like?' Quiz concept)

Agency work for Firebelly. Concept by Firebelly.

Client: More Th>n

Agency: Monitor Media

Year: 2010

Role: Design

Software: Photoshop

Usage: Used

Location: London, UK

www.premier.morethan.com

Brief

Design a new website look for More Th>n insurance’s Premier brand (insurance for high-value homes and assets), to match the style of DM (featuring glossy 3D silver objects on black background). Site must use More Th>n green colour. ‘Get a Quote’ section must be based on UX wireframing provided by Monitor Media’s inhouse UX team.

Project

Initially the design concepts were quite dark because the DMs were completely black with the 3D silver objects scattered over them. Throughout the client liaison process, the designs evolved to be a lighter version so the contrast with the rest of the More Th>n site wasn’t as great.

A slight chrome treatment was given to some of the objects and the left hand side sub navigation menu, as well as to the main navigation menu to tie in with the 3D objects from the DM. On the latter, the objects were recreated as icons and were embossed into the menu. The actual objecst were used throughout the sections as added imagery.

The More Th>n green was used as a highlight feature throughout (in gradients, a darker green was added to comply with accessibility standards), with a grey supporting pallette to match the silver/chrome. The images on the main and sub sections were given a pointed mask to slightly mimick the > in More Th>n.

'Get a Quote' section, based on UX wireframes

Site development was done by Monitor Media’s inhouse developers.

Agency work for Monitor Media.

Client: Orange

Agency: Poke London

Year: 2010

Role: Flash animation using created assets

Software: Flash

Usage: Unconfirmed

Location: London UK

Brief and project

Produce sets of standard size banner ads in flash for 3 different campaigns for Orange. Mockups of artwork provided.

Above: ‘Dolphin’ plan flash banner ad in 2 of the various sizes. The jumping animation had already been created. I animated the characters into ninjas and also animated the text.

Above: ‘Monkey’ plan flash banner ad in MPU size. I animated the character and all text.

Above: ‘Pizza Express 2 for 1 deal’ flash banner ad in small leaderboard size. I animated images and all text.

Agency work for Poke London. Art direction and concept by Poke.

Client: Various

Year: 2008

Role: Flash online banner ad creation

Software: Flash

Usage: Unconfirmed

Location: London UK

Brief and project

Various online ads produced in flash. Animation and some coding involved.

Above: Coms.com banner ads in various standard sizes (examples are 468×60 banner and 300×250 MPU).

Above: Custom size flash ad for Gambling.com.

Above: Example of product animation from Eyeconomy’s website.

Made as part of my employment as inhouse designer at Mediacorp.

I really wanted to showcase each project and give a greater insight into the design process, not only mine but any designer’s, to increase mutual understanding between designers and clients.

I will be adding more content into the footer pages, including explanations of design concepts and best practice. Oh, and a few freebies too.

I hope you like it!

Cheers, Nina