Existe uma vantagem em fazer uma maquete de imagem completa em vez de começar a escrever o HTML / CSS?

No passado, muitas empresas e web designers tinham um fluxo de trabalho composto de duas ou três partes, no mínimo - design, marcação, back-end. Eles estão generalizando e as linhas podem ficar um pouco borradas ... mas tenho certeza de que você entendeu minha essência.

Muitas vezes, o web designer era "apenas visual" e seria responsável por construir uma maquete muito detalhada em software de edição de imagem, como Photoshop ou Fireworks. As maquetes mostrariam todos os aspectos possíveis de uma página da Web, desde opções de cores e tipos, até planos de fundo, ícones, fotos e outras imagens a serem usadas. Mas o "designer" nunca se preocupou com a construção e implementação reais. Eles estavam focados apenas na aparência.

Depois que o design foi aprovado (revisando esses arquivos de imagem), foi realizado o estágio dois - a transição do (s) arquivo (s) de imagem para HTML / CSS ativo.

• Em um ambiente de assento único ou freelancer, o web designer pode ter usado fatias e exportado para HTML por meio de algumas opções internas de aplicativos. Em raras ocasiões, o designer pode criar quadros de página HTML / CSS básicos.

• Em alguns ambientes corporativos, esses modelos permaneceriam na forma de um arquivo de imagem em camadas (.psd, .png [para Fireworks]) para o web designer e o designer nunca se preocuparia em implementar qualquer marcação ou código. O "designer" nunca teve que se preocupar com a construção de HTML ou CSS para implementar essa maquete de imagem que eles criaram. Os arquivos de imagem foram / são entregues a um "desenvolvedor" que é responsável pela construção de HTML / CSS que corresponde ao arquivo de imagem.

Eu imagino que alguns ainda funcionam muito assim. No entanto, com os avanços nas linguagens de marcação, como CSS3 e melhorias no suporte ao navegador - em muitos casos, o tempo gasto na construção cuidadosa de uma representação raster de uma página da Web completa pode ser bastante inútil em muitos casos.

Com a marcação atual, é muito fácil implementar muitas necessidades de design da web diretamente via HTML / CSS e o uso do aplicativo de imagem é limitado à geração de pequenos recursos de imagem ou fotografias que possam ser necessárias. (Bibliotecas e / ou modelos como o Bootstrap aprimoraram ainda mais essa noção.)

Em meu próprio fluxo de trabalho que eu nomeadamente movida longe de maquetes de página inteira a menos que sejam especificamente solicitado. Faço isso para melhorar a velocidade do design e garantir que o que é aprovado esteja próximo do que será finalmente renderizado nos navegadores. De fato, eu não criei uma maquete de página inteira em vários anos. Mas estou ciente de que ainda existem fluxos de trabalho usando esse método.

Existe algum benefício real na construção de modelos de página inteira no aplicativo de edição de imagens antes de mergulhar diretamente no HTML / CSS para a construção do design?

O benefício da construção de modelos de página inteira é a divisão do trabalho.

Em empresas maiores, que possuem um designer e um desenvolvedor (front-end), o trabalho do designer é projetar e o trabalho do desenvolvedor é escrever código .

Ter essa divisão permite que o designer gaste todo o seu tempo trabalhando na aparência, na interface e na interface do site e não precisa saber nada sobre como ele é criado. Eles podem criar um design de qualidade superior e refletir sobre as decisões por mais tempo, precisamente porque não estão trabalhando para obter o código para fazer o que querem ao mesmo tempo.

Ele também permite que o desenvolvedor escreva mais código, sem ter que pensar em como ele ficará, incluindo os pequenos detalhes e os estados variáveis. Eles implementam o design da melhor maneira possível no tempo determinado e podem passar para outro projeto.

Se o designer também é o desenvolvedor, acho que a maioria das pessoas está começando a ficar do seu lado porque cria um produto mais áspero e interage rapidamente para testar as coisas. Isso permite que as idéias sejam testadas rapidamente, em vez de criar um documento de photoshop perfeito em pixels.

No entanto, o design áspero e iterativo sem código também é uma abordagem válida e incrivelmente útil, especialmente para layouts e fluxo de trabalho. As linguagens de marcação e as novas tecnologias não inventaram o trabalho rápido com idéias difíceis :)

Vou escolher Guffa com esta resposta. Para deixar claro, não estou tentando destacar Guffa, mas os pontos com marcadores são muito comuns que ouvi. Eu gostaria de oferecer alguns contrapontos também. Não estou dizendo que Guffa está errado e estou certo. Estou apenas oferecendo um contraponto.

1. A parte criativa do processo de design sofre se o tempo gasto tentando descobrir como fazer coisas diferentes em HTML e CSS.

Isso é verdade se não considerarmos o código igualmente como criativo. Photoshop e HTML / CSS / JS são meios para um artista trabalhar. Assim como uma pintura é tão criativa quanto carvão, o Photoshop também pode ser tão criativo quanto um HTML / CSS / JS.

E o grande benefício de trabalhar diretamente em HTML / CSS / JS é a multidimensionalidade dele. No final das contas, o Photoshop é uma tela plana. HTML / CSS / JS é uma tela dinâmica com fluidez, interação, animação etc.

Bottom line, eu diria que o código é o meio mais criativo neste caso.

2. Quando os designers e codificadores são pessoas diferentes, mesmo que os designers sejam muito bons em HTML e CSS, eles raramente são realmente bons em codificação. O resultado seria (em vários graus) código ineficiente, inchado e difícil de manter.

Infelizmente, o contraponto a isso é algo que sempre acontece: a maioria dos desenvolvedores que trabalham em funções dedicadas trabalha em organizações maiores (onde funções dedicadas são mais a norma) e, devido à falta de conhecimento interdisciplinar ( e muitas vezes uma total falta de código da camada de apresentação) tornam alguns dos mais inchados um código de front-end difícil de manter que eu já vi.

A propósito, eu não consideraria as habilidades de design visual de alguém uma indicação de suas habilidades de codificação. Eu daria um passo adiante e argumentaria que um generalista talentoso que conhece design e codificação - mesmo que não seja o melhor designer ou o melhor codificador, muitas vezes pode criar um produto geral melhor do que a equipe altamente segregada, simplesmente devido ao fato de que que eles podem ver a imagem maior à medida que criam. Muito menos se perde na tradução.

3. Se você começar a escrever o código antes de ter uma visão clara da aparência do design, faça escolhas desinformadas sobre como construir o código. O risco é que ele piore o código e limite as possibilidades de design.

Mas projetar em código não significa que esse é o seu código de produção. Trabalhei em projetos em que a maior parte do código que criamos era exclusivamente para o design e depois para a criação de protótipos. Depois de concluído, faríamos uma reescrita limpa. Isso teve o benefício adicional de termos encontrado muitas 'pegadinhas' na primeira rodada de codificação.

4. O código HTML e CSS pode mudar bastante com pequenas alterações no design, o que tornaria o processo de design mais estático. Você corre o risco de se limitar apenas às alterações fáceis de fazer no código.

O contra-argumento é que o designer está se limitando apenas às alterações fáceis de fazer no Photoshop. De qualquer maneira, não é um argumento muito bom.

A única razão para não fazer uma maquete do Photoshop primeiro é se o designer não entender as limitações do código. Você nunca quer dar ao cliente uma composição de algo que ele não pode ter na final.

Desde que o PSD represente algo que possa ser bastante replicado em CSS / HTML (dadas as limitações entre navegadores e entre mídias), eu o faria no Photoshop (ou no InDesign - conheço alguns designers que compõem isso). É mais rápido e muito mais fácil manipular imagens. Zombar de CSS para mim seria uma codificação antes da codificação, se isso fizer sentido.

Há vários motivos para manter o elemento de design separado do elemento de geração de código, por exemplo:

• A parte criativa do processo de design sofre se o tempo gasto tentando descobrir como fazer coisas diferentes em HTML e CSS.

• Quando os designers e codificadores são pessoas diferentes, mesmo que os designers sejam muito bons em HTML e CSS, eles raramente são realmente bons em codificação. O resultado seria (em vários graus) código ineficiente, inchado e difícil de manter.

• Se você começar a escrever o código antes de ter uma visão clara da aparência do design, faça escolhas desinformadas sobre como construir o código. O risco é que ele piore o código e limite as possibilidades de design.

• O código HTML e CSS pode mudar bastante com pequenas alterações no design, o que tornaria o processo de design mais estático. Você corre o risco de se limitar apenas às alterações fáceis de fazer no código.