Tópicos de Web Design e links úteis

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. A preocupação fundamental do web designer é garantir que o usuário atinja seus objetivos ao utilizar a interface de forma agradável e intuitiva. Veja alguns tópicos de web design na forma de:

4 passos para elaborar um web site

webdesign

1) Projetar aparência e funcionalidade das páginas baseada no propósito

Respondendo à pergunta “Qual a finalidade do site?” obtém-se seu objetivo. Projetar sua aparência e funções disponíveis para o usuário envolvem desenvolver uma arquitetura de informação do site, navegabilidade, tecnologias, complexidade e disposição de conteúdo. Com relação ao conteúdo, definir um índice (é muito comum uma barra lateral ou superior, presente em todas as páginas), permitindo diferentes modos de navegação:

  • Navegação linear: ocorre por uma sequência de passos (ex: preenchimento de formulários, separação de um mesmo assunto em diferentes páginas, etc)
  • Navegação alternativa: precisa de links para interligar páginas “de mesmo nível” (ex: “para ver mais, clique aqui”)
  • Navegação hierárquica: define estrutura (ex: subcategorias)

Definir os links (avançar, voltar, subir ou descer), tanto na hierarquia quanto para a página principal e para outros conteúdos relacionados.

2) Decidir conteúdo baseado no público alvo

É importante que o processo de criação seja baseado em pesquisas, contextos históricos culturais e linguagens contemporâneas. Ver outros sites sobre o mesmo assunto que o que está sendo desenvolvido é uma opção. O Storyboarding é a etapa em que é feito o esboço da apresentação, com estudo sobre a aparência de cada página web. Deve-se considerar a quantidade de tópicos e o tamanho de cada um deles. Quando há uma grande quantidade de tópicos, é recomendável que criar pequenos grupos relacionados em uma única página.

3) Design visual

Para elaboração de layout e design de interface, deve-se ter clareza, concisão e consistência. Para assegurar a clareza é preciso usar uma linguagem simples e inserir na página somente tópicos e imagens relevantes. 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. Isso é concisão.

As páginas devem ser legíveis e balanceadas. A consistência refere-se a estabelecer ou adotar um estilo para apresentar as informações em todas as páginas web, de maneira uniforme. O texto torna-se mais legível se adicionar espaços em branco (em intervalos regulares) na página web, que também pode ficar mais atraente se balancear a quantidade de texto e imagens no lado esquerdo e direito e nas metades de cima e de baixo da página, tornando-as mais simétricas.

O layout do site pode apresentar diferenças em diferentes navegadores (principalmente os de smartphones). É recomendável limitar o tamanho da página para duas ou três telas de informação. Uma imagem de fundo uniforme e leve é um coringa para resoluções em que o texto ocupe uma área pequena da tela.

Tornar o site compatível com dispositivos móveis (celulares, tablets etc) é importante para permitir uma experiência agradável do site pelo usuário e também porque o ranking do Google penaliza sites que não sejam “amigáveis” com essas tecnologias. Veja se o seu site está compatível e algumas dicas clicando no link.

4) Montagem e testes de usabilidade para adequado funcionamento do site

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 – World Wide Web Consortium (W3C), o órgão responsável por recomendar padrões de desenvolvimento para a internet. Um bom lugar para pesquisar sobre HTML (inclusive com testes online) é o site da W3schools. Veja uma breve introdução ao tema e às linguagens mais utilizadas encontra-se na apresentação abaixo:

Para testar seus site em HTML e seu código CSS, visite os links Markup Validation Service e CSS Validation Service. Com relação às DIVs, esse link do Wickham’s HTML & CSS tutorial é muito bom também.

Bons cursos gratuitos de (X)HTML, CSS, JQuery e Javascript podem ser vistos no youtube na Universidade XTI

Links úteis

Compartilhe o link desse texto, mas se for copiar algum trecho, cite a fonte. Valorize nosso trabalho.
Mais informações na licença de uso do site.

Um Pingback/Trackback