Jun12006

#Case: RamonPage.com

Várias idéias passaram pela cabeça para a construção deste site. Passei para o papel muitas delas, mas uma chegou bem perto daquilo que seria o produto final, hoje no ar.

RamonPage na page Antes de por em prática o desenho para o layout eu defini a forma como ele seria apresentado (tipografia, swatches e estrutura). O logo ainda não havia sido criado, mas já tinha a idéia de como fazê-lo (gostaria que fosse algo que pudesse ser usado tanto na web, quanto em outros trabalhos).

Tipografia

Optei por usar uma fonte de serifa para o logo, por estas terem um aspecto mais arrojado. Depois do troca-troca de fontes, cheguei à um denominador comum: Garamond. Por conta disso, o site também ganhou tipografia com serifa: família Georgia, arial, verdana, sans-serif Georgia, Palatino, “Palatino Linotype”, Times, serif. Aproveito o ensejo para salientar que nem todo projeto deve se dar ao luxo de usar fontes de serifa. A boa e velha família verdana é a melhor opção quando o site deve atender à qualquer tipo de público. Mas cada caso é um caso, às vezes até a temida Times New Roman pode ser uma ótima pedida!

Cores

A escolha das cores costuma ser a primeira coisa que faço quando vou iniciar um projeto. Se o cliente já tem um logo, procuro me basear nas suas cores padrão. Se ele não o tiver, procuro me basear na identidade que o projeto deve ter. Mas isso não é uma regra, a criatividade costuma falar mais alto nessas horas.

Para este site, inicialmente, eu criei várias paletas de cores, alternando entre azul e algumas outras, como areia, marrom e até um pouco de verde. Cocei os dedos para colorir o layout, fiz algumas composições, mas no final me rendi ao clean. O resultado final foi: três tons de azul (incluindo o do logo), uma cor meio dourada para dar vida aos links e algumas tonalidades de cinza. O marrom também ficou, mas só de coadjuvante, aparecendo, apenas, no hover dos links.

Navegabilidade

A navegação foi estudada em conjunto com a composição do layout. Desde o início pensei que não seria interessante usar tamanhos fixos para as áreas de conteúdo. Não teria a ver com a característica do site. Como pretendia algo despojado, sem aquele aspecto duro que certos sites passam, nada melhor do que usar um layout flexível. E o conceito de flexibilidade me deu grandes idéias para o posicionamento do logo e do menu (na foto que inseri o logo não está na direita). A sidebar receberia o campo de busca logo acima e os arquivos logo abaixo. Na foto há mais alguns itens, mas estes só entrarão no ar daqui algum tempo.

Para completar a navegação, usei um área de conteúdo extra com um background mais chamativo no rodapé, porém sem exageros. Nela estão links gerais para acesso rápido no site, além de links externos.

11 respostas para “#Case: RamonPage.com”

  • Yogourt

    Yogourt - 1/06/06 às 9:46 am

    Eu estava reparando aqui… tá faltando um acento agudo no logo… (wtf) (6)

    Brincadeira! (hap)

    Pra que serve aquela caixinha abaixo da formatação dos textos? (DD)

  • ramonpage

    ramonpage - 1/06/06 às 10:07 am

    Hahaha… Quem sabe eu não faça uma versão "Pagé" para o site?

    A caixinha abaixo da formatação é um campo de busca. ;)

  • Highlander

    Highlander - 1/06/06 às 7:34 pm

    r0x…mas cadê os smiles?

  • Highlander

    Highlander - 1/06/06 às 7:35 pm

    Seu comentário está aguardando moderação.

    que sux :@@

  • ramonpage

    ramonpage - 2/06/06 às 12:11 am

    High, comporte-se! (6)

    Smiles só num futuro distante!

    Quanto à moderação… Aqui eu posso! (h)(6)

  • Yogourt

    Yogourt - 2/06/06 às 1:42 am

    Smiles só num futuro distante“?

    Que absurdo… (–)

    É um upgrade mais do que necessário! (@@)

  • Highlander

    Highlander - 2/06/06 às 2:34 am

    (hap)

  • Dunross

    Dunross - 2/06/06 às 10:10 am

    Aliás, deixa eu fazer um teste.

    Será que isso aqui pula linhas? :o

    E falando nisso, devia ter Preview. (@@)

  • ramonpage

    ramonpage - 2/06/06 às 5:17 pm

    Dunross…

    Eu colocarei um live preview em breve. ;)

  • Dunross

    Dunross - 2/06/06 às 5:24 pm

    r0x! (y)

    E eu não precisava ter postado só pra ver se pulava linha. Os outros já tinham postado pulando linha. Desatenção sux! (@@)

    Mas flood r0x. (a)

  • RamonPage.com » Blog Archive » #Case: Academia Body Shopping

    RamonPage.com » Blog Archive » #Case: Academia Body Shopping - 25/06/06 às 1:03 am

    [...] Como já disse outrora, deve-se tomar cuidado ao escolher a família de fontes para um determinado projeto. Por isso costumo sempre adequar o typeface ao estilo que o site deve ter e em quem lerá o conteúdo dele. Para este site, escolhi uma família tradicional sem serifa: Verdana, Arial, Helvetica, sans-serif [...]

Poste um comentário




Você pode utilizar as seguintes tags para formatação: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Oscomentários

Comentários diversos dos visitantes

Ciro Feitosa disse:

Muito bacana essa linha de artigos. A parte de modelagem de dados costuma ser feita com bastante atenção, pois um DER bem feito, é quase que o "coraçã...

Vania disse:

Oi, Ramon Sou a Vania, namorada do renator100 do AD, já conversamos em outra oportunidade. Gostei muito do seu site, e principalmente do seu estil...

Gustavo Viana disse:

Excelente blog! Parabéns!...

Demétrios disse:

Gostei muito do seu post sobre espaço em branco, encontrei seu site a procura de um post como este, tenho um patrão que tudo pra ele tem que ser grand...

keylla rios de oliveira disse:

quero uma maquete de como é fabricado o lapis de sua matéria prima até sua produção final o que nenhum site me forneceu então peço que o site publique...

Quemsou

Uma prévia de quem é RamonPage

Avatar RamonPageMeu nome é Ramon Bispo. Sou web developer/ designer e natural do Rio de Janeiro, Brasil. Saiba mais sobre mim…