O documento fornece 10 dicas de boas práticas de design para desenvolvimento de sites em WordPress. As dicas incluem: 1) realizar reunião de briefing com o cliente, 2) desenvolver esboços iniciais, 3) definir a logomarca, 4) trabalhar com cores complementares, 5) padronizar fontes, 6) criar botões intuitivos, 7) utilizar ícones apropriados, 8) escolher imagens de acordo com o contexto e 9) realizar testes da interface.

1. BOAS PRÁTICAS DE
DESIGN PARA
DESENVOLVIMENTO DE
SITES EM WORDPRESS

2. DESIGNER
GRÁFICO
UX DESIGNER

3. #DESIGNERLIFE

4. INTEGRANTE DO
TIME DE
DESENVOLVIMENTO
DA INCUCA

5. NEGÓCIOS
EM WORDPRESS

6. VOU COMPARTILHAR
ALGUMAS DICAS
DE BOAS PRÁTICAS
DE DESIGN COM
VOCÊS

7. DICA 1
REUNIÃO
DE BRIEFING

8. O BRIEFING TE AJUDA A
ENTENDER O PROBLEMA
E QUAL DIREÇÃO SEGUIR
PARA ENCONTRAR A
SOLUÇÃO

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. DOCS
KEEP
TXT

11. DICA 2
ESBOÇO

12. ESBOÇOS ALINHAM AS
IDEIAS DO CLIENTE COM
O QUE PODE SER
DESENVOLVIDO

13. CONVERSE COM O
CLIENTE SOBRE SUAS
IDEIAS MATERIALIZADAS
"EM UM PAPEL"

14. NESSE MOMENTO VOCÊ
DEVE DEFINIR A
NAVEGAÇÃO DO SITE E
QUAIS AS SEÇÕES AS
PÁGINAS DEVEM TER

15. PAPEL E CANETA
BALSAMIQ
PACOTE ADOBE
GOOGLE PRESENTATION
TEMAS

16. DICA 3
LOGOMARCA

17. A LOGOMARCA
DITA O RITMO DA
ESTÉTICA DO SITE

18. CLÁSSICO
MODERNO
INSTITUCIONAL

19. PEÇA POR UM
MANUAL DE
MARCA

20. ELE CONTÉM
INFORMAÇÕES DE
CORES, TEXTO E
IMAGENS

21. Logopond.com
Freepick.com

22. DICA 4
CORES

23. TRABALHE COM
CORES
COMPLEMENTARES

25. ELAS OFERECEM MAIOR
CONTRASTE PARA
A LEITURA E AÇÕES
NA TELA

26. SELECIONE NO MÁXIMO 3
CORES PARA
APLICAR AO SITE

27. PRINCIPAL
SECUNDÁRIA
APOIO

28. USE A COR PRINCIPAL PARA
APLICAR NOS ELEMENTOS
DE DESTAQUE DO SITE

29. CALL TO ACTION
LINKS
TÍTULOS (h1, h2, h3…)
BOTÕES
BACKGROUNDS

30. CUIDADO AO APLICAR COR EM
TEXTOS POIS
SE MAL APLICADA
PREJUDICA A LEGIBILIDADE

31. DE PREFERÊNCIA PARA O
PRETO NO FUNDO BRANCO

32. OU BRANCO EM FUNDO
COLORIDO

33. AS CORES PRETO E
BRANCO SOMADOS A
UMA OUTRA COR
FUNCIONAM MUITO BEM

35. PALLETON.COM
FLATUICOLORS.COM
COOLORS.CO

36. DICA 5
FONTES

37. PADRONIZE O TEXTO POR
TAMANHO, COR,
ALINHAMENTO E
TIPO

38. h1-32px
h2-24px
h3-18px
P-14px-12px
TAMANHO

39. OS TÍTULOS DEVEM TER
A MESMA COR NA
MAIORIA DOS CASOS

40. MANTENHA O
ALINHAMENTO
CONSISTENTE

41. Ou alinha tudo
a esquerda

42. ou tudo
ao
centro

43. MENOS É MAIS

44. LONGOS TEXTOS DEVEM SER
QUEBRADOS EM DUAS
COLUNAS E ALINHADOs A
ESQUERDA

45. 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.

46. UTILIZE 2 TIPOS DE FONTES
PARA DAR UMA MELHOR
HIERARQUIA PARA A INFORMAÇÃO
DO SEU SITE

47. FONTE PRIMÁRIA PARA OS TÍTULOS
SECUNDÁRIA PARA PARÁGRAFOS

48. ESCOLHA FONTES QUE TENHAM
DIVERSOS TIPOS DE PESO

49. OPEN SANS
ROBOTO
HELVETICA NEUE
UBUNTU

50. GOOGLE FONTS
FONTSQUIRREL.COM
FONTPAIR.CO

51. DICA 6
BOTÕES

52. CALL TO ACTION
PRIMÁRIOS SECUNDÁRIO
ISSO É UM CALL TO ACTION
Botão Botão

53. 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

54. PRIMÁRIOS
ENTRAR
É O QUE SERÁ UTILIZADO COM MAIOR FREQUÊNCIA NA INTERFACE.
INDICA AÇÕES QUE QUEREMOS QUE O USUÁRIO FAÇA.

55. SECUNDÁRIO
EXCLUIRCANCELAR
ACOMPANHA O BOTÃO PRIMÁRIO PERMITINDO UMA AÇÃO
SECUNDÁRIA PARA O USUÁRIO

56. UTILIZE 3 TAMANHOS DE
BOTÕES SE NECESSÁRIO

57. GRANDE
BOTÃO
ALTURA 50px
FONTE 16px
GERALMENTE UTILIZADOS PARA CTA'S

58. MÉDIO
BOTÃO
ALTURA 40px
FONTE 14px
AÇÕES PRINCIPAIS E SECUNDÁRIAS

59. PEQUENO
BOTÃO
ALTURA 30px
FONTE 12px
SIDEBAR E COMPARTILHAMENTO

60. CUIDADO COM OS CONTRASTES
PARA AS CORES DOS BOTÕES

61. UTILIZE PREFERENCIALMENTE
AS CORES DA MARCA E COM
BOM CONTRASTE

62. CUIDADO COM O ESTADO
DOS BOTÕES

63. UTILIZE SEMPRE A INTERAÇÃO DE
HOVER E CLIQUE PARA INDICAR QUE
A INTERAÇÃO ESTÁ ACONTECENDO
BOTÃO BOTÃO

64. NÃO ADIANTA TER UM BOTÃO BONITO SE
ELE NÃO COMUNICA DIREITO A AÇÃO
QUE ELE PERMITE AO USUÁRIO

65. FAÇA DOWNLOAD DOS NOSSOS
DOCUMENTOS
CLIQUE AQUI FAZER DOWNLOAD

66. getbootstrap.com
medium /user-interface-botoes

67. DICA 7
ÍCONES

68. ÍCONES PODEM SER UTILIZADOS
PARA REPRESENTAR AÇÕES
COMO BOTÕES

69. IMPRIMIR / EDITAR / EXCLUIR

70. AJUDAM A DIMINUIR LONGAS
FRASES EM UMA ÚNICA IMAGEM

71. USE ÍCONES DA MESMA FAMÍLIA
PARA DEIXAR A INTERFACE
EM HARMONIA E RECONHECÍVEL

73. FONTAWSEOME.COM
FLATICON.COM

74. DICA 8
IMAGENS

75. É O ITEM MAIS IMPACTANTE
ESTETICAMENTE E COMPLICADO DE
DEFINIR COM O CLIENTE

76. TENTE ENTENDER O GOSTO DO
CLIENTE E O OBJETIVO DO PROJETO
PARA SABER QUE TIPO DE
IMAGEM UTILIZAR

77. UTILIZE IMAGENS DE ACORDO COM
O CONTEXTO DA PÁGINA OU DO ITEM
EM QUESTÃO

78. BUSQUE IMAGENS EM ALTA
RESOLUÇÃO E COM 1920PX DE
LARGURA PARA BANNERS
PRINCIPAIS

79. MUITO CUIDADO COM A
PERFORMANCE DO SITE AO UTILIZAR
IMAGENS "PESADAS"

80. TYNI.COM
REDUZ EM ATÉ 70% O PESO DA
IMAGEM SEM PERDER A RESOLUÇÃO

81. MAIS CUIDADO AINDA COM DIREITOS
AUTORAIS
UTILIZAR IMAGENS SEM PERMISSÃO
PODE CAUSAR GRANDES PROBLEMAS

82. FILTROS COM TRANSPARÊNCIA
AJUDAM A DAR CONTRASTE
PARA TEXTOS

83. PRETO 30%
BRANCO 30%

84. UNSPLASH.COM
FREEPICK.COM

85. DICA 9
TESTE

86. TESTES GARANTEM UMA ENTREGA
PROFISSIONAL E EVITAM DESGASTES
COM OS CLIENTES

87. SEMPRE VERIFIQUE COMO A
INTERFACE ESTÁ SE COMPORTANDO
NO MOBILE E NO DESKTOP

88. VERIFIQUE ESPAÇAMENTOS,
ALINHAMENTOS ENTRE OS ITENS,
TAMANHO DE BOTÕES, TEXTOS E IMAGENS
E A ORDEM DAS SEÇÕES

89. UTILIZE ESSAS BOAS PRÁTICAS PARA
EXPLICAR AO CLIENTE O PORQUE
PROJETOU O DESIGN DO SITE DA MANEIRA
QUE PROJETOU

90. EMBASAMENTO TEÓRICO AJUDA NA
APROVAÇÃO

91. DICA 10
E SE NÃO DEU
CERTO?

92. VOCÊ PRECISA DE UM
DESIGNER!

93. OBRIGADO!
heringer.allan@gmail.com
48 9 9990 1535