designing systems: an approach to responsive web design (portuguese)

Pedro Moreira da Silva@pmoreirasilva

DesigningSystems

Industry Sessions by EDIT. #1: Responsive Design • 29/11/2013 • Lisbon, Portugal

25 de Maio

!"#"

http://alistapart.com/article/responsive-web-design

Pepp

er d

esig

ned

by T

erri

Toom

bs fr

om !

e No

un P

roje

ct

3Grelhas fluídas

Imagens flexíveisMedia queries

emsrems

Vídeosflexíveis

Progressive enhancementFeature detection

Off-canvas layoutsMobile first Imagens retina

Conditional loadingRESS

DeliverablesProfissionais

EquipasWorkflows

Clientes…

Deliverables ProfissionaisEquipasWorkflows Clientes

5 PRINCÍPIOS DA FLEXIBILIDADE

ELEMENTOS DE UM PROJECTO WEB

Eficiência Consistência

Educação

Comunicação

Colaboração

Sola

r Sys

tem

des

igne

d by

Ben

jam

in O

rlovs

ki fr

om !

e No

un P

roje

ct

Sistemas

Um sistema é um conjunto de componentes que interagem ou são interdependentes, formando um todo integrado.

DESIGN VISUALCSS

OOCSS

SMACSS

BEM

Style Tiles

Style Guides

Style Tiles

Style Tiles are similar to the paint chips and fabric swatches an interior designer gets approval on before designing a room.

http://styletil.es/

— Samantha Warren, Designer @ Twitter

An interior designer doesn't design three different rooms for a client at the first kick-off meeting

http://styletil.es/

— Samantha Warren, Designer @ Twitter

, so why do Webdesigners design three different webpage mockups?

http://styletil.es/

Style Guides

http

://b

bybr

andi

dent

ity.c

om

http

://b

bybr

andi

dent

ity.c

om

http

://b

bybr

andi

dent

ity.c

om

We’re not designing pages.We’re designing systems of components.

http://vimeo.com/47171001

— Stephen Hay, Principal at Zero Interface

Fram

e de

sign

ed b

y Pa

ul S

teve

ns fr

om !

e No

un P

roje

ct

Não estamos na indústria da pintura.

REDESIGN DRI WEBSITE

A pain in the arse.

NO PROJECTO SEGUINTE

Componentize that shit.

Design Visual

Front-end

Design Visual

Front-end

Tiny Bootstraps, for Every Client.

http://daverupert.com/2013/04/responsive-deliverables/

— Dave Rupert, Lead Developer @ Paravel

Responsive deliverables should look a lot like fully-functioning Twitter Bootstrap-style systems custom tailored for your clients’ needs.

http://daverupert.com/2013/04/responsive-deliverables/

— Dave Rupert, Lead Developer @ Paravel

PODÍAMOS PERSONALIZAR UMA FRAMEWORK…

http://getbootstrap.com

PODÍAMOS PERSONALIZAR UMA FRAMEWORK…

http://foundation.zurb.com

FRAMEWORKS/DESVANTAGENS

• Subscrevemos o estilo/estrutura/nomenclatura de outro developer

• Podem ter elementos desnecessários

• Podem não fazer tudo aquiloque precisamos

CRIAR UM FRONT-END STYLE GUIDE…

http://pea.rs

CRIAR UM FRONT-END STYLE GUIDE…

https://github.com/kneath/kss

CRIAR UM FRONT-END STYLE GUIDE…

http://patternprimer.adactio.com

FRONT-END STYLE GUIDES/DESVANTAGENS

• Não é rápido desenvolvê-los

• Tratados como um projecto à parte

• Normalmente criados após o projecto

• Geralmente demasiado abstractos

• Úteis apenas para designers/developers

• Muitas vezes incompletos ou desactualizados

• Falta-lhes sentido de estrutura

SustentávelIntegrado

ColaborativoActualizadoEstruturado

PRECISAMOS DE UM MÉTODO

http

://w

ww

.flic

kr.c

om/p

hoto

s/bl

amba

r/88

9544

5410

http://pattern-lab.info

http://pattern-lab.info

… a collection of tools to help you create [and maintain] atomic design systems.

http://pattern-lab.info

… a collection of tools to help you create [and maintain] atomic design systems.

collection of tools

atomicdesign

PATTERN LAB/ESSENCIAL

•Gerador de sites estáticos orientado a sistemas

•Ferramenta de anotação e documentação

http://pattern-lab.info

… a collection of tools to help you create [and maintain] atomic design systems.

collection of tools

atomicdesign

Slide retirado da apresentação “Atomic Design” de Brad Frost

http://demo.pattern-lab.info

ABSTRACT CONCRETE

CREATORS CLIENTS

Slide retirado da apresentação “Atomic Design” de Brad Frost

• Serve como hub para todo o projecto

• Ferramenta útil para todos

• Facilmente passamos do abstracto ao concreto

• HTML/CSS/JS à nossa maneira

• Promove consistência e coerência

• Estimula flexibilidade e pensar em sistemas

• Documentação sempre actualizada

PORQUÊ O PATTERN LAB

THIS IS AWESOME

Sistemas flexíveis são o futuro do

Web Design.

http://betterwrappedinbacon.wordpress.com/2012/03/31/lego-blocks-are-killing-our-future/

Temos que mudar.

Trying to ‘make sense’ of change itself will become our basic industry.— Victor Papanek, Designer

Obrigado!@pmoreirasilva