SlideShare uma empresa Scribd logo
1 de 25
Tendência do Design digital em 2013 e Flat Design
Evolução do mercado – Porque agora temos tendências?
- O mercado vem se enchendo com bons designers.
- Antigamente quem ditava a moda eram os sites das grandes empresas.
- Dificuldade na busca por referências e no retorno de críticas e sugestões.
- Dificuldade na troca de informações e a comunicação entre profissionais.
- Ampliação da comunidade de design e troca de informações na internet.
Em 2013 tem se falado muito em Flat Design,
mas como essa tendência foi aparecer?
- Metro Design
- Windows Mobile
- Windows 8
Metro Design?
- Nova linguagem de design utilizada pela Microsoft
- Conceito baseado nas sinalizações de transportes públicos
- Foco completo no conteúdo e na informação
- Eliminar toda a interferência gráfica que podem tirar o foco do usuário
- Dizer o máximo possível com o mínimo possível e o mais rápido possível.
O Passado
A tendência Flat é super interessante, principalmente para quem estava
cansado do modelo skeuomorphic design, onde o conceito é dar realidade aos elementos,
com sobra, relevo, profundidade, brilhos etc. Mas voltando ao passado, vemos que o
Flat Design não é algo novo
Movimento De Stijl
Repare nesta arte de Theo van Doesburg’s
“Arithmetische Compositie”, de 1924
Esta nova idéia é ignorar os
detalhes da aparência, ou seja, a
forma natural e a cor. Pelo
contrário, ele deve encontrar a sua
expressão na abstração da forma
e cor, isto é, em linha reta e a cor
primaria claramente definida.
Piet Mondrian
Integrante do movimento De Stijl
“
Alto Modernismo
Surgiu nos anos 1950 / 70, e nos traz mais traços do que atualmente chamamos de Flat Design
Otl Aicher:
Em particular o seu design para as
olimpíadas de Munique em 1972.
Richard Lohse Josef Müller-Brockmann
Esse estilo te lembra alguma coisa?
A atualidade
A Microsoft buscava requerimentos visuais específicos que focavam na alta legibilidade e na alta
percepção das informações, eliminando as distrações desnecessárias.
O ideal é que o usuário consiga perceber de forma rápida e clara as informações, e obter idicações
precisas sobre as ações necessárias. Entretanto, a aparência deve ser agradável, limpa e deixar uma
boa impressão. Sempre com foco no conteúdo.
Impacto no mercado
O impacto no mercado foi tão grande que uma nova tendência de design surgiu em volta desta
linguagem, a Flat Design. E para confirmar a força deste novo conceito, a Apple (que antes ditava as
tendências) acabou tendo que se adaptar, e acabou se renovando com seu iOS7
Impacto no mercado
O impacto no mercado foi tão grande que uma nova tendência de design surgiu em volta desta
linguagem, a Flat Design. E para confirmar a força deste novo conceito, a Apple (que antes ditava as
tendências) acabou tendo que se adaptar, e acabou se renovando com seu iOS7
Flat Design
- A maioria dos designers ama ou odeia, mas é uma
tendência que veio forte.
- É muito legal, mas não deve ser usada para tudo.
- Flat design é baseado em 2D e, é chamado assim por causa
dos shapes. Não possui drop-shadows, bevels, embossing,
gradients ou qualquer outra maneira de inserir relevos ou brilhos.
O elemento não deve parecer realista.
Flat Design
- O design Flat funciona porque ele dá uma aparência bem mais
clean a sua interface, fazendo o usuário ter uma comrpeensão
melhor na hierarquia dos elementos, deixando seu projeto mais
fácil de usar e interagir.
- Mesmo sendo utilizado cada vez mais em sites, essa tendência
vem sendo mais popular em mobiles, principalmente por estes
terem telas pequenas e muitas vezes com tamanhos diferentes,
um aplicativo baseado em Flat design é muito mais fácil de
se utilizar.
Muito desta nova tendência tem
como base o avanço da tencologia,
principalmente com a chegada do
HTML5 e CSS3. Com a evolução
desta área muitos recursos e
interatividades foram acrescentados
ao desenvolvimento
HTML5 / CSS3
Referências em Mobiles
Flat design - Tendências do design digital em 2013
Flat design - Tendências do design digital em 2013
Flat design - Tendências do design digital em 2013
Flat design - Tendências do design digital em 2013
Flat design - Tendências do design digital em 2013
Flat design - Tendências do design digital em 2013
Flat design - Tendências do design digital em 2013
Flat design - Tendências do design digital em 2013
Flat design - Tendências do design digital em 2013

Mais conteúdo relacionado

Destaque

Slide das fotos e objetivos dos encontros no CEI Olegário João Clemes.
Slide das fotos e objetivos dos encontros no CEI Olegário João Clemes.Slide das fotos e objetivos dos encontros no CEI Olegário João Clemes.
Slide das fotos e objetivos dos encontros no CEI Olegário João Clemes.UnivaliPibid
 
اللغة العربية
اللغة العربيةاللغة العربية
اللغة العربيةNoonua Alhamed
 
Virus Informáticos
Virus Informáticos Virus Informáticos
Virus Informáticos Paula Romero
 
Jornada de Direito Civil 97 a 119
Jornada de Direito Civil 97 a 119Jornada de Direito Civil 97 a 119
Jornada de Direito Civil 97 a 119omelhordodireito
 
Atividades 2 PowerPoint
Atividades 2 PowerPointAtividades 2 PowerPoint
Atividades 2 PowerPointYuriVargas893
 
Slideshare...!
Slideshare...!Slideshare...!
Slideshare...!cintyacaro
 
diferenças e convergências entre a Ead e a Eol.
 diferenças e convergências entre a Ead e a Eol.  diferenças e convergências entre a Ead e a Eol.
diferenças e convergências entre a Ead e a Eol. Solange Gomes
 
aniversário da Laura
aniversário da Lauraaniversário da Laura
aniversário da LauraVic17072001
 
Linha do Tempo - Projeto Treino de Basqute
Linha do Tempo - Projeto Treino de BasquteLinha do Tempo - Projeto Treino de Basqute
Linha do Tempo - Projeto Treino de BasquteMarcos Fernandes
 
Redes de ordenadores
Redes de ordenadoresRedes de ordenadores
Redes de ordenadoresambra toro
 
Boulevard Monde Bônus
Boulevard Monde BônusBoulevard Monde Bônus
Boulevard Monde BônusRoberto Junior
 

Destaque (20)

Slide das fotos e objetivos dos encontros no CEI Olegário João Clemes.
Slide das fotos e objetivos dos encontros no CEI Olegário João Clemes.Slide das fotos e objetivos dos encontros no CEI Olegário João Clemes.
Slide das fotos e objetivos dos encontros no CEI Olegário João Clemes.
 
اللغة العربية
اللغة العربيةاللغة العربية
اللغة العربية
 
Sonia musica
Sonia musicaSonia musica
Sonia musica
 
lectura
lectura lectura
lectura
 
Virus Informáticos
Virus Informáticos Virus Informáticos
Virus Informáticos
 
A Missão dos Profissionais da Área Humana
A Missão dos Profissionais da Área HumanaA Missão dos Profissionais da Área Humana
A Missão dos Profissionais da Área Humana
 
Jornada de Direito Civil 97 a 119
Jornada de Direito Civil 97 a 119Jornada de Direito Civil 97 a 119
Jornada de Direito Civil 97 a 119
 
MTP8000Ex BR
MTP8000Ex BRMTP8000Ex BR
MTP8000Ex BR
 
Atividades 2 PowerPoint
Atividades 2 PowerPointAtividades 2 PowerPoint
Atividades 2 PowerPoint
 
Exemplos
Exemplos Exemplos
Exemplos
 
Slideshare...!
Slideshare...!Slideshare...!
Slideshare...!
 
Obligaciones
ObligacionesObligaciones
Obligaciones
 
diferenças e convergências entre a Ead e a Eol.
 diferenças e convergências entre a Ead e a Eol.  diferenças e convergências entre a Ead e a Eol.
diferenças e convergências entre a Ead e a Eol.
 
aniversário da Laura
aniversário da Lauraaniversário da Laura
aniversário da Laura
 
CALIDAD DE LA CARNE
CALIDAD DE LA CARNECALIDAD DE LA CARNE
CALIDAD DE LA CARNE
 
Linha do Tempo - Projeto Treino de Basqute
Linha do Tempo - Projeto Treino de BasquteLinha do Tempo - Projeto Treino de Basqute
Linha do Tempo - Projeto Treino de Basqute
 
Redes de ordenadores
Redes de ordenadoresRedes de ordenadores
Redes de ordenadores
 
netiqueta
netiquetanetiqueta
netiqueta
 
Cap.1
Cap.1Cap.1
Cap.1
 
Boulevard Monde Bônus
Boulevard Monde BônusBoulevard Monde Bônus
Boulevard Monde Bônus
 

Semelhante a Flat design - Tendências do design digital em 2013

Introdução à Multimídia e seus aspectos.pdf
Introdução à Multimídia e seus aspectos.pdfIntrodução à Multimídia e seus aspectos.pdf
Introdução à Multimídia e seus aspectos.pdfVivianeVivicka
 
Briefing - (para web design)
Briefing - (para web design)Briefing - (para web design)
Briefing - (para web design)mfiorelli
 
Design Transmdia UNIARA by Solange Eiko, Dimas Dion e Eduardo Jatoba
Design Transmdia UNIARA by Solange Eiko, Dimas Dion e Eduardo JatobaDesign Transmdia UNIARA by Solange Eiko, Dimas Dion e Eduardo Jatoba
Design Transmdia UNIARA by Solange Eiko, Dimas Dion e Eduardo JatobaRodrigo Arnaut
 
O design e a publicidade em sinergia com o marketing
O design e a publicidade em sinergia com o marketingO design e a publicidade em sinergia com o marketing
O design e a publicidade em sinergia com o marketingMarcus Vinícius Liberato
 
Palestra: O Design e a Publicidade em sinergia com o Marketing - Marcus Vinic...
Palestra: O Design e a Publicidade em sinergia com o Marketing - Marcus Vinic...Palestra: O Design e a Publicidade em sinergia com o Marketing - Marcus Vinic...
Palestra: O Design e a Publicidade em sinergia com o Marketing - Marcus Vinic...Empírica Specialists
 
Design + transmídia
Design + transmídiaDesign + transmídia
Design + transmídiaEraTransmidia
 
[Palestra] Profissão Designer
[Palestra] Profissão Designer[Palestra] Profissão Designer
[Palestra] Profissão DesignerRafael Burity
 
UXconf 2017 - Review
UXconf 2017 - ReviewUXconf 2017 - Review
UXconf 2017 - ReviewRafael Burity
 
Planejamento de produtos digitais - 1
Planejamento de produtos digitais - 1Planejamento de produtos digitais - 1
Planejamento de produtos digitais - 1Jornalismo Digital
 

Semelhante a Flat design - Tendências do design digital em 2013 (20)

Design 2013 - Cedaspy Manaus
Design 2013 - Cedaspy ManausDesign 2013 - Cedaspy Manaus
Design 2013 - Cedaspy Manaus
 
Cv m01
Cv  m01Cv  m01
Cv m01
 
Cv m01
Cv  m01Cv  m01
Cv m01
 
ESCOLA DO DESIGNER.pdf
ESCOLA DO DESIGNER.pdfESCOLA DO DESIGNER.pdf
ESCOLA DO DESIGNER.pdf
 
Workshop Webinsider 2003
Workshop Webinsider 2003Workshop Webinsider 2003
Workshop Webinsider 2003
 
Design thinking e pitch training
Design thinking e pitch trainingDesign thinking e pitch training
Design thinking e pitch training
 
Introdução à Multimídia e seus aspectos.pdf
Introdução à Multimídia e seus aspectos.pdfIntrodução à Multimídia e seus aspectos.pdf
Introdução à Multimídia e seus aspectos.pdf
 
Briefing - (para web design)
Briefing - (para web design)Briefing - (para web design)
Briefing - (para web design)
 
Apresentação Flat
Apresentação FlatApresentação Flat
Apresentação Flat
 
Design Transmdia UNIARA by Solange Eiko, Dimas Dion e Eduardo Jatoba
Design Transmdia UNIARA by Solange Eiko, Dimas Dion e Eduardo JatobaDesign Transmdia UNIARA by Solange Eiko, Dimas Dion e Eduardo Jatoba
Design Transmdia UNIARA by Solange Eiko, Dimas Dion e Eduardo Jatoba
 
O design e a publicidade em sinergia com o marketing
O design e a publicidade em sinergia com o marketingO design e a publicidade em sinergia com o marketing
O design e a publicidade em sinergia com o marketing
 
Palestra: O Design e a Publicidade em sinergia com o Marketing - Marcus Vinic...
Palestra: O Design e a Publicidade em sinergia com o Marketing - Marcus Vinic...Palestra: O Design e a Publicidade em sinergia com o Marketing - Marcus Vinic...
Palestra: O Design e a Publicidade em sinergia com o Marketing - Marcus Vinic...
 
Design + transmídia
Design + transmídiaDesign + transmídia
Design + transmídia
 
Design + transmídia
Design + transmídiaDesign + transmídia
Design + transmídia
 
Trends 2017
Trends 2017Trends 2017
Trends 2017
 
[Palestra] Profissão Designer
[Palestra] Profissão Designer[Palestra] Profissão Designer
[Palestra] Profissão Designer
 
Inclusao social
Inclusao socialInclusao social
Inclusao social
 
InLocus
InLocusInLocus
InLocus
 
UXconf 2017 - Review
UXconf 2017 - ReviewUXconf 2017 - Review
UXconf 2017 - Review
 
Planejamento de produtos digitais - 1
Planejamento de produtos digitais - 1Planejamento de produtos digitais - 1
Planejamento de produtos digitais - 1
 

Flat design - Tendências do design digital em 2013

  • 1. Tendência do Design digital em 2013 e Flat Design
  • 2. Evolução do mercado – Porque agora temos tendências? - O mercado vem se enchendo com bons designers. - Antigamente quem ditava a moda eram os sites das grandes empresas. - Dificuldade na busca por referências e no retorno de críticas e sugestões. - Dificuldade na troca de informações e a comunicação entre profissionais. - Ampliação da comunidade de design e troca de informações na internet.
  • 3. Em 2013 tem se falado muito em Flat Design, mas como essa tendência foi aparecer? - Metro Design - Windows Mobile - Windows 8 Metro Design? - Nova linguagem de design utilizada pela Microsoft - Conceito baseado nas sinalizações de transportes públicos - Foco completo no conteúdo e na informação - Eliminar toda a interferência gráfica que podem tirar o foco do usuário - Dizer o máximo possível com o mínimo possível e o mais rápido possível.
  • 4. O Passado A tendência Flat é super interessante, principalmente para quem estava cansado do modelo skeuomorphic design, onde o conceito é dar realidade aos elementos, com sobra, relevo, profundidade, brilhos etc. Mas voltando ao passado, vemos que o Flat Design não é algo novo Movimento De Stijl Repare nesta arte de Theo van Doesburg’s “Arithmetische Compositie”, de 1924 Esta nova idéia é ignorar os detalhes da aparência, ou seja, a forma natural e a cor. Pelo contrário, ele deve encontrar a sua expressão na abstração da forma e cor, isto é, em linha reta e a cor primaria claramente definida. Piet Mondrian Integrante do movimento De Stijl “
  • 5. Alto Modernismo Surgiu nos anos 1950 / 70, e nos traz mais traços do que atualmente chamamos de Flat Design Otl Aicher: Em particular o seu design para as olimpíadas de Munique em 1972. Richard Lohse Josef Müller-Brockmann Esse estilo te lembra alguma coisa?
  • 6. A atualidade A Microsoft buscava requerimentos visuais específicos que focavam na alta legibilidade e na alta percepção das informações, eliminando as distrações desnecessárias. O ideal é que o usuário consiga perceber de forma rápida e clara as informações, e obter idicações precisas sobre as ações necessárias. Entretanto, a aparência deve ser agradável, limpa e deixar uma boa impressão. Sempre com foco no conteúdo.
  • 7. Impacto no mercado O impacto no mercado foi tão grande que uma nova tendência de design surgiu em volta desta linguagem, a Flat Design. E para confirmar a força deste novo conceito, a Apple (que antes ditava as tendências) acabou tendo que se adaptar, e acabou se renovando com seu iOS7
  • 8. Impacto no mercado O impacto no mercado foi tão grande que uma nova tendência de design surgiu em volta desta linguagem, a Flat Design. E para confirmar a força deste novo conceito, a Apple (que antes ditava as tendências) acabou tendo que se adaptar, e acabou se renovando com seu iOS7
  • 9.
  • 10. Flat Design - A maioria dos designers ama ou odeia, mas é uma tendência que veio forte. - É muito legal, mas não deve ser usada para tudo. - Flat design é baseado em 2D e, é chamado assim por causa dos shapes. Não possui drop-shadows, bevels, embossing, gradients ou qualquer outra maneira de inserir relevos ou brilhos. O elemento não deve parecer realista.
  • 11. Flat Design - O design Flat funciona porque ele dá uma aparência bem mais clean a sua interface, fazendo o usuário ter uma comrpeensão melhor na hierarquia dos elementos, deixando seu projeto mais fácil de usar e interagir. - Mesmo sendo utilizado cada vez mais em sites, essa tendência vem sendo mais popular em mobiles, principalmente por estes terem telas pequenas e muitas vezes com tamanhos diferentes, um aplicativo baseado em Flat design é muito mais fácil de se utilizar.
  • 12.
  • 13.
  • 14. Muito desta nova tendência tem como base o avanço da tencologia, principalmente com a chegada do HTML5 e CSS3. Com a evolução desta área muitos recursos e interatividades foram acrescentados ao desenvolvimento HTML5 / CSS3
  • 15.