Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Simplificando o design digital

755 views

Published on

Entendendo de forma rápida e direta sobre:
Ui Design (Ui), Ux Design (Ux), Arquitetura de informação (Ai), Sites Responsivos.

Published in: Design

Simplificando o design digital

  1. 1. Simplificando o Design Digital Ui • Ux • Ai • Site
  2. 2. Introdução O objetivo é explicar alguns conceitos e práticas em design através de imagens. Exemplificando com imagens algumas áreas no meio digital e teórico do design. Aqui usaremos várias analogias que falará um pouco de cada tópico abordado, além de textos com explicações simples e objetivas. “Se uma imagem vale mais do que mil palavras, então diga isto com uma imagem.” - Millôr Fernandes Observação: o design digital é muito mais do que esses 4 tópicos que aqui iremos abordar. Simplificando o Design Digital Entendendo de forma rápida e direta sobre:  Ui Design (Ui)  Ux Design (Ux)  Arquitetura de informação (Ai)  Sites Responsivos
  3. 3. Ui Design Ui é o design de interface do usuário, é o meio pela qual uma pessoa interage e controla um dispositivo, software ou aplicativo. Simplificando o Design Digital Produto/interface UI Experiência UX Produto/interface UI Experiência UX
  4. 4. Ux Design UX é Experiência do usuário, é um termo para o nível de satisfação geral dos usuários enquanto usam o seu produto ou sistema. Em poucas palavras é como você se sente ao usar algo. Simplificando o Design Digital Design Experiência do Usuário UX Design Experiência do Usuário UX
  5. 5. Arquitetura de informação (Ai) Ai em design é organizar ou transformar o que é complexo ou confuso em algo mais claro. Esquemas de organização, rotulação, busca e navegação em dispositivo, software ou aplicativo. Simplificando o Design Digital Sem Ai Com Ai Exemplo de Organização feito por cores
  6. 6. Arquitetura de informação (Ai) Simplificando o Design Digital Ausência de Ai Presença de Ai
  7. 7. Sites Responsivos É um site que consegue responder ao tamanho da tela (mobile ou desktop), adequando-se da melhor forma. Sua aparência e disposição muda com base no tamanho da tela em que o site é exibido. Simplificando o Design Digital  Tv  Monitor PC  Notebook  Tablet na vertical e horizontal  Celular na vertical e horizontal
  8. 8. Sites Responsivos Simplificando o Design Digital Conteúdo Monitor Tablet Celular Analogias para site responsivo  Cereais (conteúdo)  Tigela (monitor)  Barra de cereal (tablete)  Caixinha de Cereais (celular)
  9. 9. Livros sobre Design Digital Simplificando o Design Digital Falamos de uma forma rápida sobre o design digital, onde abordamos quatro tópicos: Ui design, Ux Design, Arquitetura de informação (Ai) e Sites responsivos. O design digital aborda muito mais dos que foram simplificados aqui e para ampliar melhor os conhecimentos nessa área, recomendo os seguintes livros em Português (traduções e autores brasileiros): Não me faça pensar - Steve Krug Simplificando coisas que parecem complicadas - Steve Krug O Design do Dia-a-dia - Donald A. Norman O Guia para Projetar UX - Russ Unger e Carolyn Chandler Ergodesign e Arquitetura de Informação - Luiz Agner Design Centrado no Usuário - Travis Lowdermilk Design Emocional - Donald A. Norman Design de Interação - Helen Sharp, Jennifer Preece, Yvonne Rogers Princípios do Web Design Maravilhoso - Jason Beaird Avaliação e Projeto no Design de Interfaces - José Guilherme Santa Rosa, Anamaria de Moraes Design para Internet - Felipe Memória
  10. 10. Livros sobre Design Digital Simplificando o Design Digital
  11. 11. Lowdermilk, Travis. Design Centrado no Usuário: Um guia para o desenvolvimento de aplicativos amigáveis. São Paulo: Novatec Editora, 2013. http://mariovalney.com/afinal-o-que-e-ux-user-experience/ (2016) https://www.youtube.com/watch?time_continue=74&v=-L4gEk7cOfk (2016) http://www.fatdux.com/pt/what/what-is-ux (2016) http://www.designculture.com.br/o-que-e-ui-design-e-ux-design (2016) http://pt.slideshare.net/marconidesenhos/arquitetura-de-informao-para-interface-digital (2016) http://pt.slideshare.net/marconidesenhos/site-responsivo-vantagens-e-desvantagens (2016) http://pt.slideshare.net/agenciamateada/arquitetura-de-informacao-agenciamateada-26022641 (2016) http://www.comersite.com.br/sites-responsivos-o-que-sao-eu-preciso-de-um (2016) https://www.argohost.net/blog/saiba-como-funciona-um-servico-de-hospedagem-de-sites/ (2016) http://www.lucrei.com/hospedagem-de-sites-como-funciona/ (2016) http://www.uxdesign.blog.br/user-experience/ux-por-onde-comecar/ (2016) Referências Simplificando o Design Digital
  12. 12. Slide 03 – https://goo.gl/O4shtM | http://goo.gl/0U7hXq Slide 04 – http://goo.gl/NmQCmb | https://goo.gl/zQMMr3 Slide 05 – https://goo.gl/4u6A6X Slide 06 – https://goo.gl/x9hX8G | http://goo.gl/D5Xmlc Slide 07 – http://goo.gl/v7SpX8 Slide 08 – http://goo.gl/p3QST4 Lista de Figuras Simplificando o Design Digital
  13. 13. Marconi A. Pacheco Bacharel em Design Designer e desenvolvedor front-end. Apaixonado por cinema, literatura, quadrinhos e ilustrações. twitter.com/marconidesenhos linkedin.com/pub/marconi-ap/37/472/405 instagram.com/marconidesenhos Simplificando o Design Digital

×