• Os wireframes são o esqueleto. Mockups são a pele. Protótipos demonstram o comportamento.

    A diferença entre fases do processo de design pode ser confusa, especialmente devido a terminologia aplicada. Mas independente disso, é de suma importância que o designer saiba diferenciá-la.

    Embora pareça bastante óbvio aos especialistas, referir-se à uma maquete como um wareframe é como confundir um martelo com uma chave de fenda. E não saber como fazer um protótipo lo-fi (baixa fidelidade) é como um cirurgião não saber onde fazer o corte da cirurgia.

    Wireframes, mockups e protótipos

    São as ferramentas de trabalho de um designer e portanto, devem ser aprendidas de dentro para fora.

    Quer aprender a criar modelos de sites, quais as melhores ferramentas de wareframe ou como realizar uma prototipagem rápida? Então confira o artigo!

    Este artigo explicará o básico: o que cada um pode fazer, por que eles são úteis, alguns métodos comuns para construir cada um e até mesmo algumas práticas recomendadas. 

    Wareframe > Mockup > Protótipo

    Então, qual é a diferença? Embora não seja o único procedimento para projetar um site ou aplicativo, o processo de design tradicional segue essas três etapas.

    É uma simplificação grosseira, sem levar em conta as inúmeras variáveis ​​intermediárias, mas para o nosso propósito de explicar o básico, é uma boa base. Em geral, isso se correlaciona com o nível de fidelidade, que geralmente aumenta à medida que você avança.

    Reforçando, isso é uma simplificação excessiva e não a regra definida para todos os casos. Por exemplo, as vezes, ignorar os mockups e criar um protótipo lo-fi logo no início do projeto pode ser o melhor para o seu projeto. Alternativamente, você pode seguir um processo no qual progride de wareframes para mockups e finaliza em código.

    Sabendo disso, concluímos que não há um melhor processo, e sim o que mais se adequa ao seu projeto.

    Wareframes

    Os wireframes são como o esqueleto do seu projeto de design. Você os cria cedo, geralmente o primeiro passo (ou segundo, se preferir esboçar primeiro), e dedica tempo apenas para responder questões cruciais de layout, estrutura e organização antes que a equipe repita os detalhes visuais.

    Por esse motivo, os wireframes são de baixa fidelidade (lo-fi). Há um tempo e um lugar para tudo, e os detalhes visuais e técnicos devem ser decididos mais tarde, depois que o formato e a estrutura forem solidificados.

    Isso não quer dizer que os wireframes não devam se preocupar com questões visuais – você só precisa de detalhes suficientes para visualizar o layout geral e o espaço necessário para as categorias de elemento (como uma barra lateral, navegação superior, rodapé, conteúdo primário e assim por diante).

    Benefícios

    Como dito acima, os wireframes permitem que a equipe se concentre unicamente nas decisões de “grande importância” antes de mergulhar nos detalhes. As vantagens dos wireframes são que eles dão uma chance de planejar adequadamente antes de avançar, reduzindo o risco de ter que voltar atrás porque algo foi esquecido.

    Além disso, como uma entrega, os wireframes podem ser compartilhados com toda a equipe para que todos estejam na mesma página. Se você estiver usando uma ferramenta especializada em wireframes ou protótipos, diferentes membros da equipe podem modificar ou comentar o mesmo documento, o que incentiva a colaboração desde o início.

    Além disso, os wireframes podem ser mostrados para as partes interessadas que desejam ver os resultados desde o início e revelam possíveis edições antes de perder tempo desenvolvendo-as ainda mais.

    Métodos

    Devido à baixa fidelidade dos wireframes (lo-fi), existem mais métodos práticos para construí-los do que as outras fases. Vamos dar uma olhada em alguns.

     

    • Esboçar

     

    O jeito antigo! Simplesmente desenhe no papel o que está em sua mente, sem se prender muito aos detalhes. Isso é bom para um wireframe rápido em uma situação como brainstorming, mas esses esboços podem ser problemáticos para compartilhar com toda a equipe, e podem ser facilmente interpretados erroneamente. Se você preferir uma maneira metódica e estruturada de esboçar, pesquise mais detalhadamente sobre o esboço em camadas.

     

    • Software de design gráfico

     

    Se usar software como Photoshop ou Sketch for tão natural para você quanto desenhar no papel, então não há problema em escolhê-lo. No entanto, essa opção requer um conhecimento inato do programa e não permite adicionar interações fornecidas por alguns aplicativos de wireframing.

     

     

    • Software de apresentação

     

    Se você está trabalhando especificamente para uma apresentação, você pode construí-lo em software como o PowerPoint ou o Keynote. A estrutura de slides facilita o pensamento do seu design em termos de páginas, mas novamente essa opção não possui interatividade. O software de apresentação, no entanto, é muito familiar, já que a maioria de nós já usou o Powerpoint ou o Keynote em algum momento.

    O método não importa tanto, desde que seja adequado às necessidades e restrições do projeto. O importante é que você tenha uma ideia confiável de todo o projeto antes de avançar para as fases mais meticulosas.


     

    Mockups

    Mockups fazem para o visual o que os wireframes fazem para a estrutura.

    São exibições estáticas de como os recursos visuais do produto final devem parecer. Isso oferece a você a oportunidade de tomar decisões importantes sobre esquemas de cores, tipografia e estilo, dando-lhe algum tempo para experimentar e garantir que suas escolhas finais sejam as melhores.

    Os mockups preenchem os detalhes visuais que os wireframes ‘’negligenciam’’, adicionando a pele aos ossos. Como exibições visuais, podem ser de média ou alta fidelidade, dependendo do seu tempo e recursos.

     

    Benefícios

    Embora muitos designers considerem os mockups opcionais ou mesmo desnecessários, eles são importantes. Da mesma forma que o wireframing reserva tempo para tomar as decisões essenciais sobre a estrutura sem distração, os mockups reservam tempo para decisões relacionadas ao visual.

    Uma vantagem mais prática é que a qualidade dos recursos visuais é mais fácil de ser entendida para as partes interessadas (como seu cliente por exemplo). Os wireframes exigem que os espectadores usem sua imaginação, mas os mockups estão muito mais próximos do design final do produto.

    O que é um protótipo?

    Os wireframes relacionam-se a estrutura, os mockups ao visual e os protótipos lidam com a usabilidade.

    Prototipagem é a primeira fase em que você pode realmente interagir com a sua criação, mesmo que apenas ligeiramente. Os protótipos permitem que você explore a interface do usuário, identificando quais elementos funcionam melhor e prevendo problemas de usabilidade antes que eles se tornem de fato problemas.

    Benefícios

    Alguns argumentam que wireframes e mockups não são necessários, porém seguir adiante sem tê-los, não é possível. Os protótipos são críticos para todos os projetos que envolvem a liberação de um produto na natureza. Sem protótipos e testes com usuários primeiro, você estará pedindo por falhas.

    Um dos benefícios mais claros da prototipagem é a pesquisa de usabilidade. Um protótipo funcional abre a porta para o teste do usuário, cujos dados revelam problemas de usabilidade que precisam ser trabalhados e as preferências do usuário alvo. Em suma, o teste do usuário com um protótipo informa se o design está no caminho certo e, em caso negativo, quais mudanças são necessárias para chegar lá.

    Métodos

    Como uma fase crucial no processo de design, a prototipação deu origem a muitas variações e estratégias diferentes baseadas nas preferências pessoais dos designers.

    • Prototipagem de papel

    O “esboço” equivalente a protótipos. Essa abordagem não digital envolve páginas desenhadas no papel e, normalmente, um ser humano atuando como o “computador”, alternando o papel com base nas escolhas do usuário. Embora rápido e fácil de fazer, este protótipo bruto requer muita imaginação do usuário, limitando seus resultados.

     

    • Software de apresentação

     

    Ao vincular diferentes páginas, você pode criar um protótipo muito básico em softwares como o PowerPoint e o Keynote. Mais uma vez, estes são rápidos e fáceis de fazer, mas o custo é a interatividade limitada.

     

    • Protótipos Codificados

     

    Assim como os modelos codificados, isso economiza tempo nos estágios finais. A principal desvantagem, porém, é se a sua fluência de codificação é boa ou não.

     

    • Ferramentas de design

     

    Mais uma vez, aplicativos de design especializados vêm equipados com todas as ferramentas que você precisa, em uma interface propícia para esse fim. Você pode até escolher quando adiciona interatividade, com opções para wireframes interativos criativos, que são essencialmente protótipos lo-fi.

    Seu protótipo geralmente começa um pouco engessado, mas acaba ficando muito próximo do produto final. Quanto mais refinadas forem as interações (especialmente nas fases posteriores do projeto), melhores serão os resultados quando chegar a hora do lançamento oficial.

    Misturando e combinando

    No início, dissemos que apenas cobriríamos o esboço básico de wireframes, mockups e protótipos. Seu papel real no design não é tão fácil de explicar, e está sujeito a qualquer número de variações com base nos caprichos e entendimentos do designer.

    Algumas pessoas ignoram os mockups completamente. Outros esboçam rapidamente wireframes no papel antes de mergulhar em opções mais avançadas.

    Uma variação popular é a criação de protótipos lo-fi no início. Isso se encaixa bem no método de Prototipagem Rápida, que visa criar e testar rapidamente vários protótipos e reiterar os dados nas próximas versões.

    Embora a prototipagem rápida tenha a ver com o design aproximado, o processo é altamente influenciado pela entrada do usuário, o que significa que você realmente acaba com um produto final muito mais refinado.

    Conclusões

    O ponto principal que esperamos que você absorva é que, conhecendo as vantagens de cada estágio e como ele se encaixa no processo como um todo, você possa personalizar o processo da maneira que melhor lhe convier. Se você achar que toma as melhores decisões estruturais ao criar um gráfico detalhado, tente começar com um mockup.

    Se o seu projeto tiver muitas complexidades técnicas (talvez decorrentes de interações avançadas ou animações), tente criar protótipos logo no início para resolvê-los.

    A única ordem errada no processo é aquela que contraria as necessidades do projeto. Mas o que quer que o projeto precise, uma coisa é certa: um carpinteiro que sabe usar melhor seu martelo será capaz de fabricar qualquer tipo de mobília.

    SOLICITE UM ORÇAMENTO AGORA!

    PEÇA UM ORÇAMENTO
    CATEGORIA(S)
    TAG(S)
    COMENTÁRIO(S)

    Deixe um comentário

    O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *