melhor esboço de Kits de arames para iniciar o seu projeto

você empurrou através da descoberta: pesquisa de usuário, entrada de stakeholders, auditorias de Conteúdo, e muito mais. Agora é hora de colocar a arquitetura da informação juntos em um design responsivo que atende às necessidades de um público faminto.

Wireframes não são um conceito novo neste mundo. Wireframes definir o palco para qualquer produto final ou invenção. Plantas para casas e edifícios servem como wireframes; na prototipagem de produtos, eles são frequentemente exibidos em formatos tridimensionais, como com desenhos de design assistido por computador (CAD).

o que é o Wireframing?

Wireframing ou experiência do usuário (UX) é o processo de criação de um layout antes do início do projeto da interface do usuário (UI). Muitas vezes, eles são feitos com caixas preto, branco e cinza para significar elementos de uma página que poderia incluir:

  • Navegação
  • Chamadas à ação
  • Banners e imagens
  • Blocos de cópia
  • espaços publicitários
  • formulários

Wireframes ajudar as equipes de projeto de estabelecer “o que” e “como” de um site de experiência, incluindo o potencial de funcionalidade e estética.

What is Wireframing

Quando você está pronto para lidar com o seu modelo de arames, confira estas 15 dicas para criar wireframes eficientes e fáceis de usar.

Wireframing & Ferramentas de colaboração

No mundo de desenvolvimento do site, há muitas ferramentas que designers e especialistas da UX podem escolher, incluindo aplicações, kits de modelo de arames, e muito mais.

Uma vez que você tenha seus componentes de arames — os banners, Caixas, e muito mais — você pode fazer upload destes para muitas ferramentas de design para colaborar com sua equipe.

Slickplan oferece sua ferramenta de maquete de Design, permitindo que designers e equipes para carregar protótipos, interfaces, conceitos de design e mais em um portal para fácil acesso e colaboração.

não importa que ferramenta você decida usar para levar o seu modelo de arames para a fase de colaboração e concepção, começando com um conjunto de ferramentas abrangente é um passo ideal 1.

Sketch Wireframe Kits

não quer dizer que você não poderia desenvolver seus próprios componentes de arames, mas se você está procurando economizar tempo e estresse para si ou para sua equipe, baixar um kit de arames é o caminho a seguir. O que é ótimo sobre a comunidade de design, é que muitos dos kits que são feitos por designers reais são compartilhados gratuitamente, como muitos deles são notados como sendo criados por conveniência. Você não viajará muito antes de ver um bilhete como, ” eu não poderia encontrar um kit que tinha o que eu precisava para o meu projeto, então eu fiz o meu próprio. Desfrutar.”

Check out more Sketch app resources available online.

Sketch é um dos produtos de arames e prototipagem mais populares no mercado, integrando-se facilmente com kits de arames carregados. é útil saber que os kits têm muitas formas e tamanhos. Você pode sempre começar com um desktop wireframe kit, mas você também pode encontrar handy Apple/iOS kits e Android kits que são especificamente para app-first designs e mobile-first commerce.

Felizmente, temos um lote confiável de favoritos de design livre e nominal para começar.

Website: Basic Wireframe Kit (Free)

Basic Wireframe Kit

Este kit básico – assim como está rotulado – apareceu em blogs ao redor da web quando se trata de grandes pacotes de favoritos do kit. É gratuito, e foi desenvolvido por um designer que simplesmente queria colocar tudo em um pacote.

percebeu que não tínhamos um bom recurso para criar wireframes rápidos. Encontrei recursos alternativos online, mas nada simples o suficiente para as nossas necessidades. O arquivo Sketch é o que eu criei para o nosso uso interno, mas eu pensei que a comunidade também iria encontrá-lo útil.

Miquéias Sivtiz

Miquéias Sivitz

Ele tem o estoque básico de que todo designer precisa, mas não tem ícones de mídia social, de modo que pode ser algo que você vai querer para o âmbito em outro lugar.

Download do kit básico de modelo de arames

Web Mobile: Teracy Wireframe Kit (Free)

Teracy leva o básico Wireframe Kit para um nível um pouco mais detalhado, incluindo ícones de mídias sociais, pão ralado, conteúdo de destaque, e ícones. É em preto, branco e cinza para que você mantenha seus wireframes simples e focado na funcionalidade e estrutura. Todas as suas características no pacote pode ser facilmente usado para mockups móveis, também.

Teracy Wireframe Kit

Download the Teracy Wireframe Kit

iOS App: Flow iOS Wireframe Kit (Free)

olhando para montar um protótipo específico para iOS (Apple)? Vê o Kit de arames da comunidade de Sketch. Com um menu de hambúrgueres responsivo, imagens e campos de formulário, é um kit sólido para começar a construir um aplicativo amigável. Este recurso livre é popular, com mais de 20.000 downloads e contando!

Flow iOs Wireframe Kit

Download the iOS Wireframe Kit

eCommerce: Carbon Material Wireframe Kit (livre)

Se você está no negócio de comércio eletrônico, seu objetivo deve ser fornecer aos consumidores uma experiência de loja sensível, móvel-amigável que torna o processo de compra — da descoberta para checkout — fácil. Enter: Carbon Material Wireframe Kit, um recurso livre que faz parte da comunidade Sketch. Quinze quadros e camadas estruturadas oferecem uma robusta seleção de ferramentas para abrir as portas de sua loja digital.

Carbon Wireframe Kit

Download do Carbon Material Wireframe Kit

Mobile App: Liberty Mobile Wireframe Kit (Free with Subscription)

Like Dribble and Github, Envato hosts a myriad of Sketch wireframe apps for any project. Mobile Liberty Wireframe Kit é uma grande solução para o design de aplicativos móveis, dando aos designers acesso a 125 telas totalmente em camadas e fontes do Google. É uma solução personalizável que não só funciona em Sketch, mas Photoshop, também.

Liberty Wireframe Kit

Download the Liberty Mobile Wireframe Kit

Website: Platforma Ultimate Wireframe Kit ($68)

Se você está procurando por tudo mais o lava-loiças da cozinha para lhe dar oportunidades para projetar um site completo fácil de usar, móvel responsivo, não procure mais além do Kit de mainframe Ultimate Da Platforma. A um preço de US $68, você terá acesso a mais de 200 layouts que trabalham com Sketch, UX Pin, InVision, e muito mais. Escolha entre 15 categorias de conteúdo populares, incluindo blog, e-commerce, rodapé, imagens de heróis, e muito mais. Este kit robusto, disponível através da floresta, tem tudo o que você precisa e, em seguida, alguns.

ownload the Platforma Ultimate Wireframe Kit

Website: HEXA Creative Website UI Kit (Free)

a simplicidade é bela, e no Hexa Creative Website UI Kit, você tem exatamente isso. Este kit limpo e criativo é fácil para designers e desenvolvedores. Equipado com fontes Google e compatível com Sketch e Photoshop, HEXA inclui 250 ícones vetoriais e camadas 100 por cento editáveis. Os vários tipos de arquivos dão aos designers muita flexibilidade para qualquer projeto de site de tamanho. Confira com Envato, gratuitamente.

HEXA Wireframe Kit

faça o Download do HEXA Criativo INTERFACE do usuário do Site Kit

Templates: Avaliações de Modelo de Esboço de Recursos (Grátis)

Começando com um modelo pode ser uma maneira fácil de obter a criatividade, e as Avaliações de Modelo de Esboço de Recursos, a partir de Esboço, é uma ótima opção conveniente. Quer queira começar com uma disposição de 1 coluna ou com uma disposição de 4 colunas, interagir com botões e páginas, ou apenas ter um monte de ferramentas disponíveis ao seu alcance, esta é uma escolha ideal para si. Este é um kit confiável, com mais de 53.000 downloads da Comunidade Sketch.

Esboço Esboço de Modelo

Baixe as Avaliações de Modelo de Esboço de Recursos

Tema Escuro: DarkDot Wireframe (Kit Grátis com subscrição)

Tudo do Facebook messenger para o Reddit oferece um tema escuro para apps esses dias, e DarkDot Wireframe Kit permite que você faça o mesmo para esboçar seu projeto. Com mais de 170 layouts web em 17 categorias, há algo para todas as necessidades em web e design móvel. O pacote totalmente personalizável inclui a grade de Bootstrap de 12 colunas, bem como fontes do Google. É compatível não só com o Sketch, mas também com a Figma, o Photoshop e o Adobe XD. Faça o Download gratuitamente com a assinatura.

DarkDot Wireframe Kit

faça o Download do DarkDot Wireframe Kit

Símbolos: Avaliações de Esboço Símbolos Kit (Grátis)

Se você está pronto para começar a colocar um pouco de movimento em torno de seu wireframes para indicar o-que-acontece-quando, livre Avaliações de Esboço Símbolos Kit é um conveniente recurso para ter em seu bolso. Mudar as cores das setas, virar e rodar Caixas, e muito mais. Este kit popular tem mais de 16.000 downloads. Porque é um conjunto de símbolos, envelhece bem apesar da paisagem sempre em mudança de tendências de design.

Sketch Symbols for Wireframing

Download the wireframe Sketch Symbols Kit

Find What Works for You

Download more than one wireframe kit and give them a try. Você provavelmente vai encontrar um que funciona melhor para o seu projeto e necessidades. Designers não são tímidos em compartilhar recursos que eles desenvolveram, e se você decidir fazer o seu próprio kit, compartilhar o amor! Compartilhar e iterar em kits é parte da diversão para a comunidade de design, então prepare-se para mergulhar, colaborar, e fazer grandes coisas acontecer para os usuários em todo o mundo.

Escrito Por Erin Schroeder

Erin Schroeder é um alto conteúdo estrategista e escritor Geonetric, onde ela ajuda a cuidados de saúde de marcas organizar usuário-primeira sites, o marketing de conteúdo, e a marca de mensagens. Como ex-jornalista, ela nunca perdeu o amor por escrever. Você também vai ver seus artigos sobre estratégia de Conteúdo e experiência do usuário em torno da web, incluindo UX Collective, UX Booth, e Prototypr.

TAGS: Layouts de página, Interface de utilizador, Web Design, Web Planning

Deixe uma resposta

O seu endereço de email não será publicado.