top of page

WEB DESIGN

O web design é uma extensão da prática do design gráfico, onde o foco do projeto é a criação de web sites e documentos disponíveis no ambiente da World Wide Web. O web design tende à multidisciplinaridade, uma vez que a construção de páginas web requer subsídios de diversas áreas técnicas, além do design propriamente dito.

Áreas como a arquitetura da informação, programação, ergonomia,[1] usabilidade, acessibilidade entre outros.

A preocupação fundamental do web designer é agregar os conceitos de usabilidade com o planejamento da pessoa em destaque interface, garantindo que o usuário final atinja seus objetivos de forma agradável e intuitiva.

​

Planejamento estratégico​

​

Como todo trabalho de design, ele é um projeto, e necessita uma análise informacional, a partir de um briefing.

Briefing é um conjunto de informações ou uma coleta de dados passados em uma reunião para o desenvolvimento de um trabalho ou documento. Esse é um instrumento muito utilizado em Administração, Relações Públicas, Design e na Publicidade. O briefing deve produzir um roteiro de ação para criar a solução que o cliente procura, ou seja, é como mapear o problema e, com as pistas identificadas, ter ideias para criar soluções.[1] Um briefing eficaz deve ser breve, contendo apenas informações relevantes.

​

Um briefing muito extenso seria ruim por não ser seletivo, tornando o processo dispersivo.

Já um briefing excessivamente curto torna-se incompleto, dificultando o entendimento quanto aos trabalhos a serem executados.[2]

​

Etimologia

​

Briefing (inglês) significa instruções.

 

Tópicos

​

O briefing é uma peça fundamental para a elaboração de uma proposta de pesquisa de mercado.

É um elemento chave para o planejamento de todas as etapas da pesquisa de acordo com as necessidades do cliente.

Existem diversos modelos de briefing. Na verdade, cada agência ou empresa possui o modelo que melhor encaixa de acordo com seu modelo de negócios e estrutura interna. Abaixo existem alguns itens que podem compor um briefing:

​

1) Histórico: Aqui é importante que o cliente conte uma história a respeito de seu mercado (o que vem acontecendo com ele), da marca, da empresa, ou outras informações relevantes que nos ajudem a compor um cenário.

​

2) O Problema de Marketing: Este item pode até vir dentro do anterior ou não, mas é muito importante. O histórico deve desembocar no problema que o cliente está enfrentado no momento, e que é o pano de fundo para a necessidade que ele identificou para a condução da pesquisa. Em outras palavras, é o que ele espera ver resolvido depois da pesquisa.

​

3) Objetivo(s) da Pesquisa: Deve ser uma descrição sucinta e estar relacionado com o problema anteriormente definido. 

Aqui são apontados aos tópicos que a pesquisa deve cumprir.

​

4) Padrão de Ação: Talvez um dos pontos mais importantes e normalmente menos lembrados pelos clientes. Aqui ele deve definir o que fará com os resultados da pesquisa, independentemente do que virá pela frente, ou seja, que decisão será tomada com os resultados futuros em mãos. O Padrão de Ação é um guia fundamental para calibrar e melhor desenhar o plano de pesquisa, definir os envolvidos no projeto e para analisar os resultados, incluindo aí as recomendações estratégicas. Importante aqui é não incorrer no risco de definir um padrão de ação genérico, por exemplo, "os resultados desta pesquisa serão utilizados na definição da estratégia futura da marca". Isso pode até ser verdade mas na maioria das vezes é possível ser mais específico. Devemos nos perguntar: qual o aspecto da estratégia da marca?

​

5) Questões Específicas (ou Áreas de Investigação): Neste item o cliente deve incluir todas as perguntas ou áreas de informação que ele precisa/deseja obter, sempre à luz do problema de marketing e dos objetivos do estudo.

​

6) Público-alvo: Não cabe aqui falar do target do cliente ou da sua marca mas sim do público-alvo da pesquisa. Atenção para a eventual necessidade de informações além da descrição sócio-demográfica básica. Muitas vezes é importante considerar elementos adicionais do target, a exemplo de dados de comportamento e atitude.

​

7) Áreas Geográficas: Definição das áreas geográficas/cidades que o estudo deverá cobrir.

Pode-se pensar em bairros, como zonas nobres ou menos favorecidas, como campos geográficos de delimitação da pesquisa.

​

8) Materiais Anexos: Neste item o cliente deve relacionar os materiais que farão parte da pesquisa, a exemplo de photo boards, cartazes, etc. Chamados também de materiais de apoio. São referências, geralmente, aos trabalhos anteriores, quando houver.

​

9) Limitações de Prazo e Custo: Algumas pesquisas acabam não sendo planejadas e conduzidas idealmente por limitações de prazo e/ou custo. Cabe ao cliente mencionar alguma restrição no briefing, se for o caso.

​

Ainda mais especificamente podem ser acrescentados os seguintes pontos:

​

​

​

Detectar corretamente o objetivo do projeto é essencial para um bom planejamento, de modo que as ações sejam tomadas de forma correta. É sempre necessário definir o público alvo do site, o objetivo, os serviços oferecidos, o diferencial para o público. A partir desses e de outros elementos que sejam especificamente relevantes ao projeto, será definida a estrutura do site (Arquitetura de informação), a tecnologia empregada e o layout.

​

De uma forma geral, embora usualmente possa parecer que a primeira impressão que se tem de um site é o visual, na verdade o visitante busca o conteúdo, por esse motivo o primeiro passo estratégico é definir bem todas as informações que o site terá, definir claramente a arquitetura de informação do site e por último, o design visual do site, que não precisa pular, girar e piscar, a não ser que o que se esteja vendendo é design/imagem (que não se aplica ao meio informacional que é a Web), mas ter um aspecto profissional seguindo pelo menos os conceitos básicos do design como aproximação, contraste, alinhamento, dentre outros.

​

Há uma diferença conceitual marcante entre design nos meios tradicionais, como no gráfico e o design aplicado na web.

Na web, a estética deve ser moldada ao dispositivo que acessa ao site ou mesmo desabilitada caso não seja necessária no contexto de utilização. No meio gráfico é possível prever como o usuário final verá a estética do produto, já na web isto não é possível, pois a aparência pode e deve mudar radicalmente de acordo com o sistema operacional utilizado, configurações pessoais, navegadores, resoluções de tela e dispositivos, como celular, TV, impressora, leitores de telas etc. Por este motivo, a estrutura (HTML) com a qual a informação será exposta deve trabalhar independentemente da formatação estilística (CSS) e do comportamento (scripts), que são recomendações do W3C.

​

Estrutura do web design

​

A estrutura, também conhecida como arquitetura de informação do site, deve contemplar seu objetivo, tornando a experiência do usuário a mais confortável e fácil possível, chamamos isso de usabilidade. Deve-se planejar a estrutura de forma que o usuário obtenha facilmente a informação ou serviço desejado. Hoje em dia são inúmeras as formas que um site pode adquirir e a criatividade continua ser o grande diferencial na produção de web.

​

Layout

​

O layout precisa transmitir a informação desejada com eficiência. É preciso que o layout seja um elo de comunicação com o usuário, que sua linguagem seja condizente com o objetivo do site. Conhecer heurísticas de usabilidade é fundamental para se gerar layouts para a web. Cada elemento inserido em um website deve ter um objetivo, a perfeição de um website se atinge quando não há nada a ser retirado e não quando não há nada mais a ser inserido.

​

A maioria dos layouts antigos dos sites da Web eram feitos com tabelas na linguagem HTML, porém esta forma é inapropriada pois tabelas devem ser utilizadas apenas para exibir dados tabulados. Entretanto existem layouts que são completamente produzidos sem a presença de tabelas, sao os famosos "tableless" e esta sim é a melhor forma de estrutura para layouts.

​

  • tableless não pode ser entendido como na tradução livre, que seria literalmente "sem tabelas". Tableless é um conceito e deve ser entendido como aplicação das webstandards (normas da web desenvolvidas pela W3C).

​

Navegadores

​

São programas responsáveis por interpretar o conteúdo de um web site, disponibilizando assim a interface com a qual o usuário final irá interagir. O navegador está para o web design assim como o papel está para o jornal. A grande variedade de navegadores e discrepância entre os recursos fez seus próprios criadores caminharem em direção a um padrão comum. Atualmente é indispensável criar sites seguindo os padrões da World Wide Web Consortium.

No desenvolvimento do site, o HTML deve ser criado seguindo os padrões do W3C (Web Standards) de forma que fique funcional, independente dos dispositivos (TV, celular, impressora, monitor etc). Apesar de em tese não haver a necessidade de testar em diversos navegadores, é um bom hábito testar em mais de um navegador (Mozilla Firefox, Internet Explorer, Netscape, Opera, Safari, Google Chrome e outros), pois o layout do site pode apresentar diferenças em determinados navegadores, e o usuário que navega não entenderá o que está acontecendo.

​

Padrões

​

A World Wide Web Consortium (W3C) é o órgão responsável por recomendar padrões de desenvolvimento para a internet. Por meio destes padrões se pode classificar: web sites de acordo com suas características técnicas, indo além do visual e; navegadores, de acordo com sua capacidade em atender aos padrões definidos.

O grande objetivo de seguir os padrões do W3C é de possibilitar que a informação veiculada pelo site permaneça independente do dispositivo utilizado pelo visitante e que seja acessível.

​

Programas utilizados

​

Existe um leque enorme de programas usados pelos web designers. Para construção do código, por se tratar de simples texto, qualquer editor de texto pode servir de suporte para a criação do código. Entretanto, há programas tanto gratuitos como de uso comercial, com interface WYSIWYG, que são amplamente utilizados no mercado tanto para gerenciar sites, quanto para apenas editar códigos, como é o caso do Adobe Dreamweaver, Aptana, Microsoft Expression Web, na parte visual, os editores gráficos vetoriais CorelDRAW, Adobe Illustrator ou o Inkscape), de bitmap GIMP, e principalmente Adobe Fireworks ou Adobe Photoshop. Para animações e recursos dinâmicos, o Flash é o mais utilizado. Em relação ao Flash, deve-se ter o cuidado de usá-lo apenas onde a solução seja impossível de ser reproduzida em HTML, jamais se usa em menus e áreas de conteúdo por ser um arquivo binário, não ser acessível e estar em desacordo com as recomendações do W3C. Na atualidade, existem disponíveis na rede website builders, trata-se de plataformas que o usuário pode criar um site sem a instalação de nenhum programa. Tais ferramentas são muito interessantes e vem ganhando espaço no mercado, pois leigos na área de webdesign podem criar seu próprio site e atualizá-lo diariamente se desejado.

​

Web designer

​

A tarefa do web designer é a elaboração estética e funcional e a manutenção de um web site. O web designer deve ter a compreensão da aplicação em mídia eletrônica de disciplinas como HTML/XHTML, CSS, JavaScript/DHTML, Flash etc. e deve ter conhecimento no uso de software de desenvolvimento voltado para a web.

A capacitação leva em torno de 1 a 2 anos para ser concluída.

 

Web designer é o profissional competente para a elaboração do projeto estético e funcional de um website, popularmente conhecido como o profissional responsável pela criação de websites ou páginas de internet. Para o desenvolvimento de websites esse profissional deve ter a compreensão da aplicação em mídia eletrônica de disciplinas como: 

teoria das cores, tipografia, arquitetura de informação, semiótica, usabilidade,

e conhecimento de linguagens de estruturação e formatação de documentos hiper textuais como XHTML 

(Extensible Hypertext Markup Language) e CSS (Cascade Style Sheet).

Para a aplicação desse conhecimento, de forma geral, o web designer recorre a softwares de tratamento

e edição de imagens, desenho e codificadores.​

bottom of page