SlideShare uma empresa Scribd logo
1 de 22
METODOLOGIA PROJETUAL
 COM BASE EM MUNARI
    Acemir Mendes & Luciana do Prado
ÁREAS DO
 DESIGN
Estavamos curiosos em saber
  qual área do design mais
interessavam nossos colegas
 de curso, então resolvemos
elaborar uma enquete onde
  cada entrevistado deveria
  escolher a área que mais
   curte da profissão que
      pretendem seguir.
ÁREAS DO
 DESIGN
Baseado nos ícones criados
por Rafael Crispim, designer
   de camisetas de Brasília,
   escolhemos 12 áreas do
      design que mais se
 identificavam com o digital
 para aplicarmos à enquete.
COLETA DE DADOS
   Pesquisamos exemplos de infográficos interativos.

Clima Político nos EUA       Horas gastas com Filantropia




     Infográficos interativos disponíveis na internet
COLETA DE DADOS
A enquete foi realizada através da rede social
Facebook e do aplicativo web Google Docs.
    Abaixo apresentamos os resultados.
ESBOÇOS INICIAIS




Para iniciar a concepção visual do nosso projeto
              utilizamos lápis e papel.
ESBOÇOS INICIAIS




Depois começamos a pensar nas cores que
iríamos aplicar, então fizemos outro esboço
      utilizando canetas hidrográficas.
MATERIAIS E TECNOLOGIAS
    Utilizamos os softwares gráficos da Adobe.

        Photoshop – Imagens em bitmap

    Ilustrator – Elementos vetorizados e para
      diagramação as telas da interface digital.

  Flash e linguagem de programação ActionScript
               Animações e interações
FONTES
   USADAS
Testamos algumas fontes que
se identificassem com nosso
público-alvo e que melhor se
 adequassem ao formato de
   nossos esboços iniciais.

   Escolhemos as fontes:
     • Heattenshweiler
• Proxima Nova Condensed
ÍCONES DE GÊNERO




 Os ícones de gênero são simples, de
       entendimento universal.
INFOGRÁFICO INTERATIVO




         Tela Inicial
INFOGRÁFICO INTERATIVO




     Usuário interage com as àreas
INFOGRÁFICO INTERATIVO




     Usuário interage o gênero
Trabalho Pratico 1 - Introdução ao Design Digital
Trabalho Pratico 1 - Introdução ao Design Digital
Trabalho Pratico 1 - Introdução ao Design Digital
Trabalho Pratico 1 - Introdução ao Design Digital
Trabalho Pratico 1 - Introdução ao Design Digital
Trabalho Pratico 1 - Introdução ao Design Digital
Trabalho Pratico 1 - Introdução ao Design Digital
Trabalho Pratico 1 - Introdução ao Design Digital
Trabalho Pratico 1 - Introdução ao Design Digital

Mais conteúdo relacionado

Mais procurados

Design Centrado no Usuário para Interface Digital
Design Centrado no Usuário para Interface DigitalDesign Centrado no Usuário para Interface Digital
Design Centrado no Usuário para Interface DigitalMarconi Pacheco
 
Design de interface (trabalho acadêmico)
Design de interface (trabalho acadêmico)Design de interface (trabalho acadêmico)
Design de interface (trabalho acadêmico)DesignCarminatti
 
Flat Design e a Re-Cultura da Interface
Flat Design e a Re-Cultura da InterfaceFlat Design e a Re-Cultura da Interface
Flat Design e a Re-Cultura da InterfaceEdu Agni
 
Boas Práticas em Design de Interfaces
Boas Práticas em Design de InterfacesBoas Práticas em Design de Interfaces
Boas Práticas em Design de InterfacesFelipe Almeida
 
Mobile First (ou boas razões para investir em Mobile)
Mobile First (ou boas razões para investir em Mobile)Mobile First (ou boas razões para investir em Mobile)
Mobile First (ou boas razões para investir em Mobile)Edu Agni
 
Interfaces Naturais
Interfaces NaturaisInterfaces Naturais
Interfaces NaturaisEdu Agni
 
Interação Homem-Computador - Interfaces naturais
Interação Homem-Computador - Interfaces naturaisInteração Homem-Computador - Interfaces naturais
Interação Homem-Computador - Interfaces naturaisJuliano Padilha
 
Ux nas organizações
Ux nas organizaçõesUx nas organizações
Ux nas organizaçõesEdu Agni
 
Princípios de Design de Interação
Princípios de Design de InteraçãoPrincípios de Design de Interação
Princípios de Design de InteraçãoFelipe Dal Molin
 
Mobile First & Responsive Design
Mobile First & Responsive DesignMobile First & Responsive Design
Mobile First & Responsive DesignEdu Agni
 
Usabilidade e Experiencia do Usuario
Usabilidade e Experiencia do UsuarioUsabilidade e Experiencia do Usuario
Usabilidade e Experiencia do UsuarioGustavo Gil
 
Webdesign - Design Interface
Webdesign - Design InterfaceWebdesign - Design Interface
Webdesign - Design InterfaceOdair Cavichioli
 
Introdução a User Experience e o mercado de trabalho no Brasil
Introdução a User Experience e o mercado de trabalho no BrasilIntrodução a User Experience e o mercado de trabalho no Brasil
Introdução a User Experience e o mercado de trabalho no BrasilLariane Rossanese
 
As Media Queries são só um detalhe!
As Media Queries são só um detalhe!As Media Queries são só um detalhe!
As Media Queries são só um detalhe!Edu Agni
 
Natural User Interface Design
Natural User Interface DesignNatural User Interface Design
Natural User Interface DesignEdu Agni
 
UX Design como estratégia para conquistar mais clientes e impactar negócios
UX Design como estratégia para conquistar mais clientes e impactar negóciosUX Design como estratégia para conquistar mais clientes e impactar negócios
UX Design como estratégia para conquistar mais clientes e impactar negóciosCatarinas Design de Interação
 
Design de Interação: O que você tem a ver com isso?!
Design de Interação: O que você tem a ver com isso?!Design de Interação: O que você tem a ver com isso?!
Design de Interação: O que você tem a ver com isso?!Monica Possel
 

Mais procurados (20)

Design Centrado no Usuário para Interface Digital
Design Centrado no Usuário para Interface DigitalDesign Centrado no Usuário para Interface Digital
Design Centrado no Usuário para Interface Digital
 
Design de interface (trabalho acadêmico)
Design de interface (trabalho acadêmico)Design de interface (trabalho acadêmico)
Design de interface (trabalho acadêmico)
 
Flat Design e a Re-Cultura da Interface
Flat Design e a Re-Cultura da InterfaceFlat Design e a Re-Cultura da Interface
Flat Design e a Re-Cultura da Interface
 
Boas Práticas em Design de Interfaces
Boas Práticas em Design de InterfacesBoas Práticas em Design de Interfaces
Boas Práticas em Design de Interfaces
 
Design de Interfaces
Design de InterfacesDesign de Interfaces
Design de Interfaces
 
Mobile First (ou boas razões para investir em Mobile)
Mobile First (ou boas razões para investir em Mobile)Mobile First (ou boas razões para investir em Mobile)
Mobile First (ou boas razões para investir em Mobile)
 
Interfaces Naturais
Interfaces NaturaisInterfaces Naturais
Interfaces Naturais
 
UX na prática
UX na práticaUX na prática
UX na prática
 
Interação Homem-Computador - Interfaces naturais
Interação Homem-Computador - Interfaces naturaisInteração Homem-Computador - Interfaces naturais
Interação Homem-Computador - Interfaces naturais
 
Ux nas organizações
Ux nas organizaçõesUx nas organizações
Ux nas organizações
 
Princípios de Design de Interação
Princípios de Design de InteraçãoPrincípios de Design de Interação
Princípios de Design de Interação
 
Mobile First & Responsive Design
Mobile First & Responsive DesignMobile First & Responsive Design
Mobile First & Responsive Design
 
Usabilidade e Experiencia do Usuario
Usabilidade e Experiencia do UsuarioUsabilidade e Experiencia do Usuario
Usabilidade e Experiencia do Usuario
 
UX Samsung
UX SamsungUX Samsung
UX Samsung
 
Webdesign - Design Interface
Webdesign - Design InterfaceWebdesign - Design Interface
Webdesign - Design Interface
 
Introdução a User Experience e o mercado de trabalho no Brasil
Introdução a User Experience e o mercado de trabalho no BrasilIntrodução a User Experience e o mercado de trabalho no Brasil
Introdução a User Experience e o mercado de trabalho no Brasil
 
As Media Queries são só um detalhe!
As Media Queries são só um detalhe!As Media Queries são só um detalhe!
As Media Queries são só um detalhe!
 
Natural User Interface Design
Natural User Interface DesignNatural User Interface Design
Natural User Interface Design
 
UX Design como estratégia para conquistar mais clientes e impactar negócios
UX Design como estratégia para conquistar mais clientes e impactar negóciosUX Design como estratégia para conquistar mais clientes e impactar negócios
UX Design como estratégia para conquistar mais clientes e impactar negócios
 
Design de Interação: O que você tem a ver com isso?!
Design de Interação: O que você tem a ver com isso?!Design de Interação: O que você tem a ver com isso?!
Design de Interação: O que você tem a ver com isso?!
 

Semelhante a Trabalho Pratico 1 - Introdução ao Design Digital

Aula01 conceito design
Aula01 conceito designAula01 conceito design
Aula01 conceito designpaulo_batista
 
Deep Dive Material Design, e um pouquinho sobre mobile UX
Deep Dive Material Design, e um pouquinho sobre mobile UXDeep Dive Material Design, e um pouquinho sobre mobile UX
Deep Dive Material Design, e um pouquinho sobre mobile UXNelson Vasconcelos
 
Design Customizado
Design CustomizadoDesign Customizado
Design Customizadobernardolm
 
MPIII - Aula 01 - Apresentação
MPIII - Aula 01 - ApresentaçãoMPIII - Aula 01 - Apresentação
MPIII - Aula 01 - ApresentaçãoAlan Vasconcelos
 
Mobile User Experience: Compilando pessoas e codificando cores
Mobile User Experience: Compilando pessoas e codificando coresMobile User Experience: Compilando pessoas e codificando cores
Mobile User Experience: Compilando pessoas e codificando coresPedro de Albuquerque Borges
 
Redesign do portal ouvidoria de fortaleza
Redesign do portal ouvidoria de fortalezaRedesign do portal ouvidoria de fortaleza
Redesign do portal ouvidoria de fortalezaPatrick Nobre
 
Composição e proj gráfico.ppt
Composição e proj gráfico.pptComposição e proj gráfico.ppt
Composição e proj gráfico.pptjessOlli
 
Projeto GAMPI 2016 - Amanda K, Bruna, Wellington
Projeto GAMPI 2016 - Amanda K, Bruna, WellingtonProjeto GAMPI 2016 - Amanda K, Bruna, Wellington
Projeto GAMPI 2016 - Amanda K, Bruna, WellingtonJonathan Prateat
 
Projeto de Plataforma Digital de Produção Gráfica
Projeto de Plataforma Digital de Produção GráficaProjeto de Plataforma Digital de Produção Gráfica
Projeto de Plataforma Digital de Produção GráficaGabriel Grumiche Silva
 

Semelhante a Trabalho Pratico 1 - Introdução ao Design Digital (20)

Cpg Aula1
Cpg Aula1Cpg Aula1
Cpg Aula1
 
Aula01 conceito design
Aula01 conceito designAula01 conceito design
Aula01 conceito design
 
Deep Dive Material Design, e um pouquinho sobre mobile UX
Deep Dive Material Design, e um pouquinho sobre mobile UXDeep Dive Material Design, e um pouquinho sobre mobile UX
Deep Dive Material Design, e um pouquinho sobre mobile UX
 
Design Customizado
Design CustomizadoDesign Customizado
Design Customizado
 
Engenharia semiotica
Engenharia semioticaEngenharia semiotica
Engenharia semiotica
 
Portifolio 2
Portifolio 2Portifolio 2
Portifolio 2
 
MPIII - Aula 01 - Apresentação
MPIII - Aula 01 - ApresentaçãoMPIII - Aula 01 - Apresentação
MPIII - Aula 01 - Apresentação
 
CRP-5215-0420-2014-09
CRP-5215-0420-2014-09CRP-5215-0420-2014-09
CRP-5215-0420-2014-09
 
Apostila Photoshop
Apostila Photoshop Apostila Photoshop
Apostila Photoshop
 
Aula01 cpg conceito-design
Aula01 cpg conceito-designAula01 cpg conceito-design
Aula01 cpg conceito-design
 
Material Design
Material DesignMaterial Design
Material Design
 
Mobile User Experience: Compilando pessoas e codificando cores
Mobile User Experience: Compilando pessoas e codificando coresMobile User Experience: Compilando pessoas e codificando cores
Mobile User Experience: Compilando pessoas e codificando cores
 
Redesign do portal ouvidoria de fortaleza
Redesign do portal ouvidoria de fortalezaRedesign do portal ouvidoria de fortaleza
Redesign do portal ouvidoria de fortaleza
 
Composição e proj gráfico.ppt
Composição e proj gráfico.pptComposição e proj gráfico.ppt
Composição e proj gráfico.ppt
 
Apresentação
ApresentaçãoApresentação
Apresentação
 
Projeto GAMPI 2016 - Amanda K, Bruna, Wellington
Projeto GAMPI 2016 - Amanda K, Bruna, WellingtonProjeto GAMPI 2016 - Amanda K, Bruna, Wellington
Projeto GAMPI 2016 - Amanda K, Bruna, Wellington
 
Projeto de Plataforma Digital de Produção Gráfica
Projeto de Plataforma Digital de Produção GráficaProjeto de Plataforma Digital de Produção Gráfica
Projeto de Plataforma Digital de Produção Gráfica
 
Design 2013 - Cedaspy Manaus
Design 2013 - Cedaspy ManausDesign 2013 - Cedaspy Manaus
Design 2013 - Cedaspy Manaus
 
Open Courseware 3D
Open Courseware 3DOpen Courseware 3D
Open Courseware 3D
 
Ergonomia
Ergonomia Ergonomia
Ergonomia
 

Trabalho Pratico 1 - Introdução ao Design Digital

  • 1. METODOLOGIA PROJETUAL COM BASE EM MUNARI Acemir Mendes & Luciana do Prado
  • 2. ÁREAS DO DESIGN Estavamos curiosos em saber qual área do design mais interessavam nossos colegas de curso, então resolvemos elaborar uma enquete onde cada entrevistado deveria escolher a área que mais curte da profissão que pretendem seguir.
  • 3. ÁREAS DO DESIGN Baseado nos ícones criados por Rafael Crispim, designer de camisetas de Brasília, escolhemos 12 áreas do design que mais se identificavam com o digital para aplicarmos à enquete.
  • 4. COLETA DE DADOS Pesquisamos exemplos de infográficos interativos. Clima Político nos EUA Horas gastas com Filantropia Infográficos interativos disponíveis na internet
  • 5. COLETA DE DADOS A enquete foi realizada através da rede social Facebook e do aplicativo web Google Docs. Abaixo apresentamos os resultados.
  • 6. ESBOÇOS INICIAIS Para iniciar a concepção visual do nosso projeto utilizamos lápis e papel.
  • 7. ESBOÇOS INICIAIS Depois começamos a pensar nas cores que iríamos aplicar, então fizemos outro esboço utilizando canetas hidrográficas.
  • 8. MATERIAIS E TECNOLOGIAS Utilizamos os softwares gráficos da Adobe. Photoshop – Imagens em bitmap Ilustrator – Elementos vetorizados e para diagramação as telas da interface digital. Flash e linguagem de programação ActionScript Animações e interações
  • 9. FONTES USADAS Testamos algumas fontes que se identificassem com nosso público-alvo e que melhor se adequassem ao formato de nossos esboços iniciais. Escolhemos as fontes: • Heattenshweiler • Proxima Nova Condensed
  • 10. ÍCONES DE GÊNERO Os ícones de gênero são simples, de entendimento universal.
  • 11. INFOGRÁFICO INTERATIVO Tela Inicial
  • 12. INFOGRÁFICO INTERATIVO Usuário interage com as àreas
  • 13. INFOGRÁFICO INTERATIVO Usuário interage o gênero

Notas do Editor

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n