designing systems: an approach to responsive web design (portuguese)
DESCRIPTION
Video: http://vimeo.com/81200786 An approach to Responsive Web Design by thinking in systems of components and bringing Visual Design and Front-end Development together. In the same way that front-end developers use modular CSS methodologies (such as OOCSS, BEM, or SMACSS), visual designers should also “componentize” their deliverables (with Style Tiles and Style Guides). Furthermore, a truly efficient Responsive Web Design workflow (or just Web Design for that matter) places developers and designers side by side, working in tandem. The presentation explores some of the possibilities that we have to accomplish this today, like Pattern Lab (http://pattern-lab.info). — Slide deck presented at “Industry Sessions by EDIT. #1: Responsive Design” (http://www.edit.com.pt/#noticias/edit-industry-sessions-responsive-design.html), November 29th 2013, in Lisbon, Portugal.TRANSCRIPT
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?
Style Guides
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…
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
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