Blog

Topo 20/03/07

Etapas na criação de um site: project.47

Ao escrever este artigo, pretendo demonstrar quais etapas costumo percorrer para desenvolver um site, procurando ajudar aqueles que estão iniciando nesta prática. Utilizarei, como estudo de caso, o desenvolvimento do novo layout do project.47.

Problematização

Primeiramente, detectei a necessidade de construir um novo site, mas para poder fazę-lo, deveria saber o motivo para tal modificação, com relação ŕs versőes anteriores.

Após um estudo de novas possibilidades e viabilidade de implantação, descobri que deveria haver mais enfoque ao conteúdo do blog, deixando de lado o conceito de um site meramente pessoal, para servir como apresentação de trabalhos e auxiliar quem se interessa pelos assuntos aqui tratados (iniciantes e profissionais da área de desenvolvimento Web).

Sabendo o que pretendia atingir com o desenvolvimento de um novo conceito para o site, além do público-alvo, iniciei as tentativas de um novo layout para o mesmo.

Arquitetura da Informação

Mantendo, mesmo que brevemente, a organização do site antigo, iniciei os trabalhos para construção do novo layout. A coluna da esquerda permaneceu reservada para o conteúdo em si, contendo os posts e textos internos das seçőes, sendo acrescentado um banner de publicidade acima do tí­tulo da página; a coluna da direita ficou reservada para o menu (antes localizado no topo do site, mas também ŕ esquerda), publicidade, projetos recentes, tags e arquivos dos posts separados pelos meses.

A intenção era de mostrar informaçőes relevantes logo que a página fosse aberta em resoluçőes menores. Desta forma, ao abrir em 800×600, por exemplo, é exibido o nome do site, a imagem de topo, dados sobre o autor e a publicidade acima do conteúdo.

Internamente, a organização permaneceu a mesma. Foi um dos pontos que julguei importantes a serem mantidos, depois de uma breve pesquisa em outros portfolios e sites do ramo.

Design

Foi realizada uma pesquisa em várias galerias de sites da área, para se ter um parâmetro do que está sendo bem feito e o que poderia ser diferenciado.

Pode-se notar a diferença, principalmente, nas cores utilizadas. No fundo, tons de cinza, possuindo bom contraste com o texto em branco, além dos tí­tulos, links e textos relevantes em amarelo.

Para chegar a esta paleta de cores, realizei uma pesquisa tentando encontrar algo que pudesse transmitir a idéia desejada, após feita a problematização (briefing), destinada ao público-alvo. O site utilizado para realizar tal pesquisa foi o Colour Lovers, ótima alternativa para quem pretende encontrar paletas de cores divididas por tags, etc.

Busquei utilizar um estilo totalmente diferente da versão anterior, que remetia a algo mais clássico. Já esta nova versão busca transmitir a imagem de algo mais atual, inovador.

Um ponto importante foi o destaque para a legibilidade do site. O contraste dos títulos perante o texto foi intensificado, além do espaço entre linhas, aumentado significativamente, para facilitar a leitura e cansar menos a vista.

Também houve um cuidado com o tamanho da fonte. Pode-se perceber que aumentou 1 pixel em relação a versão anterior, o que já faz uma boa diferença para aqueles que tinham dificuldade na leitura dos textos.

Além disso, o layout foi feito de forma que se adapte a diferentes resoluçőes (layout líquido), contraindo-se caso esteja sendo visualizado em 800×600, 1024×768 e, ŕ partir disso, permanece do mesmo tamanho, para não prejudicar a leitura do site, não excedendo um número aceitável de caracteres por linha.

Identificação do autor

Fazendo uso dos microformats, há a opção de download do meu hCard, na porção superior direita do site, importando-o para seu cliente de e-mails mais facilmente. Na seção Curriculum, permanece o modelo anterior, bastante detalhado, também utilizando classes pré-definidas dos microformats.

Aproveitando a opção de exportar meu OPML, estou distribuindo os feeds que leio em meu Netvibes, todos os dias, através de download do mesmo.

Bom, esta é uma breve descrição de alguns passos que podem ser seguidos no desenvolvimento de um site, passando pela realização do briefing, com o intuito de saber o que se deseja com o projeto; estudo da estrutura do mesmo e desenvolvimento propriamente dito.