purin's guide to visual design and keynote wizardry

VISUAL DESIGN + KEYNOTE WIZARDRYPURIN'S SECRET RECIPE TO MAKE STUFF LOOK PRETTY

I’m so pretty

GOAL:FOR YOU TO WALK AWAY FROM THIS WORKSHOP WITH TOOLS & TECHNIQUES TO MAKE YOUR DESIGNS LOOK PRETTY

VISUAL DESIGN IS A LEARNABLE SKILL, JUST LIKE BICYCLING.ONCE YOU KNOW HOW TO RIDE, IT WILL TAKE YOU FAR.

visual design secret recipe

LEARNINGBASIC TIPS &

TRICKS

BEING CONFIDENT(FAKING IT)

COPYING GOOD

EXAMPLES

PRACTICINGUSING KEYNOTE

COPYING GOOD EXAMPLES

In order to design beautiful things, you have to surround yourself with beautiful things.

Dan BoyarskiCMU School of Design

PRACTICING

20042003 20062005 20082007 20102009 2011

AHA! I’M GOOD I’M AWESOME

2 minutes

AHA! I’M AWESOME

LOTS OF PRACTICE

?

I’m pretty good at visual design.

I’d love to do the visual design part

OMG That looks like crap!!!



It looks horrible. Please stop designing.


+ use good examples as your template


I guess that looks cool. It looks like something I’ve seen before.

+ use good examples as your template

When you think you’re in a safe environment, your level of creativity goes up by 10x.

Brendan Boyled.school / IDEO



TRICKS


COPYING GOOD

EXAMPLES


?

7 SECRET TRICKS TO GREAT VISUAL DESIGN

1. LINE THINGS UP

“Let’s use PowerPoint’s template”

!

!

!

!

!

!

!

!

!

! !

2. BALANCE THE PAGE & LEAVE SOME WHITE SPACE

“Let’s be efficient with space”

3. USE DESIGNER FONTS

3.5 DO NOT USE THESE STUPID FONTS(YOU WILL BE MADE FUN OF BY DESIGNERS)

4. THINK OF TEXT AS THE BACK OF YOUR LEFT HAND

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

5. LEFT-ALIGN TEXT IN MOST CASES CENTER-ALIGN FOR UNITY

POINTS OF PARITY & DIFFERENTIATION

POINT-OF-PARITY: Shared brand associationsneeded to be player, to neutralize ‘competition’

POINT-OF-DIFFERENCE: Unique brand associationsneeded to stand out

Source: Keller 2003BRANDS, EXPERIENCE & SOCIAL TECHNOLOGY SPRING 2011 Jennifer Aaker + Chris Flink

In the next 10 minutes you and your partner will build a paper airplane.

6. USE COLORS TO COMMUNICATE & MAKE THINGS POPDON’T USE THEM FRIVOLOUSLY

Advanced IID A1:Mood Boards Purin Phanichphant 1/6

HAPPINESSFEELING OR SHOWING PLEASURE OR CONTENTMENT

WarmFunFreshColorful

TogetherMovingConnectedSweet

COLORS ATTRIBUTES

7. TAKE ADVANTAGE OF GOOGLE IMAGE SEARCH & FLICKRBUT BE TASTEFUL WHEN SELECTING IMAGES

7 SECRET TRICKS TO GREAT VISUAL DESIGN

1. LINE THINGS UP

2. BALANCE THE PAGE & LEAVE SOME WHITE SPACE

3. USE DESIGNER FONTS

4. THINK OF TEXT AS THE BACK OF YOUR LEFT HAND

5. LEFT-ALIGN TEXT IN MOST CASES (CENTER IS OK TOO)

6. USE COLORS TO COMMUNICATE & MAKE THINGS POP

7. TAKE ADVANTAGE OF GOOGLE IMAGE SEARCH & FLICKR SEARCH

?

BREAKnext up: keynote



TRICKS


COPYING GOOD

EXAMPLES


STUFF YOU CAN DO WITH KEYNOTE

BESTBrands, Experience

& Social Technology

BESTBrands, Experience & Social Technology

BESTBrands, Experience & Social

Technology

bestBRANDS / EXPERIENCE / SOCIAL TECHNOLOGY

BESTBRANDS, EXPERIENCE & SOCIAL TECHNOLOGY

B E S TBrands, Experience & Social Technology

BESTBrands, Experience & Social Technology

OF

F

TH

E

TA

BLE

featuring

MFA DESIGN GRADUATES

JENNIFER LOPEZ

PURIN PHANICHPHANT

CHRISTIN STAUBO

ABBY STURGES

April 5th - April 17th

Tues-Fri 10-5 Sat & Sun 1-5

Reception April 14th 5pm-7pm

Thomas Welton Art Gallery

Stanford University

a civilized discourse on food in the 21st century

OFF THE TABLE

HELLO! from PURIN PHANICHPHANT

product + interaction [email protected]

249 Ramona St.Palo Alto, CA 94301

CUT

FOLD & GLUE

VOILA!

STANFOR D UN IVERSIT YJoint Program in DesignCandidate in Master of Fine Arts, Class of 2011

CARNEGIE MELLON UNI VERSITYInterdisciplinary Program in Industrial Design and Human-Computer InteractionGraduated May 2006 with College and University Honors

C R E AT I VE / D ESIG NE RFarmgroup Design Studio, Bangkok August 2008 – May 2009

Joined a team of young & talented graphic, motion, and environmental designers in a journey to de!ne, understand, and solve client problems. Projects included life-sized interactive Christmas tree and snow globe, modular graphic cubes, children’s maze, kinetic sculptures, and many more!

INT ER ACT I O N DES I G N ERO!ce Design Group, Microso" Corporation June 2005 – August 2005 (intern), August 2006 – August 2007

Collaborated with usability engineers, program managers, developers, product planners, as well as other designers within the group to de!ne front-end user experience for current and future versions of O"ce client and server applications

PR O D UCT DES IGN IN T ER NDaedalus Excel Product Development January 2006 – May 2006

Worked on various aspects of medical equipment design projects, including product form sketching, product modeling, CAD prototyping, competitive analysis, and designing interactive user interface mock-ups

RECOGNIT I ON2006 IDSA Student Merit Award ID Magazine Student Design Review 06 Honorable Mention for CUBOT: Motion-based Building Block SystemCHI 2006 & 2007 Presenter2003, 2005, and 2006 CMU School of Design Merit Award2005–06 CMU HCI Student Advisory Board MemberCMU Student Representative, ADSL Conference, Belgium, Jan’05

E NJOYM EN TProduct conceptualization & sketchingUser experience storyboarding User interface design Low-!delity prototypingBuilding interactive prototypes with Flash/Actionscript, Processing, and ArduinoVisualizing concepts with SketchUp & SolidworksWoodworking, TIG WeldingBicycle building & ridingSettlers of Catan

My name is Purin Phanichphant. I am currently a graduate student in the Joint Program in Design at Stanford University.

With a thorough understanding of the design process, ability to sketch and prototype rapidly in various media, and my love for experimentation, I want to leverage playfulness and create the next breakthrough products and technologies that change human behavior for the be!er. Ultimately, I wish to create a world that is happier, healthier, and full of laughter.

alphonso labs / touch me: designing for touch interfaces

F* Illustrator & Photoshop. Keynote is your best friend.

4 / 6

DEMO 1DRAG IMAGES TO CROP

DEMO 2PASTE TEXT TO EXISTING FORMAT

SHIFT OPTION COMMAND V

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

DEMO 3PICTURE FRAME + MULTITOUCH ZOOM & ROTATE

DEMO 4COPY TO PHOTOSHOP & ILLUSTRATOR

YOUARE

HERE

DEMO 5OPTION-DRAG TO DUPLICATE + DISTRIBUTE

DEMO 6EXPORT TO PDF

THINK-ALOUD DEMOREDESIGNING A POSTER

HACK FOR EGYPTSaturday May 14th. 10am-8pm

You will help develop technology for free and fair elections, public input on the constitution, and government accountability. You will be working alongside universities in Egypt, international development experts, the makers of existing apps, and the activists that will use the technology. Your work will be meaningful, relevant, and high-impact. There is no registration fee, with free food and drinks as usual.

You will help develop technology for free and fair elections, public input on the constitution, and government accountability. You will be working alongside universities in Egypt, international development experts, the makers of existing apps, and the activists that will use the technology. Your work will be meaningful, relevant, and high-impact. There is no registration fee, with free food and drinks as usual.

THINK-ALOUD DEMOREDESIGNING A SLIDE

KEY INSIGHTS‘MARRIAGE’ TEMPLATE OVER-RATED.

RELATIONSHIPS ARE IMPORTANT, BUT OFTEN MISUNDERSTOODNeed to list ‘dos and don’ts’ & apologies/recoveries

Pay particular attention first interactionsBe happy when transgressions occur

RETHINK BRANDBank account

What is under-rated: understanding relationship types

UNDERSTANDING PSYCHOLOGY OF RELATIONSHIPS