Como + Por que usar um modelo de estrutura de arame do site
A estrutura de arame é um daqueles processos de design que ocorre de maneira orgânica e intencional. Quantas vezes você esboçou uma ideia durante uma reunião? Quantas vezes você criou um wireframe apresentável para uma reunião de clientes?
Ambos os tipos de wireframes são partes igualmente importantes do processo de design e iteração.
O último exige um pouco mais de esforço para criar, e é aí que entra um modelo de estrutura de arame. Aqui está tudo o que você precisa saber sobre como usá-lo de forma eficaz e como eles podem ajudar a economizar seu tempo, melhorar a qualidade de seus wireframes e ajudá-lo anote suas idéias em um formato físico.
Explorar modelos de sites
O que é um modelo de estrutura de arame do site?
Um wireframe é uma ilustração básica de um conceito de design de site. Cada tipo de página pode ter seu próprio wireframe. Esses projetos geralmente começam na forma de esboços e podem eventualmente evoluir para maquetes ou protótipos.
Um modelo de estrutura de arame de site é um kit de pseudo-UI com elementos de estrutura de arame, em vez de componentes da interface do usuário. Muitos modelos usam o "kit de interface do usuário da estrutura de arame" no nome, embora isso não seja exatamente o que são. (Mas você entendeu.)
Um modelo de estrutura de arame pode ser usado para Sketch ou Adobe XD ou Photoshop. O modelo escolhido deve corresponder às suas ferramentas e fluxo de trabalho.
Um bom modelo de estrutura de arame possui elementos para diferentes tipos de páginas, elementos e não é muito sofisticado. Blocos de imagem, blocos de texto, botões e elementos na tela (desktop, celular) de que você precisa são peças comuns.
O que você não precisa é de algo parecido com um design finalizado. Opte pela estrutura de arame preto e branco no estilo de linha. Qualquer coisa que seja de alta fidelidade ou inclua cores e imagens pode confundir os clientes, fazendo-os pensar que estão olhando para um conceito de design real. (E você não quer isso na fase de wireframing de um projeto.)
5 razões pelas quais usar um modelo de estrutura de arame
Se você ainda não é vendido em wireframing, pode ser uma ótima ferramenta no processo de design. Modelos apenas aceleram tudo.
- Os modelos de estrutura de arame economizam tempo, ajudando você a pensar rapidamente de uma maneira apresentável.
- Os wireframes ajudam a identificar falhas de design e problemas de usabilidade mais cedo.
- Os modelos de estrutura de arame ajudam a pensar em diferentes tipos de páginas e elementos de página, para que você não deixe nada de fora.
- Os wireframes criam uma base sólida de design.
- Os modelos de estrutura de arame podem economizar dinheiro a longo prazo, como uma maneira de ajudar os clientes a entender um design sem investir em uma maquete completa.
Como usar um modelo de estrutura de arame
A maioria dos modelos de estrutura de arame funciona como kits de interface do usuário com elementos que você pode mover no software de sua escolha.
O uso exato depende da sua ferramenta.
A maioria dos modelos de estrutura de arame vem com páginas geralmente bem construídas, de forma que você só precisa fazer alterações simples no layout geral do seu projeto.
Costumo gostar de uma opção de arrastar e soltar. Arquivos de camada do Photoshop também são bons. Mas, novamente, muito depende da preferência pessoal e do fluxo de trabalho.
A chave para o uso eficaz de um modelo de estrutura de arame é escolher algo que espelhe seu fluxo de trabalho, suporte o software que você deseja usar e possa permanecer com você durante todo o processo. Muitas ferramentas permitem que você desenvolva e evolua wireframes para maquetes de alta fi. Se isso faz parte do seu fluxo de trabalho planejado, escolha um modelo de acordo.
Como obter um modelo de estrutura de arame
Quando se trata de usar um modelo de estrutura de arame do site, você tem duas opções:
- Construa o seu próprio
- Faça o download de um modelo pré-fabricado
A primeira pode fornecer a solução mais personalizada, mas pode levar muito tempo.
Este último oferece uma ampla variedade de tipos diferentes de modelos, com opções gratuitas e premium disponíveis para você escolher.
Qual opção você escolherá provavelmente dependerá do tempo e de quanto tempo você precisará de um modelo para trabalhar. O uso de um modelo pré-fabricado geralmente é o caminho de início rápido. A parte mais difícil pode ser pesquisar em tudo o que está disponível para encontrar a escolha certa.
5 modelos de estrutura de arame para experimentar
Pronto para começar com um modelo de estrutura de arame do site? Aqui estão cinco modelos diferentes que você pode testar o drive para ver como se sente ao usá-los em seus projetos.
Kit de interface do usuário limpa para esboços aproximados
Este modelo de estrutura de arame mínimo é fornecido com peças intercambiáveis que têm um estilo quase esboçado para projetos rápidos.
Kit de Wireframe para iOS do Flow
Este modelo de estrutura de arame do Sketch é um excelente iniciador para conceitos de aplicativos ou sites para dispositivos móveis. Os elementos de estrutura de arame são simples e práticos.
Wirey Wireframe Kit
O Wirey inclui modelos do Photoshop e do Sketch, oferecendo a você uma certa flexibilidade de wireframing. O modelo inclui mais de 200 componentes e 1.000 elementos, portanto tudo o que você precisa está aqui.
Kit de estrutura de arame responsivo
Este modelo de estrutura de arame para o Figma e o Sketch foi projetado para levá-lo desde o início da wireframing até a criação de protótipos. Inclui toneladas de blocos e modelos para tamanhos de desktop, celular e tablet para ajudar a focar seu processo de pensamento responsivo.
Estrutura de arame de fluxo de trabalho UX e criador de sitemap
Este modelo de estrutura de arame está repleto de opções com páginas e mapas de site prontos para uso. Um modelo como esse pode ajudá-lo a planejar projetos se precisar de uma pequena ajuda para começar.
Conclusão
Os modelos de estrutura de arame do site são um desses atalhos que podem facilitar o design.
Sou um wireframer de desenho no papel, mas isso simplesmente não está pronto para o cliente. Então, eu uso modelos para converter minha bagunça de lápis em algo que pareça apresentável. Os modelos tornam isso muito mais rápido e fácil e tornam uma tarefa da qual eu não sou muito mais administrável.
Se você ainda não experimentou usar um modelo de estrutura de arame, eu o recomendo por esse motivo. Pegue um dos exemplos acima ou considere criar o seu próprio que você pode usar e reutilizar.
