A autoria do layout e a velocidade de codificação
Publicado em 11.10.2007 na categoria Webstandards
O Rodrigo Muniz comentou dia desses que sente dificuldades em se libertar da visão de HTML e CSS quando vai criar um novo layout de site ou sistema em programas gráficos como o Adobe Photoshop. Comentei lá e provei tempos depois em alguns projetos que isso para mim é mais uma vantagem do que uma limitação.
Ultimamente tenho codificado bastante layouts de vários designers diferentes. Nesse meio, alguns layouts meus. Pois bem, a diferença de velocidade entre a codificação de um layout de minha autoria e o de um terceiro é enorme, mais de 100%.
O designer que, ao criar um layout, sabe como ele vai ser montado, já desenha as telas pensando em como ficará o código daquilo. Se ele entender bem de código, não vai ter tantas limitações. É possível fazer praticamente de tudo com CSS, mas alguns efeitos consomem tantas linhas de código que não valem a pena ser levados adiante.
Eu não me considero bom de layout, mas quando vou codificar telas de outras pessoas isso me toma tanto tempo a mais que já prefiro ficar nos meus desenhos mesmo. Além disso, quando o designer codifica sua própria criação, às vezes o processo fica mais rápido pelo fato de ele mesmo não precisar desenhar no software gráficos algumas telas. Ele já tem em mente como serão algumas telas internas, então pode “desenhar” direto no código.
E você? Acha que o designer visual tem que conhecer como se implementa um layout, mesmo que ele não vá fazer a implementação? Ou é melhor cada um se especializar em algo?
Eu penso que o designer TEM QUE CONHECER como se implementa um layout sim. Já trabalhei com designers que eram ótimos para folders, propagandas e cartazes, mas péssimos em design de sites. É horrível implementar o que vem da cabeça dessas pessoas, e mesmo codificando perfeitamente, o resultado é quase sempre um desastre.
Talvez seja pela diferença drástica entre fazer um design de algo fixo e de algo interativo, pode ser. Mas para garantir, é melhor que o cara saiba alguma coisa de html sim.
Abraço
durante muito tempo trabalhei apenas com programação e deixei a parte de design para quem é da área, mas, o tempo me mostra [e isso é uma opinião bem pessoal] que o ideal é que se saiba tudo. Hoje estudo design e sinto que meu desempenho é melhor, como bem colocou o Mr. W :) desenhar um layout já sabendo que tags formaram aquilo depois é muito mais produtivo, eu também não sou bom em design [ainda], mas creio que se alguém consegue ser bom nas duas áreas esse tem mais probabilidade de se sair bem. tenho inclusive um grande amigo que é muito bom em design e também em programação web. [james clebio] que pode ser sitado como exemplo.
quanto mais o design conhecer de codificação, principalmente aqueles bons minutos gastados pra fazer aquele botão ficar no local correto. não precisa ser um exímio codificador, mas saber onde o sapato aperta é essencial.
Sou designer também e tenho codificado mais do que desenhado no Ps. e realmente concordo que quando codificamos um layout de nossa autoria fica mais bem fácil, por que já imaginamos aquilo que vai para o código, mas temos que nos policiar para nao relaxar em um layout(que muitas vezes tem que ter as suas “frescuras”), pois sabemos que as codificação vai ficar mais complexa.
E quanto a pegar trabalhos de terceiros(hehe) as Agencias de Internet ultimamente tem caprixado em complicar a nossa vida.
Quando na equipe tem uma pessoa responsável só pela codificação e uma só pelo layout, acredito que o designer de layout não precise saber, pois o layout do projeto antes de ser pensado vai passar um rascunho, sentamos todos e discutimos como será, as limitações, etc…
Fora isso, durante a criação do layout o designer que está a cargo da codificação estará guiando aquele que está fazendo o layout no que ser refere as limitações e boas práticas do CSS… é assim aqui na agência, pois percebemos que o designer que está mais focado na codificação se limita na criação em 70% das vezes, e o designer que gosta de criar, desenhar, etc… é mais livre quando não se preocupa com as linhas de código. Funciona muito bem aqui na ATO interativo, pode ser pela boa interação da equipe, em fim.
Agora, para aqueles que são freelas, tem que saber sim, o mínimo de CSS.
Cara, eu sou designer e programador de interface, e concordo 100% com o argumento de que é muito mais rápido e produtivo montar layout próprio. Além disso, acho q o bom conhecimento de html/css possibilita efeitos e interações muito mais ricas.
Acredito que seja essa a questão, não faço uma ilustra gigante e linda com 1280px de largura, o que busco é usar das características da plataforma pra criar algo que tenha mais interação. Acho q é esse o ponto, mudar o foco.
E, se além de html/css o designer souber tb javascript, acredito que fica ainda mais rico o resultado final.
Com certeza, o designer precisa saber Css e suas limitações.
Por mais que tenha uma arquitetura de informação bem distribuida e um wireframe bem discutido, é o designer que encorporar as representações sensitivas e visuais do projeto.
Se ele não prestar atenção em algumas abservações, todo um conceito pode se perder por causa de um pixel.
Sem contar que design é utilidade, se o camarada não souber fazer um projeto acessível, é um projeto falho.
O papel do designer é muito mais doque ilustrar a primeira página…..
Uma analogia que gosto de fazer para a situação designer programador é a já vigente situação diretor de arte produtor gráfico.
Embora exista o profissional que entende de todos os tipos de papel, máquinas de impressão e etc, o diretor de arte precisa saber das limitações dos suportes para os quais projeta.
Acho que funciona da mesma forma em projetos web. Trabalho de equipe, simplesmente falando. Deve existir um cara que manja muito de HTML e outro que é bom de design de interface. Ambos devem conhecer o trabalho de seu parceiro de equipe.
Por vezes acho que como o suporte web é mais abrangente, os designers/programadores acabam tentando abraçar o mundo.
Abraços.
é isso ae galera, a areta levantou um ponto interessante que eh o introsamento da equipe… isso é fundamental, mas tb acho importante o designer ter uma noção aprofundade de webstandards, mesmo que não saiba programar, pelomenos tem que conhecer o assunto
Acho que todos concordam que é melhor para o designer saber suas limitações ou que a mesma pessoa faça as duas coisas (o que nem sempre é possível)
abraços
Pulando aquela parte do “design significa projetar..e tal” porque já tá batida (mas é ainda muito necessária!), concluo que é evidente que o designer do layout tem de saber no mínimo como a coisa funciona. Estudo design visual e tenho disciplinas de modelagem de produtos, prototipagem, acho justo, o designer é um projetista e projetista pensa no usuário, tanto o usuário final quanto aquele que, neste caso, cuidará da implementação do código. Pode até precisar usar Dreamweaver para completar tags e propriedades que não recorda muito bem, mas tem de conhecer suas corretas aplicações. Pra dizer bem a verdade, venho pensando sobre o assunto nestes tempos e me é lógico que conhecer html e css são requisitos essênciais para o designer de internet.
Abs;
Saber como será implementado e as limitações é essencial. Porém, pensar muito nisso durante o processo pode deixar seu layout pouco criativo. Apesar de trabalhar bastante com CSS, quando layout tento esquecer qualquer limitação que venha a ter de montagem e só vou analisar isso depois de pronto. Claro que não mandar pro cliente aprovar um layout que não é possível de ser implementado, mas focar demais em CSS e HTML pode gerar inúmeros layouts quadradões.
Afinal, com um layout diferenciado em mãos é que se consegue descobrir soluções que talvez sequer existissem.
Considero que na hora de efetivamente criar a parte visual, o designer deve esquecer um pouco do CSS e do HTML. Deixar a criatividade rolar e tentar experimentar de tudo que puder.
Depois de um bom caminho andado, pode-se pensar em como isso será implementado. Por ele mesmo ou por outra pessoa. Algumas questões devem ser consideradas como a estilização de alguns elementos do HTML (como selects), mas limar a criatividade na hora em que está se desenhando o layout é um crime.
Mesmo que depois fique um pouco mais difícil de ser implementado, virá a parte da superação e do aprendizado, porque afinal se tivermos o tempo todo o mesmo tipo de layout pra montar, nosso conhecimento vai continuar o mesmo. E não tem hora que a gente aprende mais do que quando o prazo está lá, olhando pra você.
Eu também me sinto mais a vontade quando estou trabalhando com os meus próprios layouts. Uma coisa que existe muito em agências é o fato que às vezes o designer viaja demais e quando passa para o desenvolvedor (standeiro ou programador) muita coisa é retirada.
Quando o designer tem a consciência do que está criando pode ser realmente montado, o trabalho fluir tranquilo.
Concordo plenamente.
Não há nada como codificar uma tela desenhada por você mesmo. Principalmente porque, mesmo quando você faz alguma “firula” no layout, você já sabe o que precisará fazer pra aquilo ficar bem no CSS, o que significa produtividade dobrada.
@Camilo,
acho que todas as etapas do desenvolvimento devem estar interligadas, para que cada uma delas não saia do escopo e prejudique o desempenho de toda equipe de desenvolvimento. Quero dizer é que não dá para esquecer da implantação na hora de criar, pois quando chegar a hora da codificação pode haver uma perda enorme de produtividade por questões banais. E de qualquer maneira, uma boa equipe sabe como fazer um trabalho de sucesso dentro de suas limitações.
@Tiago,
desde que comecei a trabalhar em uma agência, toda essa questão é discutida antes que seja colocada a mão na massa. Converso com as designers sobre a viabilidade de cada detalhe do site (no que se refere a código, usabilidade e peso dos arquivos).
Acho interessante o designer saber como funciona a codificação em XHTML e CSS, portanto não vejo como obrigatório. Acabei aprendendo a codificar quando entrei na Agência Click no início de 2006 e a vaga era somente de programador de interface, apesar de ter tentando uma vaga como designer. Foi uma experiência interessante, pois consegui aprender a codificar e montar o layout feito por outros designers.
Tenho codificado pouco, mas quando estou fazendo um layout, procuro ver como aquilo será montado e procuro simplificar ao máximo o trabalho do interface que montará aquelas telas.
Foi muito importante conhecer como se monta uma tela, principalmente porque agora tenho projetado interfaces e muitos coisas, já penso na dificuldade que terá para ser montado dependendo do prazo do projeto.
Com certeza é muito melhor montar um HTML de um layout seu do que de uma outra pessoa. Mas oque acontece hoje é que existem designs muito habilidosos no desenho(photoshop, fireworks) e não tão bons na implementação do código. Na minha opnião o processo de criação está caminhando para a multidisciplinaridade. Dessa forma cada um vai saber dar o seu máximo sem se preucupar como o layout foi desenhado ou como ele vai ser codificado.
Vejo um ponto positivo o designer ter conhecimento de codificação, mas já trabalhei com alguns que devido a esse conhecimento seu layout era claramente “fatiado” de recursos devido a seu conhecimento de codificação. O designer que consegue desenvolver sem que essa limitação ocorra e interessante, mas o trabalho em equipe como citado acima supri muito bem essa necessidade. E um desafio ter que montar um layout de um designer sem “trava de codificação”, mas e enriquecedor superar adversidades do projeto.
Creio que ngm aqui saiba como funciona um centro cirurgico, tendo como visao medica profissional, assim como eu. Mas pensem, será que todos ali são cirurgioes? Creio q nao! Mas todos estao antenados caso o cirurgiao precise de um instrumento ou de algum auxilio. Assim deve funcionar no desenvolvimento de um site. Com uma boa comunicação entre as partes ( designer X programador X projeto ) creio que no final de tudo, iremos ouvir a famosa frase: “A cirurgia foi um sucesso, e o paciente passa bem”. Caso contrário, tem outra famosa frase: ” A cirurgia foi um sucesso, mas o paciente nao resistiu”. Essa é minha opiniao.
@Rafael Marin
O designer (ou diretor de arte) trabalhando junto com o programador de interface pode ir vendo essas questões. Acredito que a porcentagem de vezes que o cara vai se virar (e conseguir) programar aquilo em html será maior do que as vezes que o designer irá refazer o layout.
Adaptações podem acontecer, mas melhor errar pelo excesso do que pela falta. Chichezão, mas cabe bem nesse contexto na minha opinião.
Trabalhamos num layout bem difícil de implementar nos últimos tempos, mas nos superamos e o site entrou no ar. Imagina se tivéssemos podado o layout em algum momento…
Eu sou à favor da especialização. Sou um bom codificador e não tão bom em design. Eu já até comecei a estudar design e evoluí um pouco nessa área, mas desisti de querer “abraçar o mundo” como disseram anteriormente. Não dá pra querer ser bom em tudo.
Mas é claro que um designer acostumado a fazer apenas layouts estáticos pode complicar na hora de fazer um layout para um site, pois banners e flyers têm funções completamente diferentes de um um site dinâmico e interativo. Se o designer tiver em mente questões como usabilidade e interatividade na hora de fazer o layout, ele nem precisa saber codificar, na minha opinião.
Cara este é o tipo de pergunta que gostaria de responder. SIM eles devem conhecer sim ou entender a estruturação de como a codificação é feita. Muitas vezes me deparo com alguns projetos de designes daqui da empresa onde eu trabalho :) que me pergunto porque fazer desta forma se é também possível usar outra mais prática e tão eficiente quanto. Claro que o codificador deve sim saber como fazer a tela, e fazer de uma forma consciente, mesmo sendo a mais difícil e tediosa de todas as telas. hehehe
Eu pergunto para mim como uma solução para isso, e só encontro uma resposta. Que seria bem mais prático pagar um curso para todos os amigos da área do designe: “Entendendo o processo da codificação” rsrsrs :)
Abraço 02
Realmente concordo plenamente contigo, implementar um layout feito por nós mesmo, é muitoooo mais fácil. Normalmente em empresas maiores as pessoas fazem apenas um tipo de coisa ou o cara só desenha layout no photoshop/fireworks/illustrator e depois passa para o camarada que implementa, eu faço todas as etapas desde a construção da AI porque sou chatinho mesmo, mas não considero exigência a pessoa saber fazer tudo! Porque um cara que desenha layout, implementa o XHTML e faz o AI deveria ganhar muito bem! Coisa que não acontece!
Abraços galera!
Axo que tem que saber pelo menso o básico.
Pelo menos o designer que trabalha comigo está exportando os layout, ele ja me mand o html tudo pronto de cada página.
Assim ele aprendeu CSS, HTML etc.
Mas com certeza fica mais fáci lpr aprogramação. Até porque, se deixar para mim exportar, eu não vo ficar me preocupando em diexar 100 % igual ao desenho.
Ta ai.
Prefiro Desenhar e codificar, claro que um Designer “puro” sempre cria melhor do que eu, mas dá um trabalhão para codificar depois…