Depois do levantamento inicial, vamos para a parte de design e produção. Devemos criar algumas composições que permitam que você ou seu cliente veja como ficará sua aplicação, e como o usuário irá utilizá-la. Depois das composições iniciais feitas, precisamos otimizar as imagens, e criar o HTML e o CSS.
1- Crie wireframes
Criar wireframes é a melhor forma de expor as telas inicialmente. No início da criação de sites na FastCom, utilizamos o Balsamiq Mockups (trial de 30 dias, USD 79.00 lifetime), mas você pode utilizar o PowerPoint, um programa gráfico ou uma ferramenta online como o Moqups. Com certeza, a criação de wireframes economizará muito tempo de design e montagem de HTML para apresentar ideias para um cliente.
2- Otimize suas imagens
Otimize suas imagens utilizando Photoshop e Fireworks, um batch específico ou ferramentas online como o Image Optimizer do Dynamic Drive. Combine as imagens da sua aplicação em sprites, assim, a aplicação solicitará apenas um arquivo de imagem ao servidor. Tenho utilizado para combinar imagens o Spritepad, fazendo as classes do CSS manualmente.
3- Monte seu HTML e CSS
Crie primeiro os elementos comuns da sua interface, já utilizando alguns includes para facilitar as criação das próximas telas. Por definição, o HTML deve cuidar da estrutura, cabeçalhos, parágrafos e links, enquanto o CSS cuida da apresentação, cores, fontes, alinhamento e backgrounds.
Depois de criar seu HTML e CSS base, valide o código usando http://validator.w3.org/ e http://jigsaw.w3.org/css-validator/. Se sua aplicação envolve relatórios, crie folhas de estilo específicas para impressão. Não esqueça também de criar estilos próprios para erros para ajudar nos debugs.
4- Cuide da navegação
A navegação deve ser simples, intuitiva e coerente, mais isso pode ser muito trabalhoso para conseguir em uma aplicação grande e complexa. Deste modo, organize muito as tarefas e rotinas mais corriqueiras, fazer isso vai diminuir consideravelmente seus custos de suporte.
5- Use templates.
Crie quantos templates forem necessários. Comente o código de forma clara e objetiva, sem abreviações. Ter templates organizados e comentados facilitará muito sua vida quando precisar inserir uma nova página, funcionalidade ou relatório à sua aplicação. Além de ajudar consideravelmente na curva de aprendizado de um novo integrante da sua equipe.
6- Não esqueça do SEO
Indexação em mecanismos de busca é um ponto-chave para o sucesso de qualquer aplicação web. Invista tempo em adicionar recursos de CRUD nas meta tags, cabeçalhos e títulos. Ajude os mecanismos de busca, implementando metadados marcando seu conteúdo por meio da semântica do http://schema.org. Se você já tem uma aplicação pronta e não está ranqueado como gostaria fale com a gente.
Além dos elementos on-page, não se esqueça do conteúdo textual. Lembre-se: a essência de todo mecanismo de busca é classificar páginas através de textos.
7- Social Media
Adicione botões de compartilhamento e outras ações sociais em sua aplicação. Com certeza aumentará muito sua visibilidade.
Na última parte da nossa série, falaremos sobre programação, testes e publicação.
Fonte: FastCom
Fonte das imagens: Corbis Images
// Comente!
comentários