Beginner Class on Fonts & Layouts

www.tabasconsulting.com | http://www.linkedin.com/in/lindsaytabas

HI, I’M LINDSAY(pinch-‐hi(er guest lecturer)

http://www.tabasconsulting.com

http://www.linkedin.com/in/lindsaytabas


Crea%vely solving & engineering solu%ons through customer and user experience design

thinking*




QUICK BACKGROUND CHECK

• Took my first Human Factors class in 2002 at University of Virginia

• Studied UX & Service Design at UC Berkeley’s School of Informa:on (2005 -‐ 2007)

• Worked in both Silicon Valley & Silicon Alley

• Coached EdTech Techstar’s Startups through a 12 week user tes%ng & prototyping curriculum

• Primarily focused on B2B enterprise products (I find them to be more complex with more interes%ng problems to solve)

• Bonus: I use to write ar%cles about street art and graffi% for a website called www.FatCap.com



http://www.FatCap.com


TELL ME…• Name (duh)

• Project Descrip%on

My project is called (Project Title). It’s a (choose: app / website / ________) designed for (your target user’s age,

gender, other defining characteris%cs) who need help with (what’s the problem you are solving?). My design

solves their problem by (choose: describe the service, informa%on or benefits your product offers).

• Answer 1 of the following ques%ons:

• If you could “uninvent” any past inven%on, which one would it be?

• What was your favorite thing to pretend when you were a young child?

• If you could be the CEO of any startup in the world, which one would you choose, and why?

• If someone offered to let you have your own podcast or radio show for 30 minutes every weekday morning, what type of show would you have?




DEBRIEF 2: FONTS & LAYOUTS




WE’RE GOING TO LEARN CRAP




WE’RE GOING TO LEARN C.R.A.P.




BUT FIRST, LET’S JUST TALK FONTS




WHEN PICKING FONTS, KEEP IT SIMPLE




PICKING FONTS• Artistic Font for a Logo or special call-outs (Grand Hotel).

• Use sparingly because it can be hard to

read (Hipsta), polarizing (Giddyup), and we’re not

experts (MGH divergent).

• One subfont for headers (h1, h2, h3…) (Exo)

• Readable text font for your <p> (Lato)




FONT BASICS

• This is sans-‐serif (Lato). So is this (Arial). You can also use me (Helvetica)

• I’m fancier (Exo 2). I’m free (Open Sans). I am too (Nexa).

• This is serif (Times New Roman). I’m also popular(Georgia).

• I’m Mono-space (Courier).




IN CSS

h1, h2, h3, h4, h5 {

font-‐family: “Exo 2”, Verdana, sans-‐serif;

}

body, p {

font-‐family: Lato, Arial, sans-‐serif;

}




WHAT DO YOU KNOW?

A designer once told me to keep your varia%ons on a landing page to 3. Change the font-‐weight, font-‐size or font-‐family just slightly

to create dis%nc%on.




LEARN MORECSS Font Declara.ons: hkp://www.w3schools.com/css/css_font.asp

CSS Cheat Sheet* hkp://lesliefranke.com/files/reference/csscheatsheet.html

*Old-‐@me-‐y favorite

Skillshare Class: hkp://www.skillshare.com/classes/design/Typography-‐That-‐Works-‐Typographic-‐Composi%on-‐and-‐Fonts/1694217981?via=browse-‐popular-‐typography

Typography in Ten Minutes: hkp://prac%caltypography.com/typography-‐in-‐ten-‐minutes.html



http://www.w3schools.com/css/css_font.asp

http://lesliefranke.com/files/reference/csscheatsheet.html

http://www.skillshare.com/classes/design/Typography-That-Works-Typographic-Composition-and-Fonts/1694217981?via=browse-popular-typography

http://practicaltypography.com/typography-in-ten-minutes.html


ON TO LAYOUTSBack to Basics: Core Principles & Partner Review




LEARNING OBJECTIVES

• Learn C.R.A.P.

• Apply C.R.A.P.

• Conduct Expert Review with a Partner




THE BASIC 4-LETTER WORD YOU NEED TO KNOWContrast: Make different things look different, make similar things look similar.

Repetition: Use patterns so that users can learn to identify objects quickly.

Alignment: The human eye likes pleasing layouts. Use Left, Center & Right align to organize your page.

Proximity: Group similar functionality and information together.




IDENTIFY C.R.A.P.try it for yourself




REDESIGN THIS

POSTERHow would you use

C.R.A.P. to redesign this poster?

(10 minutes to sketch / 10 minutes of sharing)




FEEDBACK IS IMPORTANT

Two of my favorite tenets of design:

• Friends don’t let friends design alone (i.e. share your designs with others).

• Stubbornness is the worst trait of a designer.

If a user or co-‐worker cri/ques your design, take the feedback and go back to the drawing board.




LET’S REVIEW EACH OTHER’S DESIGNS

• First person does a cogni%ve walk through of partner’s design (5-‐7 minutes)

• Second person does the same (5-‐7 minutes)

• Separately, sketch out some modifica%ons to your partner’s design (10 minutes)

• Share with each other (10 minutes)




COGNITIVE WALK-THROUGH: RULES OF CONDUCT

• Use this prompt: Someone shared this (show design) with you and said it may be useful for you. Take a few minutes to review, please speak aloud:

• What’s your first impression?

• What stands out to you?

• What do you want to do first?

• What do you think this is?

• As a moderator:

• Let your partner struggle.

• Don’t answer their ques%ons.

• Con%nue to prompt them to speak aloud.

• If you want them to elaborate on a thought, say “Tell me more”




SKETCH




SHARE




ANY QUESTIONS?




DOWNLOAD MY DRAWING RESOURCES

hkp://www.tabasconsul%ng.com/shop



http://www.tabasconsulting.com/shop

Beginner Class on Fonts & Layouts

Design

Transcript of Beginner Class on Fonts & Layouts