Tudo o que você precisa saber sobre UX Sketching

Publicados: 2022-03-11

Se você fez algum tipo de trabalho criativo sério, está muito familiarizado com o bloqueio criativo. É como bater em uma parede de tijolos: nenhuma das ideias que você consegue visualizar é boa o suficiente ou não pode funcionar na vida real.

Para designers, o sentimento é muito familiar. No entanto, como qualquer problema complicado sem solução clara, um processo inteligente pode fazer todas as diferenças. É aqui que entra o esboço de UX.

O esboço de UX é um aspecto crucial, mas muitas vezes esquecido, do design da experiência do usuário. Esboçar é uma maneira muito eficiente de comunicar o design, permitindo que os designers experimentem uma infinidade de ideias e as repitam antes de escolher uma.

Neste post, pretendo cobrir tudo o que você precisa saber sobre UX sketching, incluindo os seguintes pontos:

  • Introdução a UX sketches e wireframes
  • Noções básicas, ferramentas e técnicas de esboço de UX
  • Esboços esclarecedores com notas, anotações, números
  • Dicas e truques de esboço de UX
  • Mini-métodos projetados para aumentar a qualidade e a produtividade
  • Tudo o que você precisa saber sobre Wireflows
  • Um guia rápido para esboços de fluxo de UX

UX Sketching é um processo de duas etapas

Muitas opções devem ser consideradas no projeto, o que resulta na escolha e execução da melhor. Os designers consideram suas opções e, em seguida, trabalham nos detalhes, tornando o design de UX um processo de duas etapas:

Esboço de UX

  • Geração de Ideias

Na etapa inicial, várias ideias são geradas, mas como não podem ser totalmente moldadas, não é incomum que alguns dos elementos estejam incompletos ou ausentes. O principal é considerar diferentes abordagens e decidir qual é a mais eficiente no contexto da sua tarefa e das várias restrições do projeto.

  • Adicionando detalhes e refinamento

Passo a passo, você estabelece algumas variantes promissoras e prossegue para trabalhar as especificidades, tornando assim algumas ideias inadequadas.

UX Sketches e Wireframes: Introdução e Classificação

Seus wireframes podem diferir dependendo de fatores como o nível de detalhe desejado, cores e estilo, se você vai mostrá-los a alguém e assim por diante.

UX Sketches e Wireframes
Bons esboços ajudarão você a pensar com mais clareza, encontrar melhores soluções e economizar tempo.

Eu selecionei os seguintes tipos de esboço:

  • Esboço: Geração de Ideias

Estes são esboços iniciais. Detalhes de nível inferior são simplesmente anotados. Um número limitado de cores é empregado.

Eu desenho muitos esboços básicos para considerar o problema de diferentes ângulos e considerar diferentes soluções. Ao desenhar esses esboços, também estou me esforçando para gerar o maior número possível de variantes de solução.

Neste passo em particular, a incompletude liberta minha mente, e é por isso que é tão importante evitar ficar atolado em minúcias neste estágio. Meu objetivo é gerar o maior número de ideias possível e escolher as mais promissoras.

  • Estrutura de arame: especificação, fase detalhada

Geralmente escolho esboços promissores e repasso os detalhes, depois escolho a melhor variante e trabalho com mais detalhes.

No entanto, isso não significa todos os detalhes . Coisas óbvias podem apenas ser notadas. Além disso, alguns aspectos serão difíceis de descrever no papel.

Nesta etapa, desenho todos os detalhes importantes , mas ainda não desenho wireframes em Balsamiq. Depois de tudo pronto no papel, começo a desenhar no Sketch.

As ferramentas digitais oferecem muito mais liberdade criativa do que o papel e você pode facilmente mudar a atenção para coisas menores. Por exemplo, você pode se concentrar em “polimento de pixels” em vez de design.

  • Rascunho de Design Visual

Essa é uma abordagem raramente usada, mas às vezes pode ser útil. Várias soluções visuais são consideradas em um estágio inicial do projeto, mas pode levar muito tempo para criar esboços digitais para todas elas. É por isso que primeiro desenho esboços de design no papel, para considerar diferentes opções e escolher uma direção de design visual.

  • Detalhamento de Componentes/Elementos

Acho essa técnica útil quando já tenho uma ideia geral e estou pensando em uma funcionalidade de página específica ou nas partes integrantes dos componentes da interface. Eu desenho diferentes elementos de página, entrando em detalhes, e então desenho diferentes posições possíveis dos elementos de página.

Os elementos, mesmo os mais simples, devem ter um estado; um botão pode ser pressionado e tem um bloco de texto flutuante que pode ou não estar vazio. Quanto mais complexo ele é, mais estados ele tem.

Esboçar IUs

Começando com o básico

  • Prepare suas ferramentas. Encontre o lugar mais conveniente possível, uma mesa grande com bastante espaço. Pegue um monte de papel e prepare algumas canetas e marcadores.
  • Aquecimento. Para se preparar, recomendo desenhar algumas linhas, círculos, modelos básicos e ícones.
  • Defina seus objetivos. Decida o que você quer desenhar. Defina seu objetivo e decida qual história você tem para contar. Determine o nível de detalhamento desejado. Decida se você está pronto para desenhar muito.
  • Defina seu público-alvo. Se você está fazendo isso por si mesmo, não precisa se preocupar com a aparência do seu esboço. No entanto, se você pretende mostrar seus desenhos a um cliente, reserve um tempo extra para adicionar mais detalhes ao seu esboço.
  • Defina um prazo. Tendo decidido quanto tempo você está pronto para alocar para desenhar, digamos 30 minutos, irá ajudá-lo a se concentrar em seu trabalho.

Agora, você está pronto e pode começar:

  • Desenhe as bordas. Desenhe os quadros, um navegador ou janela de telefone, uma parte da interface e assim por diante.

  • Adicione os elementos maiores ou básicos: menu, rodapé, conteúdo principal.

  • Adicione detalhes. Adicione detalhes relevantes, mas mantenha-os simples nesta fase.

Procura-se designers de UX freelancers em tempo integral nos EUA

  • Adicione anotações e notas. Eles são necessários apenas se você estiver planejando compartilhar os esboços. No entanto, eles podem ser úteis mesmo se você os estiver fazendo apenas para seus olhos.

  • Alternativas de esboço. Esboce algumas alternativas rápidas para sua solução.

  • Escolha a melhor solução. Escolha as melhores opções.

  • Adicione sombra e bisel. Isso é particularmente importante para fins de compartilhamento. Adicione uma sombra para tornar seu esboço visualmente atraente, o que é importante se você planeja compartilhá-lo com membros da equipe e/ou clientes.

  • Salve o esboço. Tire uma foto ou coloque-a em uma pasta. Eu tenho algumas bandejas de papel na minha mesa para esboços.

  • Participação. Eu costumo usar um dos seguintes métodos de compartilhamento:
    • Digitalize esboços via Evernote e forneça um link permanente para outros membros da equipe ou partes interessadas.
    • Tire uma foto e faça o upload para o InVision.
    • Carregue e mapeie imagens para o Realtimeboard.
    • Ou apenas envie uma foto por e-mail.
  • Revise os esboços e adicione notas. Faça uma pausa e depois volte aos seus esboços um pouco mais tarde. Dê uma olhada neles novamente. O esboço ainda faz sentido para você? Um bom esboço deve ser fácil de seguir.

Esboço de UX para UIs
Se você, como designer, não conseguir entender algo que está em seu esboço, a solução não será bem-sucedida. Ou o esboço não permite que você visualize bem suas ideias, ou as ideias são muito complexas.

Esclarecendo esboços com elementos adicionais

Encontre ou desenhe um esboço adequado e adicione os seguintes detalhes a ele:

  1. Título. Às vezes, adicionar um título é uma boa opção. Escreva uma descrição e data, se necessário, na parte superior do esboço. O título o ajudará a entender o que você está vendo e se o esboço é relevante ou não. Isso é especialmente útil se você tiver muitos esboços ou for mostrar para outras pessoas.

  2. Anotações. Anotações são nomes e notas colocados próximos a um elemento, para explicar seu conteúdo ou outros atributos. Eles adicionam detalhes que esclarecem outros elementos e geralmente são difíceis de desenhar. Por exemplo, pode ser o nome do bloco, alguns detalhes de interação, uma explicação de uma imagem, algumas ideias para futuras variações de design e assim por diante. Você pode conferir um dos meus exemplos para ver como é um esboço de anotação.

  3. Números. Numere os elementos do seu esboço ou os próprios esboços. Você pode decidir como ordená-los (por exemplo, por fluxo de interação, a ordem em que você os criou, etc.). Também pode ser útil durante as discussões (especialmente discussões remotas), pois seus colegas e clientes podem apenas apontar o número do esboço em seus comentários e você entenderá a qual deles os comentários se referem.

  4. Setas; flechas. Você pode usar setas para indicar transições de tela. Eles também podem ser usados ​​para conectar diferentes partes de esboços, para indicar uma sequência de ações e assim por diante. Como o significado de uma seta pode variar, logo acima da seta você pode adicionar uma descrição ou explicação do significado da seta. Aqui está um exemplo de um esboço básico mostrando uma transição e vários estados diferentes.

  5. Notas. Assim como as anotações, as notas são usadas para explicar conceitos. No entanto, as notas diferem das anotações em seu posicionamento. Eles não estão presos a um elemento ou localizados próximos ao elemento descrito, semelhante a este exemplo. As notas podem ser colocadas na parte superior ou inferior da página. Eles podem até descrever elementos que não estão incluídos no design, perguntas que você possa ter, explicações gerais, ideias não esboçadas e assim por diante.

  6. Gestos. Os gestos são relevantes no caso do design de dispositivos de toque. Desenhar um gesto com a mão pode exigir prática. Existem várias variantes de gestos usados ​​para indicar diferentes tipos de ações, por isso é melhor decidir com antecedência como você designa uma determinada ação (se não for óbvia, é claro) e praticar o desenho.

  7. Comentários. Você pode receber sugestões para consertar ou melhorar o esboço depois de mostrá-lo a outras pessoas ou depois de dar outra olhada nele. Muitas vezes é útil marcar esse feedback em uma cor diferente para ajudar a diferenciar o feedback do esboço original.

Você pode usar cores diferentes para diferentes tipos de elementos. Às vezes, uso preto para desenhos, azul para links, verde escuro para notas, vermelho para títulos e comentários. Tente usar cores diferentes em seus esboços, mas certifique-se de que sua escolha de cores seja consistente!

UX

Dicas e truques mais específicos

  1. Não se preocupe com a qualidade. Não olhe os esboços no Dribbble; eles são sobre algo completamente diferente . Tenha em mente que o principal objetivo dos esboços é ajudá-lo a pensar com mais clareza, encontrar melhores soluções e economizar tempo.

  2. Prática. Para começar, você pode tentar desenhar alguns aplicativos. Abra um aplicativo web ou móvel e tente copiar a tela, descrevendo os elementos nas notas. Sempre que você tiver algum tempo livre, pratique o desenho de blocos básicos de construção de seus projetos. Em geral, a prática leva à perfeição. Em um tempo, ele se tornará parte de seu eu designer.

  3. Compre uma pasta. Muitas vezes não trabalho do meu escritório, mas sim de um café ou da minha casa. Esboços de papel são muito propensos a danos, então compre uma pasta simples para mantê-los sãos e salvos.

  4. Leve ferramentas com você onde quer que vá. Isso ajuda a garantir que você possa capturar sua ideia no papel a qualquer momento, caso contrário, você pode simplesmente perder o pensamento ou não conseguir lembrá-lo com detalhes suficientes. Eu sempre tenho um bloco de notas, algumas folhas A4 e canetas comigo.

  5. Compartilhe com os outros. É muito importante envolver outras pessoas e se comunicar com sua equipe. Envolver outras pessoas e obter seus comentários, especialmente no início, ajuda a economizar tempo e recursos a longo prazo. Você também pode incentivar outras pessoas a desenharem da maneira como imaginam o design.

  6. Bandejas de papel. Pense em colocar bandejas de papel em sua mesa de trabalho. Por exemplo, eu tenho três deles: para tarefas recebidas, para esboços e folhas de papel limpas.

  7. Experimente e personalize. Minhas recomendações são baseadas na minha experiência. Com o tempo, você descobrirá o que mais combina com você; quais métodos, qual sequência de etapas, o que exatamente atende seu potencial criativo. Você só chegará lá se tentar constantemente algo novo, e é por isso que é importante experimentar diferentes formatos, estilos e experimentar novos modelos.

  8. Use modelos. Os modelos economizam tempo e implicitamente levam em consideração as restrições de formato, liberando mais tempo para se concentrar no que é importante.

Mini-métodos adicionais para melhorar seus esboços

Essas não são necessariamente dicas e truques, mas são uma coleção de métodos, ferramentas e sugestões que devem aumentar sua produtividade ou melhorar a qualidade de seus esboços.

Desenhando para UX

  1. Crie um quadro de esboços. Um dos maiores benefícios de usar caneta e papel em vez de uma ferramenta de desenho digital é que você pode colá-lo na parede. Todos em sua equipe podem ver e participar (embora eu recomende a criação de sessões de revisão).
    • Você mesmo verá seus esboços, e isso estimulará seu pensamento e permitirá que você veja o quadro geral, não peças isoladas, mas todo o sistema. Você verá as interações entre as peças e a maneira como elas se encaixam.
    • Crie o quadro de esboços - anexe seus esboços do quadro branco. Se não houver nenhum quadro branco em seu escritório, você pode usar fita adesiva de tamanho duplo ou folhas de post-it para colar seus esboços na parede. Se você não quiser grudar na parede, pode encontrar um grande pedaço de papelão. Eu recomendo fortemente o uso de sketch boards, pois eles são uma das melhores ferramentas de design.
  2. Use um quadro branco. Um quadro branco é uma ótima ferramenta de desenho. Tem uma série de vantagens:
    • É colaborativo e é fácil envolver outros membros da equipe na discussão e também no desenho. Mesmo que suas ideias não se encaixem bem, você entenderá sua maneira de pensar e isso o ajudará a estar na mesma página.
    • Os marcadores não permitem que você se concentre nos detalhes, você tem que pensar nas coisas gerais. Os esboços estão abertos à interpretação.
    • Um quadro branco é fácil de limpar e fazer correções.
    • Há muito espaço e você pode facilmente pensar em todo o fluxo do sistema.
    • Você pode anexar esboços, impressões e materiais de referência usando ímãs.
  3. Protótipos. Faça um protótipo clicável para avaliar seu design. Tente obter feedback sobre alguns elementos. Isso funciona particularmente bem quando você está usando modelos - seus esboços são do mesmo tamanho. Obviamente, será muito mais fácil desenhar esboços do mesmo tamanho se você estiver usando um modelo. Vou tentar facilitar ainda mais, fornecendo alguns modelos que você pode baixar e usar: Mobile, Browser multi-window, Browser scroll, Personas.

  4. Use sua impressora e scanner. Desenhe a estrutura à mão (você pode usar a régua para desenhar com mais precisão), depois basta digitalizá-la usando um scanner ou aplicativo móvel e imprimi-la. Você pode editar seu modelo no editor de imagens antes de imprimir. Você pode remover detalhes desnecessários ou duplicar alguns elementos. Você também pode imprimir uma página de site pronta, fotos e outros elementos descritivos. Você pode colar os recortes em seu esboço.

  5. Use o Evernote para digitalizar. O Evernote é uma ótima ferramenta de design. Você pode manter e compartilhar seus esboços nele, criar temas e usar tags para organizar seus esboços. As habilidades do modo “Scanner” são particularmente impressionantes. Você coloca seu esboço na frente dele e ele o “digitaliza”, então você obtém a cópia do esboço. Então você pode convidar seus colegas para o Evernote e dar a eles o link da sua nota. Como existe um aplicativo móvel para tablets e telefones, você sempre pode ter seus esboços à mão.

  6. Desenho híbrido. Para dar vida e realismo aos seus esboços, você pode combiná-los com fotos. Isso significa que você precisa tirar uma foto e depois desenhar uma história com elementos de interface. Isso também pode ajudá-lo a perceber alguns problemas e detalhes de interação.

  7. Traçando o mundo real. Se você precisa criar um storyboard, ilustrar uma experiência em um contexto específico (por exemplo, uma pessoa usando um smartphone em uma rodoviária), você precisa incluir representações de pessoas, lugares e vários objetos da vida real. Isso pode ser difícil de desenhar, especialmente se você não domina as habilidades de desenho, mas aqui vai uma dica simples: tire uma foto do objeto ou da situação e, em seguida, obtenha o contorno dos principais objetos usando um editor de imagens. Você pode usar o contorno resultante em seus esboços posteriormente. Claro, se você tiver um tablet e uma caneta , será ainda mais fácil.

Fluxo de arame: delineando o fluxo e a ramificação do sistema

O wireflow é essencialmente uma sequência do fluxo do sistema, tela após tela, com ramificações e pontos de decisão. Devemos considerar como um usuário aborda sua tarefa, a maneira como ele se move de uma tela para outra e sua experiência geral com o produto ao longo do tempo.

Esboço de UX

O Wireflow, ou o que você está desenhando e a maneira como está conectado, pode ser organizado de acordo com as seguintes abordagens:

  • Seqüência. Uma sequência é uma jornada direta, tela após tela. Também pode ser uma história com pontos de decisão; você mostra não apenas a jornada, mas também pontos de decisão e diferentes caminhos que o usuário pode escolher. Você pode mostrar a estrutura da interação da tela.
  • Mudanças de estado. Descreva diferentes estados de tela de algum elemento e as condições ou ações que causam as transições entre esses estados.
  • Elementos de tela vs. tela. Você pode desenhar as telas inteiras ou considerar microinterações e interações.
  • Plataformas. Você pode considerar uma experiência de plataforma ou várias plataformas.
  • Alcance. Você descreverá uma parte da jornada do usuário ou toda a jornada? Uma interação do usuário com o sistema ou interações de vários usuários?

Geralmente tento definir os seguintes tipos de wireflow, dependendo da organização e uso prático:

Estados de esboço

  1. Mapeamento de fluxo geral e fluxo de alto nível. Esboce prontamente as mudanças de tela e desenhe a jornada geral do uso do seu produto. Aqui você pode incluir algum contexto e, opcionalmente, mostrar alguma interação do usuário. Por exemplo, um serviço de compras de comércio eletrônico é uma jornada bastante longa que pode incluir muitas etapas: como o usuário encontrou a loja, as etapas pelas quais passou para encomendar o produto, como pagou e assim por diante.

  2. Fluxo de tela. Isso se concentra em um fluxo funcional específico através do sistema. Pode ser uma pequena sequência reta de telas ou uma jornada com ramificações. Por exemplo, um usuário enviando algumas fotos ou um vídeo.

  3. Esquema de navegação. Desenhe sua tela e as opções que ela contém. Isso não deve mapear a jornada. Esta etapa inclui informações que mostram as opções que um usuário pode escolher, as direções que os usuários têm e várias partes do aplicativo. Eu costumo criar um esquema de navegação no início de um projeto. Serve para entender como a navegação deve ser estruturada (quais pontos devem ser incluídos, quantos níveis são necessários).

  4. Estados da tela. Desenhe a tela ou os estados dos elementos (um exemplo pode ser uma caixa de diálogo de upload de arquivo). Neste caso, por exemplo, a tela terá os seguintes estados:

    • Em branco
    • Um usuário puxa o arquivo na área ativa
    • O arquivo está sendo carregado
    • O arquivo é carregado
    • Há um erro

Esboçar fluxo de UX: um guia rápido de instruções

O processo de design do wireflow é semelhante ao do wireframe. Muitas etapas são semelhantes ou idênticas, mas existem algumas diferenças importantes:

Defina o que você precisa desenhar. Decida exatamente o que você quer desenhar (por exemplo, a história geral ou um fragmento do seu desenho). Você quer gerar opções diferentes ou pensar nos detalhes de uma jornada? Decida se você vai mostrar seus esboços para outra pessoa ou não.

Defina quais quadros-chave e transições você deve incluir em seu desenho. Se você adicionar todas as telas e deslocamentos, seu fluxo de arame será muito longo e complexo. Considere quais telas-chave você deve mostrar para transmitir a essência da interação que ajuda a realizar sua tarefa. O mesmo vale para as mudanças de tela. Você precisa escolher quais mudanças serão mais úteis para expressar sua ideia. Confira este exemplo para referência.

Defina o ponto de partida. Qual será o ponto de partida da sua jornada? Você pode começar com o ponto de entrada, ou seja, o início da jornada, por exemplo, o que um usuário vê quando faz login no seu aplicativo. Alternativamente, você pode começar no ponto médio ou com as telas ou etapas do processo mais interessantes/difíceis/importantes. Ou você pode começar pelo final, com o resultado final alcançado por um usuário, e descrever as etapas que o usuário realizou para chegar a esse ponto.

UX Sketching para fluxos de usuários
Defina sua abordagem e faça um esboço geral em papel.

Decida o que vem a seguir. Depois de desenhar as etapas iniciais, decida o que vem a seguir, respondendo às seguintes perguntas:

  • Qual caminho essa etapa leva os usuários?
  • Qual caminho você quer que eles sigam?
  • O que eles têm que fazer para chegar lá?

Esboce rotas alternativas, entradas. Pense em maneiras alternativas que o usuário pode obter para cada etapa:

  • O que acontecerá se a conexão com a Internet do usuário falhar?
  • Que outras opções eles têm?
  • O que pode dar errado no caso de erro do usuário ou do aplicativo, o que acontecerá?
  • O que acontecerá se o usuário fechar o aplicativo nesta etapa?
  • Por onde o usuário começará na próxima vez que iniciar o aplicativo?

Pense em fluxos alternativos. Analise o histórico, projete um fluxo alternativo e esboce-o.

Adicione anotações, notas, detalhes. Adicione os elementos explicativos que esclarecerão detalhes não óbvios.

Salvar. Faça uma cópia digital do esboço.

Participação. Compartilhe o esboço (por exemplo, via Evernote ou InVision).

Dicas e truques essenciais de esboço de fluxo de UX

Esboce um fluxo de arame primeiro. Se você vai pensar em uma longa jornada, é melhor fazer um esboço rápido para entender quanto espaço você precisa e para não perder algumas etapas ou detalhes importantes. Seria difícil adicioná-los ao esboço de papel depois.

Não crie um mapa enorme com muitos detalhes. Os esboços de papel não têm um botão de desfazer , portanto, será difícil fazer alterações. Você pode desenhar os detalhes com muita precisão e isso distrairá sua imaginação da geração de diferentes variantes de alto nível. Em vez de criar um esquema enorme que ilustre todo o sistema, tente se concentrar nos scripts principais e tente dedicar uma página individual para cada script.

Corte detalhes desnecessários e combine vários níveis de detalização. Não é necessário desenhar todas as descrições de interação, então tente usar apenas os elementos-chave da sua jornada. Ao desenhar um enorme mapa de interações, você não precisa trabalhar cada tela detalhadamente. Algumas telas podem ser representadas apenas por vários quadrados, e outras, telas-chave, podem ser trabalhadas em detalhes.

Experimente diferentes tamanhos de papel. Experimente diferentes formatos de papel, A3 ou A5. O tamanho da folha de papel o limitará e afetará seu processo de diferentes maneiras. Uma pequena folha de papel não permite adicionar muitas telas ou detalhes, mas pode ajudá-lo a se concentrar nas ideias principais. Usando uma grande folha de papel, você pode desenhar uma jornada enorme, muitos detalhes e notas adicionais. Alternativamente, você pode colocar várias pequenas viagens nele.

Post-its também podem ajudar. Você também pode tentar usar post-its. Você pode desenhar telas separadas ou algumas notas de rodapé nelas, ou pode desenhar estados adicionais dos elementos do seu esboço. Sua vantagem é que eles podem ser facilmente substituídos, você também pode simplesmente mover a nota para outro lugar. Por exemplo, caso o fluxo tenha mudado, você pode apenas alterar a ordem dos seus post-its.

Use modelos. Tente usar modelos. Eles economizarão tempo e permitirão que você crie protótipos mais clicáveis ​​e de alta qualidade.

Tente usar um quadro branco. Um quadro branco tem uma série de vantagens. Está se tornando cada vez mais popular porque permite que você desenhe uma enorme jornada com muitos galhos. Você pode desenhar muitos componentes do aplicativo no papel e depois anexá-los ao quadro branco usando ímãs, adicionando-os à jornada.

Esboçando uma sombra. As sombras podem ajudá-lo a marcar elementos importantes e adicionam atratividade visual ao seu esboço. Eu uso três tipos diferentes de sombras:

  • Linhas seguindo a direção da luz - isso nem sempre fica bonito, mas você pode usar a graduação e pegar os objetos em diferentes “alturas”.
  • Delineando alguma parte com uma cor mais escura (somente a parte de baixo ou a parte de baixo e o lado direito)
  • Usando o Pro-marker (ou seu equivalente no aplicativo que você usa para desenhar)

Componentes de desenho. Uma objeção como “não consigo desenhar tão bem” pode sufocar sua iniciativa. Na verdade, é mais fácil do que parece. Mesmo os esboços mais complexos geralmente são compostos de vários blocos básicos, como neste exemplo. Se você pode desenhar um ponto, uma linha, um triângulo, um quadrado e um círculo, então você tem os blocos de construção essenciais necessários para desenhar qualquer coisa para o seu esboço.

Juntando tudo. Os elementos básicos, botões, botões de opção e menus suspensos são compostos de elementos básicos. Depois de aprender a desenhar esses elementos, você pode combiná-los e desenhar blocos e componentes complexos.

Embrulhar

O objetivo deste post não era criar o guia definitivo e único para esboços de UX ou esboços em geral, porque os designers têm necessidades e preferências pessoais diferentes.

Como você pode ver, isso é muito para cobrir. Os designers usam uma infinidade de ferramentas, técnicas e abordagens para produzir esboços de UX, e isso é bastante subjetivo. Certas técnicas podem ou não funcionar para pessoas diferentes trabalhando em projetos diferentes. Se você está apenas começando, definitivamente deveria experimentar. A prática e a experimentação constantes o ajudarão a encontrar o que funciona para você.

Cabe a você escolher dicas e técnicas que serão mais adequadas ao seu projeto e à sua abordagem ao design. Você tem alguma dica de esboço adicional para colegas UXers? Sinta-se à vontade para compartilhá-los na seção de comentários.

• • •

Leia mais no Blog Toptal Design:

  • eCommerce UX – Uma visão geral das melhores práticas (com infográfico)
  • A Importância do Design Centrado no Homem no Design de Produto
  • Os melhores portfólios de UX Designer – Estudos de caso e exemplos inspiradores
  • Princípios heurísticos para interfaces móveis
  • Design Antecipatório: Como criar experiências de usuário mágicas