Webloop

7 passos para um processo de WebDesign mais eficaz e produtivo

Desenhar para a web é a nossa diversão, como web-designers estamos em constante aprendizado; aprendendo novas técnicas para melhorar nossas habilidades. Mas para ser honesto, mesmo uma pessoa sendo “ninja” no Photoshop ou Fireworks não significa que seu novo site será um sucesso. Com certeza vai ser bonito e terá um visual chamativo, mas há muitas coisas que devemos fazer antes de realmente sentar no computador e começar a desenhar.

As dicas e truques abaixo são de experiência da equipe do Spyrestudios.com, não significa que você deve concordar com o que esta escrito, afinal, o modo de trabalhar é algo particular.
Espero que você ache este post útil.

Desligue o computador e pegue uma folha

Eu não estou falando de fazer esboços ou wireframing detalhados. Antes de chegar lá é preciso debater e escrever suas ideias.
Acho que muitas vezes vêm ideias mais facilmente quando se trabalha em um projeto pessoal do que em um site para um cliente, principalmente porque o processo de decisão é simplificado. Para você, ou é sim ou é não. Ponto final.
Mas não importa o projeto, há algumas perguntas que você deve levar em consideração:

  • Sobre o que é o projeto?
  • É um site pessoal ou um site de negócios?
  • Quando você planeja lançá-lo? Defina um prazo.
  • Quem é o público-alvo?
  • Quanto de tráfego você está esperando?
  • Com que rapidez este site poderá crescer? Defina um ponto máximo.
  • Será um blog? Um fórum? Um site estático? Dinâmico?
  • Existe conteúdo pronto para o site? É um redesign de um site já existente?
  • Você vai querer postar vídeos, áudios, outros arquivos de mídia?
  • Você pretende rentabilizar o site? Como? Com anúncios, venda de produtos?

A lista poderia continuar e continuar, mas você começa pelo básico.

Organizar, Estruturar e planejar com antecedência

Agora que você tem uma ideia melhor de onde você quer chegar, é hora de começar a organizar e a planejar os próximos passos.
Todo mundo trabalha de forma diferente, mas acho que todos podemos concordar que se você começar a procurar inspiração, ou começar a pedir feedback apenas dois dias antes da data de entrega do job, você está lascado. Então vamos criar um plano!
Nesse ponto, pegaremos uma agenda e criaremos um cronograma aproximado. Vou estabelecer um prazo e depois ir para trás a partir daí. É claro que você não deve fixar prazos muito apertados, entre as etapas você poderá acrescentar um ou dois dias para relaxar e pensar em outros projetos. Desta forma, talvez você até encontre detalhes que até então não eram visíveis.
Devemos anotar tudo o que pensamos que poderá ser importante para o site. Se você puder, anote quanto tempo cada tarefa deve tomar.
Esta lista inclui as ferramentas que você deseja utilizar. Pense também em alguns esquemas de cores, opções de fonte,  layout e outras coisas que podemos vir a utilizar. Devemos escrever tanta informação quanto possível.

Você se esqueceu de alguma coisa?

Agora, eu tenho certeza que neste ponto muitas pessoas querem simplesmente abrir o Photoshop e começar a desenhar. Mas acredito que ainda há uma tonelada de material que precisa ser feito antes disso.
Você não acha que agora seria um bom momento para pedir a opnião de algumas pessoas?
Então, você poderia pedir feedback mais cedo no process!. É bom você estar preparado para o que as pessoas vão atirar em você. É por isso que eu prefiro fazer um plano mais detalhado antes de começar. Desta forma, eu estou pronto para responder a perguntas ou objeções que as pessoas podem ter.
Não precisa consultar muita gente – 4 ou 5 pessoas geralmente é o suficiente. É claro que não se deve pedir aos seus parentes ou amigos próximos, provavelmente você terá opiniões tendenciosas.
Não adianta nada você pedir a opnião das pessoas e não levá-las em consideração, então, aconselho a não confiar muito em sua memória e a anotar as sugestões que foram dadas.
Neste ponto já estamos chegando a algum lugar!

Ahh! Então você precisa de inspiração?

Ok, então agora você deve ter uma boa ideia de onde você está indo e o que precisa ser feito. Apenas se certifique de revisitar a sua “folha de ideias” e o seu plano detalhado antes de começar a procurar inspiração.
Temos uma porrada de galerias CSS na web e eu visito um monte deles regularmente. Isso nos mantém atualizados sobre as tecnologias que estão sendo utilizadas no mercado, mas nada impede que você crie inovações. Analisaremos projetos de websites, galerias e outros. Depois de horas verificando um conteúdo completamente alheio, a inspiração vai vir até você.
Quando isso acontecer chegou a hora de sentar, começar a desenhar e trabalhar em alguns esboços. Vamos para a próxima etapa.

Desenho e wireframe

Há algumas ferramentas de wireframing grandes no mercado, algumas são livres, algumas são pagas, mas eu não uso nenhuma delas ainda. Em vez disso pegue uma folha e uma caneta, esta parte é extremamente importante. É a primeira vez que realmente colocaremos as ideias no papel visualmente. Agora poderemos ver e imaginar como o resultado final “pode” parecer.
Vou começar com alguns esboços de logotipos e layouts de site e tentar integrar praticamente tudo o que eu tinha escrito na minha ‘Folha de ideias “. Então é sempre uma boa ideia criar diferentes versões e variações do mesmo projeto e também tentar coisas completamente diferentes.
Assim que eu tiver 5 ou 6 versões, geralmente deixamos isso descansar por um dia ou dois. Quando olharmos para o projeto novamente e estarmos satisfeitos com o que fizemos, saberemos então que poderemos prosseguir com aquela ideia.
Não há nenhum segredo, você só precisa pegar uma caneta e papel e começar a desenhar. Provavelmente seus desenhos não serão muito atraentes no início, mas você fica melhor quanto mais você fizer isso. Você não nasceu com habilidades no Photoshop, é algo que você aprendeu. Mesma coisa com o desenho.

Abra o Photoshop (ou o seu software favorito)

Acho que esta é a parte fácil. Eu sei que alguns não consideram tão fácil, mas acredite, é muito mais fácil criar um site (usando qualquer software / app) quando você sabe onde quer chegar do que tentar inventar do nada algum produto.
Photoshop, Fireworks e Illustrator são simplesmente ferramentas para ajudar você a começar o trabalho feito. Eles são “inúteis” se você não tem um plano e uma ideia muito clara do que precisa ser feito e do que o seu projeto precisa alcançar.

Refine , peça feedback e depois deixe de lado

Essa é a parte mais difícil: deixe seu projeto descançar.
As vezes ficar muito animado com um projeto nos faz começar a cortar imagens e a fazer CSS imediatamente. Dessa forma, normalmente acabamos trabalhando toda a noite em cima de algo que percebemos no final não está bom o design.
Antes de iniciar a codificação, você deve sempre deixar o seu design de lado um pouco. Quer se trate de dois dias ou uma semana, não importa, é claro que essa folguinha  deve ser calculada no seu prazo. Não olhe para seu projeto e tente não pensar sobre isso. Então, após algum tempo, quando você estiver pronto, abra-o novamente, pegue a sua “folha de ideias” e verifique se o projeto está de acordo com o que você tinha planejado.
Com certeza você ainda terá algumas dúvidas e sugestões, mas deixe quieto por enquanto, mostre seu projeto a outras pessoas. Após mais uma análise sobre a acessibilidade e funcionalidade chega a hora dos ajustes finais. Mais uma vez verifique seu projeto, altere o que for necessário e tenha certeza de que fez um bom trabalho.

Sua vez de falar

Para quem quiser acrescentar algo os comentários estão abertos!
Post original em spyrestudios.com

Respostas de 2

  1. Já fazia isso antes de ler esse artigo e gosto muito o trabalho fica muito mais criativo e rápido, mais ainda tem clientes que querem ir fazendo do zero sentado do seu lado enquanto eu programa e crio as pressas, dá pra acreditar o que agente faz para não perder o cliente. hihihi

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

19 − cinco =