Roteiro

Design de Interfaces – Prof. Andrea Soares

Wireframes e Grids

Design de Interfaces – Prof. Andrea Soares

Wireframes

Prof.ª Andrea Soares

Design de Interfaces – Prof. Andrea Soares

Wireframes

Função
Simular visualmente a estrutura das informações de uma interface, sem a preocupação de apresentar uma interface gráfica final.
Prof.ª Andrea Soares

Design de Interfaces – Prof. Andrea Soares

Wireframes

O que são
a) são esboços da interface que o usuário terá contato. b) mostram o projeto de interface sem mostrar o design gráfico, indicando os links, botões funcionais e outros elementos que possam influenciar o uso da interface e a relação entre eles.
Prof.ª Andrea Soares

Design de Interfaces – Prof. Andrea Soares

Wireframes de
Baixa fidelidade
Prof.ª Andrea Soares

Design de Interfaces – Prof. Andrea Soares

Prof.ª Andrea Soares

Design de Interfaces – Prof. Andrea Soares

Wireframes de
Alta fidelidade
Prof.ª Andrea Soares

Design de Interfaces – Prof. Andrea Soares

Prof.ª Andrea Soares

Design de Interfaces – Prof. Andrea Soares

Wireframes online http://iplotz.com/ https://pidoco.com/ https://cacoo.com/ https://gomockingbird.com/

Prof.ª Andrea Soares

Design de Interfaces – Prof. Andrea Soares

Grids
“Todo trabalho de design envolve a solução de problemas em níveis visuais e organizativos.
Figuras, símbolos, massa de textos, títulos e tabelas devem se reunir para transmitir informação. O grid é uma maneira de juntar esses elementos.” (Luiz Agner)

Prof.ª Andrea Soares

Design de Interfaces – Prof. Andrea Soares

Grids
Importante processo do projeto de design

Ferramenta de ordem e organização dos elementos de um projeto para resolver visualmente uma composição e obter coesão no layout.
Prof.ª Andrea Soares

Design de Interfaces – Prof. Andrea Soares

Grids
Conjunto de relações de alinhamento que servem como guias para a distribuição dos elementos.