Introdução ao desenvolvimento de interfaces

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

2. 2
Campus Charqueadas
Prof. Esp. Cleber Schroeder Fonseca
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

3. Campus Charqueadas
Prof. Esp. Cleber Schroeder Fonseca
Princípios do Design

4. 4
Campus Charqueadas
Prof. Esp. Cleber Schroeder Fonseca
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. 5
Campus Charqueadas
Prof. Esp. Cleber Schroeder Fonseca
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. 6
Campus Charqueadas
Prof. Esp. Cleber Schroeder Fonseca
UX
● Quais técnicas podem ser utilizadas para
implementar a melhor UX.
– Card sorting
– Sketch
– Wireframe
– Site map
– Protótipo navegável

7. 7
Campus Charqueadas
Prof. Esp. Cleber Schroeder Fonseca
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. 8
Campus Charqueadas
Prof. Esp. Cleber Schroeder Fonseca
Card sorting

9. 9
Campus Charqueadas
Prof. Esp. Cleber Schroeder Fonseca
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. 10
Campus Charqueadas
Prof. Esp. Cleber Schroeder Fonseca
Sketch

11. 11
Campus Charqueadas
Prof. Esp. Cleber Schroeder Fonseca
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. 12
Campus Charqueadas
Prof. Esp. Cleber Schroeder Fonseca
Wireframe

13. 13
Campus Charqueadas
Prof. Esp. Cleber Schroeder Fonseca
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. 14
Campus Charqueadas
Prof. Esp. Cleber Schroeder Fonseca
Site map

15. 15
Campus Charqueadas
Prof. Esp. Cleber Schroeder Fonseca
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. 16
Campus Charqueadas
Prof. Esp. Cleber Schroeder Fonseca
UI
● Quais técnicas podem ser utilizadas para
implementar a melhor UI:
– Moodboards
– Graphical User Interfce – GUI
– Uso de grid no layout

17. 17
Campus Charqueadas
Prof. Esp. Cleber Schroeder Fonseca
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. 18
Campus Charqueadas
Prof. Esp. Cleber Schroeder Fonseca
Moodboards

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

20. 20
Campus Charqueadas
Prof. Esp. Cleber Schroeder Fonseca
GUI

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

22. 22
Campus Charqueadas
Prof. Esp. Cleber Schroeder Fonseca
Grid de layout

23. 23
Campus Charqueadas
Prof. Esp. Cleber Schroeder Fonseca
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. 24
Campus Charqueadas
Prof. Esp. Cleber Schroeder Fonseca
Responsive design