O DESIGN APLICADO EM INTERFACES WEB

Ericson Souza Sobrinho¹

RESUMO
O design é presente em quase tudo que é material apresentacional, como por exemplo
embalagens, produtos, materiais de construção, softwares e internet. O tema focado (design
aplicado em interfaces web) apresenta informações primárias e necessárias para um bom
trabalho com interfaces na internet, como sites e tudo que é apresentável na rede. Com base
na Teoria do Hipertexto e livros sobre o tema, abordaremos assuntos como arquitetura de
informação, usabilidade, webwriting, desenvolvimento em plataformas backends e
webstandards.

Palavras-chave: Design. Web. Arquitetura de informação. Usabilidade. Webwriting.

Desenvolvimento. Webstandards.

_________________________
¹ Graduando em Comunicação Social com Habilitação em Publicidade e Propaganda pelo Centro Universitário
do Triângulo – UNITRI. É comunicólogo por natureza e blogueiro do Duvideodó
<http://www.duvideodo.com.br>. Trabalho orientado pela Prof. Ms. Daniela Carvalho e Prof. Ms. Fábio Piva.
1. INTRODUÇÃO
Desde o início da humanidade o ser humano se preocupou com a estética das coisas.
Podemos observar que esse cenário estético continua o mesmo nos tempos atuais, valorizando
cada dia mais a parte visual das coisas.
Na internet é a mesma coisa. O usuário que navega em sites quer sempre encontrar os
sites mais bonitos com os recursos tecnológicos mais avançados (como jogos, vídeos e filmes)
e o pior que ele não quer nem saber o que está por trás do “bonito” que ele navega.
Por isso, o designer de interface é obrigado a conhecer muitos termos técnicos e ser
um ótimo navegante no ambiente digital. Tais termos importantes para um melhor rendimento
dos serviços são Traçar objetivos no planejamento do projeto, Arquitetura de Informação,
Usabilidade, Experiência como Usuário, Manuseio de softwares de design e noções de
desenvolvimento para a internet.
A partir de agora abordaremos todos os termos técnicos e assuntos amparados pela
Teoria do Hipertexto, com o objetivo de formar intelectualmente conceitos básicos para um
bom designer de interface.

2. O OBJETIVO E PLANEJAMENTO
É inegável que todo tipo de concepção de trabalhos é necessário um planejamento para
o cumprimento dos objetivos. Planejamento cuja importância é fundamental para um bom
resultado, seja para ações como campanhas e divulgações de produtos, empresas e até
serviços.

“Depois de descobrir por que um site deve ser construído, o segundo aspecto mais
importante ao projetar a arquitetura da informação é determinar quem é o público-
alvo. Este é um passo inestimável que muitas pessoas falham em captar. Muitos sites
nem sequer levam em consideração quem os estará usando. Como você pode
desenhar um site se você não sabe quem irá vê-lo?
Algumas pessoas pensam que o público-alvo é definido pela tecnologia que usam
para acessar o site. Isso, também, é falha em captar a essência. O fato que um
usuário visitando o site utiliza um modem 28.8 kbps é somente uma pequena parte
da definição do público-alvo. Uma verdadeira definição do público-alvo consiste em
quem são os usuários e quais suas metas e objetivos. Cenários, ou estórias, são úteis
na visualização do público-alvo.” (BRUNI, João; Defina a Experiência do Usuário.
Disponível em:
< http://www.jbruni.com.br/AI/licao2-1.html>. Acesso em 25 Out. 2009)

A etapa inicial de um projeto web é com certeza traçar o objetivo a ser alcançado,
deixando ciente o profissional de design responsável pela interface, além dos demais
profissionais envolvidos.
 Além disso, é importante planejar como serão apresentados os designs do site,
seguindo sempre os princípios básicos de design:

“A. Proximidade e alinhamento - elementos que pertençam a um mesmo grupo

devem estar próximos.
B. Equilíbrio, proporção e simetria - todos os componentes devem ser
complementares.
C. Contraste, cores e brancos - layouts dinâmicos chamam a atenção e causam
impacto.
D. Ordem, consistência e repetição - você tem toda a liberdade para criar as regras,
mas deve seguí-las.
E. Simplificação – simplicidade é sinônimo de elegância, objetividade e, acima de
tudo, clareza.
F. Legibilidade - textos existem para serem lidos.
G.Integração – o design não pode desafinar.” (RADFAHRER, Luli.
Design/Web/Design 2. Disponível em <http://www.luli.com.br/dwd2>. p.21 Acesso
em 16 Nov. 2009.)

3. ENTENDENDO A INTERFACE

O conceito de Interface se expressa pela presença de uma ou mais ferramentas para

o uso e movimentação de qualquer sistema de informações, seja ele material, seja ele
virtual. (Wikipédia. FREITAS, Julio Cesar. O design como interface de
comunicação. In: Leão, Lúcia. O chip e o calidoscópio: reflexões sobre as novas
mídias. São Paulo: Editora Senac São Paulo. 2005).

Sendo assim, a interface é toda a parte observável e que transmite um fluxo de

informações, seja simplificando ou dificultando o uso da máquina.
Para que haja uma melhor experiência com a interface, são necessárias algumas
aplicações de técnicas como usabilidade, arquitetura de informação e pensar sempre no
público alvo.

3.1. OS TIPOS DE INTERFACES

Existem vários tipos de interfaces dentro do ambiente computacional, variando de
meios digitais a meios físicos. Eles podem ser: interface do usuário, interface física, interface
gráfica, interface em programação e interface de rede.
A interface de usuário é o conjunto de meios que proporcionam uma interação entre
pessoas e máquinas e softwares. É através deste tipo de interface que podemos operar um
computador.
A interface física é a ponte de um equipamento com outro. Através dela é possível
ligar um computador com um celular para a troca de arquivos, por exemplo.
 A interface gráfica é a parte apresentacional simplificada, de forma que traduza com
gráficos, quadros, áreas de transferências, múltiplas janelas e paginações.
A interface em programação é a parte lógica de comunicação com um computador.
Através de uma linguagem própria, essa interface possibilita a criação de softwares e
aplicativos sem o conhecimento profundo do funcionamento dos hardwares da máquina.
Dentro dos conceitos prontos de tipos de interfaces, podemos “criar” uma função
profissional que realiza visivelmente os objetivos de uma interface, o designer de interface. É
ele quem “desenha”, de acordo com conceitos pré estabelecidos e utilizando sua imensa
criatividade, a interface de navegação de um computador, software ou aplicativo.
Uma das funções do designer de interface, é ser responsável pela criação de todo o
projeto gráfico da comunicação via internet, e tem a obrigação de conhecer termos e
aplicações como arquitetura de informação, usabilidade, técnicas ou noções de webwriting, e
outros termos aplicados ao ambiente de criação e desenvolvimento web, para que consiga
criar um design que comunique com as tecnologias envolvidas.
Além disso, é necessário o designer ter uma vasta noção de marketing para que pense
nos públicos e objetivos a serem seguidos com o projeto.
Com essa base teórica, o designer de interface tem em mãos as ferramentas que
ajudam a traduzir o conceito de marketing e unindo com a arquitetura de informação e
usabilidade, consegue desenhar uma interface eficiente.

4. ARQUITETURA DE INFORMAÇÃO
“Arquitetura da Informação é a ciência de descobrir o que você quer que o seu site faça e
então construir um projeto, antes de mergulhar em sua construção” (BRUNI, João;
Arquitetura da Informação – Tutorial. Disponível em:
< http://www.jbruni.com.br/AI/index.html >. Acesso em 25 Out. 2009)

Assim como o conceito normal de arquitetura, a arquitetura de informação tem o

objetivo de simplificar o fluxo de informações às pessoas.
A arquitetura de informação nada mais é que o planejamento das informações de cada
site. Ela é responsável pela organização das informações para que o internauta consiga
encontrar tudo em seu devido lugar.
Um site com uma boa arquitetura de informação, independente do tamanho, consegue
prender a atenção do usuário e fazê-lo navegar por todo o site tranquilamente, saciando as
expectativas de cada pessoa na busca por determinadas informações.
 Algumas técnicas dentro desse tipo de arquitetura são utilizadas para esta
simplificação da navegação como classificação de conteúdos por afinidade, públicos,
interesses comerciais, campos de buscas por informações e paginações.
Em casos de projetos grandes com muitas informações a serem comunicadas, como
por exemplo, em portais e intranets, a arquitetura de informação tem o papel principal para
determinar o sucesso ou fracasso da experiência do usuário no local, pois se feita de forma
equivocada, pode elevar a rejeição do usuário na web. Por isso, além de conhecer as técnicas
de se planejar uma interface é necessário conhecer a fundo o público alvo do projeto para que
este não fale com a pessoa errada.

“A Arquitetura de Informação é uma carreira multidisciplinar, o que acaba

trazendo para o mercado uma diversidade muito rica de profissionais, formados em
diversas áreas do conhecimento. Jornalistas, bibliotecônomos, publicitários,
designers e até cientistas moleculares – o que conta mesmo é a organização, a
capacidade de abstração e o bom senso. Em 2008 o Guilhermo fez uma pesquisa
para levantar o perfil dos arquitetos de informação brasileiros: características
demográficas, formação, cargo, salários, job description e interesses. Vale a pena dar
uma olhada nos resultados e entender um pouco mais sobre mercado no qual você
está pensando em entrar.” (TEIXEIRA, Fabrício. Blogs, livros, links, cursos e
eventos de Arquitetura de Informação. Disponível em: <
http://arquiteturadeinformacao.com/2009/11/10/blogs-livros-links-cursos-e-eventos-
de-arquitetura-de-informacao/>);

Uma ferramenta que facilita muito o processo de organização de idéias para o

planejamento de um site ou projeto web é a elaboração de um mapa mental. O mapa mental
nada mais é que a organização de seções do site em uma espécie de árvore, para que as
informações do planejamento não sejam perdidas. Nos casos de planejamento web, os mapas
mentais são imprescindíveis para o não comprometimento do projeto, além de ser a melhor
forma de comunicação com toda a equipe de desenvolvimento.

“O mapa mental assemelha-se muito a um fluxograma, mas de uma forma

menos linear e mais processual. Você tem uma ideia central e a partir dela vai
gerando diversas ramificações de tópicos e sub-tópicos, seguindo algumas cores e
formas, a fim de organizar visualmente cada etapa do processo, já que anotações
monocromáticas não estimulam o cérebro da mesma forma que anotações coloridas,
com formas e imagens.” (LEVI, Flávio. Mapas mentais como ferramenta de
planejamento. Disponível em
<http://webinsider.uol.com.br/index.php/2009/03/24/mapas-mentais-como-
ferramenta-de-planejamento/ >. Acesso em 28 Nov. 2009.)

Veja um exemplo de mapa mental feito para um site institucional, com uma área
administrativa para o dono do site e uma administrativa para usuários:
I – Exemplo de Mapa Mental. (Sobrinho, Ericson. Dárcio, Bruno; Site Leondoor. 2009)

5. USABILIDADE
A usabilidade é uma área do design que valoriza sempre a melhor experiência do
usuário em determinado projeto ou projétil. Avaliando questões psicológicas e fisiológicas do
público alvo utilizador, a usabilidade tenta evitar um esforço desnecessário para a
compreensão da informação.
A usabilidade não é aplicada apenas em ambientes digitais. Todo tipo de material que
precisa ser utilizado por pessoas querendo ou não tem um aspecto de usabilidade aplicado,
pois o fato da ausência destas técnicas dificulta muito a utilização do material por parte das
pessoas.
Como exemplo, é só observarmos porque toda geladeira é fisicamente igual, sendo
vertical e com uma porta que abre toda ela. Da mesma forma podemos observar o design de
carros criados para o público feminino, como por exemplo o C3 da Citroen. Ele foi todo
desenhado para a mulher moderna, que trabalha e não abre mão da beleza, por isso as
fechaduras externas possuem uma inclinação e comprimento que não estraguem as unhas das
mulheres. Outro fato no caso do carro é que a diferenção é extremamente leve (mais leve que
as outras direções hidráulicas), para proporcional um menor esforço ao fazer manobras com o
carro parado.
 Na internet a usabilidade ocupa um espaço importante e quase indispensável. Uma de
suas funções é garantir que a interface “rode” nos diferentes tipos de sistemas operacionais,
browsers (navegadores), leitores, dispositivos móveis e outros elementos “frontend” que
traduzem a informação ao usuário.
Um site com uma boa usabilidade permite aos mais variados tipos de pessoas
enxergarem a mesma informação e com o mesmo design, além de oferecer uma navegação a
pessoas com deficiências visuais através de leitores de tela.

“O teste de usabilidade é uma técnica formal que pode envolver usuários

representando a população alvo para aquele determinado sistema. Estes usuários são
designados para desenvolver tarefas típicas e críticas havendo com isso uma coleta
de dados para serem posteriormente analisados. Contudo o teste de usabilidade
caracteriza-se por utilizar diferentes técnicas voltadas em sua maioria para a
avaliação da ergonomia dos sistemas interativos.” (Wikipédia. Usabilidade.
Disponível em < http://pt.wikipedia.org/wiki/Usabilidade >. Acesso em 25 Nov.
2009.)

Para o site não ficar comprometido, é sempre necessário realizar testes de usabilidade
e conferir se está realmente cumprindo os objetivos de acessibilidade propostos no projeto.

6. OS SOFTWARES DE DESIGN
Um dos principais recursos do design na web é a utilização dos softwares de criações
de design. É através deles que a beleza, alegria, e os desejos são despertados em um site.
Além disso, querendo ou não, não é a arquitetura de informação, a usabilidade e nem
as tecnologias que “vendem” o site ao público, e sim o design, a arte que chama a atenção e
realiza a comunicação do conceito ao público.
Por isso, a ferramenta que o designer de interface mais domina e utiliza são esses
“softwares de criar layouts”. Eles são utilizados por grande parte de designers, de interfaces
web ou não, e têm recursos que fantasiam e animam o que está na mente das pessoas,
traduzindo conceitos de campanhas e agregando valor à informação.
Os nomes dos softwares pouco importam, podem ser Photoshop, Corel Draw,
Ilustrator, Flash, Fireworks. O que não se pode esquecer é do conceito a ser transmitido ao
público certo de forma aceitável esteticamente, criativa ou não, por isso a noção em marketing
faz tanto diferencial nessa área.
7. CONCLUSÃO
Para a profissionalização do mercado de internet, é importante todos os profissionais
terem ciência desses conceitos técnicos e teóricos, já que essa é uma grande diferenciação de
outros profissionais que trabalham com design gráfico, embalagens e diretores de artes.
Apesar de ter em mente os conceitos de arquitetura de informação, usabilidade,
técnicas nos softwares de design e criação, é totalmente dispensável o conhecimento de
detalhes extremos de cada área, sendo importante apenas as noções para o perfeito
desempenho e comunicação com toda a equipe de arquitetos, profissionais de interação,
programadores back-end e equipe de planejamento e atendimento.
 REFERÊNCIAS

RADFAHRER, Luli. Design/Web/Design 2. Disponível em < http://www.luli.com.br/dwd2 >

Acesso em 16 Nov. 2009.

SPYER, Juliano. Org. Para entender a Internet. Noções, práticas e desafios da comunicação
em rede. 2009. Disponível em < http://paraentenderainternet.blogspot.com >. Acesso em 04
Nov. 2009.

Wikipédia. Interface. Disponível em: < http://pt.wikipedia.org/wiki/Interface >. Acesso em 05

Nov. 2009.

TEIXEIRA, Fabrício. Blogs, livros, links, cursos e eventos de Arquitetura de Informação.

Disponível em: < http://arquiteturadeinformacao.com/2009/11/10/blogs-livros-links-cursos-e-
eventos-de-arquitetura-de-informacao/ >. Acesso em 28 Nov. 2009.

LEVI, Flávio. Mapas mentais como ferramenta de planejamento. Disponível em

<http://webinsider.uol.com.br/index.php/2009/03/24/mapas-mentais-como-ferramenta-de-
planejamento/ >. Acesso em 28 Nov. 2009.

Wikipédia. Usabilidade. Disponível em

< http://pt.wikipedia.org/wiki/Usabilidade >. Acesso em 25 Nov. 2009.

BRUNI, João; Defina a Experiência do Usuário. Disponível em:

< http://www.jbruni.com.br/AI/licao2-1.html>. Acesso em 25 Out. 2009.