Beginner Class on Fonts & Layouts
-
Upload
lindsay-tabas -
Category
Design
-
view
331 -
download
1
Transcript of Beginner Class on Fonts & Layouts
www.tabasconsulting.com | http://www.linkedin.com/in/lindsaytabas
HI, I’M LINDSAY(pinch-‐hi(er guest lecturer)
www.tabasconsulting.com | http://www.linkedin.com/in/lindsaytabas
Crea%vely solving & engineering solu%ons through customer and user experience design
thinking*
www.tabasconsulting.com | http://www.linkedin.com/in/lindsaytabas
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
www.tabasconsulting.com | http://www.linkedin.com/in/lindsaytabas
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?
www.tabasconsulting.com | http://www.linkedin.com/in/lindsaytabas
DEBRIEF 2: FONTS & LAYOUTS
www.tabasconsulting.com | http://www.linkedin.com/in/lindsaytabas
DEBRIEF 2: FONTS & LAYOUTS
www.tabasconsulting.com | http://www.linkedin.com/in/lindsaytabas
WE’RE GOING TO LEARN CRAP
www.tabasconsulting.com | http://www.linkedin.com/in/lindsaytabas
WE’RE GOING TO LEARN C.R.A.P.
www.tabasconsulting.com | http://www.linkedin.com/in/lindsaytabas
BUT FIRST, LET’S JUST TALK FONTS
www.tabasconsulting.com | http://www.linkedin.com/in/lindsaytabas
WHEN PICKING FONTS, KEEP IT SIMPLE
www.tabasconsulting.com | http://www.linkedin.com/in/lindsaytabas
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)
www.tabasconsulting.com | http://www.linkedin.com/in/lindsaytabas
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).
www.tabasconsulting.com | http://www.linkedin.com/in/lindsaytabas
IN CSS
h1, h2, h3, h4, h5 {
font-‐family: “Exo 2”, Verdana, sans-‐serif;
}
body, p {
font-‐family: Lato, Arial, sans-‐serif;
}
www.tabasconsulting.com | http://www.linkedin.com/in/lindsaytabas
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.
www.tabasconsulting.com | http://www.linkedin.com/in/lindsaytabas
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
www.tabasconsulting.com | http://www.linkedin.com/in/lindsaytabas
ON TO LAYOUTSBack to Basics: Core Principles & Partner Review
www.tabasconsulting.com | http://www.linkedin.com/in/lindsaytabas
LEARNING OBJECTIVES
• Learn C.R.A.P.
• Apply C.R.A.P.
• Conduct Expert Review with a Partner
www.tabasconsulting.com | http://www.linkedin.com/in/lindsaytabas
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.
www.tabasconsulting.com | http://www.linkedin.com/in/lindsaytabas
IDENTIFY C.R.A.P.try it for yourself
www.tabasconsulting.com | http://www.linkedin.com/in/lindsaytabas
REDESIGN THIS
POSTERHow would you use
C.R.A.P. to redesign this poster?
(10 minutes to sketch / 10 minutes of sharing)
www.tabasconsulting.com | http://www.linkedin.com/in/lindsaytabas
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.
www.tabasconsulting.com | http://www.linkedin.com/in/lindsaytabas
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)
www.tabasconsulting.com | http://www.linkedin.com/in/lindsaytabas
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”
www.tabasconsulting.com | http://www.linkedin.com/in/lindsaytabas
SKETCH
www.tabasconsulting.com | http://www.linkedin.com/in/lindsaytabas
SHARE
www.tabasconsulting.com | http://www.linkedin.com/in/lindsaytabas
ANY QUESTIONS?
www.tabasconsulting.com | http://www.linkedin.com/in/lindsaytabas
DOWNLOAD MY DRAWING RESOURCES
hkp://www.tabasconsul%ng.com/shop