SlideShare a Scribd company logo
1 of 83
Download to read offline
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

More Related Content

What's hot

Utilizando o wordpress para aplicativos mobile
Utilizando o wordpress para aplicativos mobileUtilizando o wordpress para aplicativos mobile
Utilizando o wordpress para aplicativos mobileFellyph Cintra
 
Por que e Como Participar de Projetos Open Source - Julio Biason - Tchelinux ...
Por que e Como Participar de Projetos Open Source - Julio Biason - Tchelinux ...Por que e Como Participar de Projetos Open Source - Julio Biason - Tchelinux ...
Por que e Como Participar de Projetos Open Source - Julio Biason - Tchelinux ...Tchelinux
 
programming.success - carreira de programador
programming.success - carreira de programadorprogramming.success - carreira de programador
programming.success - carreira de programadorVinícius Krolow
 
Você não faz qualidade em Software - TDC Florianópolis 2020
Você não faz qualidade em Software - TDC Florianópolis 2020Você não faz qualidade em Software - TDC Florianópolis 2020
Você não faz qualidade em Software - TDC Florianópolis 2020Wagner Mendes Voltz Fusca
 
Estratégias de Build - Visual Studio Summit 2015
Estratégias de Build - Visual Studio Summit 2015Estratégias de Build - Visual Studio Summit 2015
Estratégias de Build - Visual Studio Summit 2015Ricardo Serradas
 
Take It To The Next Level
Take It To The Next LevelTake It To The Next Level
Take It To The Next LevelGabriel Laet
 
Estratégia para Desenvolvimento de Produtos Digitais
Estratégia para Desenvolvimento de Produtos DigitaisEstratégia para Desenvolvimento de Produtos Digitais
Estratégia para Desenvolvimento de Produtos DigitaisRobson Santos
 
Desenvolvimento de Jogos - #Aula01 - Introdução
Desenvolvimento de Jogos - #Aula01 - IntroduçãoDesenvolvimento de Jogos - #Aula01 - Introdução
Desenvolvimento de Jogos - #Aula01 - IntroduçãoErick L. F.
 
The Javascript Toolkit
The Javascript ToolkitThe Javascript Toolkit
The Javascript ToolkitRenan Martins
 
Desenvolvimento web com groovy e grails.
Desenvolvimento web com groovy e grails.Desenvolvimento web com groovy e grails.
Desenvolvimento web com groovy e grails.Bryan Ollivie
 

What's hot (20)

Utilizando o wordpress para aplicativos mobile
Utilizando o wordpress para aplicativos mobileUtilizando o wordpress para aplicativos mobile
Utilizando o wordpress para aplicativos mobile
 
Por que e Como Participar de Projetos Open Source - Julio Biason - Tchelinux ...
Por que e Como Participar de Projetos Open Source - Julio Biason - Tchelinux ...Por que e Como Participar de Projetos Open Source - Julio Biason - Tchelinux ...
Por que e Como Participar de Projetos Open Source - Julio Biason - Tchelinux ...
 
programming.success - carreira de programador
programming.success - carreira de programadorprogramming.success - carreira de programador
programming.success - carreira de programador
 
Você não faz qualidade em Software - TDC Florianópolis 2020
Você não faz qualidade em Software - TDC Florianópolis 2020Você não faz qualidade em Software - TDC Florianópolis 2020
Você não faz qualidade em Software - TDC Florianópolis 2020
 
Estratégias de Build - Visual Studio Summit 2015
Estratégias de Build - Visual Studio Summit 2015Estratégias de Build - Visual Studio Summit 2015
Estratégias de Build - Visual Studio Summit 2015
 
Take It To The Next Level
Take It To The Next LevelTake It To The Next Level
Take It To The Next Level
 
Patterns vs zombies
Patterns vs zombiesPatterns vs zombies
Patterns vs zombies
 
Estratégia para Desenvolvimento de Produtos Digitais
Estratégia para Desenvolvimento de Produtos DigitaisEstratégia para Desenvolvimento de Produtos Digitais
Estratégia para Desenvolvimento de Produtos Digitais
 
Seu codigo fede e voce nem sabia - 2020
Seu codigo fede e voce nem sabia - 2020Seu codigo fede e voce nem sabia - 2020
Seu codigo fede e voce nem sabia - 2020
 
Desenvolvimento de Jogos - #Aula01 - Introdução
Desenvolvimento de Jogos - #Aula01 - IntroduçãoDesenvolvimento de Jogos - #Aula01 - Introdução
Desenvolvimento de Jogos - #Aula01 - Introdução
 
The Javascript Toolkit
The Javascript ToolkitThe Javascript Toolkit
The Javascript Toolkit
 
PHP: Além do sitezinho
PHP: Além do sitezinhoPHP: Além do sitezinho
PHP: Além do sitezinho
 
Study jam - dia 1
Study jam  - dia 1Study jam  - dia 1
Study jam - dia 1
 
Desenvolvimento web com groovy e grails.
Desenvolvimento web com groovy e grails.Desenvolvimento web com groovy e grails.
Desenvolvimento web com groovy e grails.
 
A transformação ágil com Scrum
A transformação ágil com ScrumA transformação ágil com Scrum
A transformação ágil com Scrum
 
Um front end entre nós
Um front end entre nósUm front end entre nós
Um front end entre nós
 
Como ser um bom programador!
Como ser um bom programador!Como ser um bom programador!
Como ser um bom programador!
 
Zf campus party_2011
Zf campus party_2011Zf campus party_2011
Zf campus party_2011
 
Carreira de Desenvolvedor
Carreira de DesenvolvedorCarreira de Desenvolvedor
Carreira de Desenvolvedor
 
Post mortem: Crack In
Post mortem: Crack InPost mortem: Crack In
Post mortem: Crack In
 

Viewers also liked

Godine 1850 do 1860 su bile godine razvoja samuraja u nizim lestvicama
Godine 1850 do 1860 su bile godine razvoja samuraja u nizim lestvicamaGodine 1850 do 1860 su bile godine razvoja samuraja u nizim lestvicama
Godine 1850 do 1860 su bile godine razvoja samuraja u nizim lestvicamaIvan Ajdukovic
 
Energy conservation (in persian)
Energy conservation (in persian)Energy conservation (in persian)
Energy conservation (in persian)Mohsen Eslampanah
 
Suma y multiplicacion Programa en C++
Suma y multiplicacion Programa en C++Suma y multiplicacion Programa en C++
Suma y multiplicacion Programa en C++MarcelP16
 
Research method presentation
Research method presentationResearch method presentation
Research method presentationNeza Mohd
 
Historical research
Historical researchHistorical research
Historical researchNeza Mohd
 
Action research presentation
Action research presentationAction research presentation
Action research presentationmcheckler2009
 
История и виды денег
История и виды денегИстория и виды денег
История и виды денегAlexey Anderaiterov
 
1.11 indice con tabla de contenido
1.11 indice con tabla de contenido1.11 indice con tabla de contenido
1.11 indice con tabla de contenidoItzel Rodriguez
 
Personal Persona Project
Personal Persona ProjectPersonal Persona Project
Personal Persona ProjectAntonio Vincent
 
გრიგოლ ხანძთელის ნაკვალევზე
გრიგოლ ხანძთელის ნაკვალევზეგრიგოლ ხანძთელის ნაკვალევზე
გრიგოლ ხანძთელის ნაკვალევზეkostavanino
 
Its All about Me ( A. Roboostoff)
Its All about Me ( A. Roboostoff)Its All about Me ( A. Roboostoff)
Its All about Me ( A. Roboostoff)Antonio Vincent
 
Horror film poster survey for teenagers
Horror film poster survey for teenagers Horror film poster survey for teenagers
Horror film poster survey for teenagers jamilaa_
 
Частный инвестор в России: оправдается ли ставка на индивидуальные инвестицио...
Частный инвестор в России: оправдается ли ставка на индивидуальные инвестицио...Частный инвестор в России: оправдается ли ставка на индивидуальные инвестицио...
Частный инвестор в России: оправдается ли ставка на индивидуальные инвестицио...Alexey Anderaiterov
 
1.16 practica 4 segunda parte
1.16 practica 4 segunda parte1.16 practica 4 segunda parte
1.16 practica 4 segunda parteItzel Rodriguez
 

Viewers also liked (20)

Godine 1850 do 1860 su bile godine razvoja samuraja u nizim lestvicama
Godine 1850 do 1860 su bile godine razvoja samuraja u nizim lestvicamaGodine 1850 do 1860 su bile godine razvoja samuraja u nizim lestvicama
Godine 1850 do 1860 su bile godine razvoja samuraja u nizim lestvicama
 
Energy conservation (in persian)
Energy conservation (in persian)Energy conservation (in persian)
Energy conservation (in persian)
 
Google analytics, Analytics, Universal Analytics
Google analytics, Analytics, Universal AnalyticsGoogle analytics, Analytics, Universal Analytics
Google analytics, Analytics, Universal Analytics
 
Suma y multiplicacion Programa en C++
Suma y multiplicacion Programa en C++Suma y multiplicacion Programa en C++
Suma y multiplicacion Programa en C++
 
Research method presentation
Research method presentationResearch method presentation
Research method presentation
 
Cinco
CincoCinco
Cinco
 
Historical research
Historical researchHistorical research
Historical research
 
Action research presentation
Action research presentationAction research presentation
Action research presentation
 
История и виды денег
История и виды денегИстория и виды денег
История и виды денег
 
Ofcom
OfcomOfcom
Ofcom
 
1.11 indice con tabla de contenido
1.11 indice con tabla de contenido1.11 indice con tabla de contenido
1.11 indice con tabla de contenido
 
Personal Persona Project
Personal Persona ProjectPersonal Persona Project
Personal Persona Project
 
გრიგოლ ხანძთელის ნაკვალევზე
გრიგოლ ხანძთელის ნაკვალევზეგრიგოლ ხანძთელის ნაკვალევზე
გრიგოლ ხანძთელის ნაკვალევზე
 
Its All about Me ( A. Roboostoff)
Its All about Me ( A. Roboostoff)Its All about Me ( A. Roboostoff)
Its All about Me ( A. Roboostoff)
 
Horror film poster survey for teenagers
Horror film poster survey for teenagers Horror film poster survey for teenagers
Horror film poster survey for teenagers
 
All about Adwords(PPC) for beginners, Adwords ppt, PPC
All about Adwords(PPC) for beginners, Adwords ppt, PPC All about Adwords(PPC) for beginners, Adwords ppt, PPC
All about Adwords(PPC) for beginners, Adwords ppt, PPC
 
Частный инвестор в России: оправдается ли ставка на индивидуальные инвестицио...
Частный инвестор в России: оправдается ли ставка на индивидуальные инвестицио...Частный инвестор в России: оправдается ли ставка на индивидуальные инвестицио...
Частный инвестор в России: оправдается ли ставка на индивидуальные инвестицио...
 
Data Handling
Data HandlingData Handling
Data Handling
 
منظومة الدعاية تحت حكم بن علي - الكتاب الأسود
منظومة الدعاية تحت حكم بن علي - الكتاب الأسودمنظومة الدعاية تحت حكم بن علي - الكتاب الأسود
منظومة الدعاية تحت حكم بن علي - الكتاب الأسود
 
1.16 practica 4 segunda parte
1.16 practica 4 segunda parte1.16 practica 4 segunda parte
1.16 practica 4 segunda parte
 

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

Scrum e Plataforma Microsoft
Scrum e Plataforma MicrosoftScrum e Plataforma Microsoft
Scrum e Plataforma MicrosoftFernando Ferreira
 
Entendendo os microframeworks em PHP
Entendendo os microframeworks em PHPEntendendo os microframeworks em PHP
Entendendo os microframeworks em PHPfelipe bastosweb
 
Material Design - do smartphone ao desktop
Material Design - do smartphone ao desktopMaterial Design - do smartphone ao desktop
Material Design - do smartphone ao desktopHillary Sousa
 
Os príncipios por trás do DevOps
Os príncipios por trás do DevOpsOs príncipios por trás do DevOps
Os príncipios por trás do DevOpsGuilherme Cardoso
 
LIVRO PROPRIETÁRIO - METODOLOGIAS DE DESENVOLVIMENTO DE SISTEMAS
LIVRO PROPRIETÁRIO - METODOLOGIAS DE DESENVOLVIMENTO DE SISTEMASLIVRO PROPRIETÁRIO - METODOLOGIAS DE DESENVOLVIMENTO DE SISTEMAS
LIVRO PROPRIETÁRIO - METODOLOGIAS DE DESENVOLVIMENTO DE SISTEMASOs Fantasmas !
 
Além do MVP com PHP - TDC POA 2015
Além do MVP com PHP  - TDC POA 2015Além do MVP com PHP  - TDC POA 2015
Além do MVP com PHP - TDC POA 2015Romeu Mattos
 
Tópicos Emergentes - DevOps
Tópicos Emergentes - DevOpsTópicos Emergentes - DevOps
Tópicos Emergentes - DevOpsSaulo Lopes
 
Apresentação do Projeto PRIME SCRUM. trabalho final do curso de Análise e Des...
Apresentação do Projeto PRIME SCRUM. trabalho final do curso de Análise e Des...Apresentação do Projeto PRIME SCRUM. trabalho final do curso de Análise e Des...
Apresentação do Projeto PRIME SCRUM. trabalho final do curso de Análise e Des...Thiago Barros, PSM
 
Gerenciamento de equipes no desenvolvimento de software
Gerenciamento de equipes no desenvolvimento de softwareGerenciamento de equipes no desenvolvimento de software
Gerenciamento de equipes no desenvolvimento de softwareRoberto Brandini
 
Design System: Dominando o Design at Scale
Design System: Dominando o Design at ScaleDesign System: Dominando o Design at Scale
Design System: Dominando o Design at ScaleGuilherme Gonzalez
 
Design System: Criando padrões de design para tomadas de decisões mais alinhadas
Design System: Criando padrões de design para tomadas de decisões mais alinhadasDesign System: Criando padrões de design para tomadas de decisões mais alinhadas
Design System: Criando padrões de design para tomadas de decisões mais alinhadasMJV Technology & Innovation Brasil
 
Introdução a Modelagem
Introdução a ModelagemIntrodução a Modelagem
Introdução a ModelagemRodrigo Branas
 
Porque você precisa de uma estratégia de QA e precisa disso AGORA!
Porque você precisa de uma estratégia de QA e precisa disso AGORA!Porque você precisa de uma estratégia de QA e precisa disso AGORA!
Porque você precisa de uma estratégia de QA e precisa disso AGORA!Daniel Carvalhinho
 
Crystalfinal 100906101303-phpapp02
Crystalfinal 100906101303-phpapp02Crystalfinal 100906101303-phpapp02
Crystalfinal 100906101303-phpapp02Aldemir Almeida
 
UX no Limite
UX no LimiteUX no Limite
UX no Limiteuxlocaweb
 
Interação Humano Computador Capítulo 8 - Antecipação
Interação Humano Computador Capítulo 8 - AntecipaçãoInteração Humano Computador Capítulo 8 - Antecipação
Interação Humano Computador Capítulo 8 - AntecipaçãoWellington Oliveira
 

Similar to Designing Systems: An Approach to Responsive Web Design (Portuguese) (20)

Scrum e Plataforma Microsoft
Scrum e Plataforma MicrosoftScrum e Plataforma Microsoft
Scrum e Plataforma Microsoft
 
Entendendo os microframeworks em PHP
Entendendo os microframeworks em PHPEntendendo os microframeworks em PHP
Entendendo os microframeworks em PHP
 
Material Design - do smartphone ao desktop
Material Design - do smartphone ao desktopMaterial Design - do smartphone ao desktop
Material Design - do smartphone ao desktop
 
Os príncipios por trás do DevOps
Os príncipios por trás do DevOpsOs príncipios por trás do DevOps
Os príncipios por trás do DevOps
 
LIVRO PROPRIETÁRIO - METODOLOGIAS DE DESENVOLVIMENTO DE SISTEMAS
LIVRO PROPRIETÁRIO - METODOLOGIAS DE DESENVOLVIMENTO DE SISTEMASLIVRO PROPRIETÁRIO - METODOLOGIAS DE DESENVOLVIMENTO DE SISTEMAS
LIVRO PROPRIETÁRIO - METODOLOGIAS DE DESENVOLVIMENTO DE SISTEMAS
 
Além do MVP com PHP - TDC POA 2015
Além do MVP com PHP  - TDC POA 2015Além do MVP com PHP  - TDC POA 2015
Além do MVP com PHP - TDC POA 2015
 
além do mvp com php
além do mvp com phpalém do mvp com php
além do mvp com php
 
Tópicos Emergentes - DevOps
Tópicos Emergentes - DevOpsTópicos Emergentes - DevOps
Tópicos Emergentes - DevOps
 
Apresentacao artigo final
Apresentacao artigo finalApresentacao artigo final
Apresentacao artigo final
 
Apresentação do Projeto PRIME SCRUM. trabalho final do curso de Análise e Des...
Apresentação do Projeto PRIME SCRUM. trabalho final do curso de Análise e Des...Apresentação do Projeto PRIME SCRUM. trabalho final do curso de Análise e Des...
Apresentação do Projeto PRIME SCRUM. trabalho final do curso de Análise e Des...
 
Gerenciamento de equipes no desenvolvimento de software
Gerenciamento de equipes no desenvolvimento de softwareGerenciamento de equipes no desenvolvimento de software
Gerenciamento de equipes no desenvolvimento de software
 
Design Patterns - Com Java
Design Patterns  - Com JavaDesign Patterns  - Com Java
Design Patterns - Com Java
 
Design System: Dominando o Design at Scale
Design System: Dominando o Design at ScaleDesign System: Dominando o Design at Scale
Design System: Dominando o Design at Scale
 
Design System: Criando padrões de design para tomadas de decisões mais alinhadas
Design System: Criando padrões de design para tomadas de decisões mais alinhadasDesign System: Criando padrões de design para tomadas de decisões mais alinhadas
Design System: Criando padrões de design para tomadas de decisões mais alinhadas
 
Introdução a Modelagem
Introdução a ModelagemIntrodução a Modelagem
Introdução a Modelagem
 
Porque você precisa de uma estratégia de QA e precisa disso AGORA!
Porque você precisa de uma estratégia de QA e precisa disso AGORA!Porque você precisa de uma estratégia de QA e precisa disso AGORA!
Porque você precisa de uma estratégia de QA e precisa disso AGORA!
 
Métodos Ágeis - Aula02
Métodos Ágeis - Aula02Métodos Ágeis - Aula02
Métodos Ágeis - Aula02
 
Crystalfinal 100906101303-phpapp02
Crystalfinal 100906101303-phpapp02Crystalfinal 100906101303-phpapp02
Crystalfinal 100906101303-phpapp02
 
UX no Limite
UX no LimiteUX no Limite
UX no Limite
 
Interação Humano Computador Capítulo 8 - Antecipação
Interação Humano Computador Capítulo 8 - AntecipaçãoInteração Humano Computador Capítulo 8 - Antecipação
Interação Humano Computador Capítulo 8 - Antecipação
 

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