Home→prototyping→Prototyping Digital Artifacts and Software: Wireframing
prototyping · Método 09
09
Prototyping Digital Artifacts and Software: Wireframing
Wireframing usa esquemas nao-graficos de interfaces digitais e sua estrutura para mostrar como se encaixam e criar alinhamento dentro da equipe de design. Wireframes sao esquemas do layout de uma pagina web ou interface de software, incluindo estruturas de navegacao e elementos de conteudo. A maioria dos elementos e sugerida em vez de explicita, o que torna os wireframes rapidos de criar e exige menos habilidades especializadas.
Duração
1-2 horas a alguns dias, dependendo da complexidade do prototipo
Energia
Baixa
Participantes
1 ou mais facilitadores. 2-10 participantes
Output
Dados de pesquisa (bugs, insights e novas ideias); filmagens e fotos brutas; documentacao dos wireframes atualizados e anotacoes
Gera artefato
—
Passo a passo
01
Escolha o usuario
Qual usuario vai testar os wireframes? Escolha uma persona ou tipo especifico de usuario.
02
Revise o escopo e clarifique as perguntas
O que voce quer aprender? Testar a experiencia toda ou apenas uma parte? A estrutura de alto nivel esta clara? Voce precisa separar landing pages? Quer identificar apenas a estrutura correta ou tambem testar o storyline?
03
Prepare os wireframes
Esboce versoes brutas das diferentes telas da interface no papel, em quadros brancos ou em um app de wireframing. Nao use cores ou fontes especificas. Deixe de fora a estetica. Use conteudo placeholder.
04
Apresente os wireframes
Estabeleca o contexto em que os wireframes serao usados na aplicacao futura. Apresente os wireframes, explique as convencoes visuais e apresente os elementos-chave.
05
Colete feedback
Discuta com a equipe ou com um publico selecionado.
06
Documente ao longo do processo
Adicione anotacoes para capturar mudancas e novas ideias sobre os comportamentos dos elementos de interface. Adicione detalhes sobre o conteudo ou o contexto de uso do sistema.
Notas do método
→Nao use cores ou fontes especificas — deixe de fora a estetica ao maximo. Use conteudo placeholder.
→Wireframes podem ser usados para alinhar diferentes disciplinas dentro da equipe de design, conectando estrutura conceitual ao design visual.
→Podem servir como ponto de partida para um paper prototype ou interactive click-model.
→Util para definir especificacoes de interface, transicoes, gestos e outros aspectos importantes.
Minhas notas de aplicação
Antonio Farias · FAU USP
Nenhuma nota ainda. As notas serão adicionadas após a aplicação do método em campo.
Materiais
—Canetas
—papel
—post-its para anotacoes
—quadro branco
—camera digital
—app de wireframing (opcional)