Dicas de design utilizando as ferramentas Jimdo.

Transcrição

1 Dicas de design utilizando as ferramentas Jimdo.

2 Organize suas ideias Defina um plano de trabalho Estruture a informação Planeje as seções e o conteúdo de cada uma delas Defina a mensagem que você deseja transmitir Objetivo Seus visitantes devem reconhecer claramente: o que devem fazer, como, quando e onde Resultado A navegação deve ser intuitiva e simples Ou seja: Uma página fácil de usar

3 Comece pela estrutura Selecione a estrutura de acordo com as necessidades do seu visitante: Preste atenção: Largura e distribuição de cada área Cores e detalhes Objetivo Resultado equilíbrio Encontrar entre forma e função, efetiva usando o layout de forma espaços Melhor aproveitamento de e informação distribuição da

4 Cabeçalho Navegação Conteúdo Barra lateral (Sidebar) Rodapé

5 Defina logo o plano de fundo Seleciona um estilo que não chame mais atenção do que o resto da sua página: Um plano de fundo neutro e plano ajuda a deixar o site leve; Cores claras facilitam a leitura; Cores escuram destacam o conteúdo, mas é preciso ter cuidado ao usá-las. Objetivo Facilitar a leitura e ressaltar o conteúdo de forma profissional Resultado Um design simples e atrativo que ajuda a manter a atenção dos seus visitantes

6 Usando uma imagem ou vídeo como plano de fundo Use uma imagem chamativa e de boa qualidade Contraste o texto com o plano de fundo Alinhe a página de forma a destacar a imagem Faça com que a imagem ocupe todo o espaço do fundo do site Utilize um cabeçalho transparente para destacar o título

7 Preste atenção ao cabeçalho Planeje como utilizar da melhor forma, seja criativo Se usar imagem, preste atenção na qualidade do arquivo O título e a logomarca devem harmonizar com a imagem Dicas Alternativas Use um cabeçalho transparente e inclua a imagem do topo no conteúdo. Assim, você pode ter uma imagem diferente para cada pagina. Inclua apenas a logomarca no cabeçalho. Assim, você terá mais espaço para o seu conteúdo.

8 Defina uma paleta de cores Defina uma paleta de cores para todas as páginas e seja consistente Use cores que sejam relevantes para seus visitantes e que estejam harmônicas com as imagens que você irá utilizar Use as cores da paleta para destacar a informação de forma estratégica Use no máximo 4 cores. Lembre-se: Menos é mais.

9 Use a força gráfica dos textos O mais importante é que ele seja legível Limite o número de fontes Escolha uma fonte diferente para o título e uma simples para os textos Use os tamanhos dos títulos para estabelecer uma hierarquia Para se lembrar Tamanho recomendado: px com espaçamento 1.5. Nunca utilize fontes menores que 11px Evite letras maiúsculas e sublinhadas Combine corretamente as cores e os estilos

10 Faça bom uso do espaço Organize o conteúdo de forma funcional Use colunas para distribuir o conteúdo Mantenha um balanço entre informação e espaço em branco Preste atenção aos pequenos detalhes. São eles que fazem a diferença.

11 Foque no essencial Mantenha o design simples, para evitar distrações Utilize a regra 80/20 - Apenas 20% do conteúdo transmite 80% do valor e utilidade da sua página Destaque-se pelo conjunto, e não por elementos isolados

12 Mantenha o equilíbrio A informação que importa deve estar na parte superior do site. O visitante deve ver tudo que precisa sem precisar descer. O conteúdo é o rei supremo. Desenhe seu site sem sacrificar o posicionamento SEO. Inclua imagens incrível, mas não esqueça de incluir textos relevantes para seu visitante. Utilize as chamadas de ação, conhecidas como call-to-action. Devem ser claras, espalhas inteligentemente e com sentido. Evite o Clique aqui.

13 Impacte com imagens Só use imagens de alta qualidade Otimize suas imagens para tamanho e peso corretos, para evitar deixar o site pesado Invista em imagens profissionais. Se não pode gastar muito, dedique tempo para pesquisar e encontrar boas opções gratuitas.

14 Seja esperto com widgets Dê preferência a HTML5 e evite o Flash Teste-os primeiro Não sobrecarregue sua página Use widgets funcionais que realmente tragam valor ao visitante Evite os que distraiam o visitante do seu conteúdo

15 Demonstração ao vivo

16 Resumo Planeje antes de colocar a mão na massa Comece com o design do plano de fundo Seja criativo com o cabeçalho Siga o princípio da simplicidade: Menos é mais. Encontre o equilíbrio entre forma e função Otimize o conteúdo Revise, teste e experimente

17 Recursos recomendados Combinar fontes: Edição de imagens: Combinar cores: Criar galerias e infográficos: Bancos de imagens: Aplicações recomendadas:

18 Obrigado!