Hacking Design

Devan H. & Gaby Moreno

http://tiny.cc/hackingdesign

Design

Design & You

Some helpful resources ;D

What we're not covering

  • Design Research
  • Ideating
  • Iterating

Design & You

UX/UI Design

Flow

Layout

Layout carefully places individual parts in relationship to the whole and holds them firmly in space.

Let's look at some common layouts for activity feeds.

pttrns.com

Typography

Typography is the atomic element of good interface design. It colors the words in our language and shapes their meaning.

Some good sources of free fonts:

Four Techniques for Combining Fonts

Lost Type

Use & Modify

Google Fonts

Iconography

Simply representing ideas without the use of words

Ico Moon

The Noun Project

Google Material Design Icons

Font Awesome

Color

Helps convey what the application feels like, it’s personality and brand

Some color resources:

Colourlovers

UIGradients

IBM Design Language Color

Components

Make everything as loosely coupled as possible so it can be used in different places

Animation

Animation is the body language of an app

ORIENTATION

AWARENESS

Navigation

Storytelling

Focus

Meaning

Personality

Correlation

Simple Keyframes

See the Pen GpEeBg by Devan Huapaya (@devanh) on CodePen.

Some Design Languages

Design Resources - Chen Ye

Web Field Manual

That is all!