24 melhores wireframes de sites gratuitos

Publicados: 2019-01-09

Wireframes são layouts de esboço de uma página da Web ou móvel. Eles permitem que os designers estruturem o conteúdo de uma página da Web e mapeiem exatamente como essa estrutura funcionará. Todo designer segue um conjunto de diretrizes e sistemas para criar um wireframe. Alguns preferem esboçar suas ideias em um pedaço de papel, enquanto outros geralmente acham as ferramentas digitais mais úteis. De qualquer forma, eles são considerados eficazes quando são intuitivos e fáceis de usar. Vamos dar uma olhada em alguns wireframes bem projetados projetados por diferentes designers da indústria.

Índice ocultar
1. Fontes Globais
2. EDX
3. Estilo X Estilo
4. Manobrista
5. Fadena
6. Os Engenheiros de Valor
7. Wireframes por Brandon Wimberly
8. Codificar
9. Conceito de perfil de usuário
10. Tiquetaque
11. Contabilidade do Sul Devon
12. Aplicativo meteorológico
13. Wireframes por Andre Picard
14. Wireframe por Melody Rose
15. Nuvens coloridas
16. WeUI
17. Modo de vida
18. Kit de armação de fio móvel
19. Varreduras
20. Sosterio
21. Casa
22. Wireframe de fidelidade média do site Morphomics
23. Wireframe exploratório da Shopify
24. Esboçando um novo projeto por Tim Knight

1. Fontes Globais

Este é um exemplo típico de um wireframe. Contém várias páginas. Os produtos podem ser exibidos em uma ordem clara e são cercados por contêineres de texto que podem mostrar detalhes do produto. Você pode baixar o arquivo aqui.

Alfinete

2. EDX

Este wireframe foi projetado para empresas orientadas para a educação. Inclui páginas para cursos, programas, parceiros, sobre, home e cursos e tutoriais online. Você pode baixar o arquivo aqui.

Alfinete

3. Estilo X Estilo

Este é um wireframe orientado para moda/estilo. Inclui páginas básicas como login, perfil, caridade, home etc. As páginas são bem desenhadas e os elementos são colocados de forma ordenada. Você pode baixar o arquivo aqui.

Alfinete

4. Manobrista

Este wireframe foi projetado para incluir interações de foco. Você pode baixar o arquivo aqui.

Alfinete

5. Fadena

Este é um wireframe de gestão escolar. Ele vem com recursos como horário, atendimento, PTS, comunicações e muito mais. Ele também é projetado para incluir páginas de login, formulários de registro, contato etc. Você pode baixar o arquivo aqui.

Alfinete

6. Os Engenheiros de Valor

Esse wireframe é ótimo para empresas que prestam muita atenção à marca. As páginas principais do wireframe incluem home, sobre nós, detalhes de contato, etc. Você pode baixar o arquivo aqui.

Alfinete

7. Wireframes por Brandon Wimberly

Brandon Wimberly usa um modelo em papel pontilhado para construir wireframes e o alinha para construir um wireframe muito uniforme e preciso para testar suas ideias.

Alfinete

8. Codificar

O wireframe foi criado para um aplicativo educacional chamado Encode. O layout é simples e claro. Possui uma longa página frontal para que o usuário possa visualizar as informações simplesmente passando o dedo na tela.

Alfinete

9. Conceito de perfil de usuário

O wireframe foi projetado por Tomasz Sochacki. Você pode baixar o arquivo aqui.

Alfinete

10. Tiquetaque

Este é um wireframe para um poderoso aplicativo de gerenciamento de tarefas. Isso vem com um ótimo tutorial animado. Isso foi projetado para adotar uma maneira de interagir com os usuários e adicionar uma interface de telefone celular real para orientá-los.

Alfinete

11. Contabilidade do Sul Devon

Este wireframe é mais adequado para serviços de contabilidade e negócios. O layout é simples e claro. Ele pode ser emparelhado com mock plus diretamente para construir o menu. Você pode baixar o arquivo aqui.

Alfinete

12. Aplicativo meteorológico

Este wireframe foi desenhado no illustrator e no Photoshop foi desenhado por Matt Sclarandis. Ele projetou uma coleção de wireframes para desktop e iPhones.

Alfinete

13. Wireframes por Andre Picard

Andre Picard cria wireframes em um quadro branco. Isso permite que ele faça edições e revisões rápidas. Isso também permite feedback e colaboração fáceis no escritório.

Alfinete

14. Wireframe por Melody Rose

Melody cria formas, tamanhos e recipientes coesos que parecem consistentes em todo o wireframe. A paleta wireframe se enquadra no esquema de cores cinza.

Alfinete

15. Nuvens coloridas

Este é um wireframe para um aplicativo de clima bonito que pode prever com precisão as condições climáticas futuras. Ele foi projetado para ter uma ilustração na página inicial e inclui páginas para login, previsão do tempo, cidade, centro de ajuda, configurações etc.

Alfinete

16. WeUI

Este é um exemplo para um wireframe comunitário. Os principais recursos incluem erro de formulário, notificação, upload, a operação é bem-sucedida. O arquivo pode ser baixado aqui

Alfinete

17. Modo de vida

Este aplicativo foi projetado para gravar e gerenciar sua vida. Este wireframe vem com uma incrível variedade de recursos.

Alfinete

18. Kit de armação de fio móvel

O kit permite criar maquetes e vem com cerca de 90+ telas de celular e centenas de outros elementos. Possui fluxogramas, modelos, fluxos de UX e apresentações. Cada camada individual é nomeada e classificada. O arquivo pode ser baixado aqui.

Alfinete

19. Varreduras

Este wireframe pré-construído ajuda você a gravar coisas para melhorar a eficiência. Consiste na página de login/inscrição junto com outras páginas.

Alfinete

20. Sosterio

Este é um wireframe simples que é construído em torno de uma experiência agradável na web de música. Ele contém páginas para página inicial, pesquisa e perguntas frequentes. Você também pode enviar música simplesmente clicando no botão de música.

Alfinete

21. Casa

Este wireframe é construído para sites de listagem de propriedades. É limpo, intuitivo e responsivo. As camadas são claramente definidas e o usuário é capaz de entender o fluxo facilmente. Este arquivo pode ser baixado aqui.

Alfinete

22. Wireframe de fidelidade média do site Morphomics

Este wireframe é projetado por Lauren League. Ele é projetado para resolver problemas complexos de visualização de dados. É um modelo bem estruturado preenchido com caixas de conteúdo, formas e contêineres.

Alfinete

23. Wireframe exploratório da Shopify

Esses wireframes de alta fidelidade foram criados por Janna Hagan. Como você pode ver, ela introduziu recursos visuais nesta fase e o layout é lindamente projetado.

Alfinete

24. Esboçando um novo projeto por Tim Knight

O designer acha útil criar wireframes simples e de alta velocidade. Isso é útil ao mapear ideias para um cliente e nos estágios iniciais do design.

Alfinete

  • Este wireframe por Bitesize Chef projetado por James Baross, Ao clicar em botões diferentes, o usuário pode ver o fluxo geral do usuário.

Alfinete

  • Grant Helton projetou este aplicativo. Este wireframe mostra ao usuário como ele faz a transição de tela para tela. Com a ajuda de um rodapé flutuante, ele é capaz de orientar o usuário e fazê-lo ver onde está em seu fluxo. Ele usou o aplicativo invision para construir este protótipo.

Alfinete

  • Este wireframe foi projetado por Julio Castellano - mostra o fluxo do usuário para uma identificação de risco de RV. Isso é usado para educar os novos funcionários sobre a necessidade de trabalhar em locais com riscos.

Alfinete