26
BEN ATTENBOROUGH GRAPHIC DESIGN PORTFOLIO

Ben Attenborough Design Portfolio

Embed Size (px)

DESCRIPTION

The portfolio of graphic designer Ben Attenborough

Citation preview

Page 1: Ben Attenborough Design Portfolio

BENATTENBOROUGH

GRAPHICDESIGNPORTFOLIO

Page 2: Ben Attenborough Design Portfolio

CONTACTSWebsite: www.benattenborough.org.ukEmail: [email protected]: @WebDesignerBenPhone: 07906 543259

Page 3: Ben Attenborough Design Portfolio

I am a freelance graphic designer working in both digital and print-based media.

My career spans many years designing and editing newspapers, including preparing pages for print. I have just completed a Masters in Graphic Design and Typography at Anglia Ruskin University in Cambridge where I achieved a distinction.

This has enabled me to hone my skills in layout design and typography. I have produced several books while on the course and also managed a team in the production of a book of illustrations.

I have a passion for digital design and making use of mobile technology to provide new ways of experiencing the world. My final major project at university focused on using GPS and mapping technology to build a platform which acts as a virtual tour guide to a locality.

This work taught me a lot about HTML, CSS and JavaScript and since university I have focused on expanding my web skills.

I am also an experienced journalist with experience as a reporter, chief reporter and sub-editor at a regional newspaper group.

My career as a journalist spans over a decade during which I gained many skills including reporting (interviewing people on a wide range of subjects), producing high quality stories against tight deadlines, editing copy and laying out pages.

My time working on newspapers and in producing my own booklets and documents has given me a knowledge of digital pre-press including pre-flight checking, adding bleeds, resizing files and communicating with printers on workflow.

I believe in socially-aware projects and I have sought to work with charities and institutions like museum to produce work with clear social benefits.

PROFILE

Page 4: Ben Attenborough Design Portfolio

PRINT DESIGN

THE WANDLEBURY ODYSSEY

The concept behind this project was to investigate the philosophical relationship between language and the environment.

I used a translation of Homer’s Odyssey and re-located the legend in a local park with historical associations (Wandlebury near Cambridge is the site of an iron age settlement).

The 3D letters were produced by cutting the forms from wood and photographing them from different angles. I then used Photoshop to superimpose the letterforms into photographs I had taken.

I also used layers and blend modes to add type to other photographs. The final design was in printed book form. I designed the page layouts and the use of the photographs.

The project investigated the power of words and their relationship with the objects or concepts they signify.

You can see the project at: issuu.com/benattenborough/docs/cyclopsbook

An image from the Wandlebury Odyssey manipulated in Photoshop

Page 5: Ben Attenborough Design Portfolio

The Wandlebury Odyssey

The cover for the book

Page 6: Ben Attenborough Design Portfolio

The text was cut from wood, photographed and superimposed into the picture

Another example of typographic manipulation

Page 7: Ben Attenborough Design Portfolio

30

Myself above them from a rising groundGuide the sharp stake, and twirl it round and round.As when a shipwright stands his workmen o’er,Who ply the wimble, some huge beam to bore;Urged on all hands, it nimbly spins about,The grain deep-piercing till it scoops it out:In his broad eye he whirls the fiery wood;From the pierced pupil spouts the boiling blood;Singed are his brows; the scorching lids grow black;The jelly bubbles, and the fibres crack.And as when armourers temper in the fordThe keen-edged pole-axe, or the shining sword,The red-hot metal hisses in the lake,Thus in his eye-ball hiss’d the plunging stake.He sends a dreadful groan, the rocks aroundThrough all their inmost winding caves resound.Scared we recoiled. Forth with frantic hand,He tore and dash’d on earth and gory brand;Then calls the Cyclops, all that round him dwell,With voice like thunder, and a direful yell.From all their dens the one-eyed race repair,From rifted rocks, and mountains bleak in air.All haste assembled, at his well-known roar,Inquire the cause, and crowd the cavern door.“’What hurts thee, Polypheme? what strange affrightThus breaks our slumbers, and disturbs the night?Does any mortal, in the unguarded hourOf sleep, oppress thee, or by fraud or power?Or thieves insidious thy fair flock surprise?’Thus they; the Cyclop from his den replies:

Odysseus w

ith the blinded Cyclops18

We sit expecting. Lo! he comes at last,Near half a forest on his back he bore,And cast the ponderous burden at the door.It thunder’d as it fell. We trembled then,And sought the deep recesses of the den.New driven before him through the arching rock,Came tumbling, heaps on heaps, the unnumber’d flock.Big-udder’d ewes, and goats of female kind(The males were penn’d in outward courts behind);Then, heaved on high, a rock’s enormous weightTo the cave’s mouth he roll’d, and closed the gate(Scarce twenty four-wheel’d cars, compact and strong,The massy load could bear, or roll along).He next betakes him to his evening cares,And, sitting down, to milk his flocks prepares;Of half their udders eases first the dams,Then to the mother’s teat submits the lambs;Half the white stream to hardening cheese be press’d,And high in wicker-baskets heap’d: the rest,Reserved in bowls, supplied his nightly feast.His labour done, he fired the pile, that gaveA sudden blaze, and lighted all the cave.We stand discover’d by the rising fires;Askance the giant glares, and thus inquires:“’What are ye, guests? on what adventure, say,Thus far ye wander through the watery way?Pirates perhaps, who seek through seas unknownThe lives of others, and expose your own?’“His voice like thunder through the cavern sounds;My bold companions thrilling fear confounds,

The return of the cyclops

A page spread from the book

Another page spread

Page 8: Ben Attenborough Design Portfolio

MUSEUM TYPEFACE DESIGN

The aim of this project was to create a signage system for the Cambridge Museum of Technology that pays respect to the architecture and content of the site. This unusual lettering design appears to be unique to Cambridge and is worth preserving. I believe the signs harmonise with the building and help shed a little light on this history.

The aim of any signage system is to help visitors find their way around a site and get the maximum enjoyment from their visit. By keeping the lettering reasonably small, but using a high contrast between figure and background colour I believe I have found a system that is useful but not distracting from the museum’s architecture.

The tile system I have developed could be designed for a 3D printer which would mean new letters could be made to order and appear the same as older letters. A feature of the old signs in Cambridge is that they show inconsistencies which may have occurred as signs decayed and were replaced with new designs, different from the older ones.

By having a digital design with which to make new tiles these inconsistencies could be eliminated, even if different materials are used.

Further consideration would need to be made as to how these letters could be attached to the walls without causing any damage.

The focus of my study has been the type design and prototyping. Obviously there is still some way to go in creating a visitor journey and deciding which signs should go where. This is something I hope to offer to the museum in the coming months.

You can see the project at: issuu.com/benattenborough/docs/commentary

PRINT DESIGN

Page 9: Ben Attenborough Design Portfolio

The finished typeface for the museum based on local street signs

Page 10: Ben Attenborough Design Portfolio

Some examples of local street signs which inspired the project

Page 11: Ben Attenborough Design Portfolio

Letters being cut from Perspex using a laser cutter

A Photoshop mockup of how the signage system could work

Page 12: Ben Attenborough Design Portfolio

DIGITAL DESIGN

This was my final major project for a Masters in Graphic Design and Typography at Anglia Ruskin University.

My intention with this project was to investigate how history can be represented in a digital format. I used the latest in mobile technology to present history, in an innovative way.

The project also shifted the focus from “official history” to the everyday living history of an area.

I created an app which users can use to discover more about the history of their location as they explore it for real.

The aim was to create a new way for people to learn about and understand history by using geography as a starting point.

I built the app using HTML, CSS and JavaScript, among other tools and packaged it together using Adobe PhoneGap. Mapping works by utilising the Google Maps API and the GPS system of the mobile phone. In this way the app can guide you to a location and then tell you more about it.

Within the app is a tours section where a story is told by taking the user to different locations to tell different parts of a tale.

MILL ROAD HISTORY PROJECT

Page 13: Ben Attenborough Design Portfolio

Examples of how the app looks on a mobile phone. The software uses GPS to direct the user to the site of interest as shown on the right

Page 14: Ben Attenborough Design Portfolio

Once the user reaches their destination they can get pictures of the site of interest and find out information about it

Page 15: Ben Attenborough Design Portfolio

Example of a menu screen and an information view

Page 16: Ben Attenborough Design Portfolio

DIGITAL DESIGN

I designed this app as my final project for the Adobe Generation app design course, which won first prize.

The app acts as a virtual tourist guide to the city of Cambridge. Users can scroll through a list of interesting destination, find out a little about their history and view pictures of the sites and final get directions to the location. It helped form the basis of my Mill Road History project and subsequently I went back to improve upon it, adding a better menu and some fixes.

In order to create the app I use HTML, CSS and JavaScript together with Phone Gap, a tool which packages up these files into an app for mobile devices.

CAMBRIDGE GUIDE

Page 17: Ben Attenborough Design Portfolio

Left, the splash screen for the app, right, an example of the map in action

Page 18: Ben Attenborough Design Portfolio

DIGITAL DESIGN

This was a collaborative project that I applied my coding skills to. Berenice Smith, who came up with the idea explained the website:

Walk in my shoes is a postgraduate graphic design project by Berenice Smith who herself is childless through circumstance. This is her feet and those of her dog Molly who she says has inspired her to move forwards in her journey.

Inspired by friends in the Gateway Women community, she created this site in answer to unvoiced frustration from 1 in 5 couples for whom alternative ways of conception will not work. Offended by the concept that being a mother is the hardest job in the world and working with parents whilst she was going through IVF, Berenice is encouraging men and women who are childless by any circumstance to share their responses to challenging observations through this site. Stories on friendships with parents that have bridged the gap are welcome so society can join together. Share your feet photo with your role model.

Why shoes? As children we try on our parents shoes and hope to emulate their lives but circumstance can prevent us from taking that path. Feet are a confidential way to show a real person and maybe their loved ones, even the paws of a pet. Share that journey and never feel you’re alone on your path.

I helped code the site, included a form for users to submit data, and built the responsive postit note page illustrated below which users can use to navigate the submissions.

WALK IN OUR SHOES

Page 19: Ben Attenborough Design Portfolio

The postit note menu screen where users can see other people’s submissions, participate or just find out more about the project

Page 20: Ben Attenborough Design Portfolio

Examples of submission pages, the design is responsive

Page 21: Ben Attenborough Design Portfolio

The bottom image shows the submission page. I integrated a database to store user’s information which I implemented with PHP

Page 22: Ben Attenborough Design Portfolio

DIGITAL DESIGN

The concept behind this project was to compare real history with the imagined history of science fiction writers.

I designed this as an app for a tablet computer and built it using Adobe Flash. Users can select a period of history and see a timeline for that period which they can scroll horizontally.

The design is interactive and users can tap (or click if on desktop) on the boxes to get more information.

In addition to the app there is a wiki site where users can suggest new entries for the timeline or make amendments to older entries.

TIMELINE OF THE FUTURE

Page 23: Ben Attenborough Design Portfolio

Two screens from the Timeline of the Future project which was built using Flash.

Page 24: Ben Attenborough Design Portfolio
Page 25: Ben Attenborough Design Portfolio

CONTACTSWebsite: www.benattenborough.org.ukEmail: [email protected]: @WebDesignerBenPhone: 07906 543259

Page 26: Ben Attenborough Design Portfolio