DESIGN DE INTERFACES

DIGITAIS
Manoel Deisson Xenofonte
INTRODUÇÃO
EMENTÁRIO

Funcionamento da Internet. Processo de trabalho do webdesigner.

Desenvolvimento e montagem de sites com utilização de software específico.
Marcação de tela, folhas de estilo, web semântica, produtividade web,
tableless, javascript, acessibilidade e usabilidade.

Design de interfaces e de experiência do usuário, Conceitos de Grid, tipografia

e cores aplicadas às interfaces digitais, Pesquisa e Desenvolvimento de
“Wireframes” e fluxos de navegação, ferramentas de prototipagem para Mobile
e Desktop.
CRONOGRAMA

Aula 1 – Introdução: Conceitos, nomenclaturas e história do design de interfaces digitais

Aula 2 – Cor, Tipografia e Grids aplicados às interfaces

Aula 3 – Experiência do Usuário – UX – Introdução

Aula 4 – Experiência do Usuário – UX – Ferramentas e métodos de teste e avaliação de interfaces

Aula 5 – Fluxos e Wireframes

Aula 6 – Prototipagem – 1

Aula 7 – Protipagem – 2

Aula 8 – Mercado de trabalho

BIBLIOGRAFIA BÁSICA
AVALIAÇÕES

A Avaliação consistirá em um projeto de

interface digital que versará sobre
sinalização (uma única atividade final
para as disciplinas de design de
interfaces e design de sinalização).

Poderá ser individual, dupla ou em equipe

(até 4 integrantes)
Design de interfaces digitais – Definições

Interface:
Aquilo que ocasiona uma união física ou lógica entre dois sistemas que, diretamente, não
poderiam estar conectados.
Área de contato e interação entre um usuário e um artefato.
Design de interfaces digitais – Definições

Digital:
Diz-se dos sistemas, dispositivos ou processos que empregam tal modo de
representação discreta; por oposição a analógico.
Design de interfaces digitais – Definições

É a prática responsável pelo planejamento, desenvolvimento e aplicação de uma solução com o objetivo de
facilitar a experiência do usuário e estimular sua interação com um objeto digital. É o recurso que conduz a
interação do ser humano com um produto virtual.
História e paradigmas
Human-computer interactions (HCI)
Information architecture (IA)
Interface design (ID)
User centered design (UCD)
Interaction Design (IxD)
User Experience (UX)
História e paradigmas
Human-computer
interactions (HCI):
(década de 60)

Para o paradigma de HCI, projetar

a interação se resume à
construção dos mecanismos
através dos quais usuários
poderão instruir o equipamento
computacional ao que fazer para
fornecer as respostas ou os
serviços que lhe são necessários;
interagir é, desta forma, entrar
instruções e dados, e receber
suas respostas ou resultados;
Interações são, em um sentido
mais amplo, os efeitos e
transformações que esses
instrumentos produzem sobre a
nossa sociedade. (Ranoya, 2018)
História e paradigmas
Information architecture (IA) & Interface
design (ID)
(década de 70)

Na medida em que os computadores deixaram

os laboratórios de pesquisa e começaram a
fazer parte da vida cotidiana das pessoas,
mais precisamente do meio para o final da
década de 1970, outros profissionais além dos
engenheiros e cientistas da computação
intrigaram-se com suas possibilidades e as
formas de projetá-los (ou mais
especificamente, projetar a interação com
eles).
De uma maneira geral, isto ocorreu conforme
os computadores ficaram mais visuais e
tornou-se óbvia a necessidade de um trabalho
gráfico sobre as interfaces entre os usuários e
seus equipamentos. (Ranoya, 2018)
História e paradigmas

Arquitetura da informação e
design de interface.
Planos de escopos proposto
por Jesse James Garrett
 História e paradigmas
LATCH: Como organizar a
informação

LOCATION
ALPHABET
TIME
CATEGORY
HIERARCHY

Richard Saul Wurman

 História e paradigmas
LATCH: Como organizar a
informação

LOCATION
ALPHABET
TIME
CATEGORY
HIERARCHY

Richard Saul Wurman

História e paradigmas
User centered design (UCD)
(década de 80)

Na obra “design of everyday things”, originalmente

publicada em 1986, o simpático psicólogo e
engenheiro elétrico esboça as bases do que
conhecemos hoje como usabilidade, isto é,
fundamentos heurísticos para que objetos possam
ser projetados levando em consideração como
usuários os manipulam.
História e paradigmas
Interaction Design (IxD)
(década de 90)

Esta matriz estabelece que, para que nos relacionemos bem com estas máquinas, seu
interagir precisa se moldar a características mais humanas; ser mais natural (para conosco). É neste ponto que artifícios como movimentos,
dinamismo, expressividade, comportamento, feeling, entram no vocabulário dos projetistas, que passam a se preocupar acerca de como os
usuários se sentem ao utilizar estes equipamentos tanto quanto em os habilitar a operá-los.
História e paradigmas
Interaction Design (IxD)
(década de 90)

Heurísticas de Jacob Nielsen:

• Visibilidade do status do sistema;

• Correspondência entre o sistema

• e o mundo real;

• Liberdade e controle do usuário;

• Consistência e padrões;

• Prevenção de erros;

• Reconhecer ao invés de lembrar;

• Flexibilidade e Eficiência;

• Estética e Design minimalista;

• Auxiliar usuários a reconhecer,

• diagnosticar e recuperar erros;

• Ajuda e Documentação.
História e paradigmas
Experience Design (UX)
(Anos 2000)

“Inventei o termo porque interface com Eu outra vez

o usuário e usabilidade eram coisas Kkk
muito restritas. Eu queria incorporar
todos os aspectos da experiência de
uma pessoa com o sistema, incluindo
o design gráfico, a interface, a
interação com o objeto físico e o
manual. Desde então o termo se
espalhou tanto que começou a perder
o sentido que lhe atribuí.”
História e paradigmas
Experience Design (UX)
(Anos 2000)

“O primeiro registro que temos

do uso do termo User
Experience foi no artigo
“Interface as Mimesis”
de Brenda K. Laurel, publicado
no livro "User Centered
System Design: New Perspecti
ves
on Human-computer Interaction
" de 1986, uma coletânea
organizada por Don Norman e
Stephen W. Draper.”
Linguagens html, css e JavaScript, o que são?
HTML
HTML (abreviação para a expressão inglesa HyperText Markup Language, que significa:
"Linguagem de Marcação de Hipertexto" é uma linguagem de marcação utilizada na construção
de páginas na Web. Documentos HTML podem ser interpretados por navegadores
HTML
HTML (abreviação para a expressão inglesa HyperText Markup Language, que significa:
"Linguagem de Marcação de Hipertexto" é uma linguagem de marcação utilizada na construção
de páginas na Web. Documentos HTML podem ser interpretados por navegadores

<p>Meu primeiro paragrafo.</p>

CSS
Cascading Style Sheets (CSS) é um mecanismo para adicionar estilo (cores, fontes,
espaçamento, etc.) a um documento web.
O código CSS pode ser aplicado diretamente nas tags ou ficar contido dentro das tags <style>.
Também é possível, em vez de colocar a formatação dentro do documento, criar um link para
um arquivo CSS que contém os estilos.
CSS
Cascading Style Sheets (CSS) é um mecanismo para adicionar estilo (cores, fontes,
espaçamento, etc.) a um documento web.
O código CSS pode ser aplicado diretamente nas tags ou ficar contido dentro das tags <style>.
Também é possível, em vez de colocar a formatação dentro do documento, criar um link para
um arquivo CSS que contém os estilos.
JAVASCRIPT
JavaScript (frequentemente abreviado como JS) é uma linguagem de programação
interpretada estruturada, de script em alto nível com tipagem dinâmica fraca e
multiparadigma (protótipos, orientado a objeto, imperativo e, funcional).
Juntamente com HTML e CSS, o JavaScript é uma das três principais tecnologias
da World Wide Web.
DESENVOLVEDORES

O desenvolvedor front-end é
responsável por “dar vida” à
interface. Trabalha com a parte
da aplicação que interage
diretamente com o usuário. Por
isso, é importante que esse
desenvolvedor também se
preocupe com a experiência do
usuário.

Já o Back-end é responsável
por implementar arquiteturas
robustas, que se comuniquem
com o banco de dados e que
garantam a segurança dos
dados enviados pelo usuário.
WIREFRAME

É como um esqueleto,
um protótipo ou uma versão
bastante primitiva do visual de um
projeto. Ele consiste na representação
da diagramação e das estruturas
macro do site, ou seja, apresentamos
por meio de formas
geométricas e linhas como pensamos
a divisão da interface em seções.
FERRAMENTAS DE
PROTOTIPAÇÃO
FERRAMENTAS DE PROTOTIPAÇÃO –
Adobe XD
FERRAMENTAS DE PROTOTIPAÇÃO –
Figma
FERRAMENTAS DE PROTOTIPAÇÃO –
Balsamiq
FERRAMENTA DE IDEAÇÃO
Miro
Criar Wireframe da seguinte ação:

Criar um novo contato no Whatsapp e

em seguida compartilhar ele por
mensagem