Design para a Web

Design é a cara do mundo moderno. Civilizados ou não, todos os homens querem ver algo

relacionado a design de alguma maneira. Fazer isso visualmente e da maneira adequada é

função do designer. Só que isso é algo muito subjetivo, pois o que causa atração para alguns

traz repulsa a outros.

Design para a Web Não adianta sair em busca de

referências para um projeto utilizando apenas a Web como fonte de pesquisa. Seguir tendências, modismo, é ingenuidade, porque nesse caso você não estará criando nada, estará apenas repetindo a mesmice.

Cada caso é um caso!

Design para a Web A diferença entre você, que está

produzindo um website, e outros profissionais, que fazem uso do computador como ferramenta de trabalho, são o estudo planejado e a disposição adequada dos elementos que compõem a mensagem que você deseja transmitir.

Design para a Web Requisitos para um bom design:

Branstorming Referenciais teóricos sobre design Layout (fase da transpiração) Confecção das imagens, estudo da

cor e da disposição gráfica

Design para a Web Branstorming

Nem sempre é fácil ter idéias e executá-las. No cotidiano é comum termos o que os psicólogos chamam de insights, que são soluções que surgem em nossa cabeça para que possamos resolver algum problema ou executar uma tarefa de uma forma diferenciada, pensando em sua melhoria. Entretanto, quando a necessidade é produzir em um determinado prazo, de acordo com o briefing e o planejamento bem definidos, precisamos ser não apenas criativos mas também eficientes.

Design para a Web Branstorming

Para se ter uma boa idéia, a primeira técnica é o brainstorming, que significa em inglês “tempestade de idéias”. Trata-se de um processo livre, sem preconceitos ou censuras, em que se anota tudo o que vem à cabeça. Posteriormente, inicia-se o trabalho de seleção e aprimoramento das possibilidades encontradas.

Design para a Web Layout

Até mesmo uma idéia pode ser representada em croquis ou rabiscos. Nesse momento, as idéias ainda estão em formação. Chegou o estágio de “materializar” aquilo que estamos criando. É importante lembrar que ainda nos encontramos em um processo criativo. Por isso, utilizaremos uma técnica para visualizar aquilo em que estamos pensando, com a intenção de produzir um refinamento dessa idéia.

Design para a Web Layout

Os croquis ou drafts nada mais são do que um desenho em papel para referência pessoal. Eles projetam aquilo que estamos criando.

A grande função dessa fase é encaixar os elementos propostos no planejamento, testando a viabilidade das idéias formuladas. Como em um quebra-cabeças, aplicaremos o menu, o logotipo, o destaque e todos os outros elementos presentes. Assim, teremos uma visão do todo, facilitando a produção das variações de layout.

Design para a Web Referências

Um complemento ao processo de brainstorming, que também tem o objetivo de encontrar boas idéias, é a procura por referências. Referência é qualquer elemento que possa ser usado como exemplo ou inspiração para a produção de uma idéia. As referências podem estar nos sites dos concorrentes, no site de que gostamos muito, em anúncios publicitários ou mesmo em nossa formação pessoal. Isso porque as músicas que escutamos, o jornal que lemos, os filmes a que assistimos e qualquer outra experiência enriquecedora podem nos fornecer uma excelente idéia ou exemplo para ser executado.

Design para a Web Referências

Não podemos nos esquecer dos referenciais teóricos sobre Design Gráfico, Estudo das Cores, Tipologia, Diagramação, História da Arte e as Escolas Clássicas de Design (como a de Bahaus, por exemplo).

Design para a Web Confecção das imagens, estudo da cor e

da disposição gráfica Nesta fase, depois de definir mais ou menos

um layout básico, pode-se arte-finalizar a sua idéia. Com a ajuda de um programa gráfico, como Photoshop ou Fireworks, você pode confeccionar as imagens, determinar as cores utilizadas, integrar o logo e já determinar as áreas de menus e seções do site. Nesse momento tem-se um estudo mais completo do site, e por isso é possível mostrá-lo ao cliente.

Design para a Web Leis da Gestalt que podem ser

aproveitadas na fase de criação e confecção de páginas Web Atração Harmonia Equilíbrio Simplicidade

Design para a Web Atração (elementos parecidos ficam próximos)

A idéia de atração da Gestalt aplicada ao design concentra elementos semelhantes ou que possuem algo em comum formando conjuntos de atração.

Deve-se usar sempre o bom senso para determinar quais elementos dominam e quais se subordinam numa composição.

Design para a Web

Design para a Web Harmonia (coerência visual dos elementos)

Se você tem uma composição em que o espaço está dividido, a proporção das partes, juntas, deve transmitir a mensagem visual, de forma que possua íntima ligação com a mensagem textual. Ou seja, cada forma inserida na estrutura deve ser considerada como elemento do esquema total.

Design para a Web Harmonia (coerência visual dos elementos)

Retângulo dividido em partes iguais possui efeito monótono e prende por pouco tempo a atenção.

As partes são demasiadamente desiguais, mas, ainda assim, esta figura prende mais a atenção do que a anterior.

Design para a Web Harmonia (coerência visual dos elementos)

A melhor e mais atraente divisão de um espaço é a que se obtém da relação “três partes para cinco” ou “três para dois”.

A harmonia assimétrica possui maior graça e ação.

Para se conseguir elaborar uma composição harmônica para o site, deve-se realizar a combinação ordenada das formas.

Design para a Web Harmonia

Dicas: faça muitas experimentações distribuindo os elementos no espaço que você possui.

Veja qual espaço apresenta maior dinamismo e maior atração visual.

Veja as formas nas ruas, nos materiais impressos, nos sites que mais chamam a atenção.

Design para a Web Equilíbrio

O equilíbrio entre duas forças, ou entre dois elementos, ocorre quando ambos se compensam. Dois gêmeos numa gangorra estão equilibrados, desde que ambos ocupem posições iguais na prancha. E um gordo e um magro na mesma gangorra também podem estar em equilíbrio caso o magro esteja mais na extremidade da prancha, e o gordo mais próximo ao eixo.

Design para a Web Simplicidade

A simplicidade gera clareza, organização mais harmonia e unificação. Ela se caracteriza por organizações formais fáceis de serem assimiladas, lidas e rapidamente compreendidas.

Design para a Web Forma e Função

As formas dos elementos são vistas em conjunto, e não isoladas em agrupamentos que seguem uma ordem e uma hierarquia de percepção visual.

Cada imagem (forma) desempenha uma função dentro de um contexto. Qualidades como cor, brilho, textura, tamanho, são percebidas de maneiras diversas, dependendo do contexto no qual se inserem.

Design para a Web Forma e Função

Pouca utilidade há em se criar a imagem (forma) de um animal grande e de aparência selvagem se as cores que forem empregadas no desenho não demonstrarem essas características (função).

Design para a Web Forma e Função

Após organizar os objetos (formas) através da relação com os demais elementos da página, procure ordená-los em grupos de acordo com o alinhamento, a estabilidade e a segurança.

Forma e Função

As formas seguem uma hierarquia de estabilidade, em que umas se sobrepõem às outras em resistência, isolamento e integração.

Você sabia que...

a arroba (@), símbolo usado em endereços virtuais, tem aproximadamente 500 anos? A descoberta foi do professor de História italiano Giorgio Stabile, que a encontrou num documento oficial florentino de 1536. O caractere, que em inglês é lido 'at' (em), representava a ânfora, espécie de jarro usado por gregos e romanos para carregar vinho e óleo. Mas sua fama internacional teve início em 1971, quando o engenheiro americano Ray Tomlinson utilizou-o em seu programa de correio eletrônico, o SNDMSG.

@

Movimento O movimento é gerado pela canalização

da vista por formas geométricas, com breves paradas nos pontos de interesse até percorrer toda a composição.

Linhas, formas e figuras geométricas são empregadas para direcionar o olhar a pontos-chave da página. A diagonal, o triângulo, a forma do S, do Z, do L, do círculo ou da cruz, servem para criar movimento e atração visual em um projeto.

Design para a Web

Design para a Web

A diagonal faz os olhos seguirem de uma ponta do retângulo ao extremo oposto, como um raio.

A forma senoidal, como o S, fornece graça e ação com suavidade.

A composição em Z apresenta grande vigor e efeito definido, como um raio que separa os planos.

Composição em L mostra uma seqüência lógica que conduz a vista a pontos de interesse facilmente identificáveis.

A forma triangular é empregada em composições simétricas. Possui peso e solidez marcados pela base, e assegura unidade e conjunto.