2
Campus Charqueadas
Prof. Esp. Cleber Schroeder Fonseca
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
4
Campus Charqueadas
Prof. Esp. Cleber Schroeder Fonseca
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
Prof. Esp. Cleber Schroeder Fonseca
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
Prof. Esp. Cleber Schroeder Fonseca
UX
● Quais técnicas podem ser utilizadas paraimplementar a melhor UX.– Card sorting
– Sketch
– Wireframe
– Site map
– Protótipo navegável
7
Campus Charqueadas
Prof. Esp. Cleber Schroeder Fonseca
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.
9
Campus Charqueadas
Prof. Esp. Cleber Schroeder Fonseca
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.
11
Campus Charqueadas
Prof. Esp. Cleber Schroeder Fonseca
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.
13
Campus Charqueadas
Prof. Esp. Cleber Schroeder Fonseca
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.
15
Campus Charqueadas
Prof. Esp. Cleber Schroeder Fonseca
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
Prof. Esp. Cleber Schroeder Fonseca
UI
● Quais técnicas podem ser utilizadas paraimplementar a melhor UI:– Moodboards
– Graphical User Interfce – GUI
– Uso de grid no layout
17
Campus Charqueadas
Prof. Esp. Cleber Schroeder Fonseca
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.
19
Campus Charqueadas
Prof. Esp. Cleber Schroeder Fonseca
GUI
● Ferramentas que facilitam o designerdisponibilizando padrões para que sejamutilizados em seus projetos.
21
Campus Charqueadas
Prof. Esp. Cleber Schroeder Fonseca
Grid de layout
● Desenvolvido para facilitar os designers nomomento de criar e alinhar os objetos emseus projetos.
23
Campus Charqueadas
Prof. Esp. Cleber Schroeder Fonseca
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.