Dicas de design utilizando as ferramentas Jimdo. http://educacao.jimdo.com
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
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
Cabeçalho Navegação Conteúdo Barra lateral (Sidebar) Rodapé
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
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
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.
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.
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: 14-16 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
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.
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
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.
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.
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
Demonstração ao vivo
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
Recursos recomendados Combinar fontes: http://font-combinator.com Edição de imagens: http://www.photoshop.com/tools http://www.pixlr.com/editor Combinar cores: http://www.colourlovers.com Criar galerias e infográficos: http://www.slidesnack.com Bancos de imagens: http://unsplash.com http://www.photosnack.com http://www.infogr.am http://www.foter.com http://www.fotolia.com/jimdo http://pixabay.com Aplicações recomendadas: http://ajuda.jimdo.com/ferramentas-externas/
Obrigado! www.jimdo.com.br