Pedro Moreira da Silva @pmoreirasilva Designing Systems Industry Sessions by EDIT. #1: Responsive Design • 29/11/2013 • Lisbon, Portugal
Pedro Moreira da Silva@pmoreirasilva
DesigningSystems
Industry Sessions by EDIT. #1: Responsive Design • 29/11/2013 • Lisbon, Portugal
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
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.
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?
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.
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
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
Sistemas flexíveis são o futuro do
Web Design.
http://betterwrappedinbacon.wordpress.com/2012/03/31/lego-blocks-are-killing-our-future/