Desenvolvimento de Interface Gráfica - Introdução ao desenvolvimento de interface

Campus Charqueadas
Desenvolvimento de Interfaces
Gráficas
Prof. Esp. Cleber Schroeder Fonseca

2
Campus Charqueadas
Exercício
Escolha 2 sites (1 com design eficiente e
outro ineficiente) e anote os dados abaixo:
– Nome e endereço
– Cores
– Layout
– Diagramação
– Organização da informação
– Logotipo
– Aplicação de fontes

Campus Charqueadas
Princípios do Design

4
Campus Charqueadas
O que envolve o Design de
Interfaces
● O design de interfaces pode ser dividido
em duas partes, Experiência do Usuário
(User eXperience – UX) e a Interface do
Usuário (User Interface – UI).

5
Campus Charqueadas
UX
● É o que a pessoa, usuário, sente e
interpreta ao usar uma interface.
● Essa interface pode ser um site, um app,
um sistema, um celular, um tablet ou
mesmo um produto.

6
Campus Charqueadas
UX
● Quais técnicas podem ser utilizadas para
implementar a melhor UX.
– Card sorting
– Sketch
– Wireframe
– Site map
– Protótipo navegável

7
Campus Charqueadas
Card sorting
● Técnica simples onde cada pessoa da
equipe desenvolvimento dá pequenos
“palpites”, cada uma dessas ideias é
colocada em um Post-it e esse são
colocados em um agrupamento.

8
Campus Charqueadas
Card sorting

9
Campus Charqueadas
Sketch
● Criado com o uso de papel e caneta e
lápis.
● Forma mais prática de visualizar uma
ideia/conceito de uma interface ou produto.
● Boa forma do Designer validar a interface
para os stakeholders.

10
Campus Charqueadas
Sketch

11
Campus Charqueadas
Wireframe
● A tradução (armação de arame) já deixa
bem transparente o que é o wireframe.
● Geralmente é criado sem cor e com
elementos simples visando mostrar
apenas o essencial da interface.
● São usados para organizar elementos e
definir a hierarquia das informações,
validar junto ao time as funções e objetivos
da interface.

12
Campus Charqueadas
Wireframe

13
Campus Charqueadas
Site map
● É uma representação hierárquica da
estrutura de um site.
● Demonstra as páginas que devem ter em
um site ou sistema, e ainda mostra os
caminhos que podem ser utilizados para
chegar em uma determinada parte do
sistema.

14
Campus Charqueadas
Site map

15
Campus Charqueadas
UI
● É o que as pessoas, usuários utilizam para
chegar a informação.
● É aqui que se aplica tudo o que foi feito até
então.

16
Campus Charqueadas
UI
● Quais técnicas podem ser utilizadas para
implementar a melhor UI:
– Moodboards
– Graphical User Interfce – GUI
– Uso de grid no layout

17
Campus Charqueadas
Moodboards
● É um quadro contendo várias imagens,
textos e amostras de objetos, também
chamado de painel semântico.
● Utilizado por designers para desenvolver
seus conceitos, e para se comunicarem
com outros membros do time de design.

18
Campus Charqueadas
Moodboards

19
Campus Charqueadas
GUI
● Ferramentas que facilitam o designer
disponibilizando padrões para que sejam
utilizados em seus projetos.

20
Campus Charqueadas
GUI

21
Campus Charqueadas
Grid de layout
● Desenvolvido para facilitar os designers no
momento de criar e alinhar os objetos em
seus projetos.

22
Campus Charqueadas
Grid de layout

23
Campus Charqueadas
Responsive design
● Nada mais é do que criar uma forma
diferente para ser exibida conforme o
tamanho da tela.
● O conteúdo deve se adpatar ao tamanho
do dispositivo.

24
Campus Charqueadas
Responsive design

Desenvolvimento de Interface Gráfica - Introdução ao desenvolvimento de interface

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (20)

Similaire à Desenvolvimento de Interface Gráfica - Introdução ao desenvolvimento de interface

Similaire à Desenvolvimento de Interface Gráfica - Introdução ao desenvolvimento de interface (20)

Plus de Cleber Fonseca

Plus de Cleber Fonseca (9)

Dernier

Dernier (9)

Desenvolvimento de Interface Gráfica - Introdução ao desenvolvimento de interface