Paulo Eduardo

Esse post tem como finalidade duas coisas, falar um pouco mais sobre o processo de desenvolvimento do novo visual do blog, e dar continuidade a seria de Documentação de Projetos.

Como estive um tempo parado para desenvolver o novo visual e a serie ficou parada justamente na etapa de wireframe, juntarei as duas coisas e falarei sobre wireframe utilizando como exemplo o proprio desenvolvido para o novo visual.

Tudo começo com a ideia de trocar um visual antes desenvolvido por terceiros por um visual proprio desenvolvido por mim mesmo, com isso queria aprender a desenvolver temas para wordpress e ter meu proprio tema no blog.

Por um tempo foi só uma ideia que ficou na minha cabeça ate que numa bela noite durante uma leitura uma ideia surgiu de como seria a nova estrutura, rapidamente peguei um papel e a desenhei, no dia seguinte transformei isso no wireframe do blog:

Otimo, mas o que é mesmo um wireframe?

Wireframes fazem parte da Arquitetura da Informação de um site e têm como finalidade mostrar a disposição dos elementos na tela assim como os tamanhos de fontes a serem utilizados.

Existem tres tipos de wireframe, baseados no grau de fidelidade dos mesmo, baixa, media e alta fidelidade, o wireframe do blog foi elaborado em baixa fidelidade, o que significa que nela não constam os elementos graficos, tonalidades das cores a serem utilizadas e estrutura de navegação.

Os wireframes de media fidelidade já contem elementos que o aproximam mais do produto final, enquando os de alta fidelidade são os mais proximos a estrutura de layout.

Voltando ao exemplo do novo visual, a ideia inicial mostrada no wireframe e de que haveria um topo do site onde ficariam contidos o logo do blog, seu titulo e subtitulo e o campo de busca, numa area lateral estaria o menu de acesso as demais areas do blog, logo ao seu lado os topicos em questão seguidos de uma area publicitaria e um rodapé com tres areas para assuntos diversos.

Da ideia inicial do wireframe o projeto sofreu algumas modificações, mas isso já é assunto para um proximo artigo, enquanto isso quem se interessou por wireframe pode conferir mais informações nos endereço abaixo:

Como construir wireframes – Fator W
Quanto mais simples o wireframe melhor – Usabilidoido
Wireframes – Ivo Gomes
Wireframe – Codigo Laranja

Primeiro feliz ano novo para todos vocês, sei que o ano já começou a algumas semanas, mas estava esperando uma noticia para começar o meu de vez, e a noticia veio.

No final do ano passado enviei uma proposta para ser articulista do iMasters, essa proposta foi aceita e comecei a escrever meu primeiro artigo para o portal e hoje esse artigo foi publicado – Documentação de Projetos Web – Briefing.

A serie de artigos que se iniciou com esse, e um correspondente a serie que foi vinculada aqui no blog sobre documentação de projetos, porem agora com algumas novidades, coisas novas que eu não falei aqui estão lá.

Com isso meu ano começou pra valer, ainda tenho que acertar com a redação do iMasters os ultimos detalhes das publicações, porem em breve a serie deverá ser continuada, as atividades aqui do blog tambem voltam a partir de agora, portanto, aguardem que em breve tem mais.