Tags: Desenvolvimento, Design, Produtividade, Web 
Deixe seu comentário!
Criação de um layout: Photoshop ou HTML?
Atigamente, nos layouts em que desenvolvia, eu sempre pensava no estilo da página “mentalmente” e partia direto pro HTML. Ia montando a página passo-a-passo: do cabeçalho ao rodapé.
Sempre soube que vários designers preferem abrir o Photoshop, desenvolver toda a identidade visual do site, e depois, aí sim, converter tudo pro HTML. Aliás, fiz isso pela primeira vez exatamente com o layout que está atualmente aqui no blog.
Mockup do atual layout no Photoshop
Gostei bastante do resultado final e desse método de desenvolvimento, mas há um tempinho atrás me deparei com um post do blog da 37signals: “Why we skip Photoshop?” (“Porque fugimos do Photoshop?”), que me levou a pensar mais sobre esse assunto.
Pra quem não sabe, a 37signals é uma compania que, entre outros produtos, criou o Basecamp e lançou o Ruby On Rails. Ou seja, o conhecimento deles com relação à web é gigantesco e muito válido.
O artigo em questão, cita alguns tópicos sobre o porque da 37signals não adotar o Photoshop no desenvolvimento inicial do layout. Entre os pontos citados, destaco alguns:
- Você não pode clicar em um mockup feito no Photoshop, eles não são reais. E se está na tela, deve funcionar.
- Quando você muda alguma coisa em um mockup, precisa exportar para gif/jpg/png… e enviar para o cliente. Utilizando o HTML você altera uma simples linha no CSS e pede ao cliente que atualize a página.
- Photoshop não é uma ferramenta de colaboração, isso recai no item anterior. Enquanto você precisa mudar algumas linhas de código no HTML para fazer uma simples mudança, no Photoshop você provavelmente terá que enfrentar várias ferramentas.
Na minha opinião, o ponto mais crítico citado por eles tem forte relação com a produtividade, o Photoshop não oferece uma flexibilidade na hora de alterar o “mockup” feito. E pensando bem, isso é verdade.
Nos trabalhos que desenvolvi anteriormente, usei o conceito do “refresh”: atualizo o CSS/HTML e a pessoa simplesmente recarrega a página. Funcionou muito bem.
No estágio aonde trabalho, o Photoshop no estágio inicial não funcionou como deveria. Isso me leva a pensar que cada caso é um caso, que precisa ser analisado cuidadosamente.
De qualquer maneira, é sempre necessário um estudo inicial, algo que lhe diga para qual caminho o trabalho deve seguir. Pode ser um esboço, sites de referências ou qualquer outro material extra, mas ele precisa existir.
O uso, ou não, do Photoshop precisa ser pensado: ele pode trazer uma maior produtividade. Ou não.
Raphael Morais
Parece que usar o Photoshop só é útil quando você precisa apenas mostrar algo para si mesmo.
Se mais gente vai colocar a mão não funciona.
Leandro Alonso
Concordo com você Raphael.
Na hora de criar todos os componentes do layout o Photoshop ajuda mais que ir direto pro HTML/CSS (na maioria dos casos), mas em projetos conjuntos isso nem sempre é a melhor opção.
Tiago Celestino
Realmente seria uma melhor opção mostrar como ficaria na versão HTML/CSS. O problema maior, pelo menos nas agências digitais é o tempo que isso pode acontecer. Raramente, o projeto tem um prazo longo e a equipe de desenvolvimento tem o tempo necessário para fazer tais produções, então, sempre deixando qualquer tipo de alteração para o final do projeto.
Newton Calegari
Esse é um assunto que gera bastante controversa. Uns preferem fazer direto no HTML/CSS, outro preferem “desenhar” a página toda no Photoshop.
Um amigo está fazendo um theme para WordPress no Photoshop, e depois exportará para HTML/CSS.
Eu, geralmente, quando começo algo, já vou no HTML/CSS, mais pela praticidade para atualizar, etc, porém, me disseram que é bom usar o Photoshop para colocar a idéia inicial na tela.
Bom, vou ver se no próximo trabalho, utilizo o Photoshop para desenhar o layout, talvez eu goste.
Abraços,
Newton Calegari
Leandro Alonso
Usar o Photoshop pra colocar a idéia inicial na tela funcionou muito bem pra mim, Newton!
E o processo de passar tudo pro HTML/CSS também foi bastante rápido, como já tinha tudo pronto, pensar na estrutura da página fica muito mais fácil.
Roberto
E ai Alonso, olha eu aqui…
Bom, antes de mais nada, parabéns pelo blog. E agora falando a respeito do post ai, é o seguinte, eu já venho trabalhando com photoshop/fireworks para desenvolver a estruturas de sites a algum tempo, e isso sempre me ajudou a ser mais produtivo e desenvolver layouts mais “legais”.
Mas concerteza, em uso corporativo a produtividade cai bastante.
No mais, parabéns novamente pelo blog e no final das contas eu acho q não falei coisa com coisa…hehehe
Abração…
Boas férias
Maikel Neris
Eu uso o Photoshop para desenhar desde simples wireframes até ao mockup completo: é mais rápido do que fazer o xhtml/css, e você não sabe se o cliente vai querer aquela versão.
Pra quem é freelance, recursos de colaboração no software são desenecessários. E não creio que seja tão difícil fazer alguma alteração.
E posso criar várias “páginas”, armazenando em camadas e em folders.
Abraços!
Thássius V'
Em compensação, tem profissionais que são coders. Ou seja, cobram determinado valor apenas para escrever o código de um layout que só existe no Photoshop.
Também já vi designer vendendo o design, mas sem incluir o código. Ou seja, o comprador tem a imagem mas precisa codificar – ou contratar alguém que o faça.
rodrigo sousa
oi cara eu gostaria de saber como e q se faz isso ai de DEIXE SEU COMENTARIO eu sei q nao tem muita coisa a ver com o assunto mas tou tentando descobri como e q se faz isso vc poderia me informar um tutorial obrigado
birsa
mais eu queria saber, na hora de salvar, qual o formato? e depois como eu converto pra HTML ou XML ? por favor me ajuda
brisa
poderia me mandar um email com a resposta da minha duvida? eu gradeceria, ou um tutorial passo a passo
keynes
Gostei muito deste post. Bem gostaria de contribuir com minha experiencia.
Eu fazia como voce no inicio, ia direto pro HTML/CSS mas a produtividade disto é muito mas muito mais lento do que ‘desenhar’ o site antes de produzi-lo, e neste ponto voces há de concordar comigo.
Bem, minha opnião é
Desenhar no photoshop (ou outra ferramenta do genero):
Vantagens:
1 – Desenhar é mais rapido;
2 – Neste ponto ja teremos todas imagens que serão usadas no site (logo, fotos…);
3 – Ja temos as dimensões do site;
4 – O cliente pode ver a imagem apertando F5 tambem. Assim como voces sitarão que é feito com o HTML/CSS;
5 – O ‘cliente’ sempre pede alteração, e essas alterações podem ser feitas na frente dele de forma rapida e sem conhecimentos tecnicos (HTML/CSS) so saber arrastar uma image, mudar fonte e cores, ja resolve isto.
Desvantagens:
1 – Não é colaborativo; (não trabalha em equipe)
caso alguem saiba de alguma desvantagem a mais ou vantagem… coloquem ai
Abraços