Pular links da navegação e ir direto para o conteúdo

Publicado em 4 de Dec de 2007 às 12:05

Projeto interdisciplinar: A criação do layout

E o Projeto Interdisciplinar da faculdade não parou, eu que parei de postar pela correria do fim do prazo da entrega sexta passada, enquanto o relatório estava engatinhando. Hoje vou focar na criação do layout que na verdade foram os layouts. Eu e a colega Eveline criamos um proposta cada um para submeter aos colegas do grupo. Acabei sendo escolhido por votação, mas nem sei se isso foi bom porque passei madrugadas brigando com uns 15 psds de páginas internas.

Além da dificuldade criativa ainda houve dificuldade técnica, cada elemento precisa ter uma justificativa com base nas aulas de Tipografia, Cores, Gestalt, Psicologia da informação e claro, Ergonomia, Harmonia e de Equilíbrio. E depois dos famosos pitacos a homepage defendida por nós e aprovada, sem nenhuma observação pela professora, foi essa:

DoPulo - Homepage


E nos detalhes:

DoPulo Homepage - Detalhe 1
DoPulo Homepage - Detalhe 2
DoPulo Homepage - Detalhe 3
DoPulo Homepage - Detalhe 4

Uso das Cores

Foram classificadas em três tipos pro nós:

  • Cores Básicas – branco e cinza: usadas como base para a estrutura do site;
  • Cores Principais – amarelo-ouro e azul: cores oficiais da paleta do site usadas para destacar os principais elementos das páginas como links, ícones e botões;
  • Cores Extras – azul escuro, verde, vermelho e marrom: usadas apenas para diferenciar os ícones do principal conteúdo do site que são as quatro modalidades de salto.

A cor branca e a cinza foram escolhidas como cores de base, por passarem uma sensação de clareza, as duas criam um ambiente gráfico limpo destacando bem o conteúdo. A cor cinza por ser uma cor neutra serve para complementar as cores dos elementos da página, além de criar profundidade em elementos da diagramação do site definindo os fechamentos. O branco predominante no fundo
da página permite um bom contraste para textos, o que ajuda na legibilidade.

Apesar de serem consideradas cores coringas, o branco e cinza podem criar a sensação de vazio e desânimo. Para evitar isso foram usadas as cores amarelo-ouro e o azul, a primeira foi escolhida por remeter diretamente ao símbolo de vitória do atletismo que é a medalha de ouro e por ser uma cor quente que é associada à energia. Já o azul, juntamente com a cor cinza, passa a sensação de seriedade, dando credibilidade.

Tipografia

  1. Arial
  2. Trebuchet MS
  3. Frutiger Next Bold

Foram escolhidas três famílias sem serifa por ajudar na leitura no monitor. A primeira para ser usada no corpo do texto em tamanho 12px por ter ótima legibilidade em tamanho pequeno. Usamos espacejamento 18px de entrelinha e com média de 66 caracteres, ou 10 palavras em cada linha deixando a leitura mais agradável. A escolha da Trebuchet MS para os títulos e alguns blocos de textos foi justificada por ser bem diferente da Arial, pelas formas humanistas e tecnicamente por estar presente em diferentes plataformas.

A Frutiger Next foi escolhida para a imagem tipográfica do logotipo do projeto e também do banner criado para a interna do podcast. O bold foi usado para aumentar o contraste das letras, aproveitando a limpeza do corpo dessa família. Mesmo os usuário não tendo uma boa visão, por ser bem legível, o logotipo serve de sinalizador para que ele identifique facilmente a interface durante a navegação.

Diagramação

Pelo tipo e quantidade de informação coletada, foi escolhida uma diagramação no padrão de sites midiáticos informativos apresentando em todas as páginas: Cabeçalho (topo), Menu de navegação, Conteúdo principal e Rodapé. Com esse padrão é bem mais fácil de criar um homogeneidade na interface de todas as páginas internas. Sobre a diagramação dessas internas eu falo num próximo post.

Você é Desenvolvedor ou Designer?
Leia o blog do VTEX Lab, núcleo de inovação para ecommerce da VTEX. Também escrevo por lá. :)

  • Eu tambem to tendo aula de leiaute. Eu tentei explicar pro professor que meu negocio eh palavrinha, eh letrinha, mas ele naum entende… voce naum imagina meu desespero :(
    Ai ai e eh p quinta…
    Boa sorte com o seu :D
    Bjs!

  • Faz um da girafinha, Nana. Você vai ficar inspirada rapidinho. :D

  • Eu adoro código mas tenho uma quedinha por design, só falta habilidade e conhecimento mesmo. Talvez seja algo que eu deva estudar! :)

  • Apesar de não ser um profissional da área, amo design e mexer em codigos HTML , aprender um pouco de PHP e mysql, faço isso pois sou amador no assunto, o projeto (o site) ficou muito bom mesmo, de verdade, agora para os leitores de post aqui do seu site que gostam de ler comentários tambem, tah aí uma novidade( pra mim é) bem legal, é o GIZMOZ, um site muito bacana que faz montagens com nossas fotos, desde vídeos em basta carregar uma foto com o rosto da gente e o computador faz movimentos, “faz a foto falar” é quase que como aquelas montagens do video show, tudo isso sem muito esforço, vale a pena saber mais sobre o assunto, leia no meu site ou no link abaixo >>
    http://livreto.org/2007/12/08/a-febre-do-gizmoz/

Sobre

Nascido em 1984 é Desenvolvedor Web autodidata desde 2002. Hoje especialista em Design da Informação pela UFPE é Designer na equipe de UX no VTEX Lab (núcleo de inovação para ecommerce), da VTEX.

Saiba mais