Maus hábitos nos dias de hoje, quando adquiríamos novas ideias de projetos e documentos de requisitos do usuário de nossos clientes, talvez esboçar algumas ideias e mergulhar no intrigante design do Photoshop.

Nosso raciocínio para essa metodologia era atingir o portão de design imediatamente para permitir tempo para revisão.

Depois de algum tempo, percebemos que passávamos muito tempo projetando, por quê? As revisões demoravam o tempo todo. As revisões foram complicadas; tivemos que ajustar layouts, gráficos e tipografia. Tudo era frustrante, desastroso para os prazos dos projetos, preocupante para os clientes e cansativo para nós. Demorou um pouco até percebermos que precisamos de uma abordagem diferente. Decidimos voltar ao processo inicial "Square One" que ignoramos anteriormente "Wire-framing". Começamos com wireframes Gray-boxes, incluímos em nosso processo de design, depois passamos para outro processo e adicionamos ao processo de design. No final, o modelo estava caindo no lugar, graças ao “Wire-framing", economizando nosso tempo e nos ajudou a resolver os problemas mais cedo. Por essa razão, eu voto wire-framing como o “primeiro portão” no processo de design.

Projetos de experiência do usuário com estrutura de arame

Quem sabe, no estágio inicial, você pode reconhecer um potencial desafio de usabilidade em seus projetos. Às vezes, um ótimo conceito de projeto com requisitos estritos (URS) do usuário, durante o processo inicial, eles parecem se encaixar. Mais uma vez, coisas piores acontecem quando começamos a fazer planos para papéis: “O que aconteceu?” ignoramos o wire-frame, que leva apenas alguns minutos para esboçar um plano do que o Photoshop colorido. Melhor começar a ajustar mais cedo do que mais tarde.

Wire-framing como uma ferramenta de gerenciamento de tempo

O gerenciamento de tempo é uma técnica importante para todos os projetos bem-sucedidos se um projeto estiver em um cronograma apertado; você pode pensar "por que perder meu tempo com enquadramento de arame, então é melhor pular para o Photoshop colorido". Cometemos esse erro inicialmente, mas ao invés disso acabamos revisando todo o conceito do que era demorado e um desperdício de recursos. Revisar caixas cinzas e esboços é muito mais fácil do que revisar designs coloridos incorporados a vários elementos complexos.

O wireframe é usado para criar uma dimensão real e correta de uma página. Uma vez aprovado pelo cliente, só precisamos de um remédio gráfico para melhorar sua aparência. O truque é que, se os wireframes, esboços e caixas cinzas estiverem em ordem, não teremos tempo para revisão. Em vez disso, vamos pular para a próxima parte “visual” do processo.

Wire-framing para vinculação do cliente

Às vezes, o layout de página com cores é uma distração para nossos clientes; talvez um cliente deteste a cor “Roxo” as emoções do cliente acham difícil se concentrar no plano. Seus feedbacks podem ser negativos devido aos seus sentimentos. Eles podem acabar pedindo “recomeçar”, os designs podem estar bem, mas a única coisa que irritou o cliente é a cor “roxo”. Portanto, usar caixas cinzas e esboços é uma maneira eficaz, pois eliminará as distrações dos elementos.

Um wireframe ajudará a obter feedback sobre dimensionamento, layout sem que o cliente se concentre apenas na aparência. Usar a abordagem wireframe também nos ajuda a saber mais sobre um cliente, do que ele gosta? Os estilos, tipografia, etc., apresentação de estrutura de arame, é como um momento de união, seu feedback e interação fazem você saber sobre eles e seus designs e o que esperar nas fases futuras do projeto? Quando você está esboçando um rascunho no papel, o cliente continuará comentando sobre ícones, botões, fontes, etc. Eles terminarão dizendo que preferem botões maiores do que menores, etc. padrões de feedback e aprender, ter conhecimento pode economizar seu tempo, energia e recursos.

7 coisas fascinantes sobre wireframes

1 Aumenta a experiência de trabalho em equipe

O processo de wireframing reúne diferentes grupos de pessoas com várias habilidades; todos fazem parte do processo do projeto. Gerentes de projeto, designers, desenvolvedores, todos se reúnem para atingir um objetivo. Isso é valioso porque melhora o trabalho em equipe e faz com que os colegas se entendam mais. Com o modelo “cascata”, os projetos podem ser realmente interrompidos.

2 Comunicação Transparente

Fluxo de comunicação suave, costumávamos sofrer quando alguns membros da equipe, como desenvolvedores, não estavam incluídos na discussão do projeto. Ao incluir cada pessoa no processo de wireframe, o problema é resolvido. Um desenvolvedor pode detectar um problema mais cedo que pode ser perdido em e-mails e bate-papos. Por outro lado, as especificações são elegantes e bonitas, mas difíceis de visualizar.

3 Envolva os Clientes

Um wireframe ajudará a obter feedback sobre dimensionamento, layout sem que o cliente se concentre apenas na aparência. Usar a abordagem wireframe também nos ajuda a saber mais sobre um cliente, do que ele gosta? Os estilos, tipografia, etc., apresentação de estrutura de arame, é como um momento de união, seu feedback e interação fazem você saber sobre eles e seus designs e o que esperar nas fases futuras do projeto? Quando você está esboçando um rascunho no papel, o cliente continuará comentando sobre ícones, botões, fontes, etc. Eles acabarão dizendo que preferem botões maiores do que menores, etc. para padrões de feedback e aprender, ter conhecimento pode economizar seu tempo, energia e recursos.

4 abordagens diferentes

O brainstorming permite que as pessoas criem várias maneiras de lidar com projetos. São fáceis de produzir e esboçar principalmente em papéis, basta um lápis e uma folha de papel, e nós abordamos os problemas de diferentes ângulos e os desenhamos em uma folha de papel. Você pode combinar e excluir atribuições até ter duas ou quatro que façam sentido.

Várias abordagens incluem abordagem técnica – recursos tecnológicos novos e de tendência, experiência dos usuários e testes de usabilidade, como os usuários realizarão uma meta e uma tarefa rapidamente antes de ficarem entediados, levando ao aborto da tarefa, novamente abordagem ambiental – quem são as partes interessadas? Quais campos estamos segmentando? Que tipos de recursos são importantes que podem se encaixar facilmente em uma determinada parte interessada e em um campo específico?

5 Uma base para o teste

Com 3 ou 5 protótipos, você pode testar um esboço de projeto com usuários reais. Há uma percepção de que só podemos testar usando protótipo HTML completo, mas isso não é verdade. Além disso, os wireframes desenhados à mão podem ser usados para testes. Você pode pedir sugestões do usuário sobre os botões que eles gostariam de clicar; eles também podem obter feedback sobre como nomear tags e, finalmente, podem ajudar a verificar se eles têm a hierarquia visual correta. Testar via wireframe ajuda a identificar problemas mais cedo.

6 Projeto mais rápido produzido

Leva um pouco de tempo e dinheiro para prototipar um projeto baseado em wireframe, isso ocorre porque diferentes grupos de pessoas estavam envolvidos no processo de wireframe. Portanto, erros imprevistos que possam causar revisões são tratados antes do projeto real. Mais uma vez, o layout do projeto foi visto pelos clientes e, portanto, o design final foi assinado. Isso reduz o tempo para vários conceitos.

Wire-framing com Photoshop

Caixas cinzas e esboços com photoshop.

Etapa 1: reunir requisitos adicionais dos clientes e, em seguida, “iniciar” para colorir o photoshop completo e iniciar o enquadramento de arame.

Etapa 2: crie o documento com base no sistema de 960 grades, (1100 pixels de largura e 760 de altura), você pode aprender isso em “configuração de grade no Photoshop”.

Etapa 3: A ferramenta Balde de tinta (G) é usada para preencher o fundo com uma cor cinza claro para explicar que haverá uma cor ou imagem de fundo.

Passo 4: Escolha a Ferramenta Retângulo na barra de ferramentas e desenhe uma caixa para simbolizar a área de conteúdo. Estamos usando o sistema de grade 960; minha caixa desenhada terá 940 pixels de largura. Torne a cor do primeiro plano branca usando a “Paint Bucket Tool” para que ela apareça contra o fundo cinza.

Passo 5: Para tornar o processo muito mais rápido, basta (digitar a letra D) definir o foreground para preto ou qualquer cor que lhe convier e o background para branco ou qualquer cor. Em seguida, desenhe caixas pretas para representar as áreas de conteúdo. Novamente, você pode optar por alterar a opacidade dos planos de fundo para fazê-los parecer cinza ou de qualquer cor.

Etapa 6: Dentro da grade, adicione um retângulo para representar qualquer coisa. Neste caso, “Botão de login”, digite o valor de opacidade (“30”) para diminuir a opacidade do retângulo (“30”) após o retângulo ser desenhado. Você pode adicionar texto usando a Type Tool (T) na barra de ferramentas de texto para adicionar o texto “LOGIN” sobre a caixa. Adicione outro retângulo para criar a área de navegação, novamente, diminua o valor de opacidade para torná-lo cinza.

Passo 7: Adicione retângulos para criar as áreas de coluna de conteúdo. Use um layout de duas colunas com uma coluna de conteúdo principal um pouco maior e uma coluna menor para a imagem da página inicial. Defina a opacidade para 10% para as colunas e também adicione outro retângulo para representar o rodapé na parte inferior da página.

Página 8: Na área de conteúdo, adicione textos fictícios usando o comando Digitar > Colar Lorem Ipsum do Photoshop.

Outras aplicações

Outro aplicativo para wire framing que pode ser usado por designers não gráficos para construir wireframes interativos e bonitos.

OmniGraffleName

É como o Micro-Visio, tem estênceis muito bons que podem ser usados para design de alta tecnologia e os recursos são incríveis. Isso é o melhor.

Mock Ninja

Meu favorito, de uso GRATUITO, tem recursos e estênceis muito bons que podem ser usados para criar um conceito de projeto interativo. Ele permite que os usuários trabalhem offline e online.

gráficos encantadores

Isso é bom para iniciantes, é GRATUITO e as interfaces são fáceis de entender.

balsâmico

Uma maneira rápida de transmitir conceitos de projetos a um cliente, possui demonstração gratuita que permite aos usuários salvar o produto final. Tem todos os elementos necessários para esboçar, bem como a aparência de desenho à mão que é única.

Desenho do Google Drive

Pode ser usado para maquete de tela, não é totalmente do tipo wire framing, mas possui recursos como boa ferramenta de colaboração, rápido, gratuito e fácil de usar.

Gliffy

Gliffy É mais fácil de usar, mais ágil e oferece recursos de diagramas como fluxogramas e planos, possui diagramas de Venn com processos de rede e UML que possui exportação para SVG, PNG e JPEG.

Lumzy

É um aplicativo flash, oferece plataforma de colaboração, é gratuito, rápido e, por último, possui diferentes tipos de controles fáceis de usar.

Moqups

Gratuito, rápido e fácil de usar, não precisa de um plug-in de navegador, a vinculação da tela e do botão é feita sem falhas para que uma pessoa possa publicar uma demonstração para os clientes visualizarem e usarem. A exportação de imagens de acordo com a especificação é permitida. Além disso, HTML5 e JavaScript padrão foram integrados no Moqups.

Fonte de gravação: instantshift.com