Buscando a Experiência de Usuário(UX) mais adequada para cada situação.

Ir direto para o conteúdo

27.04.2010 Comentários:6

Web design: guia para iniciantes parte 1

Por: Leonardo Ota

Data: terça-feira 27 abril 2010 às 15:40

Categoria: Design

Resolvi escrever este guia pelo simples fato de que quando iniciei minha carreira como web designer, eu não sabia muito bem por onde começar, onde encontrar boas referências, bons sites de galerias de design, livros, cursos e portfólios inspiradores de designers.

Vou dividir este assunto em quatro partes. A primeira irá abordar os conceitos básicos sobre o design de interface, a segunda sobre o programador de interface, a terceira vou explicar com mais detalhes alguns dos principais conceitos que envolvem o design de interface e por último as referências. Meu objetivo aqui não é ensinar o que fazer ou não fazer, o que é certo ou errado, mas sim sugerir um guia que auxilie na criação do seu próprio estilo de trabalho, a escolha das referências e a melhor forma de aplicar tudo isso.

Antes de começar precisamos entender alguns conceitos importantes como: o que é Web design? Quais os métodos e processos mais usados? E quais habilidades técnicas são necessárias para se tornar um profissional.

O que é Web design?

É uma disciplina derivada do design que aborda técnicas, processos e métodos específicos em projetos web: (x)html, css, javascript, teoria das cores, gestalt, tipografia, grid, usabilidade, acessibilidade, navegação, padrões web e interface do usuário.

O que faz um web designer?

O web designer busca projetar a melhor experiência de uso de uma interface, para que o usuário consiga usá-la de maneira intuitiva e objetiva. Geralmente, em grandes agências a profissão se divide em: Designer de interface e o Programador de Interface. Estas divisões foram criadas devido à necessidade de um profissional especialista que entregue projetos com mais qualidade.

O que um Design de Interface faz?

Esses são os métodos e processos usados por eles (que variam de acordo com o volume de projetos):

Escopo do projeto: é onde estão todos os requisitos do projeto, quantidade de horas, as páginas, o que cada uma delas vai apresentar etc. Aqui você tem uma visão geral do que vai ser realizado.

Briefing: é um bate papo com o cliente para identificar aspectos do negócio como: público-alvo, objetivos do projeto ( Fortalecimento a marca, aumentar a visibilidade da empresa na web, aumentar faturamento). Este busca captar o máximo de informações relevante ao contexto do projeto para criar a melhor solução possível. Essas informações são importantes não só para o web designer, mas também para toda a equipe.

Basicamente existem algumas formas de se fazer isso. Você pode usar um documento escrito com todas as informações que queira adquirir e entregar para o cliente preencher ou marcar uma reunião para um bate papo e anotar tudo que julgar importante.  “Eu particularmente gosto de ter uma reunião com o cliente, pois às vezes ele poderá te dizer algo importante durante a conversa que não estivesse escrito no Briefing”.

Concepção: Reunir e organizar todas as ideias obtidas no Briefing para colocá-las em prática no processo da criação do layout. Neste momento, você precisa pensar no que pretende realmente fazer e qual idéia usar para não se perder no processo de referência com isso você  ganha tempo e o layout fica mais objetivo.

Referências: Aqui nesta etapa os web designers procuram referências para se orientarem na hora de começar a criar. Eles vêem portfólios e galerias de designers, portfólios de agências, revistas, banco de imagens e tudo que possa servir como referência. Aqui é muito importante salientar que buscar uma referência não significa copiar o que você achou interessante, mas buscar o caminho que o outro designer encontrou para chegar àquela solução, quais ideias teve para criar aquela peça. E não fazer igual.

Layout: é um protótipo com cores, tipografia, disposição de conteúdo e gestalt baseado no Briefing. Esta etapa será mais bem abordada na terceira parte desta série.

Aprovação: por fim, após essa trajetória pelos processos e métodos, o web designer precisa aprovar a criação da interface junto ao cliente. Uma defesa de criação que justifique o site entregue ao cliente neste momento. Existe a possibilidade do seu layout ser reprovado. Neste caso fica a critério de cada agência a solução a ser tomada, algumas refazem o layout, outras argumentam e procuram defende-lo. O ideal é seguir a risca o Briefing, para que seja evitado re-trabalho.

*Dica: procure obter uma aprovação do layout formalizada por e-mail, assim você possuirá um documento enviado por ele e evitara muita dor de cabeça no futuro. Os clientes costumam mudar um pouco de ideia sobre cores, disposição de conteúdo, elemento e este e-mail poderá te salvar.

E após o layout ser aprovado, o que acontece?

É ai que entra o Programador de Interface (vou abrir aqui um parêntese para dizer que não necessariamente após a aprovação. Aqui na agência, quando um projeto possui escopo definido, o site pode ser programado primeiro mesmo sem o (X)HTML do layout estar pronto porque o projeto já está com todos os requisitos definidas),no entanto esse é um assunto para a parte 2.

Se você possui alguma dúvida, ou algo a acrescentar fique à vontade para comentar.

Referências:Apostilas do curso de Web para designer da Revista Web Designer que eu fiz a alguns anos serviu como material de referência para este post.
Wikipidia: http://en.wikipedia.org/wiki/Web_design, http://pt.wikipedia.org/wiki/Web_design

Agradecimento: queria agradecer ao Douglas Vilela(Redator) por me ajudar na revisão deste artigo, Obrigado amigo.



Existem 6 comentários para “Web design: guia para iniciantes parte 1”

# 1° Lucas Sousa terça-feira 27 abril 2010 às 16:29GMT

Muito bom o blog Leo!
O post vai ser de grande ajuda para aqueles que buscam compreender cada passo da interface com maior nível de detalhes, inclusive para quem já tem um mínimo de experiência.
Parabéns!

# 2° Isadora terça-feira 27 abril 2010 às 16:40GMT

SUPIMPA! não sou web disigner,mais me interesso pelo assunto,bacana demais! simples e objetivo ;]

# 3° Pedro Paulo quarta-feira 12 maio 2010 às 22:55GMT

Parabéns, continue sempre escrevendo.

Abs.

# 4° Rondinelli terça-feira 01 junho 2010 às 20:47GMT

Mandou bem, aguardo ansioso pelo próximo post! Abraços!

# 5° isabella sexta-feira 30 julho 2010 às 21:59GMT

ADOREI!
muito bom..
to começando na carreira agora e toda dica ajuda muito…
se vc pude me da uma “luz” de como eu crio meu portifolio
só tenho material dos trabalhos que fiz nos dois cursos de web desing que fiz e outros que fui criando por pratica..
ia te agradece muito mesmooo..
parabens pelo trabalho..

atenciosamente
Isabella Ambrozano.

Deixe um comentário

Observação: Todos os campos obrigatórios estão marcados com um asterisco (*).

Informações de Contato

Sobre este blog

Este blog surgiu da idéia de escrever sobre a Experiência do usuário (UX - User Experience), que envolve vários temas importantes como arquitetura da informação, usabilidade, design, acessibilidade, interface de usuário e mais um bocado de assunto.

Categorias

Veja minha lista de categorias.

Mídias sociais

Me encontre também nos seguintes endereços:

Blogroll Gringo

Lista de links de sites em inglês que eu costumo ler

Leonardo Moraes Ota - OtaLeonardo - UX Blog - (CC) Alguns Direitos Reservados - Creative Commons License
Esta obra está licenciada sob uma Licença Creative Commons.

Nenhum conteúdo deste site pode ser copiado e reproduzido em outro site sem autorização do autor!

Powered by WordPress