DESIGNING POSSIBILITIES UI + CSSTools and techniques for front-end and product design

1

2

GOALS FOR TODAY

To show different ways of designing interfaces

To present a panorama of the current state of front-end/css tools

3

HTML + CSS

4

FOUNDATION DEMO

5

DECIDING X DESIGNING IN THE BROWSER

Performance Budget

Visual Inventory

Element collage

7

FOUNDATION

SASSMATERIAL DESIGN

BOURBON/NEAT/REFFILS/BITTERS

PATTERN LAB

Tool for rapid prototyping

System/Concept/Philosophy

Language

Library

System/Strategy

8

MATERIAL DESIGN System/Concept

MDL Tool for prototyping

MATERIALIZE Framework

FOUNDATION

9

MATERIAL DESIGN

10

MATERIALIZE

11

SASS

12

BOURBON/NEAT/BITTERS/REFILLS

13

PATTERN LAB

14

bdick@thoughtworks.com ezuccolo@thoughtworks.com

THANK YOU