Conceitos de Design de Sites

Novo post na área e dessa vez trataremos de um assunto muito interessante e que eu, particularmente, curto muito: Design.

O objetivo desse post é apresentar conceitos fundamentais tanto da área visual quanto na organização de diretórios e arquivos de um website. Vamos começar!

Conceitos Visuais

Contraste: é o efeito que permite ressaltar o peso visual de um ou mais elementos ou zonas de uma composição mediante a oposição ou diferença apreciável entre elas, permitindo-nos atrair a atenção de espectador para eles. Pode ser conseguido das seguintes formas: contraste de tons, de cores, de contorno e de escalas. Exemplo:

Contraste de tons, de cores, de contorno e de escalas, respectivamente

Repetição: esse conceito está ligado diretamente a consistência do site e prevê que devemos manter o mesmo visual/layout em todas as páginas. Outra recomendação é a de usar até 2 tipografias diferentes, o que evita a perda de consistência e ao mesmo tempo não deixa o conteúdo insosso.

Alinhamento:

nada mais que a colocação de elementos gráficos e textuais segundo uma linha dada, que geralmente será horizontal ou vertical. Alinhar os elementos é uma operação imprescindível para conseguir uma composição ordenada e lógica, pois com isso se criam unidades visuais definidas e relações entre elementos.

Se o alinhamento é importante na hora de situar elementos gráficos, será ainda mais quando se tratar de conteúdos textuais, pois os textos perfeitamente alinhados são mais fáceis de ler, não cansam a vista e produzem um efeito de equilíbrio que convida à leitura. Ao contrário, um texto sem alinhamento resulta confuso, difícil de ler, desmotivando o espectador.

Teoria das Cores: saber utilizar as cores é algo que todo, ou pelo menos a maioria, webdesigner deve saber. Encontrar uma boa combinação de cores em web design, pode ser difícil e trabalhoso e para encontrarmos uma boa mistura de cores, devemos escolher uma cor base e depois ver quais cores podem ou não coexistir com essa primeira. Algumas combinações são desconfortáveis ou irritantes, enquanto outros são agradáveis, uma boa forma de escolha de cores é utilizar os Sistemas de Cores:

• - Monocromático: é a resultante de uma mesma cor do círculo cromático. As tonalidades mudam, mas ficam na mesma matiz.
• - Análogo: é a harmonia resultante de cor primária combinada com duas adjacentes no círculo cromático. Uma cor é trabalhada como dominante enquanto que as adjacentes são utilizadas são utilizadas para enriquecer a harmonia.
• - Complementares: é a harmonia resultante quando combinamos cores opostas no círculo cromático. São cores que se encontram simetricamente posicionadas em relação ao centro do círculo cromático. A matriz varia em 180º entre uma cor e outra.
• - Tríades: é a harmonia resultante quando usamos três cores equidistantes no círculo cromático. Muito popular entre os artistas por oferecer um alto contraste visual, ao mesmo tempo que conserva o balanço e a riqueza das cores.
• - Double Complementares: é a harmonia resultante da seleção de dois pares de cores complementares entre si. Chamado por alguns de tetra ou retângulo, estas combinações são as mais ricas de todas as harmonias, pois utiliza quatro cores complementares entre si.

Tipografia: é conhecida como a impressão dos Tipos es está desaparecendo com o desenvolvimento do computador. Tipologia é o estudo da formação dos tipos, essa por sua vez cresce a cada dia. Mas no final, a nomenclatura utilizada é tipografia, assim como fonte virou tipo, atualmente. O termo tipo é o desenho de uma determinada família de letras como por exemplo: verdana, futura, arial, etc. As variações dessas letras (light, itálico e negrito por exemplo) de uma determinada família são as fontes desenhadas para a elaboração de um conjunto completo que consta do alfabeto em caixa alta e caixa baixa, números, símbolos e pontuação.

Estilos de Fonte: na tipografia, as fontes tipográficas (ou fontes) são classificadas em 4 grupos básicos: as sem serifas, com serifas, as cursivas a as dingbats.

Mapa do Site

é a representação gráfica da estrutura de um Web Site, que mostra a distribuição do conteúdo por áreas e o caminho mais simples a ser percorrido pelo usuário para se chegar a uma determinada informação.

Organização de Arquivos

Link Relativo: é aquele que o endereço é escrito de forma resumida, ou seja, os links internos de uma página.

Link Absoluto: é aquele onde o endereço é escrito integralmente, usado para endereços externos (outros sites).

Wireframe

É um desenho básico, como um esqueleto, que demonstra de forma direta a arquitetura de como a página da internet final será de acordo com as especificações relatadas. É elaborado para organizar os elementos que entrarão na composição do projeto final, no entanto deve se feito da maneira mais simples possível, somente com o essencial, sem cores ou imagens. O objetivo do wireframe é auxiliar o desenvolvedor no entendimento dos requisitos que foram recolhidos junto ao cliente.

Mockup

É uma representação mais bem elaborada de um design. Nele representamos botões, cores e fontes.