10 ótimas folhas de dicas de design de UX/UI

Folhas de dicas de UX/UI para salvar

Todo mundo precisa de um pouco de ajuda às vezes, até mesmo os profissionais. É difícil lembrar de cada pequeno detalhe. De vez em quando você acaba procurando por coisas básicas que você esqueceu momentaneamente. Que perda de tempo isso pode ser. Então, pesquisamos e coletamos algumas dicas de design populares para ajudá-lo no seu dia e ajudá-lo a ter as melhores estratégias de UX.

Se essas estratégias forem úteis, não se esqueça de conferir também essas dicas ao melhorar o design de UX do seu site.

1. Folha de dicas de design do iOS 7

O lançamento do iOS 7 trouxe muitas mudanças na interface e os designers precisarão adaptar sua linguagem visual para se adequar ao novo design plano do iOS. Os sistemas de grade, dimensões, tipografia e iconografia foram todos atualizados pela Apple. Ivo Mynttinen foi gentil o suficiente para criar uma folha de dicas (atualizada) para desenvolvedores e designers cobrindo todas as informações que você precisa saber para o iOS 7, incluindo:

• • Resoluções em todos os dispositivos
  • Exibir informações em todos os dispositivos
  • Dimensões do ícone do aplicativo (incluindo informações sobre alterações no design do canto arredondado e onde obter um modelo, pois a Apple ainda não lançou um para iOS7)
  • Detalhes sobre alterações na interface do usuário
  • Uma lista de outros recursos que você achará úteis enquanto estiver projetando um aplicativo

Isso economizará tempo e esforço agora que você não terá que procurar cada pequeno detalhe. Usando isso, você não terá que compilar sua própria lista. Além disso, é uma das folhas mais extensas sobre o tema e está maravilhosamente organizada.

2. Folha de referência do design do Android

Claro, também estamos incluindo uma folha de dicas de design Android semelhante para você. Este é um lindo infográfico projetado por Meghan Dever, uma Mobile Designer da Double Encore, Inc. O guia de design para Android tem essas informações disponíveis, mas é muito mais fácil encontrá-las e lê-las nesta doce folha de dicas.

Foi criado para uso interno na empresa, mas eles acharam que era uma economia de tempo tão útil que quiseram compartilhá-lo com toda a comunidade. Isso vem com:

• • Campos de texto do Android, barras de busca, spinners, seletores, switches e seus casos de uso
  • Ativos de 9 patches, com a adição de recursos de layout de limites ópticos
  • Tamanhos de dispositivos Android e seus tamanhos de elementos associados
  • O preenchimento adequado para elementos da interface do usuário
  • Barra de ação, ícones contextuais e específicos do iniciador
  • Conversões de Dp para px

3. Infográfico de Psicologia da Cor

Ok, existem gráficos mais do que suficientes que cobrem a psicologia das cores, mas este é o meu favorito, pois é muito mais extenso que os outros. Em vez de cobrir apenas o básico (vermelho, amarelo, azul, roxo, verde), ele fornece uma descrição de 50 cores diferentes. Também abrange não apenas emoções e ideias positivas, mas também as negativas às quais várias cores podem ser associadas.

4. Folha de referência HTML5

Atualização 09/09/16: Esta folha não está mais disponível.

Esta é uma ótima folha de referência caso você esteja apenas aprendendo HTML5 ou tenha um peido cerebral e tenha esquecido uma tag. Esta é uma lista extensa e realmente fornece um pouco de informação útil além das tags. Ele entra em detalhes extras sobre onde as tags podem ser usadas e quais navegadores suportam o que, mesmo em dispositivos. Vem com:

• • Novas tags lançadas para HTML5
  • Tags existentes de HTML4 que ainda estão disponíveis para HTML5
  • Tags antigas que são obsoletas em HTML5
  • Atributos e o que é velho e novo para eles também
  • Um gráfico de prontidão do navegador

5. Folha de dicas do Ninja UX

Para o estágio de pesquisa do processo de UX, você pode dar uma olhada nesta folha de dicas legal feita por Hilary Little para sua palestra do CodeFest. São algumas práticas recomendadas a serem lembradas ao testar usuários.

Este é outro ótimo lembrete do básico para os profissionais e perfeito para quem é novo e precisa de bons conselhos e dicas. Você também pode conferir a apresentação dela na palestra aqui. Isso complementará muito bem a folha de dicas e dará ao primeiro designer ou empreendedor de UX uma ótima direção.

6. Design de Formulário Web de Folha de Referência

A Smashing Magazine nos trouxe essa beleza para que possamos usá-la e compartilhá-la. É uma folha de dicas descritiva para projetar grandes formulários. Os designers desta folha de berço são bem versados ​​na concepção e teste de formulários.

Eles decidiram encontrar os problemas mais comuns e descrever como eles os corrigem, então colocaram tudo nesta ótima folha de dicas de designer. Eles queriam criar algo para melhorar as formas de todos. Ele contém um modelo Omnigraffle, bem como exemplos do Photoshop (PSD) e PDF para você baixar. Ele vem com excelentes conselhos, o que fazer e o que não fazer, e alguns exemplos de layout que você pode usar.

7. Folha de dicas do jQuery

Esta é uma incrível lista organizada de elementos jQuery que você pode usar como referência quando não consegue se lembrar de algo. Foi feito por Oscar Otero, um web designer e desenvolvedor que sabe como essas coisas podem ser úteis. Vem com:

• Seletores
• Atributos/CSS
• Manipulação
• Travessia
• Eventos
• Efeitos
• Ajax
• Essencial

Esta folha de dicas de design em particular também vem com um incrível recurso de pesquisa. Você pode selecionar a versão do jQuery que está procurando e procurar opções específicas. Esta é uma ótima ferramenta para ter à mão como uma referência rápida e fácil.

8. Terminologia de UX

Como designer de UX, você interage com muitas pessoas diferentes dentro de uma organização e nem todos conhecem a linguagem. Não seria ótimo se você não tivesse que se explicar constantemente? Isso é para você distribuir aos seus colegas para ajudá-los a entender o que você está falando. Foi trazido a você pela Noiva Trozelli e inclui:

• Prática de UX
• Funções de experiência do usuário
• Atividades de experiência do usuário
• Termos da interface do usuário
• Produtos de UX

9. Folha de dicas de ícones do JQuery

Esta é uma lista rápida incrível de ícones que você pode fazer com jQuery. Muitos de vocês já devem conhecer um monte deles, mas vamos lá!

Nem todos nós podemos memorizar cada um deles. Isso será útil para aqueles de nós que têm dificuldade em lembrar informações do topo de nossas cabeças. Também é ótimo para iniciantes.

Isso foi trazido a você por Pete Freitag da Foundeo Inc. Pessoalmente, este é o meu favorito de todas as dicas de designer.

10. Folhas de dicas do WordPress

O leitor Mike Wallagher, do Startbloggingonline.com, compartilhou essas folhas de dicas do WordPress que ele desenvolveu. Estes são ótimos para usuários iniciantes e avançados, pois ele oferece as duas versões. Confira-os! E se você precisar de assistência técnica, obtenha ajuda do WordPress com WP Buffs!

Tem alguma folha de dicas de design legal que você deseja compartilhar? Deixe-nos saber nos comentários abaixo.