Transcript
Page 1: 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

Page 2: Designing Systems: An Approach to Responsive Web Design (Portuguese)

25 de Maio

!"#"

Page 4: Designing Systems: An Approach to Responsive Web Design (Portuguese)

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

Page 5: Designing Systems: An Approach to Responsive Web Design (Portuguese)

emsrems

Vídeosflexíveis

Progressive enhancementFeature detection

Off-canvas layoutsMobile first Imagens retina

Conditional loadingRESS

Page 6: Designing Systems: An Approach to Responsive Web Design (Portuguese)
Page 7: Designing Systems: An Approach to Responsive Web Design (Portuguese)

DeliverablesProfissionais

EquipasWorkflows

Clientes…

Page 8: Designing Systems: An Approach to Responsive Web Design (Portuguese)

Deliverables ProfissionaisEquipasWorkflows Clientes

5 PRINCÍPIOS DA FLEXIBILIDADE

ELEMENTOS DE UM PROJECTO WEB

Eficiência Consistência

Educação

Comunicação

Colaboração

Page 10: Designing Systems: An Approach to Responsive Web Design (Portuguese)

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

Page 11: Designing Systems: An Approach to Responsive Web Design (Portuguese)

DESIGN VISUALCSS

OOCSS

SMACSS

BEM

Style Tiles

Style Guides

Page 12: Designing Systems: An Approach to Responsive Web Design (Portuguese)

Style Tiles

Page 13: Designing Systems: An Approach to Responsive Web Design (Portuguese)

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

Page 14: Designing Systems: An Approach to Responsive Web Design (Portuguese)

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?

Page 15: Designing Systems: An Approach to Responsive Web Design (Portuguese)

http://styletil.es/

Page 16: Designing Systems: An Approach to Responsive Web Design (Portuguese)
Page 17: Designing Systems: An Approach to Responsive Web Design (Portuguese)
Page 18: Designing Systems: An Approach to Responsive Web Design (Portuguese)
Page 19: Designing Systems: An Approach to Responsive Web Design (Portuguese)
Page 20: Designing Systems: An Approach to Responsive Web Design (Portuguese)

Style Guides

Page 21: Designing Systems: An Approach to Responsive Web Design (Portuguese)

http

://b

bybr

andi

dent

ity.c

om

Page 22: Designing Systems: An Approach to Responsive Web Design (Portuguese)

http

://b

bybr

andi

dent

ity.c

om

Page 23: Designing Systems: An Approach to Responsive Web Design (Portuguese)

http

://b

bybr

andi

dent

ity.c

om

Page 24: Designing Systems: An Approach to Responsive Web Design (Portuguese)

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

http://vimeo.com/47171001

— Stephen Hay, Principal at Zero Interface

Page 26: Designing Systems: An Approach to Responsive Web Design (Portuguese)

REDESIGN DRI WEBSITE

A pain in the arse.

Page 27: Designing Systems: An Approach to Responsive Web Design (Portuguese)
Page 28: Designing Systems: An Approach to Responsive Web Design (Portuguese)
Page 29: Designing Systems: An Approach to Responsive Web Design (Portuguese)
Page 30: Designing Systems: An Approach to Responsive Web Design (Portuguese)
Page 31: Designing Systems: An Approach to Responsive Web Design (Portuguese)

NO PROJECTO SEGUINTE

Componentize that shit.

Page 32: Designing Systems: An Approach to Responsive Web Design (Portuguese)
Page 33: Designing Systems: An Approach to Responsive Web Design (Portuguese)
Page 34: Designing Systems: An Approach to Responsive Web Design (Portuguese)
Page 35: Designing Systems: An Approach to Responsive Web Design (Portuguese)
Page 36: Designing Systems: An Approach to Responsive Web Design (Portuguese)
Page 37: Designing Systems: An Approach to Responsive Web Design (Portuguese)
Page 38: Designing Systems: An Approach to Responsive Web Design (Portuguese)
Page 39: Designing Systems: An Approach to Responsive Web Design (Portuguese)

Design Visual

Front-end

Page 40: Designing Systems: An Approach to Responsive Web Design (Portuguese)

Design Visual

Front-end

Page 41: Designing Systems: An Approach to Responsive Web Design (Portuguese)

Tiny Bootstraps, for Every Client.

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

— Dave Rupert, Lead Developer @ Paravel

Page 42: Designing Systems: An Approach to Responsive Web Design (Portuguese)

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

Page 43: Designing Systems: An Approach to Responsive Web Design (Portuguese)

PODÍAMOS PERSONALIZAR UMA FRAMEWORK…

http://getbootstrap.com

Page 44: Designing Systems: An Approach to Responsive Web Design (Portuguese)

PODÍAMOS PERSONALIZAR UMA FRAMEWORK…

http://foundation.zurb.com

Page 45: Designing Systems: An Approach to Responsive Web Design (Portuguese)

FRAMEWORKS/DESVANTAGENS

• Subscrevemos o estilo/estrutura/nomenclatura de outro developer

• Podem ter elementos desnecessários

• Podem não fazer tudo aquiloque precisamos

Page 46: Designing Systems: An Approach to Responsive Web Design (Portuguese)

CRIAR UM FRONT-END STYLE GUIDE…

http://pea.rs

Page 47: Designing Systems: An Approach to Responsive Web Design (Portuguese)

CRIAR UM FRONT-END STYLE GUIDE…

https://github.com/kneath/kss

Page 48: Designing Systems: An Approach to Responsive Web Design (Portuguese)

CRIAR UM FRONT-END STYLE GUIDE…

http://patternprimer.adactio.com

Page 49: Designing Systems: An Approach to Responsive Web Design (Portuguese)

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

Page 50: Designing Systems: An Approach to Responsive Web Design (Portuguese)

SustentávelIntegrado

ColaborativoActualizadoEstruturado

PRECISAMOS DE UM MÉTODO

Page 52: Designing Systems: An Approach to Responsive Web Design (Portuguese)

http://pattern-lab.info

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

Page 53: Designing Systems: An Approach to Responsive Web Design (Portuguese)

http://pattern-lab.info

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

collection of tools

atomicdesign

Page 54: Designing Systems: An Approach to Responsive Web Design (Portuguese)

PATTERN LAB/ESSENCIAL

•Gerador de sites estáticos orientado a sistemas

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

Page 55: Designing Systems: An Approach to Responsive Web Design (Portuguese)

http://pattern-lab.info

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

collection of tools

atomicdesign

Page 56: Designing Systems: An Approach to Responsive Web Design (Portuguese)

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

Page 58: Designing Systems: An Approach to Responsive Web Design (Portuguese)
Page 59: Designing Systems: An Approach to Responsive Web Design (Portuguese)
Page 60: Designing Systems: An Approach to Responsive Web Design (Portuguese)
Page 61: Designing Systems: An Approach to Responsive Web Design (Portuguese)
Page 62: Designing Systems: An Approach to Responsive Web Design (Portuguese)
Page 63: Designing Systems: An Approach to Responsive Web Design (Portuguese)
Page 64: Designing Systems: An Approach to Responsive Web Design (Portuguese)
Page 65: Designing Systems: An Approach to Responsive Web Design (Portuguese)
Page 66: Designing Systems: An Approach to Responsive Web Design (Portuguese)
Page 67: Designing Systems: An Approach to Responsive Web Design (Portuguese)
Page 68: Designing Systems: An Approach to Responsive Web Design (Portuguese)
Page 69: Designing Systems: An Approach to Responsive Web Design (Portuguese)
Page 70: Designing Systems: An Approach to Responsive Web Design (Portuguese)
Page 71: Designing Systems: An Approach to Responsive Web Design (Portuguese)

ABSTRACT CONCRETE

CREATORS CLIENTS

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

Page 72: Designing Systems: An Approach to Responsive Web Design (Portuguese)
Page 73: Designing Systems: An Approach to Responsive Web Design (Portuguese)
Page 74: Designing Systems: An Approach to Responsive Web Design (Portuguese)
Page 75: Designing Systems: An Approach to Responsive Web Design (Portuguese)
Page 76: Designing Systems: An Approach to Responsive Web Design (Portuguese)
Page 77: Designing Systems: An Approach to Responsive Web Design (Portuguese)
Page 78: Designing Systems: An Approach to Responsive Web Design (Portuguese)

• 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

Page 79: Designing Systems: An Approach to Responsive Web Design (Portuguese)

THIS IS AWESOME

Page 80: Designing Systems: An Approach to Responsive Web Design (Portuguese)

Sistemas flexíveis são o futuro do

Web Design.

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

Page 81: Designing Systems: An Approach to Responsive Web Design (Portuguese)

Temos que mudar.

Page 82: Designing Systems: An Approach to Responsive Web Design (Portuguese)

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

Page 83: Designing Systems: An Approach to Responsive Web Design (Portuguese)

Obrigado!@pmoreirasilva