Page 1

graphic design portfolio


My design philosophy is simple: communicate clearly, find inspiration everywhere and never stop learning. That pretty much covers everything.

- Kelby Hawn


enjoy this book.

Sa

l

ig

ai

e

g

e

ag

m id

ti

ic

•w

ph

ty

eb

eb

Co

ia

ca

10

ri al

s0

n

9

si g

•n

&

ili

di

ty

me

ab

ew

Us

02

ng

ef ac e

ag i

De

yp

W eb

pt

•p ac k

ma te

n

gn

al mp ai

on

so

ma

on

it

04

•b

at i

te

No

ot i

d

n

n

sig

om

an

de

03

sig

ll us tr

de

•i

ed

pr

lm

ow

07

ti o

n

ia

Sh

sig

oc

lio

•s

tfo

08

Po r

y

de

i ca

n

et

05

ja ck

hy

un

ap

m

re

m

rf ac e

n

ph

te

sig

in

De

al

rf ac e

ra

te

Vi su

al

o

rf ac e

ri

lo g

ito

te

k

in

oo

gr

sb

eb

po

sic

ew

ty

as

ic

Cl

am

in

&

er

in

iv

ed

ds

ar

e

hc

ac

as

ef

Fl

Ty p

ity

ra ct

ho to g

w

n

•c

ig

sp

ra

ie

e

es

us

G

en

e

rb

Ho

Ba

eg

pa ple ge S 56 ca r f

Si

pa le ge r C 52 ol l

Fl

pa C g e re 48 ep y

Th

ey

cD

la ge

iv

ed

te

gu

in

lP en

hy

lic

rA ct

Sp

lo

&

ap

ie

mb

Ar

gr

hi

se

&

ap

pa ar ge d 44 Go r

Ed w

e3 n 6 Gr

ag s o

No t p e

pa Te g e et 30 h a s

Bi

pa Be ge ll 24 Ja r

Th

po

e

Co

in

&

az

ct

ag

pa na ge b 20 le T y

At t

pa ht ge en 12 M

He

pa ut! ge C 04 o n n e

w

n

01

06

rf ac e

sig

te

de

in

on

eb

at i

ic

p•

bl

ap

pu

a


Salut! Connect & Color Activity Flashcards logo • illustration • packaging • new media app • web interface

01

overview • Salut! Connect & Color Activity Flashcards are based upon the principle of global communication. These cards offer a fun and interactive way for children to learn common words in French. The cute and colorful illustrations introduce children to French words while the activity on the back of the cards allows children to actively participate in learning the English translation. Incorporating new media with tactile activity cards creates a well rounded learning experience and can enhance motor skills and artistic expression. //

execution • Each card features a color and a corresponding food or animal in both French and English. The front of the cards showcase a full color illustration and French words; the back of the cards have either connect-the-dots if it is a food card or coloring in the case of the animal cards. Additionally, kids and their parents can visit the companion website featuring spoken translations, more information and links to purchase the companion iPhone/iPad app.

04 • kelby hawn • graphic design portfolio • Salut! Connect & Color Activity Flashcards


Salut! Connect & Color Activity Flashcards • graphic design portfolio • kelby hawn • 05


06 • kelby hawn • graphic design portfolio • Salut! Connect & Color Activity Flashcards


Salut! Connect & Color Activity Flashcards • graphic design portfolio • kelby hawn • 07


08 • kelby hawn • graphic design portfolio • Salut! Connect & Color Activity Flashcards


Salut! Connect & Color Activity Flashcards • graphic design portfolio • kelby hawn • 09


THE COMPANION SITE FOR SALUT! CONNECT & COLOR ACTIVITY FLASHCARDS Cart | Help

CONNECT & COLOR CLICK EACH CARD TO REVEAL SPEAKING GUIDE

ABOUT THE CARDS / BUY THE CARDS

GET THE APP

SHARE

rouge

la fraise

SALUT! CONNECT & COLOR ACTIVITY FLASHCARDS OFFER CHILDREN A FUN AND INTERACTIVE WAY TO LEARN COMMON WORDS IN FRENCH Home | About the cards | Buy the cards | Get the app | Cart | Help

Copyright © 2010 Chronicle Books


THE COMPANION SITE FOR SALUT! CONNECT & COLOR ACTIVITY FLASHCARDS Cart | Help

CONNECT & COLOR CLICK EACH CARD TO REVEAL SPEAKING GUIDE

ABOUT THE CARDS / BUY THE CARDS

GET THE APP

SHARE

BUY THE NEW iPHONE AND iPAD APP FOR ONLY $2.99 CONNECT THE DOTS AND COLOR AGAIN & AGAIN! OPEN IN iTUNES

FEATURES Use the touchscreen to connect the dots and color! • Additional categories coming soon • Speaking guide & translation • Change brush size and color • Save to the photo gallery • Shake to start over • Free updates and more…

BUY NOW!

BUY ON iTUNES

SALUT! CONNECT & COLOR ACTIVITY FLASHCARDS OFFER CHILDREN A FUN AND INTERACTIVE WAY TO LEARN COMMON WORDS IN FRENCH Home | About the cards | Buy the cards | Get the app | Cart | Help

Copyright © 2010 Chronicle Books

Salut! Connect & Color Activity Flashcards • graphic design portfolio • kelby hawn • 11


Heighten Magazine & Spliced Typeface editorial design: print & digital magazine • bitmap typeface

02

overview • Heighten Magazine is a publication about sustainable design. It features topics ranging from sustainability in architecture, industrial design, interior design, and graphic design. This is a sophisticated publication meant for professionals in the aforementioned fields. The aesthetic of Heighten is very clean with ample white space, and information is presented in a straightforward manner. // execution • Spliced is a bitmap typeface designed specifically for Heighten. It was created from pixels with the Fontstruct software application. The word spliced means to join or connect. The elements that make up each letter never touch but they fit together, essentially creating a union through tension. The Heighten masthead was designed using Spliced, and also built with sustainable wooden blocks (similar to the game pieces in Jenga) for a feature article in the magazine. Heighten is available both in print and digital format. Additionally, the Spliced typeface is available for download at fontstruct.com for free.

12 • kelby hawn • graphic design portfolio • Heighten Magazine & Spliced Typeface


Heighten Magazine & Spliced Typeface • graphic design portfolio • kelby hawn • 13


14 • kelby hawn • graphic design portfolio • Heighten Magazine & Spliced Typeface


Heighten Magazine & Spliced Typeface • graphic design portfolio • kelby hawn • 15


the masthead built using wooden blocks; each letter was about 6ft tall

16 • kelby hawn • graphic design portfolio • Heighten Magazine & Spliced Typeface


abcdefghijklmnopqrstuvwxyz

spliced is available for download at fontstruct.com

Heighten Magazine & Spliced Typeface • graphic design portfolio • kelby hawn • 17


heighten magazine can also be viewed digitally

18 • kelby hawn • graphic design portfolio • Heighten Magazine & Spliced Typeface


Heighten Magazine & Spliced Typeface • graphic design portfolio • kelby hawn • 19


Attainable Typography interactive web interface

03

overview • Typography is one of the most critical subjects in design curriculums and it’s one of the most interesting and varied things to learn about as a design student. There are a number of books and resources to teach one about typography but there aren’t many interactive learning tools. Attainable Typography is an experimental interactive web interface and application that allows users to interact with some basic typographic elements. //

execution •

Attainable Typography focuses on three main areas: Letter, Text and typographic Structures. Each section offers several different areas that clearly communicate a selected property. The user can click or rollover certain elements that will reveal information. The site was produced entirely in Adobe Flash CS4 using ActionScript 3 because it allows for animation and interactivity.

20 • kelby hawn • graphic design portfolio • Attainable Typography


Attainable Typography • graphic design portfolio • kelby hawn • 21


the structures section features eight short animations; start screen for the transitional structure

22 • kelby hawn • graphic design portfolio • Attainable Typography

the end screen of the transitional structure animation


this section features a rollover animation that reveals different parts of type anatomy whenever the mouse hovers over an element; fancy anatomy from author ellen lupton

Attainable Typography • graphic design portfolio • kelby hawn • 23


The Bell Jar & Ariel Penguin Classics book jacket design • tiny notebooks

04

overview • Penguin Classics has issued many classic books with redesigned covers in hopes of introducing a younger audience to famous works of the past. Sylvia Plath’s work is a staple in the high school curriculum, which presents an opportunity for fresh cover design. Plath was alive during the first half of the Twentieth Century and her most evocative works, The Bell Jar and Ariel, were written in the late 1950’s, early 1960’s. //

execution • These covers draw in-

spiration from the graphic aesthetic of 1950’s poster design. The type is hand done and based upon different elements of each book. The Bell Jar aesthetic is heavily influenced by broken glass and the disjointed girl illustration recalls psychological decline. Ariel was Plath’s last work before her suicide. The angular nature of the text and lungs displays the intensity exhibited in her poetry. Each book features a main illustration that lends itself nicely to pattern design, which subsequently is featured on tiny accessory notebooks for the aspiring writer or student.

24 • kelby hawn • graphic design portfolio • The Bell Jar & Ariel Penguin Classics


The Bell Jar & Ariel Penguin Classics • graphic design portfolio • kelby hawn • 25


26 • kelby hawn • graphic design portfolio • The Bell Jar & Ariel Penguin Classics


The Bell Jar & Ariel Penguin Classics • graphic design portfolio • kelby hawn • 27


28 • kelby hawn • graphic design portfolio • The Bell Jar & Ariel Penguin Classics


The Bell Jar & Ariel Penguin Classics • graphic design portfolio • kelby hawn • 29


fine art:

Big Teeth assemblage • ceramic typography

05

overview • Ceramics affords artists an outlet to use their hands to sculpt and create practical and impractical objects. In this case ceramic clay was combined with a vintage edition of Little Red Riding Hood to create a typographic assemblage piece. The goal of this piece was to combine the whimsical illustrations by June Goldsborough and ceramic typography to create a tactile expression of this ubiquitous tale. //

execution

• Porcelain clay was cut using a needle tool into the words “what very big teeth you have!” a direct quote from Little Red Riding Hood directed at the Big Bad Wolf. After allowing the clay to dry it was fired in a kiln and then painted with glossy red and white glaze. Each word in the sentence has been characterized to visually express its auditory meaning; i.e. “big” is capitalized and “teeth” is white and has sharp, pointed stems.

30 • kelby hawn • graphic design portfolio • Big Teeth


Big Teeth • graphic design portfolio • kelby hawn • 31


32 • kelby hawn • graphic design portfolio • Big Teeth


Big Teeth • graphic design portfolio • kelby hawn • 33


concept, raw clay and tools

baked clay, ready for glaze

34 • kelby hawn • graphic design portfolio • Big Teeth


Big Teeth • graphic design portfolio • kelby hawn • 35


Notes on Graphic Design & Visual Communication and Notes on Web Design & Usability publication design: printed book, digital book

06

overview • Notes on Graphic Design & Visual Communication was written by Gregg Berryman in 1990. This redesigned edition has been joined by a new companion book titled Notes on Web original cover

Design & Usability that is only available digitally for use on a portable reading device or in PDF format. Each book features an updated appearance based upon the aesthetic qualities of the Bauhaus movement of the early 20th Century. Graphic Design exhibits CMYK color and Web Design exhibits an RGB scheme based upon the process colors of each respective field. //

execution

• Clean lines and ample white space allows the reader to fully comprehend the provided information and to jot down their own notes while reading. Many instances of simple illustrations accompany given chapters and those too maintain the original subject matter created by Berryman, but have been vector based for high definition rendering. This book is pocket sized at 4.25 x 6.87 inches and is perfect bound so it fits easily in a computer bag or anywhere else one might keep it.

36 • kelby hawn • graphic design portfolio • Notes on Design Book Series


Notes on Design Book Series • graphic design portfolio • kelby hawn • 37


38 • kelby hawn • graphic design portfolio • Notes on Design Book Series


Notes on Design Book Series • graphic design portfolio • kelby hawn • 39


40 • kelby hawn • graphic design portfolio • Notes on Design Book Series


Notes on Design Book Series • graphic design portfolio • kelby hawn • 41


42 • kelby hawn • graphic design portfolio • Notes on Design Book Series


notes on web design & usability is available in digital format

Notes on Design Book Series • graphic design portfolio • kelby hawn • 43


Edward Gorey House web interface redesign

07

overview • Edward Gorey was an illustrator and author from the 20th Century whose work has been described as “whimsically macabre.” Even though the subject matter of his work is gloomy, the quirky illustrations that accompany his original site; edwardgoreyhouse.org

stories make them a delight to experience. The Edward Gorey House is a museum in tribute to Gorey, and is located in his old house in Yarmouthport, MA. The house exhibits Gorey’s work and gives visitors a chance to delve into his surroundings. Additionally, the House supports various animal welfare organizations, and offers membership and volunteer opportunities. //

execution

• EdwardGoreyHouse.org is the main source of information for the museum and is in need of an updated appearance to truly showcase Gorey’s style. Additionally, new information architecture has been applied to make the site more easily navigable and to encourage more people to visit the house. note: all illustrations by edward gorey; scanned from the book, elegant enigmas: the art of edward gorey, pomegranate communications, inc., ca; all site content is original from edwardgoreyhouse.org

44 • kelby hawn • graphic design portfolio • Edward Gorey House


Edward Gorey House • graphic design portfolio • kelby hawn • 45


when the user hovers over the cat, it becomes a link that goes to the animal welfare missions page edward gorey house photograph © rick jones, director and curator, edward gorey house

Edward Gorey House • graphic design portfolio • kelby hawn • 47


fine art:

The Creepy Barbies photography

08

overview • Barbie always looks beautiful. But when her many personalities are bloated out of proportion and discolored she looks assuming and grotesque. Could this be her true self? Is Ken trapped in the basement with dirty water and stale bread? // execution • These photographs were taken with the Lomography Copper Fisheye camera and Kodak film in the spring of 2009. The images of the vintage Barbies were found in NYLON Magazine; Baroque frame from IKEA.

48 • kelby hawn • graphic design portfolio • The Creepy Barbies


The Creepy Barbies • graphic design portfolio • kelby hawn • 49


50 • kelby hawn • graphic design portfolio • The Creepy Barbies


The Creepy Barbies • graphic design portfolio • kelby hawn • 51


Flagler College Graphic Design Portfolio Show promotioanl materials: poster, dvd, postcard

09

overview • Each semester the Flagler College Art & Design department puts on a Portfolio Show for the graduating Graphic Design seniors. The show features a video made by the class throughout the semester and after the presentation family, friends and the community are welcome to view each student’s finished portfolios. It is essentially a celebration of the semester’s graduates. //

execution • The concept behind “Do The Dance” was inspired by the frenzied life of a graphic design student. The supporting text was developed by the students in the graphic design department and reads, “Graphic Design is No Cake Walk… Come Shimmy and Shake and See What We Make!” There are many instances of ebb and flow, push and pull, and lead and follow that happen during the design process. In this way dance creates a perfect metaphor for creativity. Aesthetically the imagery came from old-fashioned dance diagrams. Each pair of feet represents one of the ten students. Each student chose the color of their feet and their initials are featured where the L(eft) and R(ight) are usually present in the diagrams.

52 • kelby hawn • graphic design portfolio • Flagler College Graphic Design Portfolio Show


Flagler College Graphic Design Portfolio Show • graphic design portfolio • kelby hawn • 53


54 • kelby hawn • graphic design portfolio • Flagler College Graphic Design Portfolio Show


Flagler College Graphic Design Portfolio Show • graphic design portfolio • kelby hawn • 55


SimpleScarf identity • web interface • social media campaign

10

overview • SimpleScarf is a charity that aims to knit scarves for  the homeless and less fortunate in Central Florida. There is a large homeless population in the area because of year round mild temperatures. However, every year there are several weeks of cold temperatures, and some winters are especially knitting the scarf for the identity

frigid. The idea behind SimpleScarf is simple. Knit the easiest item you can, a scarf, and give it to someone who can benefit from its warmth. // execution • Within the SimpleScarf identity system is a business card, letterhead, envelope and postcard. The business card and postcard act as promotional pieces that can be distributed by the register at knitting and craft stores. The letterhead is sent to those who donate to SimpleScarf as a thank you note, or for business matters. SimpleScarf.org acts as the keystone to the charity because that is where knitters can go to learn about SimpleScarf and get involved. There is also a social media component to SimpleScarf through Facebook and Twitter.

56 • kelby hawn • graphic design portfolio • SimpleScarf


SimpleScarf • graphic design portfolio • kelby hawn • 57


simplescarf.org is a one page website that utilizes anchors to move through each section

58 • kelby hawn • graphic design portfolio • SimpleScarf


simplescarf facebook profile

60 • kelby hawn • graphic design portfolio • SimpleScarf


simplescarf twitter account

SimpleScarf • graphic design portfolio • kelby hawn • 61


62 • kelby hawn • graphic design portfolio • SimpleScarf


SimpleScarf • graphic design portfolio • kelby hawn • 63


This book is set in Neutraface Text designed by Christian Schwartz for House Industries. It was printed on Sappi Hannoart Silk 80 lb cover stock at PIP Printing in St. Augustine, FL. The portfolio case is manufactured by Lost Luggage based out of Seattle, WA.

Thanks for viewing!

Kelby Hawn: Graphic Design Portfolio  

The graphic design portfolio of Kelby Hawn. Features include: identity design, editorial design, publication design, educational design, pro...

Read more
Read more
Similar to
Popular now
Just for you