Scribd
Upload
15 views118 pages

Design Class 2

Uploaded by

lecose1777
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
15 views118 pages

Design Class 2

Uploaded by

lecose1777
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 118

DESIGNING FOR THE

DIGITAL ECOSYSTEM
Cornell Tech 2016
Heather Luipold
Adam Katz
Matt Delbridge
CLASS 2:
DESIGN BASICS
WHAT ARE THE
COMPONENTS OF DESIGN?
TYPOGRAPHY COMPOSITION

BRANDING
TYPOGRAPHY COMPOSITION

BRANDING
A BRIEF HISTORY OF
THE PRINTED LETTER
TYPOGRAPHY COMPOSITION

BRANDING
WHAT MAKES A BRAND

LOGO /
COLOR WRITING /
IDENTITY + TYPOGRAPHY + + + CONSISTENCY
PALETTE ATTITUDE
SYSTEM
WHAT MAKES A BRAND

LOGO /
COLOR WRITING /
IDENTITY + TYPOGRAPHY + + + UI/UX
PALETTE ATTITUDE
SYSTEM
SOME OF THE FIRST ICONS DESIGNED FOR SCREENS.
TYPOGRAPHY COMPOSITION

BRANDING
THE Z-EFFECT
ALIGNMENT
SCALE
SO YOU NEED TO
DESIGN A PRODUCT?
THE DESIGN PROCESS
A BIRD'S EYE VIEW

DESIGN SCREENS

USER EXPERIENCE MAP WIREFRAME PROTOTYPE

CREATE BRAND
USER EXPERIENCE MAP
WIREFRAME

BUT MORE ON THIS LATER


BUT MORE ON THAT LATER
LET’S TALK DESIGN BASICS
GRIDS
WHY USE A GRID?

IT HELPS YOU LAYOUT A SCREEN.


IT HELPS YOU SCALE TO DIFFERENT SCREEN SIZES.
2 Columns 3 Columns 4+ Columns
CHOSE THE SIZE OF YOUR ARTBOARD
CHOSE THE NUMBER OF COLUMNS AND GUTTERS
SET A BASELINE GRID
LAYOUT YOUR CONTENT
ADJUST YOUR COLUMNS FOR THE NEXT SCREEN SIZE
SET A BASELINE GRID
LAYOUT YOUR CONTENT
FIND THE GRID THAT WORKS FOR YOU

11 Column Grid 16 Column Grid


GRID RESOURCES
960.gs
Sketch: Responsive Grid Template
Sketch Templates
GuideGuide
Illustrator: InDesign:
Split Into Grid + Guides: Link Columns and Baseline Grid: Link
Grid Lover
TYPOGRAPHY
HEADLINE This is a headline.
SUBHEADLINE This is a subheadline

BODY COPY Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam.

CTA (CALL TO ACTION) Get started now


BODYCOPY BEST PRACTICES

Type Size: Line height:


WARNING:

THESE ARE NOT HARD AND FAST RULES,


JUST BEST PRACTICES AND A GOOD PLACE TO START.
Use as few typefaces as possible.
Find typefaces from the same family
(or at least play nicely together).
Start with the body copy.
Use well-drawn typefaces.
Less (copy) is more (digestible).
Hierarchy is key.
Create a repeatable structure.
IN-PRODUCT TYPOGRAPHY
TYPE SHOULD BE SIMPLE AND READABLE.

MOST LIKELY A GEOMETRIC SANS-SERIF.

HAS TO WORK AT SMALL SIZES.

ONE TYPEFACE WITH MULTIPLE WEIGHTS SHOULD BE PLENTY.


Helvetica
FF Clan
Helvetica Neue
Akkurat
Helvetica Neue for IOS, Roboto for Android, Freight Sans
San Francisco
Lato
Museo Slab, Helvetica
MARKETING TYPOGRAPHY
CONSIDER WHAT YOU ARE TRYING TO COMMUNICATE
WITH YOUR TYPOGRAPHY DECISION.
Google Fonts Font Squirrel
Typewolf: The Definitive Guide to Free Fonts
COLOR
COLOR CAN HAVE A STRONG IMPACT
ON HOW SOMEONE INTERPRETS YOUR BRAND.
LET’S BREAK DOWN A FEW SITES
HEADLINE
SETS THE TONE AND TELLS VISITORS WHAT TO EXPECT.

STRAIGHTFORWARD CONVERSATIONAL IMPACTFUL


SUBHEADLINE
HELPS US UNDERSTAND MORE ABOUT YOUR PRODUCT.

SCALE SHIFT COLOR SHIFT WEIGHT AND SCALE SHIFT


PRIMARY CTA
SHOW ME THE FIRST THING YOU WANT ME TO DO AND TELL ME WHAT IT WILL DO.

COLORED TEXT BUTTON BUTTON

ARROW TO DRIVE HOME


THAT IT’S CLICKABLE
SECONDARY CTA
WHAT ELSE CAN I DO HERE?

COLORED TEXT TEXT WITH ICON BUTTON WITH COLOR SHIFT

ARROW TO DRIVE HOME


THAT IT’S CLICKABLE
BRANDING
WHO ARE YOU?

LOGO WORD MARK WORDMARK


NAVIGATION
HOW DO I GET AROUND?

TOP NAV LINKS TOP NAV

HAMBURGER MENU FOR OVERFLOW


SCROLLING PROMPT
IS THERE MORE ON THIS PAGE?

MORE CONTENT VISIBLE DOWN ARROW MORE CONTENT VISIBLE


SCROLLING PROMPT
IS THERE MORE ON THIS PAGE?

MORE CONTENT VISIBLE DOWN ARROW MORE CONTENT VISIBLE


LET’S ZOOM IN A BIT
Tempos

Open Sans
Typefaces Styles Colors

Tempos
H1: 72px
H2: 32px
H3: 24px

Open Sans

P1: 24px
P2: 14px
H2

P1
H3

P2
H2

P1
H2

P1
Typefaces Styles Colors

Tempos
H1: 64px 44px
H2: 32px 24px
H3: 24px 21px

Open Sans

P1: 24px
P2: 14px
BUT THIS IS JUST THE START,
AS WITH ANYTHING GOOD DESIGN TAKES
PRACTICE, PRACTICE, PRACTICE
TUESDAY:

DESIGN A ONE PAGE WEB-SITE PROMOTING YOUR FINAL PROJECT IDEA.


MAKE A MOBILE AND DESKTOP VERSION.
TYPOGRAPHY RESOURCES

→ →

→
→

→
→

→ →

→
RESPONSIVE RESOURCES
COLOR RESOURCES
APP DESIGN INSPIRATION
QUESTIONS?

You might also like