O blog 37signals recentemente colocou no ar um artigo entitulado “Por que pulamos o Photoshop“. Em resumo, eles não utilizam do Photoshop para fazer uma simulação (“mockup”) quando estão desenvolvendo uma interface gráfica – site, aplicativo, etc. Passam de um rascunho rápido no papel diretamente para HTML/CSS. Entenda por que:

Publicidade


1) Você não pode clicar em uma simulação do Photoshop.

Este é provavelmente a razão número um pelo qual pulamos as simulações: eles não são reais. No papel também não fica real, mas não é o que esperamos quando desenhamos no papel. Uma simulação no Photoshop está na nossa tela. Se está na nossa tela, deve funcionar. Você não pode clicar em menus numa simulação de Photoshop, não pode clicar em um link, não pode digitar texto em um campo de formulário. Por outro lado, HTML/CSS é uma experiência real.

2) O Photoshop lhe dá muitas ferramentas que focam no detalhe.

Quando você usa ele, não pode deixar de notar os detalhes. O alinhamento, as cores, as formas exatas, os pequenos detalhes que eventualmente vão ser importantes, porém não agora. O início é sobre a substância, não os detalhes.

3) Texto no Photoshop não é como texto na web.

Quando você está vendo um texto na simulação em Photoshop, não é fácil de mudar um texto, fonte, cor sem ter que voltar ao programa, editar tudo, exportar como gif/png/jpg, etc. Ainda mais, tipografia no Photoshop nunca é parecida com o equivalente na web. Não parece ter o mesmo tamanho, não parece expandir da mesma maneira.

4) Photoshop coloca o foco em produção, não produtividade.

HTML/CSS permite que você seja produtivo. O software é feito para construir algo para se olhar, não para construir algo que se pode usar. Quando você passa tempo demais preocupando-se com como vai ficar o visual, você gasta tempo demais na produção. HTML/CSS permite que você seja produtivo.

5) Fazer no Photoshop é fazer o trabalho em dobro.

Ok, então você passou 3 dias fazendo a simulação no Photoshop. E agora? Agora é necessário fazer tudo de novo em HTML/CSS. Tempo jogado fora. Apenas construa o HTML/CSS e gaste aquele tempo extra fazendo modificações, não re-desenvolvendo. Se você não for rápido o suficiente no desenvolvimento HTML/CSS, então tome um tempo para aprender a criar HTML/CSS de forma mais rápida. É tempo bem gasto.

6) Photoshop não é colaborativo.

HTML/CSS permite você fazer uma alteração, salvar e dar um reload. Alterações que demoram segundos. Nada de selecionar uma ferramenta, mudar alguns itens de lugar manualmente, salvar, exportar, dar um upload, enviar o novo arquivo às pessoas, etc. HTML/CSS é feito para uma rápida prototipagem, Photoshop não.

7) Photoshop é estranho.

Você talvez saiba se virar após trabalhar nesse programa por 10 anos, mas ainda acho estranho conseguir fazer as coisas mais simples nele, Trabalhando com um lápis parece ser mais natural do que sempre ter que recorrer á caixa de ferramentas vez após outra. Um lápis pode desenhar qualquer coisa, mas no Photoshop você precisa usar a ferramenta de escrita, o brush, o pen tool, etc.

Nada disto é para dizer que achamos que o Photoshop é ruim ou uma perda de dinheiro ou tempo, mas para nós descobrimos que ir direto ao HTML/CSS permite que criemos uma melhor interatividade e experiência criativa. HTML/CSS é uma realidade que o Photoshop nunca será.

Este foi o texto original, traduzido por mim (Canha). Eu pessoalmente sempre usei o Photoshop para fazer as simulações, os pré-layouts e tudo mais. Mas isso realmente faz você pensar. Vale lembrar que esse texto não é minha visão pessoal sobre o assunto.

E você? Acha que esse artigo está certo? É melhor ir direto ao HTML/CSS em vez de passar pelo Photoshop (ou qualquer software equivalente)?

Fonte do original

Compartilhe
Você também vai gostar de

Deixe seu comentário!


  • http://www.yogodoshi.com/blog Cayo Medeiros aka. yogodoshi

    Engraçado que eu faço justamente isso, vou direto pro HTML/ CSS sem passar pelo Photoshop mas já faço isso depois de saber exatamente o que quero depois de arquitetura de informação e tudo mais.

    Bem interessante o artigo.

    Abração!

  • http://www.kika.ppg.br Kika

    Bom, eu não consigo partir pro CSS semt e ruma layout bem bonitinho ontado antes pra eu ter como referência. Posso até mudar algo na hora que to fazendo o CSS, mas sempre levando em conta o layout que fiz no Photoshop antes.

  • http://perfil.claudiaregina.com Claudia Regina

    Pois é, aí que tá. Tudo depende do projeto que está sendo trabalhado.

    Um layout como o do Digital Paper tem uma parte “csszística” dependente de todos os outros fatores visuais (feitos no Photoshop). Nesse caso pular direto para o CSS/HTML talvez limitasse um pouco a criação.

    Eu não vou dizer que uso o Photoshop para fazer toda a criação do Layout, nem que pulo direto pra diagramação. Sempre tento fazer os dois conforme vem a necessidade. O meu Portfolio, por exemplo: criei um layout no Photoshop, toda o esquema de cores e organização do conteúdo da página principal. As páginas internas foram todas esquematizadas no papel!

    ****

    Mais essencial do que sabermos “qual é o workflow perfeito” é sabermos “qual é o nosso workflow perfeito” :)

    Ótimo artigo, no entanto. Com certeza a pessoa que escreveu deve evitar ao máximo trabalhar com flash rs….

    =*

  • Drikun

    Ué.. pareci papo de programador… (nada contra…)
    Como é que se vai fazer uma interface gráfica na tela c não tem pelo menos uma idéia de como vai ficar?? Além disso, você terá q desenvolver alguns elementos gráficos que não vai conseguir usando somente CSS, vai ter q criar imagens pra isso!! Fica muito mais fácil utilizar o CSS depois de já ter tudo alinhado e exatamente no local onde deve ficar, é so olhar as coordenadas e aplica-las no código :)

    Photoshop da SIM para comentar parte por parte, fatiar parte por parte entre, usar fonte similar do navegador outras facilidades que no artigo nega os recursos…

    Concordo que o photoshop não é a ferramenta mais apropriada, existem outras otimizadas para web, como o Fireworks.

    A ferramenta existe, só saber usá-la!

  • Rafael

    Eu ia falar umas coisas, mas a Claudia já falou tudo por mim. Ótimo artigo (de novo) Canha

  • http://jaderubini.wordpress.com Jader Rubini

    A questão é que a grande maioria dos clientes, quando vêm um protótipo navegável (um “wireframe interativo”, digamos) se assunta e solta logo “Peraí, mas meu site vai ser isso aí?!”

    Na maioria dos casos não dá pra você apresentar protótipos navegáveis para o cliente simplesmente pelo fato de que, em termos gerais, pra nós o que é real é o que está diante de nossos olhos. Somos guiados por representações imagéticas e a elas nos apegamos de tal forma que não conseguimos conceber sem algum esforço que “aquela barrinha em cinza mais escuro ali será um menu com uma imagem bacana”.

  • http://www.digitalpaperweb.com.br Canha

    @Drikun,
    Calma lá!
    Não diz que o site todo precisa ser feito em CSS/HTML – estamos falando apenas da estruturação dele.
    Claro que algumas coisas é necessário fazer no Photoshop (imagens, etc), mas a estrutura é mais rápido no CSS. Eu pessoalmente faço tudo no Photoshop, mas estou tentando mudar. Mas creio que vai pela opinião de cada um também. Não discordo inteiramente de você.

    @Jader,
    Realmente…apresentar para o cliente já é outra história.

    Obrigado a todos pelos comentários ;)

    Abraços

  • Drikun

    Estruturação? mas em estruturação o menu não precisa funcionar né? entre outras coisas… ou seja, muita coisa descrita no artigo não faz sentido.
    Posso estar confundindo as coisas mas acho arriscado mesmo assim :( Mas cada um tem sua maneira de desenvolver.. eu mesmo já fiz uma maquete em flash para simular a interação com a interface poque era muito mais rápido … :)

  • http://www.garotageek.com.br Garota Geek

    Realmente, acho mais fácil inclusive agradar o cliente quando ele pode interagir com o layout do que num jpeg que ele vai ver na tela, se frustrar por tentar clicar e não conseguir, ser obrigado a pensar no “quando você clicar aqui, vai acontecer isso…” faz com que o cliente desanime ou não se encante tanto com a proposta do que se estivesse interagindo com o layout parcialmente pronto.

    *em tempo… quando dou tab nos campos de preenchimento dos comentários sou levada ao topo do site… ;)

  • Rafael Ericson

    meu… photoshop ou paint, bloco de notas ou dreamwaver, não importa qual ferramenta usada…
    o que vale é o resultado final… ferramentas são ferramentas, que servem meramente pra facilitar as coisas, seja o layout, a programação e afins…
    a capacidade de um profissional não se limita ao “programinha” mas sim a sua capacidade, bom senso, e metodologia de trabalho…

    quanto a estrutura de um site… essa vai além do html/css / photoshop… é algo que é necessário conhecimento de usabilidade, conteúdo e afins, essa pode ser definida no word, o velho papel e lápis… eu acredito que todo site (se houver tempo suficiente) deveria passar pelo papel antes, e com tudo planejado é mandar a mão na massa

  • Heitor Althmann

    Isso ta parecendo mais “dor de corno”. rs
    Este cara tem algum ressentimento com o photoshop.

    Sem dúvidas, NÃO CONVENCEU! :)

    Abraço

  • http://www.commodesign.com Mauricio Campos

    Concordo com o Heitor. Concerteza este cara tem algum recalque do Photoshop. Não tem como você fazer um site sem um layout. Este layout pode ser no Photoshop, no Illustrator ou até no Corel, para isso ele serve. Mas criar um layout direto no CSS e Html isso com certeza vai levar muito mais tempo do que se você fize-se o layout no photoshop e refize-se tudo em html. Ou na melhor das iposteses vai ser um site todo quadrado como os que tinham a anos atraz.

  • Davidson

    Em nossa area temos que nos atualizar, ficar presos em longas horas de programação quando uma simpels ferramenta CASE pode nos auxiliar e ainda melhorar a qualidade do nosso produto não faz sentido. Mas tambem não podemos despensar algumas horas de estudo de alguma linguagem, pois usar uma ferramenta e não saber o que a mesma esta fazendo é um pouco “feio”. Enfim, acho que o autor pegou um pouco pesado dando razão aos WYSIWYGzeiros.

  • http://www.brunobenn.com Bruno Benn

    Iaaaaaa…sem photoshop???? como assim? rsrs
    1- Estruturar as ideias no papel é fundamental (fato), mas e depois? Como vou saber se aquela cor que estou em mente realmente vai ficar boa?

    2- Como saber se vou conseguir fazer tudo como imaginei e coloquei no papel e ficar tudo 100%?

    3 – E o cliente como fica? confia em você apenas com o papel? e a defesa verbal de que vai ficar bom o projeto? (isso nem você sabe já que está só no papel rsrs)

    4 – E aquele efeito que você nem sonhava em por quando fez no papel e no photoshop saiu perfeito?

    5 – E quem não tem habilidade com o lápis?

    6 – E os patterns? (quando pensados no projeto) fazer um a um rsrs

    7 – Vai voltar as aulas de geometria e ficar usando a régua para medir tudo certinho e montar no HTML/CSS?

    Bom, acho que o uso do photoshop ou qualquer outro programa semelhante seja de FATO necessário a qualquer designer, desenvolvedor web, web design, micreiros, os famosos “sobrinhos” rsrs (como queiram). na minha opinião esse é o único post do blog que não concordo e espero que seja o ultimo rsrs.

    Abraço a todos

  • http://design.blog.br Canha

    Leia o artigo de novo ;)

  • Bruno

    Muito interessante o post. Dá para pensar, testar, criticar, e avaliar a postura.