Com a invenção do CSS3, um web designer deve usar o Photoshop?


13

Vejo que muitos designers criam belos trabalhos de web design no Photoshop, mas agora com a chegada do CSS3, quando querem mudar isso para HTML e CSS, eles simplesmente começam do zero e criam algo em torno de 80% do design final usando CSS3.

Por exemplo, eles usam raio de borda, opacidade, gradiente de fundo, sombra de caixa e sombra de texto e outras regras CSS3 para obter o que criaram no Photoshop. Muitas vezes, eles importam apenas uma imagem do Photoshop, que é mais como um pincel ou um logotipo ou algo assim.

Minha pergunta é: os web designers ainda devem usar o Photoshop para criar algo, dos quais apenas 20% seriam úteis para eles?

Um web designer pode criar todo o design diretamente em HTML e CSS sem se preocupar em adicionar outra camada intermediária da criação de um design no Photoshop e simplesmente criar os elementos restantes lá?


Projetar a interface do site versus projetar a aparência são dois tópicos diferentes. O Photoshop é uma terrível ferramenta de armação de arame; no entanto, produtos como o MockFlow são uma ferramenta visual terrível. 99% dos meus clientes NÃO PODEM interpretar com precisão uma armação de arame sobre como um efeito de sombra ou esquema de cores funcionará em conjunto (ou inúmeras outras situações visuais dependentes).
Dawson

Deve ser um bate-papo ou pelo menos meta. Não tem uma resposta finita.
b01

Respostas:


17

Tenho que discordar de todos. O Photoshop não é uma ferramenta para projetar um site. É uma ferramenta para desenhar um site. O site ainda deve ser projetado no meio em que está - que tende a ser CSS, HTML e JS.

Isso não significa que você não usa o Photoshop. Mas você certamente não precisa.

Eu sou um grande fã de não sempre mostrando projetos web site no photoshop para clientes. Não é o meio em que o site ficará. As composições do Photoshop não oferecem capacidade de comunicar interação, diferenças de dispositivo, idiossincrasias do navegador, clicabilidade, capacidade de resposta etc.

É verdade que na maioria das vezes você ainda precisa mostrar modelos de JPG. Bem. Use o Photoshop para isso. Mas não pegue o arquivo PSD, corte-o em um site. Isso fazia sentido em 1999. Hoje não há muito. Em vez disso, pegue esse PSD e use-o como um guia. É assim que o site deve parecer, mas leve em consideração o fato de ele estar sendo construído em CSS / HTML / JS e acomodar conforme necessário.

Então, para responder à pergunta:

Um web designer pode criar todo o design diretamente em HTML e CSS sem se preocupar em adicionar outra camada intermediária da criação de um design no Photoshop e simplesmente criar os elementos restantes lá?

Sim. Pode-se certamente fazer isso. Eu já vi isso feito em paralelo com os designers do PSD. O maior problema com a abordagem do PSD é quando você está trabalhando em uma equipe ágil. Arquivos pesados ​​usados ​​para documentação (como o PhotoShop) tornam-se um fardo bastante grande para o processo Agile e acabam adicionando mais problemas do que resolvem. Temos a tendência de trabalhar ao contrário ... esboçamos no PS, conforme necessário, e depois projetamos e construímos em HTML / CSS / JS. Quando precisarmos fazer atualizações visuais rápidas para as reuniões, capturaremos a marcação da camada de apresentação de trabalho, aplicaremos no PhotoShop e ajustaremos rapidamente.


Estou com você no DA01. +1.
Saeed Neamati

1
+1 em ótimo artigo (ok, talvez não seja um artigo), mas você resumiu bem! Eu concordo totalmente com tudo o que você disse. Pessoalmente, faço questão de fornecer aos meus clientes modelos de HTML e CSS ao vivo com funcionalidade completa de design para que eles possam "experimentar" o design!
Web_Designer 11/09/11

2
+1 para "captura de tela da marcação da camada de apresentação de trabalho". Até que eu li esta resposta, eu estava pensando em dizer algo como isso em minha própria resposta, mas eu não tenho muito a acrescentar, por isso eu upvote esta vez ...
Aᵂᴱ

+1 Comecei a fazer a maior parte do meu trabalho de design no navegador usando css3 por ano e raramente abri mais o Photoshop.
31411 Chris_O

1
+1! O Photoshop é principalmente um programa de manipulação de bitmap. Para código leve e bem controlado, não há maneira melhor do que o html e o css diretos. Sempre haverá coisas que precisam mudar do PS para a Web, e a meu ver; O PS adiciona apenas uma camada complicada para o cliente.
benteh

7

** EDIT **

Novo cliente?

Absolutamente - Se você está lançando um design para um NOVO cliente / site. Os leigos geralmente têm dificuldade em ver o que está em sua (minha) cabeça. Wireframes, desenhos, etc. nem sempre cortam - arranhe - eles não cortam. Eu ouço mais: "Eu pensei que isso faria o X" dos clientes quando tudo o que eles têm é um WF ou um esboço do que eu quando eles recebem uma maquete com seu logotipo, fotos, fontes corporativas e uma interface do usuário.

Qualquer outro cenário:

Talvez não - se você pode usar HTML / CSS / JS existente que atenda aos requisitos do trabalho ou estiver editando o conteúdo de um cliente existente, será melhor trabalhar apenas no código. Caso contrário, você provavelmente desperdiçará uma quantidade bruta de tempo no Photoshop para obter muito pouco retorno. Existem casos (como o DAO1 mencionado) em que uma captura de tela e ajustes via Photoshop podem realmente acelerar um processo de aprovação, ou desenvolver uma idéia, ou três.

** fim **

Eu digo sim -

É muito mais fácil vender seus projetos (e muito mais rápido criar composições) com um visual - mesmo que seja simplificado. É aí que o PS é mais útil para meus trabalhos.

Também incorporo uma camada com um sistema de grade, para que eu possa ver como as coisas estão dispostas e arrastá-las rapidamente para onde eu precisar. Novamente, isso ajuda com comps e alterações solicitadas pelo cliente.

Se você mantiver uma biblioteca do Photoshop dos seus elementos mais usados: caixas de entrada de cantos arredondados com base em vetor, sua (s) grade (s), caixa "logo vai aqui" ... tudo em camadas de um único arquivo ou vários arquivos (sua escolha) - você poderá criar páginas iniciais e internas em uma fração do tempo que leva para codificá-las.

Manter um arquivo CSS comum (com configurações populares) também ajudará na hora de codificar, mas não vejo o valor de eliminar o PS do fluxo de trabalho - independentemente de quão robusto o CSS se torne.


"em uma fração do tempo necessário para codificá-los", que realmente depende de várias coisas - incluindo o conjunto de habilidades do designer. Acho que geralmente é mais rápido fazer alterações / ajustes do cliente diretamente em CSS / HTML / JS do que voltar ao Photoshop. Mas isso depende de muitos fatores.
DA01 5/09/11

DA01 - absolutamente. Meu fluxo de trabalho muda à medida que o projeto amadurece. Após o lançamento, os PSDs não são tocados.
Dawson

3

Você pode garantir que 100% dos usuários tenham navegadores que verão seu site exatamente da maneira que você (ou mais importante, o cliente) pretende que seja visto? Não? Então qual porcentagem? 90%? 80%?

Você pode garantir que ela se degrada bem, de modo que a versão alternativa vista pelos 10% restantes (20%? 40%?) Seja aceitável?

Se um ou ambos os problemas forem um problema, você precisará de algum Photoshop.


Desculpe; por que é que? Pode explicar o que quer dizer?
benteh

@oblet Por favor, seja específico em sua pergunta. Explicar o quê?
Lauren-Reinstate-Monica-Ipsum

Ah, desculpe; Fiquei me perguntando por que você diz que precisa de algum PS por falta de consistência do navegador? De alguma forma, não faz sentido para mim.
benteh 23/11

@boblet O que quero dizer é que, com alguns efeitos (por exemplo, cantos arredondados), você pode criá-lo em CSS ou Photoshop. Mas navegadores mais antigos não conseguem lidar com cantos arredondados em CSS; eles saem como cantos regulares da caixa. Portanto, se o canto redondo é realmente importante, você deve usar o Photoshop para criá-lo como um gráfico, para que todos os navegadores possam vê-lo.
Lauren-Reinstate-Monica-Ipsum

Aha! Isso faz um pouco mais de sentido. Vejo agora, porém, que este é um post antigo, e hoje em dia css cantos arredondados, sombras etc. não são mais um problema. Eu estava preocupado apenas com a prática de criar modelos delicados no PS e, em seguida, encontrar problemas que traduzissem isso em código sensato. Muitas vezes, é difícil para os clientes engolir isso; como eles geralmente não entendem a ponte que precisa fechar a lacuna entre bitmap e código. Obrigado por explicar.
benteh

2

Coisas para pensar:

  • Muito é necessário colocar esses designs sofisticados na web. Pelo menos para os mais complexos. O Photoshop ajuda a ver o resultado final mais rápido.

  • Para um designer em seu trabalho, fazer uma maquete no Photoshop geralmente é mais rápido, justificado, pois você não passará o dia todo trabalhando em html e CSS3.

  • Como você mencionou, eles podem fazer 80% disso no CSS3, mas depois precisarão do Photoshop de alguma forma.

  • Eu diria que você renuncia a fazer uma maquete no Photoshop se você é o designer e o desenvolvedor e isso economizaria tempo; caso contrário, sempre faça uma maquete no Photoshop.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.