Os web designers precisam saber como codificar?

Como desenvolvedor web, arquiteto front-end e back-end, trabalho com muitos designers diferentes e às vezes acho frustrante trabalhar com composições de design em que não se pensou em como realizar o design em CSS e HTML básico. Por outro lado, como desenvolvedor, devo produzir código a partir de qualquer design.

Os web designers precisam conhecer técnicas básicas básicas de CSS e HTML? Por que ou por que não isso é importante para um web designer completo?

Algumas reflexões gerais:

• Os desenvolvedores da Web de front-end devem ter habilidade suficiente para codificar qualquer design.
• Os designers da Web devem entender como os usuários realmente irão interagir com o design.
• As lojas de design preferem que os designers projetem e deixem toda a codificação para os desenvolvedores.

Os web designers precisam conhecer técnicas básicas básicas de CSS e HTML?

Sim.

Por que ou por que não isso é importante para um web designer completo?

Eu respondi "sim" porque você usou a palavra básico .

É absolutamente essencial que os designers da Web conheçam técnicas básicas de HTML e CSS, da mesma forma que os arquitetos devem saber algo sobre física e ciência dos materiais, os designers de impressão precisam saber algo sobre o processo de impressão CMYK e os designers de moda devem saber algo sobre tecido.

Se você não conhece nada sobre técnicas de CSS e HTML, não pode se chamar um "web designer". Você é simplesmente um artista ou algo assim.

Comentários sobre seus pensamentos:

Os desenvolvedores da Web de front-end devem ter habilidade suficiente para codificar qualquer design.

Falso. Esta é uma simplificação excessiva. Algumas coisas não se traduzem bem na web. Alguns designs podem desmoronar ou não funcionar em uma determinada plataforma ou tamanho de tela que precisa ser suportado.

Um web designer precisa conhecer as limitações, dependendo dos requisitos de audiência e desempenho. Um designer que conhece CSS e HTML sabe como ajustar o design para que o código subjacente possa ser o mais responsivo e eficiente possível.

Os designers da Web devem entender como os usuários realmente irão interagir com o design.

Você descreveu o UX Design , que é uma disciplina completamente diferente. Embora o Design da experiência do usuário envolva aspectos do Design gráfico, ele realmente tem muito pouco a ver com CSS ou HTML.

Embora bons web designers completos tenham familiaridade com o UX Design, também é comum eles colaborarem com especialistas em UX.

As lojas de design preferem que os designers projetem e deixem toda a codificação para os desenvolvedores.

Isso pode ser parcialmente verdade, mas não totalmente. Um paradigma popular nos sistemas de gerenciamento de conteúdo é o MVC (modelo / visualização / controlador). Muitas lojas de design desejam que os designers tenham alguma familiaridade com a codificação HTML / CSS, para que possam se concentrar na apresentação do conteúdo (a "visualização"), enquanto os desenvolvedores se concentram no modelo / controlador.

Isso não quer dizer que algumas lojas não empregam artistas gráficos, que simplesmente se concentram em elementos gráficos e empurram pixels - mas, na minha opinião, eles não são web designers. Um site grande pode empregar artistas gráficos, designers da Web, designers de UX, desenvolvedores da Web e especialistas em banco de dados que colaboram para produzir um site pronto. Um freelancer que cria sites menores pode se envolver em todas as disciplinas e se autodenominar Web Designer / Desenvolvedor.

Um web designer deve entender como o código funciona e do que ele é capaz, da mesma forma que um designer de impressão entende como será a tinta no papel e como ela pode ser dobrada ou cortada. Qualquer designer deve entender as limitações e os pontos fortes do meio escolhido.

Se um web designer estiver criando esse site deslumbrante, convém que ele aprenda o básico da codificação ou sente-se com um codificador em alguns momentos do processo para verificar se o site de deslumbramento pode ser alcançado. Então, eu diria que um web designer no mínimo precisa saber sobre código.

Acho ilusório dizer "um desenvolvedor pode codificar qualquer coisa", da mesma maneira que você não pode dizer que qualquer coisa que possa ser impressa pode ser reproduzida exatamente na Web usando HTML / CSS.

Lauren, ghoppe e Farray todos falam tranqüilamente, então não vou repetir nada do que eles disseram. Por uma questão de praticidade, deixe-me oferecer outra opinião sobre suas perguntas explícitas e implícitas.

A melhor abordagem para um desenvolvedor é a mesma sobre a qual as impressoras estão trabalhando desde que Gutenberg cortou seu primeiro tipo: insista em que o designer o envolva no projeto desde o início. Deixe claro que você deve estar envolvido na discussão antes que um único pixel atinja a tela.

Quando estou em um projeto de design de impressão que envolve algo incomum, converso com a impressora e o pessoal de encadernação imediatamente. Eles sabem muito mais sobre o ofício deles do que eu, então eu faço o meu negócio envolvê-los desde o início. Infelizmente, os designers iniciantes, especialmente quando acabam de sair da escola e ainda não se familiarizam com o mundo real, às vezes negligenciam esse simples passo e terminam em kimshee profundo sem um colete salva-vidas.

Faça campanha em blogs, fóruns, com clientes e gerentes de projeto, com escolas e grupos de usuários locais e qualquer designer dentro do alcance: "Converse com seu desenvolvedor antes de começar a criar!"

Um desenvolvedor receberá comps de designers que não têm idéia do que estão pedindo, assim como os departamentos de pré-impressão às vezes obtêm obras de arte que não podem ser usadas (e os designers obtêm resumos que apenas um masoquista seguiria). Mas você pode evitar muita frustração e perda de tempo se insistir em um lugar na mesa de planejamento.

Sim e não. É importante saber como o ambiente de destino funciona, mas não é realmente importante que você entenda o código específico necessário para fazer o sistema funcionar dessa maneira. Em outras palavras - eu não me preocuparia com sintaxe específica para criar cantos arredondados em todos os principais mecanismos de navegador, mas consideraria importante que você entenda se é possível criar cantos arredondados em todos os principais navegadores (e quanto código é necessário para fazer isso).

Por exemplo, apenas alguns anos atrás ainda estávamos sobrecarregados com o IE6. Tínhamos um design absolutamente bonito para um aplicativo de intranet corporativa, mas era altamente dependente de sobreposições transparentes. O IE6 podia exibir PNG8s, mas não respeitava o canal alfa no PNG24s. Para usar a opacidade baseada em CSS, eram necessários filtros ActiveX e outros problemas. Os bastidores poderiam ser executados para alcançar o efeito desejado, mas cada bastidor representa um ciclo de desenvolvimento mais longo, maior taxa de erros, manutenção mais difícil etc. Além do custo direto em horas de trabalho no desenvolvimento e manutenção desse projeto (agora problemático), havia também o custo de oportunidade de vincular as horas do desenvolvedor a corrigir uma base de código kludgy em vez de trabalhar na versão N + 1.

Quando nesse tipo de situação, o custo / benefício de cada efeito visual em um design deve ser medido:

• Quão incrível é o efeito visual?
  Ele pode ser substituído por outro visual igualmente impactante que não exija tantos recursos de construção?

• O efeito pode ser reproduzido corretamente no alvo? Se o design original não puder ser recriado com precisão pelo destino, ele precisará ser substituído pela aproximação mais próxima disponível. (Felizmente, isso está se tornando cada vez menos um problema para os web designers.)

• Quanto tempo você tem no orçamento?
  Você pode gastar mais horas de trabalho em construção para alcançar o efeito que deseja? Caso contrário, você pode redesenhar o recurso em menos tempo?

• Quanto da base de código teria que ser refatorada para acomodar seu visual?
  Se Design e Construção estão acontecendo simultaneamente, ou se você está refazendo um aplicativo legado, quão difícil será para os codificadores incorporar seu visual? Não apenas as horas envolvidas para a reescrita, mas as horas potenciais de depuração e manutenção do código recém-alterado.

Existe alguma sobreposição entre os pontos de marcador acima e outros que não estão listados. O ponto é que, mesmo nesta pequena lista, há custos de negócios que devem ser considerados. Você pode avaliar a situação com mais eficiência se tiver uma noção de como o sistema de destino realmente funciona.

Se você entender as limitações de CSS ou HTML antes de criar seu design, poderá criar designs que fluirão pela fase Construção sem problemas. Você também terá certeza de que seu projeto pode ser implementado e o poder de saber o custo aproximado. É sempre útil ter do seu lado.

Na minha experiência (eu sou um codificador, não um designer), não é tanto uma pergunta que o web designer deve saber sobre código. Mas eles devem saber como o trabalho deles está sendo aplicado dentro de um navegador.

O maior problema com designers sem conhecimento suficiente sobre web / navegadores é que eles criam designs que parecem bonitos, mas não funcionam realmente dentro do navegador. Apenas algumas coisas que alguns podem não ter considerado:

• Uso de fontes. Eles usam fontes instaladas com o PhotoShop, que o usuário médio não possui. Ou eles usam fontes Mac, que não existem no Windows / Linux.
• Falta de respeito ao tamanho da tela / navegador. O design não deve ser mostrado em computadores menores. Como notebooks / tablets menores estão sendo mais populares, a necessidade de levar em conta tamanhos de tela menores se torna mais importante.
• O que deve acontecer quando você redimensiona a tela do navegador? O designer levou em consideração o que deveria acontecer com o design quando o navegador é redimensionado.
• E as barras de rolagem. O design geralmente vem com espaços reservados "lorem ipsum". E se um monte de texto for inserido nesse espaço reservado e precisarmos de barras de rolagem, onde devemos colocá-las.
• Muitas imagens. Alguns modelos exigem que você corte muitos pngs. Isso pode levar a longos tempos de resposta do servidor da Web, pois a página inicial exige que o navegador faça o download de todos esses pngs.

Estes são os problemas que vi ao trabalhar com designers. Essas não são questões sobre o designer não saber nada sobre código. Mas questões sobre não pensar em como o design é usado.

Uma compreensão mais ampla do meio em que se trabalha sempre faz de alguém um artista e artesão melhor nesse campo.

Muitos web designers que não conhecem o desenvolvimento do front end são difíceis de trabalhar, porque não são bons web designers, mas porque simplesmente não são web designers. Eles são designers gráficos com alguma experiência em impressão e estão tentando criar folhetos e pôsteres em vez de sites reais.

É como contratar um paisagista para remodelar seu banheiro. Eles têm um senso de design e provavelmente entendem alguns dos fundamentos, mas as chances são de que eles são muito melhores no paisagismo do gramado da frente do que no banheiro.

Há uma década, quando a maioria dos sites ainda era construída como linhas de montagem do chão de fábrica, não era tão importante ter uma pessoa fazendo o PSD, a próxima pessoa fazendo o HTML e a próxima adicionando o banco de dados, etc.

Hoje em dia, a maioria das construções progressivas da Web é feita com um processo ágil e as equipes são diversas, com muita metodologia de experiência do usuário adicionada, aprimoramentos progressivos, sistemas de back-end e front-end integrados, conceitos como web design reativo, etc. Como tal, muito do processo de design precisa acontecer no código . Seja prototipagem, teste do usuário, design iterativo ou o que você tem, o código é o meio e a equipe precisa entender.

Não, nem todos na equipe precisam ser capazes de escrever plugins jQuery. Mas a equipe deve pelo menos saber o que são e a equipe de UX / Web deve ter pessoas com quem PODE escrevê-las, pois, em última análise, tudo o que for projetado deve ser construído.

Sim. Um artista deve entender o meio em que está trabalhando, seja um pintor com seu óleo e tela, um escultor com seu mármore e cinzel ou um web designer com seu HTML e CSS.

Eu trabalhava na indústria de videogames. Os melhores designers de jogos eram pessoas criativas com uma forte inclinação técnica que entendiam as limitações sempre em mudança do meio e podiam projetar para ele. Pessoas que não conseguem fazer isso demais e a implementação diluída de sua visão acabam sugando.

Recentemente, fiz algum desenvolvimento web, onde a experiência do designer era inteiramente em mídia impressa. O resultado foram páginas bastante bonitas, que seriam fantásticas na impressão, mas funcionaram muito mal como um site.

Para mim, a desconexão designer / desenvolvedor é algo que aconteceu anos atrás, mas as pessoas perceberam que o design da web é muito mais do que apenas fazer uma maquete.

Para mim, quando alguém se chama web designer, espero:

a) They can design a layout either in a image editing program, or in the browser
b) Can articulate their design choices, and have sensible reasons
c) Proficient (as opposed to basic knowledge) with HTML, CSS, and JavaScript.
d) Basic knowledge of server side programming

Para mim, um web designer é alguém que pode criar o lado do cliente de um site.

Um bom web designer terá tudo isso e entenderá como as escolhas que eles fazem durante o processo de design afetam a UX do site.

Quando alguém diz desenvolvedor da web, espero:

a) Proficient with at least one server side programming language
b) Basic knowledge of server configurations
c) Basic knowledge of client side technology (JavaScript and AJAX implementations)
d) Basic knowledge of backend architecture

Um bom desenvolvedor web terá tudo isso e será capaz de entender como as escolhas de arquitetura que ele fará influenciarão o front end do site e a funcionalidade exposta aos usuários.

Você também recebe pessoas especializadas em UX e outras áreas que são mais horizontais que o web design, na medida em que se aplicam a vários ambientes de desenvolvimento diferentes.

editar: se alguém tiver um exemplo de um bom grupo de design que separa o design gráfico do web design, eu ficaria muito interessado.

Designers devem ter uma idéia de como a codificação funciona. Às vezes, é a única maneira de impedir que seu desenvolvedor front-end se torne homicida . Para adquirir essa idéia, a experiência direta pode ser a maneira mais fácil.

Certamente existem outros, mas não pode prejudicar sua empresa aprender a programar um pouco de Javascript. (Na verdade, os tempos estão mudando e há legiões de caras com habilidades de designer que podem javascript sair de seus DOMs, mas essa é uma história totalmente diferente)

Meus pensamentos gerais:

• Os desenvolvedores da Web de front-end precisam lidar com back-ends terríveis e muitos níveis de idiossincrasias para se preocupar com as sutilezas do design. A maioria dessas idiossincrasias é causada por más escolhas de back-ends pré-fabricados por parte da gerência e rouba grandes quantidades de tempo para lidar com elas .

• Web designers, enquanto lidam com pessoas estressadas, arriscam a vida constantemente. E deve considerar seriamente alguns desses assuntos de front-end, em vez de deixar o design em sua mesa e fugir gritando para o escritório "Acabei, acabei, a partir de agora tudo é culpa do desenvolvedor! "

• Lojas de design devem queimar.

Depende de onde você trabalha.

Se você trabalha para uma grande empresa, estas podem ser funções individuais:

1. UX ou especialista em arquitetura - planeja a arquitetura / organização das informações do site / cria wireframes

2. Designer - cria o site usando o photoshop ou outra ferramenta

3. Desenvolvedor Front-End - faz html / css / javascript / json / xml / etc. e escreve código de modelo que integra front end com back

4. Back-end Developer - faz a programação que faz tudo realmente funcionar dinamicamente

A maioria dos locais de nível intermediário também exige que o designer lide com as decisões de UX. Porém, lugares menores podem precisar do designer para executar todas as três coisas acima. No entanto, o front end é uma área complicada e existem pessoas de diferentes habilidades. Se você é um designer que precisa fazer front-end, definitivamente não deve saber muito mais do que HTML / CSS e JQuery ou algum outro trabalho de quadro. Esperar que um designer conheça os aspectos mais profundos da integração de javascript e back-end está exigindo demais.

Obviamente, se você é freelancer, precisa conhecer e fazer tudo sozinho;)

Eu acho que os web designers devem conhecer HTML / CSS - mesmo que apenas limitados aos fundamentos - para poder criar designs e interfaces da web que funcionem no meio.

Os designers da Web podem optar por não escrever o HTML / CSS, mas saber como a marcação e o CSS funcionam é essencial para ser um web designer. Os designers da Web podem não precisar ser ninjas em HTML / CSS, mas é útil saber (pelo menos) como suas composições de layout da Web são convertidas em um site.

Os web designers precisam saber como codificar?

Sim, o web designer precisa lidar com softwares como Adobe Photoshop, Illustrator e InDesign para criar um design para a web. Então esse design lida com a codificação para torná-la online. E, para isso, é muito importante para o web designer entender os componentes do design para representar como uma codificação. Para isso, eles devem ter o conhecimento de codificação, não entendendo completamente, mas com o básico.

Pessoalmente, tudo depende de suas habilidades e exigências. Habilidades capazes de aprender e entender as coisas rapidamente. Requisitos sendo finanças. Aprender algo vai precisar de tempo., E isso mataria sua produtividade por enquanto.

Portanto, se você tiver muito tempo para matar, vá em frente e aprenda a codificar.

Sou designer há quatro anos e sou bom em editar coisas básicas. Eu apenas não tenho tempo suficiente para aprender o código da maneira profissional.