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

2.
25 de Maio
2010

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

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

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

6.
Deliverables
Profissionais
Workflows
Equipas
Clientes
…

7.
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

8.
Solar System designed by Benjamin Orlovski from The Noun Project
Sistemas

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

10.
CSS
DESIGN VISUAL
OOCSS
Style Tiles
SMACSS
Style Guides
BEM

11.
Style
Tiles

12.
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/

13.
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/

14.
http://styletil.es/

15.
Style Guides

16.
http://bbybrandidentity.com

17.
http://bbybrandidentity.com

18.
http://bbybrandidentity.com

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

20.
Frame designed by Paul Stevens from The Noun Project
Não estamos
na indústria
da pintura.

21.
REDESIGN DRI WEBSITE
A pain in the arse.

22.
NO PROJECTO SEGUINTE
Componentize
that shit.

23.
Design Visual
Front-end

24.
Design Visual
Front-end

25.
Tiny Bootstraps,
for Every Client.
— Dave Rupert, Lead Developer @ Paravel
http://daverupert.com/2013/04/responsive-deliverables/

26.
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/

27.
PODÍAMOS PERSONALIZAR UMA FRAMEWORK…
http://getbootstrap.com

28.
PODÍAMOS PERSONALIZAR UMA FRAMEWORK…
http://foundation.zurb.com

29.
FRAMEWORKS/DESVANTAGENS
• Subscrevemos o estilo/estrutura/
nomenclatura de outro developer
• Podem ter elementos desnecessários
• Podem não fazer tudo aquilo
que precisamos

30.
CRIAR UM FRONT-END STYLE GUIDE…
http://pea.rs

31.
CRIAR UM FRONT-END STYLE GUIDE…
https://github.com/kneath/kss

32.
CRIAR UM FRONT-END STYLE GUIDE…
http://patternprimer.adactio.com

33.
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

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

35.
http://www.flickr.com/photos/blambar/8895445410
http://pattern-lab.info

36.
http://pattern-lab.info
… a collection of tools
to help you create
[and maintain] atomic
design systems.

37.
http://pattern-lab.info
… a collection of tools
to help you create
[and maintain] atomic
design systems.

38.
PATTERN LAB/ESSENCIAL
• Gerador de sites estáticos
orientado a sistemas
• Ferramenta de anotação
e documentação

39.
http://pattern-lab.info
… a collection of tools
to help you create
[and maintain] atomic
design systems.

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

41.
http://demo.pattern-lab.info

42.
ABSTRACT
CONCRETE
CREATORS
CLIENTS
Slide retirado da apresentação “Atomic Design” de Brad Frost

43.
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

44.
THIS IS
AWESOME

45.
Sistemas flexíveis
são o futuro do
Web Design.
http://betterwrappedinbacon.wordpress.com/2012/03/31/lego-blocks-are-killing-our-future/

46.
Temos que
mudar.

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

48.
Obrigado!
@pmoreirasilva