Melhores recursos para esboçar os wireframes baseados em grade

O processo de projetando uma interface sempre começa com geração de ideias. Isso inclui visualização, pesquisa de outros sites e prototipagem rápida. Esta fase inicial da ideia é crucial para Entenda o layout e a experiência do usuário você pretende construir. Então, como você deve executar o trabalho de wireframing em um novo projeto??

Sou fã de papel e lápis tradicionais com ferramentas extras, conforme necessário. Mas wireframing digital também é grande e é uma opção viável para designers modernos. Neste artigo, gostaria de compartilhar os melhores recursos para as duas técnicas para ajudar você a criar sua própria wireframes de interface do usuário baseados em grade.

Conceituação inicial de UI / UX

Vamos começar por esclarecer as diferenças entre um wireframe e um protótipo. Estas duas palavras são frequentemente usadas de forma intercambiável porque se relacionam com o mesmo processo.

UMA wireframe é um esboço estático único da interface do usuário de uma página da Web ou de um aplicativo. Pode ter textos explicativos para explicar o texto do botão, as margens, os tamanhos dos elementos ou até mesmo as animações. Mas os wireframes são apenas rascunhos para páginas individuais.

Da mesma forma, protótipo é como um fluxograma mostrando como páginas diferentes se conectam. Então, um protótipo conecta wireframes para demonstrar como diferentes botões ou links devem levar a outras páginas.

Essas definições não são esculpidas em pedra, alguns designers podem ter sua própria terminologia e podem discordar da minha formulação exata. Mas é assim que eu os vejo normalmente descritos, e é quantos designers entendem esses termos como os melhores.

Então, o que você deveria fazer exatamente com essas primeiras peças conceituais? Eles são realmente necessários? Eu diria que a prototipagem nem sempre é necessária, mas é uma boa ideia, especialmente para projetar aplicativos com interações complexas.

Mas wireframing é sempre uma boa ideia para cada novo projeto. Te ajuda focar a grande figura sem se preocupar com detalhes. Você tem uma noção de como a página geral é projetada, e isso é inestimável quando você está projetando um layout concreto.

Objetivos para o wireframing

Toda vez que você inicia um novo projeto, você deve contemplar o que você está tentando resolver. Cada site é construído com um objetivo específico em mente. Muitos sites até têm vários objetivos em que alguns objetivos são mais importantes que outros.

Use o wireframing como um guia para ajudá-lo a encontrar a melhor estratégia para capturando a (s) meta (s) de um site. Isso provavelmente não vai acontecer no primeiro wireframe, então esteja preparado para esboçar um monte de idéias diferentes.

Procure outros sites semelhantes e anote seus melhores recursos. Analise como o conteúdo é organizado e como você se movimenta em cada página.

Pense em wireframes de um ponto de vista interativo. Estas não são apenas imagens bonitas. Eles são representações de interfaces digitais, e você quer esboçar suas idéias com isso em mente.

Ter recursos à mão baseados na rede, sejam eles feitos de papel ou digitais, pode ajudar muito no esboço rápido. Agora vamos verificar os melhores recursos para criar wireframes.

Esboços de grade

Você pode sempre começar com esboços de miniaturas básicas em papel de impressora apenas para mapear idéias aproximadas. Pessoalmente, eu costumo começar a trabalhar em papel de impressora, porque desta forma eu estou menos preocupado com grades e mais sobre gerando ideias.

Esboços de grade de pontos é o melhor caminho a percorrer se você quiser limpar uma ideia, e dar mais estrutura. A grade ajuda você estimar distâncias entre itens na página e crie uma espécie de simetria no wireframe.

Há muitos grandes produtos lá fora, se você quiser começar wireframing no papel, por exemplo, o Rhodia Dot Pad vem em vários tamanhos para uso diário. Ele só vem com 80 páginas, mas isso é bastante típico da maioria dos cadernos de esboços.

Outro produto muito legal e personalizável é Dotgrid. Todos os itens da Dotgrid são mais caros do que os livros da Rhodia, mas eles vêm com mais materiais e designs personalizados.

A Dotgrid aceita até mesmo pedidos sob medida que permitem crie seu próprio bloco de anotações personalizado. Cada livro contém pouco menos de 100 folhas, então incluindo a frente e o verso você obtém cerca de 200 páginas para esboçar a grade.

Alguns outros esboços de grade de pontos que eu quero mencionar incluem o Behance Dot Grid, que é capa dura e encadernada em espiral, embora contenha apenas 50 folhas de papel..

O Sketchbook Design Responsivo é um dos melhores recursos para web designers. Nenhum outro designer de produto precisaria de um caderno de desenho responsivo, mas os web designers se beneficiam enormemente da liberdade de gerar ideias em diferentes larguras de dispositivos no topo de um layout de grade.

Estas almofadas de design responsivo também têm 50 folhas, totalizando 100 páginas, mas cada página tem quatro redes responsivas diferentes representando diferentes pontos de interrupção em design responsivo: desktop, laptop, tablet e smartphone.

Embora o design seja insípido em comparação com os livros da Dotgrid, ninguém mais considerou os cadernos de anotações responsivos para os web designers. Se você gosta desse tipo de coisa, vale a pena pedir um para um test drive.

Se você gosta de coisas feitas à mão e não quer gastar dinheiro, também pode imprimir suas próprias páginas de grade com esboço de interface. Este site gratuito oferece modelos de grade diferentes que você pode imprimir e usar para wireframes desenhados à mão.

As grades vêm em tamanhos de letra A4 e EUA para diferentes estilos de papel de impressora. Você pode escolher entre várias opções, como modelos para um navegador da Web completo ou diferentes telas do iPhone.

Todas essas opções são ótimas, e vale a pena explorar se você gosta desenho a lápis. O papel é um dos meios mais fáceis de obter novas ideias rapidamente, por isso muitas vezes é a escolha preferida até mesmo por designers de interface do usuário.

Ferramentas Digitais e Web Apps

Existem tantos programas de wireframes por aí que dificilmente podem ser cobertos sem o risco de paralisia da análise, por isso, vamos agora focar em algumas das melhores opções para wireframing baseado em grade.

Primeiro, gostaria de mencionar que você pode usar ferramentas da Adobe como o Illustrator para crie seus próprios wireframes. Isso não faz parte do fluxo de trabalho de todos e o Illustrator certamente não é gratuito. Mas se você já trabalha com a Adobe Creative Cloud, pode ser um bom lugar para começar.

1. Moqups

Moqups é uma das melhores ferramentas online para wireframing. Você trabalha com um editor visual e uma biblioteca de recursos para arrastar e soltar por toda a página.

Cada novo projeto de Moqups tem um grade pré-definida, e usa linhas roxas brilhantes para ajudar você a encaixar os elementos no alinhamento. É uma ótima ferramenta da Web que facilita muito o design com uma grade.

O site opera por padrão em um plano gratuito que limita o usuário a 300 objetos de página. O site tem opções premium, mas o pagamento de uma taxa mensal pode ser mais irritante do que usar ferramentas da Adobe ou uma compra única do Sketch.

2. Grid Papr

O aplicativo da Web Grid Papr é totalmente gratuito e oferece contas públicas e privadas para seus wireframes. Você cria um nome para o seu projeto e obtém seu próprio URL exclusivo para o wireframe, que pode ser editado em qualquer computador.

Cada novo wireframe vem com uma grade que permite executar snap-to-grid em todos os elementos. Os recursos são simples, mas são suficientes para crie um wireframe lo-fi em minutos. Basta arrastar o que quiser para a página e seguir a grade para criar um wireframe estelar.

3. Wireframe.cc

O Wireframe.cc é uma das ferramentas mais simples e mais minimalistas que você pode usar para wireframing. Possui um interface desordenada com um grade pré-construída e barras de ferramentas organizadas. Você simplesmente clica e arrasta para criar novos elementos na tela. Você também pode salvar e compartilhar seu trabalho.

Esta é mais uma ferramenta oferecida gratuitamente com planos premium opcionais. Cada plano é cobrado mensalmente, por isso é muito semelhante ao Moqups na estrutura de preços. A ferramenta gratuita é utilizável em qualquer computador sem uma conta.

4. Mockingbird

O Mockingbird é outra ótima opção, que oferece muito mais recursos do que a maioria das ferramentas de wireframing. Você pode começar de graça, mas o teste está limitado a sete dias. Isso pode ser um aborrecimento para alguns usuários, mas a ferramenta é realmente incrível e funciona em todos os navegadores.

Mockingbird tem uma biblioteca interminável de elementos de interface do usuário, como guias, acordeões, menus suspensos, players de vídeo e links de texto simples. A grade padrão usa o sistema de grade 960gs, mas você pode escolher entre 12, 16 e 24 colunas.

Palavras finais

Não importa se você escolhe wireframing tradicional ou digital, é sempre sobre o qualidade de saída. Há muito o que aprender quando se faz este tipo de trabalho, então encontre qualquer ferramenta mais confortável para você.

Avançando, a melhor coisa a fazer é basta começar wireframing. Tenha uma idéia do que você mais gosta (em papel ou digital) e faça do seu jeito. Os recursos deste artigo devem dar a você mais do que o suficiente para iniciar o wireframing de suas próprias interfaces digitais.

(Foto de capa de Oykun Yilmaz)