Wireframe do site

Da Wikipédia, a enciclopédia livre
Ir para a navegação Saltar para pesquisar
Um documento de estrutura de arame para uma visualização de perfil de pessoa

Um wireframe de site , também conhecido como esquema de página ou plano de tela , é um guia visual que representa a estrutura esquelética de um site . [1] : 166  O termo wireframe é retirado de outros campos que usam uma estrutura esquelética para representar forma e volume tridimensionais. [2] Os wireframes são criados com o propósito de organizar elementos para melhor realizar um propósito específico. O propósito geralmente é impulsionado por um objetivo de negócios e uma ideia criativa. O wireframe descreve o layout da página ou a organização do conteúdo do site, incluindo elementos de interface e sistemas de navegação, e como eles funcionam juntos.[3] : 131  O wireframe geralmente carece de estilo tipográfico, cor ou gráficos, pois o foco principal está na funcionalidade, comportamento e prioridade do conteúdo. [1] : 167  Em outras palavras, ele se concentra no que uma tela faz, não em sua aparência. [1] : 168  Wireframes podem ser desenhos a lápis ou esboços em um quadro branco, ou podem ser produzidos por meio de uma ampla gama de aplicativos de software gratuitos ou comerciais. Os wireframes geralmente são criados por analistas de negócios, designers de experiência do usuário, desenvolvedores, designers visuais e por especialistas em design de interação , arquitetura da informação e pesquisa de usuários.

Os wireframes se concentram em:

  • A gama de funções disponíveis
  • As prioridades relativas das informações e funções
  • As regras para exibir certos tipos de informações
  • O efeito de diferentes cenários na tela [1] : 169 

O wireframe do site conecta a estrutura conceitual subjacente, ou arquitetura da informação , à superfície ou design visual do site. [3] : 131  Wireframes ajudam a estabelecer a funcionalidade e as relações entre os diferentes modelos de tela de um site. Um processo iterativo, a criação de wireframes é uma maneira eficaz de fazer protótipos rápidos de páginas, ao mesmo tempo em que mede a praticidade de um conceito de design. O wireframing normalmente começa entre “trabalho estrutural de alto nível – como fluxogramas ou mapas do site – e designs de tela”. [1] : 167  No processo de construção de um site, wireframes é onde o pensamento se torna tangível. [4] : 186 

Os wireframes também são utilizados para a prototipagem de sites móveis, aplicativos de computador ou outros produtos baseados em tela que envolvem interação humano-computador . [2]

Usos de wireframes [ editar ]

Os wireframes podem ser utilizados por diferentes disciplinas. Os desenvolvedores usam wireframes para obter uma compreensão mais tangível da funcionalidade do site, enquanto os designers os usam para impulsionar o processo de interface do usuário (UI). Designers de experiência do usuário e arquitetos de informações usam wireframes para mostrar caminhos de navegação entre páginas. Os analistas de negócios usam wireframes para dar suporte visual às regras de negócios e aos requisitos de interação de uma tela. As partes interessadas de negócios revisam os wireframes para garantir que os requisitos e objetivos sejam atendidos por meio do design. [1] : 167  Profissionais que criam wireframes incluem analistas de negócios, arquitetos de informação, designers de interação, designers de experiência do usuário, designers gráficos, programadores e gerentes de produto. [2]

Trabalhar com wireframes pode ser um esforço colaborativo, pois conecta a arquitetura da informação ao design visual. Devido a sobreposições nesses papéis profissionais, podem ocorrer conflitos, tornando o wireframing uma parte controversa do processo de design. [4] : 186  Uma vez que os wireframes significam uma estética “bare bones”, é difícil para os designers avaliarem o quão próximo o wireframe precisa para representar os layouts de tela reais. [1] : 168 Para evitar conflitos, é recomendável que os analistas de negócios que entendam os requisitos do usuário criem um wireframe básico e depois trabalhem com designers para melhorar ainda mais os wireframes. Outra dificuldade com wireframes é que eles não exibem efetivamente detalhes interativos porque são representações estáticas. O design moderno da interface do usuário incorpora vários dispositivos, como painéis expansíveis, efeitos de foco e carrosséis que representam um desafio para diagramas 2D. [1] : 169 

O principal benefício dos wireframes é que eles podem ser usados ​​para iterar em qualquer interface de maneira ágil. Isso acontece por meio de um processo muitas vezes chamado de testes de usabilidade, em que os usuários têm a oportunidade de interagir com a interface e pensar em voz alta sobre seu processo de pensamento ou responder a perguntas mais estruturadas. Após cada teste com um usuário, um pesquisador de experiência do usuário pode identificar interações comuns com a interface, sintetizar os dados e reprojetar adequadamente. [5]

Devido à natureza geralmente de baixa fidelidade do wireframe, é muito fácil e econômico fazer alterações. O objetivo de um wireframe é capturar o design da estrutura fundamental, padrão de interação de alto nível dentro de uma interface, também conhecido como pontos críticos, [5] então ele realmente permite que um designer trabalhe rapidamente, perfeito para um ambiente ágil onde os membros do grupo trabalham colaborativamente para "correr" para a próxima iteração.

Os wireframes podem ter diferentes níveis de detalhes e podem ser divididos em duas categorias em termos de fidelidade, ou quão próximos eles se assemelham ao produto final.

Baixa fidelidade

Assemelhando-se a um esboço ou a uma maquete rápida, os wireframes de baixa fidelidade podem ser produzidos rapidamente. Esses wireframes ajudam uma equipe de projeto a comunicar ideias e colaborar de forma mais eficaz, pois são mais abstratos, usando retângulos e rótulos para representar o conteúdo. [4] : 185  Conteúdo fictício, texto de preenchimento latino ( lorem ipsum ), amostra ou conteúdo simbólico são usados ​​para representar dados quando o conteúdo real não está disponível. [1] : 175  Por exemplo, em vez de usar imagens reais, um retângulo de espaço reservado pode ser usado.

Os wireframes de baixa fidelidade podem ser usados ​​para facilitar a comunicação da equipe em um projeto e são usados ​​nos estágios iniciais de um projeto. [6]

Alta fidelidade

Os wireframes de alta fidelidade são frequentemente usados ​​para documentar porque incorporam um nível de detalhe que se aproxima mais do design da página da Web real, levando mais tempo para criar. [4] : 185 

Para desenhos simples ou de baixa fidelidade, a prototipagem em papel é uma técnica comum. Como esses esboços são apenas representações, anotações — notas adjacentes para explicar o comportamento — são úteis. [1] : 194  Para projetos mais complexos, a renderização de wireframes usando software de computador é popular. Algumas ferramentas permitem a incorporação de interatividade, incluindo animação em Flash e tecnologias de front-end da web, como HTML , CSS e JavaScript .

Os wireframes de alta fidelidade incluem conteúdo mais real, opções de tipografia específicas e informações sobre as dimensões da imagem. Ao contrário dos wireframes de baixa fidelidade, os wireframes de alta fidelidade podem incluir imagens reais. As opções de cores não estão incluídas, mas valores diferentes em cores podem ser representados em escala de cinza. [6]

Elementos de wireframes [ editar ]

O plano básico de um site pode ser dividido em três componentes: design de informação, design de navegação e design de interface. O layout da página é onde esses componentes se juntam, enquanto o wireframing é o que descreve a relação entre esses componentes. [3] : 131 

Design de informação [ editar ]

O design da informação é a apresentação – colocação e priorização da informação de uma forma que facilite a compreensão. O design da informação é uma área do design da experiência do usuário , destinada a exibir informações de forma eficaz para uma comunicação clara. Para websites, os elementos de informação devem ser organizados de forma que reflitam os objetivos e tarefas do usuário. [3] : 126 

Projeto de navegação [ editar ]

O sistema de navegação fornece um conjunto de elementos de tela que permitem ao usuário mover página a página através do site. O design de navegação deve comunicar a relação entre os links que ele contém para que os usuários entendam as opções que têm para navegar no site. Muitas vezes, os sites contêm vários sistemas de navegação, como navegação global, navegação local, navegação suplementar, navegação contextual e navegação de cortesia. [3] : 120–122 

Design de interface [ editar ]

O design da interface do usuário inclui selecionar e organizar os elementos da interface para permitir que os usuários interajam com a funcionalidade do sistema. [3] : 30  O objetivo é facilitar ao máximo a usabilidade e a eficiência. Os elementos comuns encontrados no design da interface são botões de ação, campos de texto, caixas de seleção, botões de opção e menus suspensos.

Veja também [ editar ]

Referências [ editar ]

  1. ^ a b c d e f g h i j Brown, Dan M. (2011). Design de Comunicação: Desenvolvimento de Documentação de Site para Design e Planejamento (2ª ed.). Imprensa Novos Riders . ISBN 978-0321712462.
  2. ^ a b c Angeles, Michael (25 de setembro de 2014). ""Arames"" . Konigi Wiki . Arquivado a partir do original em 2018-05-05 . Recuperado em 2011-03-25 .
  3. ^ a b c d e f Garrett, Jesse James (2010). Os elementos da experiência do usuário: design centrado no usuário para a Web e além . Imprensa Novos Riders . ISBN 978-0321683687.
  4. ^ a b c d Wodtke, Cristina; Govella, Austin (2009). Arquitetura da Informação: Blueprints for the Web (2ª ed.). Imprensa Novos Riders . ISBN 978-0321600806.
  5. ^ a b https://wtf.tw/ref/holtzblatt.pdf
  6. ^ a b "Wireframes de baixa fidelidade versus alta fidelidade - criativo constante" . Criativo constante . 13-09-2016 . Recuperado 2018-02-06 .