DesignBR

Vai Design!!

5 dicas para você melhorar os mockups e os protótipos de seu site

Você já recebeu feedback sobre seu mockup ou protótipo de um site do tipo “Que linguagem é essa? Eu não sei falar ‘lorem ipsum!”.

Já? Então você sabe que não é um sentimento muito bom. Não pela pergunta em si…

Neste artigo, vou te mostrar 5 dicas para que você se previna de receber esse tipo de feedback e como fazer seus mockups ainda melhores.

mockups-1

1. A definição de fidelidade de protótipo

Jerry Cao escreveu, em um artigo recente, que a chave para um mockup de sucesso pode ser encontrada na definição do nível de fidelidade que será usado no estágio de prototipagem.

Começar com papel e caneta para trabalhar os primeiros rabiscos é uma vitória fácil. Esses esquetes serão bastante genéricos e pouco fiéis. À medida que a fidelidade desses esquetes aumenta, eu recomendo que você use uma ferramenta simples, como balsamiq ou moqups. Deixe ferramentas mais profissionais como Photoshop e similares para quando você for trabalhar em desenhos de alta fidelidade.

A chave aqui é encontrar o timing do esquete de baixa para alta fidelidade.

mockups-2
(source: jfarny.com)

Ambos, seja começando muito cedo ou muito tarde nos mockups de alta fidelidade, vão gastar recursos (físicos e de tempo), e você vai arriscar acabar com um protótipo medíocre.

mockups-3

2. Identifique problemas

Enquanto fazemos esquetes e wireframes, nossa tendência é pensar em soluções antes mesmo de levantar o “problema real”.

O pedido do cliente “faça a logo maior” não é a identificação de nenhum problema.

É uma proposta de solução, apesar de você não estar oferecendo nenhuma informação do problema para a solução. Questionar com vários “porquês” pode ajudar nessas situações.

Hoje, somos treinados para pensar em soluções e em muitas situações essas ideias podem ser muito úteis. Porém, não é realmente de grande ajuda quando você está no meio do processo criativo, desenhando wireframes e mockups.

E a maioria dessas soluções vem em forma de requisições, como “podemos mudar a cor de vermelho para azul”.

Então, se você está buscando muito a “solução” dos seus colegas e clientes, tente levantar alguns porquês. Por exemplo, “você pode me dizer qual é o desafio que você está tentando resolver com isso?”.

Ao ir fundo e descobrir o real problema, você não só vai ter um resultado melhor, mas vai tornar a sua vida de designer e desenvolvedor mais fácil :)

3. Tenha recursos realísticos

Eu sei, imagens e cópias não estarão em sua lista de prioridade enquanto você estiver trabalhando em um novo mockup. Mas deveriam estar. De verdade.

O recurso correto em seu mockup não só vai destruir seu wireframe, mas também trará o design a um novo nível, o design de alta fidelidade.

Além do estágio dos esquetes e do mockup, você (e seus colegas e clientes) deveriam estar trabalhando na linguagem visual do seu novo web app ou site.

Claro, não há necessidade de apresentar imagens padrão ou ilustrações finalizadas nesses mockups.

Há uma grande quantidade de imagens e vídeos de bancos de imagensdisponíveis que ajudarão você a tornar seus mockups mais vívidos, definitivamente fazendo a diferença na sua apresentação.

mockups-4
(source: Google Style Imagery)

4. Falhe rápido, e conserte as coisas ainda mais rápido

Se você mantiver o workflow dos seus mockups e protótipos estático, você perderá uma enorme quantidade de tempo. Na maioria dos casos, é muito mais eficiente manter tudo simples e leve. Quando você concluir os primeiros esquetes e wireframes, pode fazer a iteração mais rapidamente em passos pequenos, e ter um feedback rápido do processo.

Por isso, eu recomendo:

  • Mantenha seu workflow de prototipagem transparente e ofereça updates ao time.
  • Comunique claramente e aponte os problemas assim que eles aparecerem.
  • Garanta que todos os stakeholders do projeto estarão envolvidos.

5. Use ferramentas diferentes para estágios diferentes da prototipagem

Não me entenda mal. Já falei em alguns artigos da importância de dados compartilhados e sistemas conectados. No entanto, isso pode ser um grande desafio durante o estágio de prototipagem. Em muitos casos, isso pode até mesmo aumentar a criatividade, ao trocar de ferramentas para tarefas diferentes. Pessoalmente, eu acho este esquema de ferramentas muito útil:

  • Sketches: usar papel e quadros de verdade para coletar as primeiras ideias. Evernote pode ser um ótimo assistente para agrupar essas ideias.
  • Wireframes e mockups: quando você estiver trabalhando com wireframes e mockups, balsamiq e moqups são ferramentas muito úteis!
  • Protótipos: para trazer seus mockups à vida real, ferramentas como InVision, Usersnap e CodePen ajudam você na construção dos seus protótipos ao mesmo tempo em que garantem que nenhuma ideia ou feedback tenha ficado perdido para trás.

mockups-5

Agora é com você

Ser um profissional criativo requer muita expertise. Seus colegas e clientes conhecem muito sobre a audiência e os objetivos estratégicos. Então, vamos criar uma situação onde todos ganhem. E deixe que eles digam quando for o tempo apropriado para você guiá-los de forma a fazer o melhor na fase de prototipagem.

Qual é o seu conjunto de ferramentas quando você trabalha com mockups e protótipos?

***

Thomas Peham faz parte do time de colunistas internacionais do iMasters. A tradução do artigo é feita pela redação iMasters, com autorização do autor, e você pode acompanhar o artigo em inglês no link: http://usersnap.com/blog/prototyping-tips-website-mockups/

Mensagem do anunciante:

Em apoio à evangelização do WordPress, os cursos da Apiki são gratuitos para que você possa se especializar na plataforma que mais cresce no mundo. Vagas limitadas, Inscreva-se agora.

Exibições: 317

Comentar

Você precisa ser um membro de DesignBR para adicionar comentários!

Entrar em DesignBR

O banner de sua empresa também pode estar aqui.
Entre em contato conosco para saber mais detalhes.
portaldesignbr@icloud.com

Hand Spinner Anti Stress

Fidget Spinner desenvolvido para reduzir o stress e a ansiedade

Fidget Cube Calmante

Um Cubo verdadeiramente Mágico que auxilia no controle emocional, ajudando a manter a calma em momentos de pressão.

Fotos

  • Adicionar fotos
  • Exibir todos

© 2019   Criado por Portal DesignBR.   Ativado por

Badges  |  Relatar um incidente  |  Termos de serviço

Web Analytics Tweet
ed.designstore@gmail.comarrow_drop_down ed.designstore@gmail.com settingsConta / Meu plano webMeus Sites messageEnviar Notificação restoreAgendar Notificações trending_upEstatísticas languageEnglish languagePortuguês perm_identitySair x Você está atualmente no plano gratuito. Já conhece o nosso plano sem publicidade? shopping_cart ADERIR AGORA ✕ Por favor leia os nossos Termos e Condições antes de utilizar o Pushnews [FECHAR] CRIAR CONTAPERSONALIZARINSTALAR JAVASCRIPTFINALIZAR Por favor coloque o código seguinte na secção do HTML (Pode personalizar todas as mensagens aqui)