Buscadores possuem uma interface mais simples e intuitiva
Nos tópicos a seguir definem-se os conceitos e conhecimentos
necessários para uma boa criação de interface e apresenta-se um guia com
todos os procedimentos envolvidos neste processo, objetivando uma forma
mais didática de abordar o assunto.
Conhecimentos Básicos de Design
Existem alguns conhecimentos de design que são básicos não apenas
para o design de interface, mas para criação em todo o tipo de mídia.
Esses conhecimentos envolvem quatro áreas básicas: tipografia, cor,
forma e composição.
- Tipografia
Tipografia é coleção de caracteres tipográficos utilizados num
projeto gráfico e representa um papel de suma importância no design. É
através do uso adequado da tipografia que conseguimos legibilidade,
harmonia, beleza e estilo. É necessário conhecer as famílias de tipo,
suas diferenças básicas e a melhor aplicação para cada tipo de
tipografia.
Os tipos podem ser:
- Sem Serifa - esse tipo de fonte não possui serifas nos
finais dos traços das fontes. Elas são mais usadas em trabalhos de
caráter técnico, comercial ou corporativo, pois a ausência das serifas
dá um ar de seriedade e clareza à fonte. Fontes sem serifa são muito
utilizadas em páginas Web. Exemplo:
ARIAL
- Antigo - devido ao seu aprimoramento secular como tipo
usado na escrita, as fontes no estilo antigo foram o melhor grupo de
fontes para grandes extensões de texto impresso. Exemplo:
TIMES NEW ROMAN
- Moderno - essas fontes não são usadas para extensões de texto corrido. Elas se aplicam melhor a títulos. Exemplo:
BENGUIAT
- Serifa Grossa - as fontes com serifa nascem a partir da
necessidade de se ter textos que podem ser vistos à distância, é usada
para a mídia impressa para exposição em posters, outdoors, etc. Exemplo:
SERIFA
- Manuscrito - os tipos manuscritos simulam algum tipo de
escrita à mão. Essas fontes são usadas em situações específicas. No
entanto, elas podem resultar em excelentes resultados, se usadas com
grande destaque. Exemplo:
ENGLISH 111 VIVACE
- Decorativo - são fontes que geralmente "abusam" dos efeitos estilizados, de desenhos, sendo mais informais e divertidas. Exemplo:
BABY BLOCKS
- Cor
Em relação à cor é necessário conhecer os modelos de cores disponíveis
(RGB, CMYK, etc.) e quando utilizá-los; saber quais são as cores
primárias, secundárias e cores complementares; diferenças de aplicação
de cores frias e cores quentes; quais são as melhores combinações de
cores (harmonia de cores) e psicodinâmica das cores.
Círculo de cores
Modelos de Cores:
Modelo RGB - Uma larga porcentagem do espectro visível pode ser representada misturando-se três componentes
básicos de luz colorida em várias proporções. Estes componentes são
conhecidos como
cores primárias: vermelho (red), verde (green) e azul (blue)
RGB.
Seu monitor cria cores emitindo luz através dos fósforos: vermelho,
verde e azul. Duas dessas cores, quando misturadas, produzem as cores
secundárias: ciano, magenta e amarelo. Esse é o modelo utilizado na
criação de gráficos para a web.
- Modelo CMYK - O modelo CMYK é usado no processo de
impressão quatro cores. Neste processo, a cor é reproduzida
combinando-se as quatro tintas: ciano (cyano), magenta (magenta),
amarelo (yellow) e preto (black) - CMYK.
Em HTML, valores de cor RGB são dados em
Hexadecimal - um
sistema com base em 16 números. No hexadecimal, ao invés de números
sendo executados de 0 a 9 e depois repetidos, existe uma série inicial
de valores de 16 números:
0,1,2,3,4,5,6,7,8,9, A, B, C, D, F
As letras solitárias representam valores que normalmente podem
tomar dois dígitos no sistema decimal: A igual a 10, B igual a 11, C
igual a 12, e assim por diante. Quando você quer contar além dos dígitos
hex, você coloca 1 diante dos números e contínua, exatamente como faz
nos decimais quando quer ir além de um dígito.
Valores RGB são expressos em hex com um conjunto de três números
de dois dígitos, com cada um dos três valores correspondente a 256
níveis de vermelho, verde e azul, respectivamente. Por exemplo, branco
em valores RGB é representado por 255,255,255. O equivalente em hex é
#FFFFFF.
A cor não apenas pode atrair o olhar e traduzir emoções, mas ela
também tem importante apelo comercial. Na Web, como com qualquer meio de
massa, a cor também é um elemento fundamental na interface.
- Forma
Quando falamos de forma, basicamente estamos falando de desenho.
Desenho não é somente um traço feito com algum material como grafite,
caneta ou carvão, mas são também os contornos dos objetos, imagens e
pinturas. Por exemplo, quando pintamos uma parede ou uma tela unicamente
com tinta, sem traços, estamos trabalhando com formas, ou seja,
desenhando.
Composição
Este é um conceito que envolve todos os anteriores, pois quando se
pensa em composição, pode se referir em como compor várias fontes,
cores, formas, ou todos esses elementos ao mesmo tempo. De nada adianta
escolher fontes adequadas, cores bonitas e harmônicas e belas formas, se
não souber compor esses elementos. Neste aspecto o trabalho do designer
é parecido com o de um maestro, e o design é como uma orquestra. Tem
que ter harmonia. Um design pode usar cores fortes e cores leves, ou
cores fortes e elementos contrastantes. De qualquer forma precisa haver
uma relação entre os elementos de cada um, de acordo com sua linguagem e
objetivo.
Procedimentos Gerais na Criação de uma Interface
Depois de apresentados os aspectos básicos de design,
apresentam-se os aspectos específicos do design de interface para web.
Antes de começar o trabalho em um programa de imagem, existem alguns
procedimentos que devem ser feitos.
Análise do tipo de site
Uma das primeiras preocupações na criação do design de uma interface é saber para qual tipo de site deverá ser criado.
O site pode ser de comércio eletrônico, entretenimento, notícias,
institucional, etc. A partir desta informação é que se pode saber qual
interface atenderá melhor ao tipo de conteúdo do site, e qual o peso que
poderá ser dado à interface.
Por exemplo, em um site de entretenimento pode-se investir muito
mais numa interface animada, cheia de efeitos, do que numa interface
para um site de notícias, onde o rápido carregamento da informação é
mais importante que muitas imagens.
