Designing
Systems
Pedro Moreira da Silva
@pmoreirasilva
Industry Sessions by EDIT. #1: Responsive Design • 29/11/2013 • Lisbon, Portugal

25 de Maio
2010

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

Pepper designed by Terri Toombs from The Noun Project
Grelhas fluídas
Imagens flexíveis
Media queries
3

ems
rems RESS
Conditional loading
Progressive enhancement
Feature detection Vídeos
Off-canvas layouts flexíveis
Mobile first Imagens retina

Deliverables
Profissionais
Workflows
Equipas
Clientes
…

ELEMENTOS DE UM PROJECTO WEB
Deliverables Profissionais
Workflows Equipas Clientes
5 PRINCÍPIOS DA FLEXIBILIDADE
Eficiência
Consistência Comunicação
Educação
Colaboração

Solar System designed by Benjamin Orlovski from The Noun Project
Sistemas

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

CSS
DESIGN VISUAL
OOCSS
Style Tiles
SMACSS
Style Guides
BEM

Style
Tiles

Style Tiles are similar to the
paint chips and fabric
swatches an interior
designer gets approval on
before designing a room.
— Samantha Warren, Designer @ Twitter
http://styletil.es/

An interior designer doesn't
design three different rooms
for a client at the first kick-off
meeting, so why do Web
designers design three
different webpage mockups?
— Samantha Warren, Designer @ Twitter
http://styletil.es/

http://styletil.es/

Style Guides

http://bbybrandidentity.com

http://bbybrandidentity.com

http://bbybrandidentity.com

We’re not designing pages.
We’re designing systems
of components.
— Stephen Hay, Principal at Zero Interface
http://vimeo.com/47171001

Frame designed by Paul Stevens from The Noun Project
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.
— Dave Rupert, Lead Developer @ Paravel
http://daverupert.com/2013/04/responsive-deliverables/

Responsive deliverables should
look a lot like fully-functioning
Twitter Bootstrap-style
systems custom tailored for
your clients’ needs.
— Dave Rupert, Lead Developer @ Paravel
http://daverupert.com/2013/04/responsive-deliverables/

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 aquilo
que 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

PRECISAMOS DE UM MÉTODO
Sustentável
Integrado
Colaborativo
Actualizado
Estruturado

http://www.flickr.com/photos/blambar/8895445410
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.

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.

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

PORQUÊ O PATTERN LAB
•
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

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