Fireworks - Aula 01

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.

1. 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

2. 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.

3. 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.