O que fazer e o que não fazer em um ótimo web design

Quando seguido, este guia provará ser um recurso de web design bastante valioso, especialmente se você planeja usar software de desenvolvimento de sites no futuro. Do inexperiente ao experiente, este guia tem algo para todos.

O processo de um ótimo web design Só para ter certeza de que estamos todos na mesma página, vamos começar com a definição básica de “web design”. De acordo com a Wikipedia, web design é:

“um processo de conceituação, planejamento, modelagem e execução de entrega de mídia eletrônica via Internet na forma de linguagem de marcação adequada para interpretação por navegador da Web e exibição como interface gráfica de usuário” .

O processo de web design pode ser comparado ao processo de redação de um artigo de pesquisa. Na fase de conceituação/planejamento são criados fluxogramas (o esboço) que ilustram a estrutura de navegação do seu site. Na fase de modelagem, são criados wireframes estáticos (o rascunho) que ilustram o layout do esqueleto de cada seção do seu site. Depois que os wireframes são criados, gráficos, cores e texto são usados ​​para criar o design de suas páginas da web com base no layout dos wireframes. Na fase de execução, seu design é convertido em um formato compatível com navegadores web, texto e conteúdo são adicionados e, por fim, seu site é publicado ao vivo na Internet para todo o mundo ver (versão final).

Todas as três etapas do processo de design são igualmente importantes. Muitos web designers pulam uma etapa para economizar tempo ou porque não acham que isso seja necessário. No entanto, todas as três etapas são necessárias se o seu objetivo é criar um design de sucesso e um site respeitável. Mesmo que os três estágios sejam usados, há muitos erros que os web designers podem cometer e que levarão a sites de baixa qualidade e pouco fáceis de usar. É hora de limpar o armário das más práticas de web design e reabastecê-lo com as boas.

Etapa 1: Conceitualização e planejamento
Esta etapa é ignorada com mais frequência do que as outras duas etapas. A maioria dos escritores não gosta de criar esboços para artigos de pesquisa, e a maioria dos web designers também não gosta de criar fluxogramas. Não seja preguiçoso. Se você se esforçar e planejar seu site, descobrirá que o processo de web design ocorre sem problemas, com menos erros cometidos ao longo do caminho.

Existem algumas coisas que você precisará para conceituar e planejar seu site com eficácia:

• um cérebro
• uma caneta e papel
• (opcional) software de fluxograma
• uma ideia geral das diferentes seções do seu site

Para começar, pegue papel e caneta ou inicie seu software de fluxograma favorito. Usamos OmniGraffle Professiona para Mac OS X, que custa US$ 150 por licença, mas vale a pena se você cria sites regularmente. Se você estiver em um PC, o SmartDraw é um excelente software de fluxograma GRATUITO que você pode usar. Uma caneta e papel funcionam perfeitamente, no entanto.

Existem muitos métodos para criar fluxogramas. Mostraremos a maneira mais básica de fazer isso por uma questão de tempo e extensão deste artigo. Se você quiser saber mais sobre fluxogramas, pesquise fluxogramas no Google ou Yahoo.

Veja o fluxograma que criamos ao conceituar os Locais Cromáticos. (1) No topo do fluxograma listamos o nome do nosso site. (2) A seguir, incluímos cada seção principal do nosso site: Página inicial, Sobre e Serviços. Essas seções são a navegação principal do seu site. Os nomes de cada seção dependem inteiramente do conteúdo do seu site. Tente usar o mínimo de seções possível para que os visitantes não fiquem sobrecarregados ao navegar pelo seu site.

(3) Em seguida, adicione todas as páginas secundárias (subseções) que serão listadas em cada uma das páginas primárias. Para Home, incluímos Web Design Profissional, Desenvolvimento Web e Otimização de Mecanismos de Pesquisa. A navegação secundária precisa ser mais descritiva que a navegação primária. Quanto mais profunda for a hierarquia de navegação do seu site, mais descritivo cada rótulo deverá ser.

O Dos

• Menos é mais; mantenha o número de seções primárias ao mínimo. Usamos 6 seções em nosso site, o que é mais que suficiente
• Quer você use papel e caneta ou software de fluxograma, mantenha as coisas o mais limpas e organizadas possível. Embora você (e qualquer pessoa que trabalhe com você) seja o único que usará o fluxograma, ele ainda precisa fazer sentido. Suas seções primárias devem usar termos mais amplos, enquanto os termos secundários e terciários devem ser mais descritivos

Os nãos
Criar um fluxograma é bastante simples; no entanto, existem alguns erros que podem ser facilmente cometidos:

• Não use termos muito descritivos em sua navegação principal, a menos que todo o seu site se concentre em um tópico específico. -Não tente agrupar vários tópicos na mesma página. Crie uma seção geral para esses tópicos e a partir dessa seção crie subseções. Isso tornará as páginas da web da subseção (descritivas) mais propensas a ter melhores classificações nos mecanismos de pesquisa (Google, Yahoo, MSN, Ask). Depois de criar um fluxograma conciso e descritivo, você estará pronto para passar para o segundo estágio do processo de web design:

Etapa 2: Modelagem
Na etapa de modelagem, são criados mock ups estáticos de “wireframe”. Cada maquete ilustra um esqueleto básico do layout de cada uma das páginas da web que serão incluídas em seu site. Esta etapa é importante porque nos dá uma ideia de onde os diferentes elementos serão colocados no nosso design. Alguns desses elementos são:

• logotipo
• menu de navegação
• conteúdo
• imagens, vídeos

Para criar esses modelos, você pode usar papel e caneta ou seu software de modelo preferido. No passado usávamos o Photoshop, mas ultimamente temos usado o OmniGraffle Professional. OmniGraffle não consome tantos recursos quanto o Photoshop e nos permite montar nossos modelos de wireframe com muito mais rapidez.

Além disso, certifique-se de ter os fluxogramas que você criou por perto, pois você precisará referenciá-los de tempos em tempos para ter certeza de que está simulando todas as páginas que aparecerão em seu site.

Aqui está nosso exemplo de como deve ser a aparência de uma maquete de wireframe. Como você pode ver, não há cores ou gráficos incluídos. É exatamente assim que uma maquete de wireframe deve ser – um layout esquelético do seu design. O objetivo é poder ter uma ideia geral de onde será colocado cada um dos elementos da página web.

Geralmente começamos do canto superior esquerdo e descemos até a parte inferior. Não existe uma aparência específica de um wireframe. Use sua imaginação. Porém, certifique-se de que ao criar seus wireframes você não se esqueça de incluir os elementos mais importantes de um site (logotipo, menu de navegação, posicionamento de conteúdo, posicionamento de imagens/vídeo).

Se algumas de suas páginas usarem o mesmo layout, não será necessário simular todas essas páginas (embora você certamente possa). Apenas certifique-se de criar um modelo de qualquer layout exclusivo que seu site terá. Você vai se agradecer mais tarde.

O que fazer

• maquete de todas as páginas exclusivas
• inclua elementos importantes (logotipo, navegação, posicionamento de conteúdo, posicionamento de imagens/vídeo) - comece do topo e vá descendo - faça referência ao seu fluxograma criado no estágio 1 para que você não se esqueça de fazer uma maquete de nenhuma página - salve, salve, salvar – como qualquer coisa no computador, salve sua(s) maquete(s) a cada 10 minutos ou mais
• concentre-se em layouts limpos e fáceis de usar - rotule seus elementos para não esquecer o que eles são quando referenciá-los no estágio 3, execução - use outros sites como inspiração; não há nada de errado em pegar elementos de outros sites e torná-los seus (veja “não fazer”)

The Dont's

• não inclua gráficos ou cores (isso fica para a próxima etapa) -não deixe seus mockups muito “ocupados”; concentre-se em layouts limpos, bem organizados e fáceis de usar - não pule esta etapa; é tão importante quanto o primeiro e o último - se você pegar elementos de outros sites, certifique-se de não plagiar; há uma diferença entre se inspirar em outro site para criar certos elementos do seu design e roubar descaradamente seu layout e cores

Etapa 3: Execução
Na terceira e última etapa, execução, o planejamento das etapas 1 e 2 é combinado para auxiliar na criação de um site interativo e ao vivo.
A terceira etapa é de longe a que consome mais tempo, já que você 1) criará os gráficos 2) criará o conteúdo e, finalmente, 3) converterá os designs da web de imagens em código que os navegadores da web usam para apresentar seu site ao mundo.

Ao chegar ao terceiro estágio, você deverá ter uma ideia clara de:

• como seus visitantes irão de um lugar para outro (estágio 1, fluxograma) - como suas páginas da web serão organizadas (estágio 2, modelos de wireframe)

Se você não tem uma ideia clara dessas duas coisas, volte ao primeiro e segundo estágios e continue a desenvolvê-los. Você descobrirá que o terceiro estágio é mais fácil quando você cria um plano de batalha claro e conciso para projetar seu site.

Livre-se da caneta e do papel
Na etapa 3, você precisa usar o Photoshop ou outro programa de edição de imagens, pois usará cores e gráficos para criar o layout do seu site.

Geralmente começamos a criar a página “inicial” (índice) primeiro. Use os wireframes que você criou no estágio 2 como modelo para cada uma das páginas que você criar. No entanto, em vez de usar caixas sólidas, use gráficos, cores e texto. Cada página deve ter exatamente a aparência que você deseja na Internet, pois esta é a etapa final do processo de design.

Certifique-se de incluir o plano de fundo para sua navegação (mas não adicione o texto à sua imagem). Quando convertido usando CSS (folhas de estilo em cascata), sua navegação deve ser na forma de texto e não de imagens. As imagens não podem ser rastreadas pelos motores de busca (as palavras-chave usadas na sua navegação não serão indexadas nas páginas de resultados dos mecanismos de busca, o que significa que menos pessoas conseguirão encontrar o seu site).

Quando você estiver satisfeito com seus designs e sentir que eles estão prontos para serem colocados na Internet, é hora de separar os designs para que você possa criar um layout baseado em CSS. Para obter mais informações sobre como converter seus layouts para CSS ou marcar seu site em CSS, visite w3schools.com. Depois de pesquisar na Internet, não conseguimos encontrar um tutorial decente de imagem para CSS – então espere um de nós nas próximas semanas. Converter seus designs em CSS é extremamente importante, pois os layouts de tabelas são coisa do passado.

Aqui está um exemplo de um site quase concluído com o layout que criamos na etapa 2. Ele foi tirado diretamente do nosso navegador e como você pode ver, agora há um logotipo, cores, um lindo sistema de navegação, um rodapé, e o mais importante, um layout limpo e organizado.
Graças ao planejamento nas etapas 1 e 2, nosso layout está bem organizado e fácil de usar.

O Dos

• faça referência aos seus modelos que foram criados no estágio 2; embora não haja problema em se desviar do layout original, você não precisará
• faça alguma pesquisa antes de criar seu design real; obtenha ideias de outros sites e torne-as suas (sem plagiar)
• inclua cores e gráficos para criar a aparência final de suas páginas da web - use CSS (folhas de estilo em cascata) para converter seus designs de imagens em marcações compreensíveis pelos navegadores da web - faça referência ao seu fluxograma do estágio 1 ao codificar suas páginas com hiperlinks; é melhor usar um menu suspenso que inclua todos (ou a maioria) dos links do seu site em todas as páginas; isso permitirá uma navegação mais fácil e também tornará suas páginas mais fáceis de rastrear quando os spiders do mecanismo de pesquisa passarem por aqui; um ótimo lugar para obter menus suspensos CSS é em DynamicDrive.com - finalize seu design enquanto trabalha no Photoshop ou em qualquer software de edição de imagem que você usa; pode ser difícil fazer alterações em seu design depois que ele for convertido em marcação (código)

Os nãos

• não inclua o texto nos menus de navegação ao converter para CSS; em vez de usar texto de imagem, use texto normal que possa ser lido por spiders de mecanismos de pesquisa
• não use tabelas ao converter; mesmo que você precise comprar um livro sobre CSS, valerá a pena; mesas estão mortas
• não pule as duas primeiras etapas apenas para economizar tempo; seu site SERÁ melhor se você começar do início do processo de web design (em vez de no final)
• não se esqueça de compactar suas imagens quando elas forem cortadas para CSS; não há nada pior do que um site de carregamento lento devido a arquivos de imagem grandes; O Photoshop possui a opção “Salvar otimizado para Web” (CS3 – “Salvar para Web e dispositivos”)

O processo leva à perfeição
Seguindo um processo de web design como o ilustrado neste artigo, você aumenta as chances de criar um site bem organizado, de fácil navegação e muito amigável. Vamos ser sinceros: se os visitantes se perderem ou ficarem confusos ao tentarem navegar no seu site, eles poderão clicar no botão Voltar e procurar um site mais amigável. As pessoas não gostam de pensar quando se trata de se orientar nos sites. Não os faça pensar. Você pensa planejando seu site do estágio 1 ao estágio 3 e descobrirá que mais pessoas gostarão de visitar seu site.