O documento explora conceitos e práticas de design digital, focando em UI, UX, Arquitetura de Informação e sites responsivos, usando analogias e imagens para facilitar a compreensão. Ele enfatiza que o design digital é vasto e abrange muito mais do que os tópicos abordados. Além disso, recomenda livros para aprofundar conhecimentos na área.

1. Simplificando o
Design Digital
Ui • Ux • Ai • Site

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. 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. 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. 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. Arquitetura de informação (Ai)
Simplificando o Design Digital
Ausência de Ai Presença de Ai

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. 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. 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. Livros sobre Design Digital
Simplificando o Design Digital

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