Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Allan Carneiro apresenta boas práticas de design para desenvolvimento de sites em WordPress

82 views

Published on

Formado em design gráfico pela Udesc e Pós Graduado em Experiência do Usuário pela UfSC. Tem experiência com desenvolvimento de produtos digitais e pesquisa com usuários.
Também trabalha lado a lado com programadores desenvolvendo sites em wordpress.

Breve descrição sobre a apresentação: Boas práticas de design e usabilidade para desenvolvimento de sites em WordPress. Dicas para programadores que se aventuram no design dos temas e criando interfaces por conta.

Published in: Design
  • Be the first to comment

  • Be the first to like this

Allan Carneiro apresenta boas práticas de design para desenvolvimento de sites em WordPress

  1. 1. BOAS PRÁTICAS DE DESIGN PARA DESENVOLVIMENTO DE SITES EM WORDPRESS
  2. 2. DESIGNER GRÁFICO UX DESIGNER
  3. 3. #DESIGNERLIFE
  4. 4. INTEGRANTE DO TIME DE DESENVOLVIMENTO DA INCUCA
  5. 5. NEGÓCIOS EM WORDPRESS
  6. 6. VOU COMPARTILHAR ALGUMAS DICAS DE BOAS PRÁTICAS DE DESIGN COM VOCÊS
  7. 7. DICA 1 REUNIÃO DE BRIEFING
  8. 8. O BRIEFING TE AJUDA A ENTENDER O PROBLEMA E QUAL DIREÇÃO SEGUIR PARA ENCONTRAR A SOLUÇÃO
  9. 9. 1-QUAL É O OBJETIVO DO SEU SITE? 2-QUAIS PÁGINAS DEVEM TER NO SEU SITE? 3-VOCÊ TEM REFERÊNCIAS DE WEBSITES QUE GOSTA? 4-VOCÊ POSSUI LOGOMARCA? 5-QUAIS CORES MELHOR REPRESENTAM SUA MARCA? 6-EXISTE ALGUMA FONTE QUE VOCÊ UTILIZA? 7-UTILIZA OU GOSTARIA DE VER ÍCONES NO SITE? 8-QUE TIPO DE IMAGENS VOCÊ UTILIZARIA NO SITE?
  10. 10. DOCS KEEP TXT
  11. 11. DICA 2 ESBOÇO
  12. 12. ESBOÇOS ALINHAM AS IDEIAS DO CLIENTE COM O QUE PODE SER DESENVOLVIDO
  13. 13. CONVERSE COM O CLIENTE SOBRE SUAS IDEIAS MATERIALIZADAS "EM UM PAPEL"
  14. 14. NESSE MOMENTO VOCÊ DEVE DEFINIR A NAVEGAÇÃO DO SITE E QUAIS AS SEÇÕES AS PÁGINAS DEVEM TER
  15. 15. PAPEL E CANETA BALSAMIQ PACOTE ADOBE GOOGLE PRESENTATION TEMAS
  16. 16. DICA 3 LOGOMARCA
  17. 17. A LOGOMARCA DITA O RITMO DA ESTÉTICA DO SITE
  18. 18. CLÁSSICO MODERNO INSTITUCIONAL
  19. 19. PEÇA POR UM MANUAL DE MARCA
  20. 20. ELE CONTÉM INFORMAÇÕES DE CORES, TEXTO E IMAGENS
  21. 21. Logopond.com Freepick.com
  22. 22. DICA 4 CORES
  23. 23. TRABALHE COM CORES COMPLEMENTARES
  24. 24. ELAS OFERECEM MAIOR CONTRASTE PARA A LEITURA E AÇÕES NA TELA
  25. 25. SELECIONE NO MÁXIMO 3 CORES PARA APLICAR AO SITE
  26. 26. PRINCIPAL SECUNDÁRIA APOIO
  27. 27. USE A COR PRINCIPAL PARA APLICAR NOS ELEMENTOS DE DESTAQUE DO SITE
  28. 28. CALL TO ACTION LINKS TÍTULOS (h1, h2, h3…) BOTÕES BACKGROUNDS
  29. 29. CUIDADO AO APLICAR COR EM TEXTOS POIS SE MAL APLICADA PREJUDICA A LEGIBILIDADE
  30. 30. DE PREFERÊNCIA PARA O PRETO NO FUNDO BRANCO
  31. 31. OU BRANCO EM FUNDO COLORIDO
  32. 32. AS CORES PRETO E BRANCO SOMADOS A UMA OUTRA COR FUNCIONAM MUITO BEM
  33. 33. PALLETON.COM FLATUICOLORS.COM COOLORS.CO
  34. 34. DICA 5 FONTES
  35. 35. PADRONIZE O TEXTO POR TAMANHO, COR, ALINHAMENTO E TIPO
  36. 36. h1-32px h2-24px h3-18px P-14px-12px TAMANHO
  37. 37. OS TÍTULOS DEVEM TER A MESMA COR NA MAIORIA DOS CASOS
  38. 38. MANTENHA O ALINHAMENTO CONSISTENTE
  39. 39. Ou alinha tudo a esquerda
  40. 40. ou tudo ao centro
  41. 41. MENOS É MAIS
  42. 42. LONGOS TEXTOS DEVEM SER QUEBRADOS EM DUAS COLUNAS E ALINHADOs A ESQUERDA
  43. 43. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras arcu nunc, congue quis ante ac, blandit iaculis tellus. Nulla fringilla tincidunt turpis. Morbi nec nibh bibendum, ullamcorper turpis eget, hendrerit augue. Suspendisse vulputate, erat sit amet volutpat elementum, risus purus eleifend urna, ut auctor lacus dolor condimentum enim. Aenean lorem neque, venenatis quis purus et, pellentesque tempor nisl. Donec convallis ipsum vel ligula consequat laoreet. Nulla elementum nisi sapien, tempor ullamcorper nibh faucibus sit amet. Aenean elementum ultrices interdum. In elit arcu, porta vel tincidunt sit amet, feugiat in massa. Maecenas et cursus lectus. Suspendisse in posuere velit, sed congue ante. pellentesque tempor nisl. Donec convallis ipsum vel ligula consequat laoreet. Nulla elementum nisi sapien, tempor ullamcorper nibh faucibus sit amet. Aenean elementum ultrices interdum. In elit arcu, porta vel tincidunt sit amet, feugiat in massa. Maecenas et cursus lectus. Suspendisse in posuere velit, sed congue ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras arcu nunc, congue quis ante ac, blandit iaculis tellus. Nulla fringilla tincidunt turpis. Morbi nec nibh bibendum, ullamcorper turpis eget, hendrerit augue. Suspendisse vulputate, erat sit amet volutpat elementum, risus purus eleifend urna, ut auctor lacus dolor condimentum enim. Aenean lorem neque, venenatis quis purus et, pellentesque tempor nisl. Donec convallis ipsum vel ligula consequat laoreet. Nulla elementum nisi sapien, tempor ullamcorper nibh faucibus sit amet. Aenean elementum ultrices interdum. In elit arcu, porta vel tincidunt sit amet, feugiat in massa. Maecenas et cursus lectus. Suspendisse in posuere velit, sed congue ante. pellentesque tempor nisl. Donec convallis ipsum vel ligula consequat laoreet. Nulla elementum nisi sapien, tempor ullamcorper nibh faucibus sit amet. Aenean elementum ultrices interdum. In elit arcu, porta vel tincidunt sit amet, feugiat in massa. Maecenas et cursus lectus. Suspendisse in posuere velit, sed congue ante.
  44. 44. UTILIZE 2 TIPOS DE FONTES PARA DAR UMA MELHOR HIERARQUIA PARA A INFORMAÇÃO DO SEU SITE
  45. 45. FONTE PRIMÁRIA PARA OS TÍTULOS SECUNDÁRIA PARA PARÁGRAFOS
  46. 46. ESCOLHA FONTES QUE TENHAM DIVERSOS TIPOS DE PESO
  47. 47. OPEN SANS ROBOTO HELVETICA NEUE UBUNTU
  48. 48. GOOGLE FONTS FONTSQUIRREL.COM FONTPAIR.CO
  49. 49. DICA 6 BOTÕES
  50. 50. CALL TO ACTION PRIMÁRIOS SECUNDÁRIO ISSO É UM CALL TO ACTION Botão Botão
  51. 51. CALL TO ACTION FALAR COM UM CONSULTOR REPRESENTA A PRINCIPAL AÇÃO QUE O USUÁRIO DEVE FAZER NO SITE E GERALMENTE É MAIOR E TEM UMA COR MAIS ACENTUADA DO QUE OS OUTROS BOTÕES
  52. 52. PRIMÁRIOS ENTRAR É O QUE SERÁ UTILIZADO COM MAIOR FREQUÊNCIA NA INTERFACE. INDICA AÇÕES QUE QUEREMOS QUE O USUÁRIO FAÇA.
  53. 53. SECUNDÁRIO EXCLUIRCANCELAR ACOMPANHA O BOTÃO PRIMÁRIO PERMITINDO UMA AÇÃO SECUNDÁRIA PARA O USUÁRIO
  54. 54. UTILIZE 3 TAMANHOS DE BOTÕES SE NECESSÁRIO
  55. 55. GRANDE BOTÃO ALTURA 50px FONTE 16px GERALMENTE UTILIZADOS PARA CTA'S
  56. 56. MÉDIO BOTÃO ALTURA 40px FONTE 14px AÇÕES PRINCIPAIS E SECUNDÁRIAS
  57. 57. PEQUENO BOTÃO ALTURA 30px FONTE 12px SIDEBAR E COMPARTILHAMENTO
  58. 58. CUIDADO COM OS CONTRASTES PARA AS CORES DOS BOTÕES
  59. 59. UTILIZE PREFERENCIALMENTE AS CORES DA MARCA E COM BOM CONTRASTE
  60. 60. CUIDADO COM O ESTADO DOS BOTÕES
  61. 61. UTILIZE SEMPRE A INTERAÇÃO DE HOVER E CLIQUE PARA INDICAR QUE A INTERAÇÃO ESTÁ ACONTECENDO BOTÃO BOTÃO
  62. 62. NÃO ADIANTA TER UM BOTÃO BONITO SE ELE NÃO COMUNICA DIREITO A AÇÃO QUE ELE PERMITE AO USUÁRIO
  63. 63. FAÇA DOWNLOAD DOS NOSSOS DOCUMENTOS CLIQUE AQUI FAZER DOWNLOAD
  64. 64. getbootstrap.com medium /user-interface-botoes
  65. 65. DICA 7 ÍCONES
  66. 66. ÍCONES PODEM SER UTILIZADOS PARA REPRESENTAR AÇÕES COMO BOTÕES
  67. 67. IMPRIMIR / EDITAR / EXCLUIR
  68. 68. AJUDAM A DIMINUIR LONGAS FRASES EM UMA ÚNICA IMAGEM
  69. 69. USE ÍCONES DA MESMA FAMÍLIA PARA DEIXAR A INTERFACE EM HARMONIA E RECONHECÍVEL
  70. 70. FONTAWSEOME.COM FLATICON.COM
  71. 71. DICA 8 IMAGENS
  72. 72. É O ITEM MAIS IMPACTANTE ESTETICAMENTE E COMPLICADO DE DEFINIR COM O CLIENTE
  73. 73. TENTE ENTENDER O GOSTO DO CLIENTE E O OBJETIVO DO PROJETO PARA SABER QUE TIPO DE IMAGEM UTILIZAR
  74. 74. UTILIZE IMAGENS DE ACORDO COM O CONTEXTO DA PÁGINA OU DO ITEM EM QUESTÃO
  75. 75. BUSQUE IMAGENS EM ALTA RESOLUÇÃO E COM 1920PX DE LARGURA PARA BANNERS PRINCIPAIS
  76. 76. MUITO CUIDADO COM A PERFORMANCE DO SITE AO UTILIZAR IMAGENS "PESADAS"
  77. 77. TYNI.COM REDUZ EM ATÉ 70% O PESO DA IMAGEM SEM PERDER A RESOLUÇÃO
  78. 78. MAIS CUIDADO AINDA COM DIREITOS AUTORAIS UTILIZAR IMAGENS SEM PERMISSÃO PODE CAUSAR GRANDES PROBLEMAS
  79. 79. FILTROS COM TRANSPARÊNCIA AJUDAM A DAR CONTRASTE PARA TEXTOS
  80. 80. PRETO 30% BRANCO 30%
  81. 81. UNSPLASH.COM FREEPICK.COM
  82. 82. DICA 9 TESTE
  83. 83. TESTES GARANTEM UMA ENTREGA PROFISSIONAL E EVITAM DESGASTES COM OS CLIENTES
  84. 84. SEMPRE VERIFIQUE COMO A INTERFACE ESTÁ SE COMPORTANDO NO MOBILE E NO DESKTOP
  85. 85. VERIFIQUE ESPAÇAMENTOS, ALINHAMENTOS ENTRE OS ITENS, TAMANHO DE BOTÕES, TEXTOS E IMAGENS E A ORDEM DAS SEÇÕES
  86. 86. UTILIZE ESSAS BOAS PRÁTICAS PARA EXPLICAR AO CLIENTE O PORQUE PROJETOU O DESIGN DO SITE DA MANEIRA QUE PROJETOU
  87. 87. EMBASAMENTO TEÓRICO AJUDA NA APROVAÇÃO
  88. 88. DICA 10 E SE NÃO DEU CERTO?
  89. 89. VOCÊ PRECISA DE UM DESIGNER!
  90. 90. OBRIGADO! heringer.allan@gmail.com 48 9 9990 1535

×