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
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
- CC search – Busca de imagens com licença Creative Commons
- Visualizar site em diferentes resoluções
- Testar o site em diferentes navegadores e versões ao mesmo tempo
- Como acessar o console javascript em diferentes navegadores
- Códigos de Símbolos HTML
- Cores em Hexadecimal
- Encycolorpedia – mais informações sobre as cores
- Google trends – exibe palavras mais buscadas no Google (por período, região, termos semelhantes etc)
- Conversor online de texto de caixa alta e outras possibilidades
Truques no Google Chrome
- Desativar/ativar execução do JavaScript: chrome://settings/content/javascript (útil para ler notícias que aparecem com uma restrição de leitura aplicada usando JavaScript no site)
- Visualizar/remover todas as cookies: chrome://settings/siteData
- Gerenciar/visualizar senhas: chrome://settings/passwords
One comment