Na indústria da Web, para otimizar seu processo de desenvolvimento, o design é concluído e, antes que o design final seja apresentado para ser desenvolvido ou testado, algumas outras etapas intermediárias estão envolvidas:
Etapa 1: Obtendo inspiração:
Se você observar continuamente o que outros designers ou sites estão fazendo por seus wireframes, você terá uma imagem lenta de como um wireframe ajuda a organizar as informações da tela.
e para isso você pode usar a ferramenta de Wireframing "Wirify", basta adicionar o link grande ao seu favorito e acessar o site desejado, clicar no favorito, você verá o site se transformando em wireframe.
Etapa 2: projetando seu processo:
Diferentes designers abordam o wireframing e sua tradução para visuais ou códigos de diferentes maneiras,
Aqui, não é apenas o designer que escolhe o caminho a ser seguido, às vezes os clientes preferem criar modelos diretamente, e alguns preferem mais sistemático,
Esboço => Wireframe => Maquete => Código
Etapa 3: Esboçar:
Agora, quando você estiver inspirado, tenha algumas idéias grosseiras e um planejamento de abordagem, é sempre bom começar com esboços, não importa quão bom você controle o mouse / caneta ou o que quer que use, eles não podem bater em papel, lápis em simplicidade.
O desenho à mão no papel é sempre um bom ponto de partida para qualquer designer. Ele fornece uma maneira rápida e fácil de se concentrar e organizar. Se você é muito preciso no desenho, pode até usá-lo como sua estrutura de arame final.
Etapa 4: Wireframing:
Criar um wireframe é uma das primeiras etapas que você deve executar antes de projetar.
Um wireframe ajuda a organizar e simplificar os elementos e o conteúdo em um site e é uma ferramenta essencial no processo de desenvolvimento.
Um wireframe é basicamente uma representação visual do layout do conteúdo em um design .
Como a fundação de um edifício, ele deve ser fundamentalmente forte antes de você decidir se deve dar a ele uma camada de tinta cara.
As coisas a considerar ao criar um wireframe são:
Escolha suas ferramentas
Aqui está a lista de 10 ferramentas gratuitas de wireframing da Mashable para designers
Definindo uma grade
As grades são muito necessárias para obter um design simétrico e paralelo.
sempre que você olha para um site com bom design, descobre que o conteúdo começa em um ponto específico do corpo e termina em um, eles são gerenciados pelo uso de grades.
Determinar layout com caixas
Definir hierarquia de informações com tipografia
O que evitar ao fazer wireframing:
- Muita coisa está acontecendo na página.
- Ênfase na cor e no design
- Muitos detalhes
Benefícios da wireframing:
A criação de uma estrutura de arame oferece ao cliente, desenvolvedor e designer a oportunidade de analisar criticamente a estrutura do site e permitir que eles façam revisões facilmente no início do processo.
O wireframing traz os seguintes benefícios principais:
Ele fornece ao cliente uma visão antecipada em close do design do site (ou re-design).
Pode inspirar o designer, resultando em um processo criativo mais fluido.
Ele fornece ao desenvolvedor uma imagem clara dos elementos que eles precisam codificar.
Torna clara a chamada à ação em cada página.
É fácil de adaptar e pode mostrar o layout de várias seções do site.
Etapa 5: Maquetes / Visual:
Agora o Wireframe final pode ser convertido em Mockups finais ou Visual:
Algumas ferramentas comuns para o Mockuos são o Adobe photoshop, Corel Draw e Sketch muito novo, mas já popular, etc.
Os pontos a serem considerados durante a conversão para um Mockup são:
Hierarquia da informação
Pode ser necessário considerar o que deve ser destacado e o que deve ser a informação lateral, e o esquema de cores, reposicionamento e tipografia são decididos.
Tipografia
Escolha tipografia visualmente atraente e legível para o site com a combinação certa de alternativas. Tamanho da fonte, peso e cores desempenham um papel crucial na legibilidade.
Esquema de cores
Um esquema de cores representando a identidade da marca e as cores psicológicas como vermelho para perigo, verde para sucesso etc.
Etapa 6: Protótipos :
Um protótipo é uma amostra, modelo ou versão inicial de um produto criado para testar um conceito ou processo ou para agir como algo a ser replicado ou aprendido.
Os wireframes manipulam a estrutura, os modelos manipulam recursos visuais e os protótipos manipulam a usabilidade (em produtos da web / app).
Um protótipo de produto é feito e, então, é testado e o POC (Prof of concept) concluído. Agora podemos ir para o produto Real (obviamente, se não houver necessidade de alterações)
Link para o artigo original com imagens e outros links