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

Campus Charqueadas

Desenvolvimento de InterfacesGráficas

Prof. Esp. Cleber Schroeder Fonseca

2

Campus Charqueadas


Exercício

Escolha 2 sites (1 com design eficiente eoutro 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 deInterfaces

● O design de interfaces pode ser divididoem duas partes, Experiência do Usuário(User eXperience – UX) e a Interface doUsuário (User Interface – UI).

5

Campus Charqueadas


UX

● É o que a pessoa, usuário, sente einterpreta ao usar uma interface.

● Essa interface pode ser um site, um app,um sistema, um celular, um tablet oumesmo um produto.

6

Campus Charqueadas


UX

● Quais técnicas podem ser utilizadas paraimplementar a melhor UX.– Card sorting

– Sketch

– Wireframe

– Site map

– Protótipo navegável

7

Campus Charqueadas


Card sorting

● Técnica simples onde cada pessoa daequipe desenvolvimento dá pequenos“palpites”, cada uma dessas ideias écolocada em um Post-it e esse sãocolocados em um agrupamento.

8

Campus Charqueadas


Card sorting

9

Campus Charqueadas


Sketch

● Criado com o uso de papel e caneta elápis.

● Forma mais prática de visualizar umaideia/conceito de uma interface ou produto.

● Boa forma do Designer validar a interfacepara os stakeholders.

10

Campus Charqueadas


Sketch

11

Campus Charqueadas


Wireframe

● A tradução (armação de arame) já deixabem transparente o que é o wireframe.

● Geralmente é criado sem cor e comelementos simples visando mostrarapenas o essencial da interface.

● São usados para organizar elementos edefinir a hierarquia das informações,validar junto ao time as funções e objetivosda interface.

12

Campus Charqueadas


Wireframe

13

Campus Charqueadas


Site map

● É uma representação hierárquica daestrutura de um site.

● Demonstra as páginas que devem ter emum site ou sistema, e ainda mostra oscaminhos que podem ser utilizados parachegar em uma determinada parte dosistema.

14

Campus Charqueadas


Site map

15

Campus Charqueadas


UI

● É o que as pessoas, usuários utilizam parachegar 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 paraimplementar 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émchamado de painel semântico.

● Utilizado por designers para desenvolverseus conceitos, e para se comunicaremcom outros membros do time de design.

18

Campus Charqueadas


Moodboards

19

Campus Charqueadas


GUI

● Ferramentas que facilitam o designerdisponibilizando padrões para que sejamutilizados em seus projetos.

20

Campus Charqueadas


GUI

21

Campus Charqueadas


Grid de layout

● Desenvolvido para facilitar os designers nomomento de criar e alinhar os objetos emseus projetos.

22

Campus Charqueadas


Grid de layout

23

Campus Charqueadas


Responsive design

● Nada mais é do que criar uma formadiferente para ser exibida conforme otamanho da tela.

● O conteúdo deve se adpatar ao tamanhodo dispositivo.

24

Campus Charqueadas


Responsive design

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

Technology