Pular para conteúdo 
Зеленый кофе

O autor

Carlos Eduardo de Souza, Front-End Developer & Interface Designer na Coopers Digital Production, dedica seu tempo para o desenvolvimento de uma Web mais acessível. Possui certificado W3C em Mobile (sites e web apps) e HTML5.

Portfolio e blog sobre Web Standards – project.47, de Carlos Eduardo de Souza

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.

Assuntos: Web Design
Trackback Feed deste artigo

6 comentários para "Etapas na criação de um site: project.47"

  1. Linke | 21/03/07 - 1:23 pm

    Gostei da maior importância para o conteúdo, tamanho de fonte e melhor legibilidade, ainda mais para textos um pouco maiores como o do post de hoje –

    que lemos rapidamente, sem cansar! boa leitura =)

    esse site colour lovers me lembra aquele livro que tem a mesma proposta, só que online é muito mais util =). Acho que vou usá-lo para meu novo layout heheh que ainda nem comecei! =/

    Topo
  2. Túlio Vargas | 22/03/07 - 4:16 pm

    Eu gostei muito desse layout !!
    Ficou show de bola.

    []s

    Topo
  3. Camilo | 23/03/07 - 3:13 pm

    Fala mano, saiu no Daily Slurp, de novo… agora com layout novo….

    Parabéns.

    Só não passo o link pq recebi por RSS e quando cliquei veio direto pro blog..

    Abração.

    Topo
  4. Daniel Nass | 25/03/07 - 11:41 am

    Realmente este novo layout está muito bom!

    []’s

    Topo
  5. Quando está na hora de fazermos o redesenho do site? · Portfolio e blog sobre Web Standards - project.47 | 8/01/09 - 4:52 pm

    […] isso devemos nos lembrar que na criação de qualquer site devemos passar por algumas etapas, como a problematização, ou seja, o briefing. Esta primeira fase deve ser a mais precisa […]

    Topo
  6. Gláuber Kélvin | 2/03/09 - 2:49 pm

    É sério, eu nunca tinha visto um artigo como esse!!! E tbm gostei do site COLOURlovers, vai me ajudar muito!

    VALEU! :D

    Topo
Comente este artigo
  1. (obrigatório)
  2. (obrigatório)

Links Randômicos
Meta
Apoio
Créditos
Creative Commons