Desenvolvimento de Interface Gráfica - Introdução ao desenvolvimento de interface

510 visualizações

Publicada em

Introdução ao desenvolvimento de interfaces

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
510
No SlideShare
0
A partir de incorporações
0
Número de incorporações
10
Ações
Compartilhamentos
0
Downloads
8
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Desenvolvimento de Interface Gráfica - Introdução ao desenvolvimento de interface

  1. 1. Campus Charqueadas Desenvolvimento de Interfaces Gráficas Prof. Esp. Cleber Schroeder Fonseca
  2. 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. 3. Campus Charqueadas Prof. Esp. Cleber Schroeder Fonseca Princípios do Design
  4. 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. 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. 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. 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. 8 Campus Charqueadas Prof. Esp. Cleber Schroeder Fonseca Card sorting
  9. 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. 10 Campus Charqueadas Prof. Esp. Cleber Schroeder Fonseca Sketch
  11. 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. 12 Campus Charqueadas Prof. Esp. Cleber Schroeder Fonseca Wireframe
  13. 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. 14 Campus Charqueadas Prof. Esp. Cleber Schroeder Fonseca Site map
  15. 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. 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. 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. 18 Campus Charqueadas Prof. Esp. Cleber Schroeder Fonseca Moodboards
  19. 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. 20 Campus Charqueadas Prof. Esp. Cleber Schroeder Fonseca GUI
  21. 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. 22 Campus Charqueadas Prof. Esp. Cleber Schroeder Fonseca Grid de layout
  23. 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. 24 Campus Charqueadas Prof. Esp. Cleber Schroeder Fonseca Responsive design

×