You are on page 1of 11

Personal Logo and Style Guide

Free Space and Color Guide

Human Computer Interaction

Human Computer Interaction

Human Computer Interaction

Human Computer Interaction

Human Computer Interaction

Human Computer Interaction

Human Computer Interaction

64 px

32 px

16 px

Home Page Mock-Up

About
Human Computer Interaction

My Work This website is an example of the work of Jordan Falby, a graduate student at the University of Michigan School of Information specializing in Human Computer Interaction. Below are designs created in class for the Ann Arbor Languages Partnership.

Contact Me

Elizabeth Jordan Falby 2013

About Page Mock-Up

About
Human Computer Interaction

My Work The work displayed on this portfolio webpage was primarily created during the Winter 2013 semester in SI 520: Graphic Design, a design course for information professionals. As a rst year student with minimal design experience, I believe youll see signi cant improvment from the beginning of the semester to now! Outside of SI 520, Im interested in user research and usability analysis. In my free time, as pictured, I like to dress up for events such as the Mad Men season premiere!

Contact Me

Jordan Falby, March 2013

Elizabeth Jordan Falby 2013

Contact Page Mock-Up

About
Human Computer Interaction

My Work Email: efalby@umich.edu Phone: (248) 318-7893 Address: 4257 Smugglers Cove, Bloom eld Hills, MI

Contact Me

Elizabeth Jordan Falby 2013

Mobile Home Page Mock-Up


AT&T

12:34 PM
Untitled

http://www.efalby.com

Google

Human Computer Interaction

About

My Work

Contact Me

Human Computer Interaction

Elizabeth Jordan Falby


(248) 318-7893 efalby@umich.edu HCI graduate student, University of Michigan, School of Information

Mug Logo Mock-Up

Identity Guide
R: 19 G:125 B:90 -- C: 86% M: 28% Y: 77% K:13% -- HEX: 137D5A Button

R:21 G:102 B:52 -- C:88% M:35% Y:100% K:28% -- HEX: 156634

Logotype
Header
Content
Tagline

R:34 G:20 B:12 -- C:61% M:70% Y:73% K: 81% -- HEX: 22140C

R:56 G:37 B:20 -- C:54% M:68% Y:82% K:70% -- HEX: 382514

Texture: Pompadour

Myriad Pro
abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890

Blessed Day
abcdefghijklmnopqrstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

The two shades of green and the two shades of brown are analogous in harmony to one another. The original shade of green and brown chosen in the logo are related by triad color harmony. The logo image was inspired by my younger brother. I asked him what he would draw if asked to come up with something to represent me and he drew the back of my head. My daily hair flower is my signature look and it inspired my logo icon a cloud shape of dark brown with a swirled texture with a flower stenciled on it. The logotype was chosen to match the logo icon. The flower was originally a tattoo stencil that I cleaned up and re-colored with colors taken from a photograph of a yellow rose, so in keeping with the tattoo theme I searched dafont.com for an appropriate tattoo font and found Blessed Day by Bill Argel. The Home page design was created by deconstructing the logo icon. The background is the same as the icon, and the white space is in the original shape of the icon stretched across the screen. The About section features a recent photograph of the creator, chosen because I felt it had colors consistent with the rest of the design black and white with a brown background. The Contact page uses the same social media icons as the business card. For the mobile design, I was inspired by the lecture in class about how less is more when it comes to mobile design. I cut out every non-necessary element of the Home page design and was left with the logo surrounded by an appropriate amount of free space and the navigation buttons. The business card utilizes an even more spacious version of the logo and logotype with the tagline in a different color for emphasis. The background color on the back of the card was made more transparent for increased readability. For merchandise, I chose a mug and included only the logotype and logo icon, keeping with the less is more approach.

You might also like