Protipagem e Vocabulário

Fizemos como protótipo um modelo prévio do nosso layout pro CSS Zen Garden no Photoshop, onde analisamos a visualização e possíveis erros e problemas apresentados. E paralelo a isso, nós desconstruímos o CSS do template original para analisar o posicionamento dos elementos e assim facilitar a adaptação em nosso trabalho. Após verificar todos os problemas podemos realizar as mudanças necessárias para a melhoria do template.
Quanto ao vocabulário, os textos já fazem parte da estrutura original do site (HTML), portanto não pode ser alterado ou modificado. Após a definição do layout implementamos nosso CSS utilizando o Adobe Dreamweaver CS5. Para os materiais de composição que utilizamos na nossa folha de estilos, foram produzidas 4 tipos de imagens: uma para o Logotipo (formato .png), uma para o Background do template (.jpg), uma para o BG dos títulos (.jpg) e por fim, uma para a sobreposição dos títulos (.png). Para o acabamento foi inserido bordas arredondadas e sombreamento nas caixas de texto para suavizar e valorizar os elementos do site.

Tipos, Formas, Proporções e Cores

Nos tipos foi optado usar duas fontes. Nas caixas de texto usamos a “Arial”, pela sua simplicidade e facilidade de adaptação ao contexto em volta e no Logotipo e Títulos usamos a "Penstriped" para caracterizar a pintura dos nomes feitas nos cascos das jangadas e dos barcos pelos próprios pescadores. Usamos formas retangulares nos blocos de textos, para passar firmeza e estabilidade, mas suavizada por bordas arredondadas e no logotipo foi usada forma triangular devido à vela da jangada, um dos símbolos do litoral cearense. Nas proporções foi empregado o padrão 960 grid – 12 colunas, onde foram divididas 9 coluna para as caixas de texto e 3 colunas para as siderbar. Na harmônica cromática optamos por usar as cores azul, laranja, bege e branco para manter a ambientação de praia.

Metáforas Visuais e Modificações

Foram empregadas nas caixas de textos cores que lembrassem a areia da praia. Nos títulos das caixas de texto, foi utilizado degradê do branco (#ffffff) para o bege (#fadca0) e no bg das caixas da sidebar uma cor suave que fica dentro da escala de laranja (#fdefd4). Tivemos a intenção de passar a sensação de caminhas à beira mar. Na logotipo foi empregado um contraste entre cores complementares, Azul e Laranja, para fazer analogia ao frio e o quente, ao frescor e o calor, a água e a areia. No conteúdo do CSS Zen Garden original, há um tutorial que orienta a fazer uma omissão/substituição de fonte por imagem. E essa técnica foi usada por nós para inserir os títulos com a imagem da Jangadinha laranja. O texto-conteúdo do site já veio nos elementos do HTML original do CSS Zen Garden, portanto não pôde ser alterado ou modificado.

Refinamento

Na medida que fomos coletando imagens para compôr nosso material de pesquisa, inspirações foram surgindo e prontamente aplicadas no nosso trabalho. Testamos algumas imagens de praias para o plano de fundo, mas por fim foi preferível recriar uma através de uma montagem usando falésias de Morro Branco, mar da praia de Jericoacoara e a jangada utilizada do logotipo é de uma imagem da praia de Canoa Quebrada. Foi testado varias vezes a posição dos textos do cabeçalho para que se enquadrasse bem e permanecessem fixos. Nas caixas de textos utilizamos cores que lembrassem areia de praia. Também foi inserido bordas arredondadas para tornar os elementos mais suaves e um sombreamento leve para destacar.

Brainstorming

Durante o Brainstorming fizemos alguns testes de layout, buscando ideias que tentasse caracterizar da melhor maneira o nosso tema. Tentamos passar o valor da beleza de nosso litoral, com suas praias e atrativos, mostrando uma boa imagem de nosso estado, diferenciando do que normalmente é mostrado como apenas um estado onde predomina a seca. Todas as decisões tomadas com relação às ideias possuíram o consentimento de todos da equipe. Não foi feito esboços em papéis. O layout foi desenvolvido primeiramente no Photoshop e só depois foi trabalhado a estilização do template na folha de estilos (CSS). Utilizamos uma Ação (action) do Photoshop chamada 960 grid - 12 colunas, para deixar nosso layout dentro dos padrões de visualização web. No CSS original do Zen Garden, nós modificamos as cores de background dos elementos para facilitar a visualização do posicionamento dos elementos.

1ª Versão do nosso template:

Recriamos um layout que fosse agradável de visualizar, transmitisse a paz e tranquilidade de uma praia, e que fosse criativo, para agradar aos designers que buscassem inspiração, referências e ideias no nosso template.

Geração de ideias

As possibilidades eram muitas. As temáticas apresentadas foram bem variadas, pesquisas e visitas foram realizadas e no fim com o material utilizado entregaremos o trabalho final.
Ideias das mais variadas vieram: Tapioqueiras de Messejana (algo bastante cearense e com uma sinestesia promissora), Pescadores do Mucuripe, Cariri, Religião popular, Sertão-clima, Caatinga, Cerrado (ideia vinda da exposição da Bienal), Interior Cearense (devido às vivências na infância), Galo da madrugada (Olinda-PE). Mas algo determinante foi a obtenção de imagens para compor o background do nosso template.
Pensamos em muitos aspectos e exemplos de locais do estado do Ceará para usar no layout. Por alguns momentos quase decidimos trocar a temática do litoral para o interior cearense por receio de tal temática ser 'comum', mas decidimos que utilizar as características das nossas praias seria algo agradável a se mostrar e com melhor acervo de imagens de referências, como citado. Nossa inspiração veio de imagens buscadas na internet (já baseadas em nosso repertório feito em viagens antes da proposição do trabalho), devido à falta de tempo de ir pessoalmente a todas as praias.

Pesquisa

A pesquisa foi realizada no Museu dos Correios , Dragão do Mar e no Museu da Caixa. Buscamos inspiração também em imagens pesquisadas na internet sobre o litoral cearense, onde focamos nossa ideia de layout, especificamente as praias de Canoa Quebrada, Morro Branco e Jericoacoara. Os drivers ficam no fato do Ceará ser reconhecido pelas suas praias como um de seus principais atrativos turísticos, e utilizamos como barreiras imagens com características sutis mas que remeteriam ao nosso litoral em qualquer local que seja visualizado o layout. O público-alvo são professores e designers que usam o CSS Zen Garden como referência.

Algumas imagens do nosso material de pesquisa: