Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
BOAS PRÁTICAS DE
DESIGN PARA
DESENVOLVIMENTO DE
SITES EM WORDPRESS
DESIGNER
GRÁFICO
UX DESIGNER
#DESIGNERLIFE
INTEGRANTE DO
TIME DE
DESENVOLVIMENTO
DA INCUCA
NEGÓCIOS
EM WORDPRESS
VOU COMPARTILHAR
ALGUMAS DICAS
DE BOAS PRÁTICAS
DE DESIGN COM
VOCÊS
DICA 1
REUNIÃO
DE BRIEFING
O BRIEFING TE AJUDA A
ENTENDER O PROBLEMA
E QUAL DIREÇÃO SEGUIR
PARA ENCONTRAR A
SOLUÇÃO
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-VO...
DOCS
KEEP
TXT
DICA 2
ESBOÇO
ESBOÇOS ALINHAM AS
IDEIAS DO CLIENTE COM
O QUE PODE SER
DESENVOLVIDO
CONVERSE COM O
CLIENTE SOBRE SUAS
IDEIAS MATERIALIZADAS
"EM UM PAPEL"
NESSE MOMENTO VOCÊ
DEVE DEFINIR A
NAVEGAÇÃO DO SITE E
QUAIS AS SEÇÕES AS
PÁGINAS DEVEM TER
PAPEL E CANETA
BALSAMIQ
PACOTE ADOBE
GOOGLE PRESENTATION
TEMAS
DICA 3
LOGOMARCA
A LOGOMARCA
DITA O RITMO DA
ESTÉTICA DO SITE
CLÁSSICO
MODERNO
INSTITUCIONAL
PEÇA POR UM
MANUAL DE
MARCA
ELE CONTÉM
INFORMAÇÕES DE
CORES, TEXTO E
IMAGENS
Logopond.com
Freepick.com
DICA 4
CORES
TRABALHE COM
CORES
COMPLEMENTARES
ELAS OFERECEM MAIOR
CONTRASTE PARA
A LEITURA E AÇÕES
NA TELA
SELECIONE NO MÁXIMO 3
CORES PARA
APLICAR AO SITE
PRINCIPAL
SECUNDÁRIA
APOIO
USE A COR PRINCIPAL PARA
APLICAR NOS ELEMENTOS
DE DESTAQUE DO SITE
CALL TO ACTION
LINKS
TÍTULOS (h1, h2, h3…)
BOTÕES
BACKGROUNDS
CUIDADO AO APLICAR COR EM
TEXTOS POIS
SE MAL APLICADA
PREJUDICA A LEGIBILIDADE
DE PREFERÊNCIA PARA O
PRETO NO FUNDO BRANCO
OU BRANCO EM FUNDO
COLORIDO
AS CORES PRETO E
BRANCO SOMADOS A
UMA OUTRA COR
FUNCIONAM MUITO BEM
PALLETON.COM
FLATUICOLORS.COM
COOLORS.CO
DICA 5
FONTES
PADRONIZE O TEXTO POR
TAMANHO, COR,
ALINHAMENTO E
TIPO
h1-32px
h2-24px
h3-18px
P-14px-12px
TAMANHO
OS TÍTULOS DEVEM TER
A MESMA COR NA
MAIORIA DOS CASOS
MANTENHA O
ALINHAMENTO
CONSISTENTE
Ou alinha tudo
a esquerda
ou tudo
ao
centro
MENOS É MAIS
LONGOS TEXTOS DEVEM SER
QUEBRADOS EM DUAS
COLUNAS E ALINHADOs A
ESQUERDA
Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Cras arcu nunc, congue quis ante ac, blandit
iaculis tellus. Null...
UTILIZE 2 TIPOS DE FONTES
PARA DAR UMA MELHOR
HIERARQUIA PARA A INFORMAÇÃO
DO SEU SITE
FONTE PRIMÁRIA PARA OS TÍTULOS
SECUNDÁRIA PARA PARÁGRAFOS
ESCOLHA FONTES QUE TENHAM
DIVERSOS TIPOS DE PESO
OPEN SANS
ROBOTO
HELVETICA NEUE
UBUNTU
GOOGLE FONTS
FONTSQUIRREL.COM
FONTPAIR.CO
DICA 6
BOTÕES
CALL TO ACTION
PRIMÁRIOS SECUNDÁRIO
ISSO É UM CALL TO ACTION
Botão Botão
CALL TO ACTION
FALAR COM UM CONSULTOR
REPRESENTA A PRINCIPAL AÇÃO QUE O USUÁRIO DEVE FAZER NO SITE E
GERALMENTE É MAIOR E ...
PRIMÁRIOS
ENTRAR
É O QUE SERÁ UTILIZADO COM MAIOR FREQUÊNCIA NA INTERFACE.
INDICA AÇÕES QUE QUEREMOS QUE O USUÁRIO FAÇA.
SECUNDÁRIO
EXCLUIRCANCELAR
ACOMPANHA O BOTÃO PRIMÁRIO PERMITINDO UMA AÇÃO
SECUNDÁRIA PARA O USUÁRIO
UTILIZE 3 TAMANHOS DE
BOTÕES SE NECESSÁRIO
GRANDE
BOTÃO
ALTURA 50px
FONTE 16px
GERALMENTE UTILIZADOS PARA CTA'S
MÉDIO
BOTÃO
ALTURA 40px
FONTE 14px
AÇÕES PRINCIPAIS E SECUNDÁRIAS
PEQUENO
BOTÃO
ALTURA 30px
FONTE 12px
SIDEBAR E COMPARTILHAMENTO
CUIDADO COM OS CONTRASTES
PARA AS CORES DOS BOTÕES
UTILIZE PREFERENCIALMENTE
AS CORES DA MARCA E COM
BOM CONTRASTE
CUIDADO COM O ESTADO
DOS BOTÕES
UTILIZE SEMPRE A INTERAÇÃO DE
HOVER E CLIQUE PARA INDICAR QUE
A INTERAÇÃO ESTÁ ACONTECENDO
BOTÃO BOTÃO
NÃO ADIANTA TER UM BOTÃO BONITO SE
ELE NÃO COMUNICA DIREITO A AÇÃO
QUE ELE PERMITE AO USUÁRIO
FAÇA DOWNLOAD DOS NOSSOS
DOCUMENTOS
CLIQUE AQUI FAZER DOWNLOAD
getbootstrap.com
medium /user-interface-botoes
DICA 7
ÍCONES
ÍCONES PODEM SER UTILIZADOS
PARA REPRESENTAR AÇÕES
COMO BOTÕES
IMPRIMIR / EDITAR / EXCLUIR
AJUDAM A DIMINUIR LONGAS
FRASES EM UMA ÚNICA IMAGEM
USE ÍCONES DA MESMA FAMÍLIA
PARA DEIXAR A INTERFACE
EM HARMONIA E RECONHECÍVEL
FONTAWSEOME.COM
FLATICON.COM
DICA 8
IMAGENS
É O ITEM MAIS IMPACTANTE
ESTETICAMENTE E COMPLICADO DE
DEFINIR COM O CLIENTE
TENTE ENTENDER O GOSTO DO
CLIENTE E O OBJETIVO DO PROJETO
PARA SABER QUE TIPO DE
IMAGEM UTILIZAR
UTILIZE IMAGENS DE ACORDO COM
O CONTEXTO DA PÁGINA OU DO ITEM
EM QUESTÃO
BUSQUE IMAGENS EM ALTA
RESOLUÇÃO E COM 1920PX DE
LARGURA PARA BANNERS
PRINCIPAIS
MUITO CUIDADO COM A
PERFORMANCE DO SITE AO UTILIZAR
IMAGENS "PESADAS"
TYNI.COM
REDUZ EM ATÉ 70% O PESO DA
IMAGEM SEM PERDER A RESOLUÇÃO
MAIS CUIDADO AINDA COM DIREITOS
AUTORAIS
UTILIZAR IMAGENS SEM PERMISSÃO
PODE CAUSAR GRANDES PROBLEMAS
FILTROS COM TRANSPARÊNCIA
AJUDAM A DAR CONTRASTE
PARA TEXTOS
PRETO 30%
BRANCO 30%
UNSPLASH.COM
FREEPICK.COM
DICA 9
TESTE
TESTES GARANTEM UMA ENTREGA
PROFISSIONAL E EVITAM DESGASTES
COM OS CLIENTES
SEMPRE VERIFIQUE COMO A
INTERFACE ESTÁ SE COMPORTANDO
NO MOBILE E NO DESKTOP
VERIFIQUE ESPAÇAMENTOS,
ALINHAMENTOS ENTRE OS ITENS,
TAMANHO DE BOTÕES, TEXTOS E IMAGENS
E A ORDEM DAS SEÇÕES
UTILIZE ESSAS BOAS PRÁTICAS PARA
EXPLICAR AO CLIENTE O PORQUE
PROJETOU O DESIGN DO SITE DA MANEIRA
QUE PROJETOU
EMBASAMENTO TEÓRICO AJUDA NA
APROVAÇÃO
DICA 10
E SE NÃO DEU
CERTO?
VOCÊ PRECISA DE UM
DESIGNER!
OBRIGADO!
heringer.allan@gmail.com
48 9 9990 1535
Allan Carneiro apresenta boas práticas de design para desenvolvimento de sites em WordPress
Allan Carneiro apresenta boas práticas de design para desenvolvimento de sites em WordPress
Allan Carneiro apresenta boas práticas de design para desenvolvimento de sites em WordPress
Nächste SlideShare
Wird geladen in …5
×

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

81 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Design
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

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

×