Como um único engenheiro de front-end pode substituir uma equipe de dois

Pensando com duas mentes

A demanda no cenário do web design mudou nos últimos anos: designers com habilidades de front-end e desenvolvedores de front-end com habilidades de design são cada vez mais procurados. Sim, você pode argumentar que os trabalhos são completamente diferentes - e talvez você não goste de um deles - mas verdade seja dita, em meus seis anos como desenvolvedor web freelancer e doze anos como designer, eu aprendi que é muito mais difícil se virar apenas como um web designer ou apenas um desenvolvedor de front-end do que como um engenheiro de front-end que conhece as duas funções.

Usar os dois chapéus tem muitas vantagens: apenas do ponto de vista profissional, você pode encontrar trabalho com mais facilidade e cobrar uma taxa mais alta porque está trazendo mais para a mesa.

Mas trabalhar como um engenheiro de front-end híbrido também tem algumas desvantagens que você precisa conhecer – e como contorná-las. Como designer criativo, você usará seu “cérebro direito”, a metade responsável pelas informações visuais, espaciais e perceptivas – em outras palavras, todas as coisas bonitas no web design. Como desenvolvedor técnico de front-end, você usará seu “cérebro esquerdo”, o parceiro lógico e analítico do seu artista maluco à direita.

E, como você é apenas uma pessoa, isso significa que você está trabalhando em dois empregos totalmente diferentes ao mesmo tempo, com o mesmo cérebro – e isso pode ficar confuso para o seu cérebro. Se você não conseguir lidar com isso, não produzirá um trabalho de qualidade ou atingirá todo o seu potencial. E, se você é um freelancer tentando cumprir uma descrição de trabalho de engenharia de front-end híbrida, provavelmente está competindo com uma equipe de dois (desenvolvedor e designer), então você terá que trabalhar no mesmo prazo enquanto mantendo a qualidade. (Claro, você também pode ser pago como se fosse uma equipe de dois!)

Saber qual parte do seu cérebro usar e quando usá-la é a chave para agilizar seus processos e produzir os melhores resultados com zero frustração e bastante tempo de sobra no seu prazo. Independentemente de onde você está faltando, à esquerda ou à direita, este post o ajudará a entender as habilidades necessárias e as maneiras de adquiri-las.

Uma Noite Com Seu Projeto

OK pronto? Excelente! Digamos que você foi solicitado a projetar o site para o miniCloud, uma startup que oferece soluções VPS personalizadas. Onde você começa?

Antes de começar qualquer trabalho “real” em um projeto, gosto de ir para a cama com ele. Isso significa fazer uma pesquisa completa sobre o produto, os serviços, a concorrência etc. do seu cliente. Resumindo, pesquise bastante no Google. Depois disso, pense no projeto o dia todo: como será quando você terminar? Leve-o para jantar e adormeça com seu novo design sexy em mente. Durante esta fase, tenha sempre um lápis (ou telemóvel) à mão para anotar as ideias à medida que forem surgindo. Esse tipo de trabalho mental geralmente ajuda a definir os principais aspectos do seu processo.

Deixe sua criatividade fluir: o processo de design

Agora que você tem algumas ideias para construir, é hora de começar o processo de design real. Isso consiste em três etapas: 1) esboço, 2) estrutura de arame e 3) gráficos. Esta é a parte em que você deixa a metade artística do cérebro fazer suas coisas e enlouquecer com lápis, papel e Photoshop.

Durante este estágio de design, é crucial que você deixe seu lado “desenvolvedor” mantê-lo sob controle para que você não enlouqueça com alguns aspectos do site que serão quase impossíveis de recriar rapidamente usando HTML, CSS e jQuery. Se você tentar reinventar o navegador, seu desenvolvedor front-end irá odiá-lo por isso. E seu desenvolvedor front-end é você — lembra?

Portanto, seja guiado pelas melhores práticas de web design (e algum bom senso), porque é altamente improvável que você esteja abrindo novos caminhos ao redesenhar o site de vestidos de noiva de sua amiga. Isso não quer dizer que você não deva ter como objetivo criar um design fantástico e impressionante. Mas sim, venha com algo que você sabe que é viável. Projetos que reinventam a web geralmente são feitos em seu tempo livre, sem nenhum prazo pairando sobre sua cabeça.

1. Esboço : Começo com um caderno de papel quadriculado e alguns lápis. O papel quadrado é particularmente bom porque você pode usá-lo para designs baseados em grade. Você não terá problemas mais tarde quando traduzir seu esboço em wireframes e, no final, em um site baseado em grade. Para miniCloud, nosso esboço pode ser algo assim:

Observe que detalhes adicionais no esboço, como neve, pássaros e nuvens, são produto da minha procrastinação e não são obrigatórios em nenhuma parte do seu processo de design, mas ficam bonitos.

 <div class="pop_out_box is-full_width"> <b>Personal tip</b>: There are some great resources online where you can download and print sketch sheets. One of my favorites is <b><a href="http://sneakpeekit.com/wireframe-sketchsheets/">sneakPeekit</a></b>. They also have sheets for mobile and tablet design. </div>

1. Wireframe : Agora que temos uma ideia básica de como nosso site ficará, é hora de criar wireframes que podemos mostrar ao cliente. Há muitas maneiras de fazer isso. Em alguns casos, você pode pular a etapa inteiramente se achar que não há necessidade. Pessoalmente, uso o Photoshop para estruturar minha ideia, pois é a ferramenta com a qual estou mais familiarizado. Existem muitos kits de wireframe gratuitos em .EPS ou .PSD que permitem que você comece em segundos, então não há necessidade de criar e desenhar todos os seus elementos do zero. Existem algumas soluções online também se você quiser evitar o Photoshop, mas eu sou mais do tipo offline. De qualquer forma, expandindo nosso esboço, podemos estruturar nosso site assim:

1. Gráficos : Esta é a minha parte favorita: transformar nosso wireframe em um belo site. Mas nem todo mundo sou eu. Se você é principalmente um desenvolvedor e tem pouco ou nenhum talento para design, cores, tipografia, etc., sugiro começar com outros sites para inspiração de design. Existem muitos deles, e eles estão cobertos de ótimas ideias – quem sabe, talvez haja um designer em você esperando para sair? Acho útil manter uma pasta de favoritos de sites que considero particularmente bonitos ou bem projetados. Picasso (?) disse: “Bons artistas copiam, mas grandes artistas roubam” – isso não significa que você pega o design de outra pessoa e coloca seu adesivo nele. Em vez disso, inspire-se no trabalho de outra pessoa e adicione seu próprio toque e abordagem a ele.

Eu faço todo o meu design no Photoshop. Idealmente, seu cliente fornecerá matérias-primas para trabalhar, como fotografias e texto de cópia que você pode usar em vez de espaços reservados. Parece muito melhor quando você o envia para revisões.

 So, for step three, we take our wireframe and bring it to life: 

A propósito: se você acabar usando o Photoshop, existem muitos recursos interessantes por aí que tornarão seu processo muito mais rápido, como plug-ins e estilos. Eu poderia escrever um post inteiro só sobre eles, então vou apenas apontar alguns que uso com frequência.

1. CSS3Ps : Plug-in gratuito do Photoshop baseado em nuvem que converte suas camadas em CSS3.
2. Divine Elemente : Cria temas WordPress diretamente de seus PSDs. É ótimo para iniciar rapidamente seu projeto WordPress. Embora eles digam “Não são necessárias habilidades em HTML”, você realmente precisará de algumas se quiser obter resultados impressionantes.
3. Padrões sutis : coleção de padrões gratuitos para usar em seus projetos, geralmente como planos de fundo. Detalhes como esses fazem toda a diferença quando você está tentando levar seus designs do bom ao incrível.

“Slice It Up”: o processo de front-end

Depois de terminar o estágio de design e receber um OK do cliente satisfeito, estou pronto para transformar minhas imagens estáticas em sites ao vivo. Lembre-se, neste momento, nosso design ainda é apenas isso: um design. Temos um caminho a percorrer antes que esteja pronto para a web.

Nesta fase, é hora de usar a metade esquerda, mais analítica do seu cérebro.

No mundo do web design, nos referimos a esse processo como “slicing”. Embora o termo fosse mais preciso algum tempo atrás, antes que o CSS se tornasse o principal bloco de construção visual da web e você tivesse que cortar cada pedacinho do seu PSD ou PNG e colocá-lo em pequenas tabelas terríveis, ele permanecia.

Se você é um web designer e ainda não sabe como 'front-end', está com sorte - porque a codificação pode ser aprendida (ao contrário de ter um talento natural para o design). Eu recomendo que você invista em alguns tutoriais em vídeo online como Lynda.com e estude os conceitos básicos de desenvolvimento front-end. (Uma lista mais definitiva de recursos pode ser encontrada aqui.) Em questão de horas, você passará do zero à leitura do código. E em questão de dias, você mesmo estará escrevendo. E em alguns meses, você será um mestre em HTML e CSS - então não há como pará-lo quando se trata de trabalhos de engenharia de front-end.

Agora, se você criou alguns grandes wireframes (no estágio anterior) de acordo com alguma grade com a qual se sente confortável, saberá exatamente como deseja que seu site seja codificado. A maneira mais rápida seria usar algum tipo de framework front-end, como o Bootstrap.

Depois de pegar o jeito do design baseado em grade, você começará a ver cada parte do seu site como um monte de linhas e colunas. A primeira coisa que faço quando estou definindo minha estrutura HTML, antes de adicionar qualquer conteúdo real ou CSS, é escrever nas linhas, depois nas colunas, depois coisas básicas como navegação, seguidas por espaços reservados de texto e imagem. Isso permite que você baixe a estrutura básica primeiro e construa a partir daí. Olhando para este wireframe, podemos ver seis linhas:

1. Logo / Navegação
2. Controle deslizante de imagem
3. texto de introdução
4. Imagens de categoria
5. Últimas notícias/ofertas
6. Rodapé

Depois de encaixá-los na estrutura HTML do Bootstrap, teríamos algo assim:

Muitos sites básicos usam o mesmo código (ou similar) e, à medida que você trabalha em mais e mais projetos, verá que o desenvolvimento de sites é em grande parte um processo iterativo e não faz sentido escrever o mesmo código em cada iteração . É por isso que os frameworks são úteis! Se você criou o seu próprio ou decidiu usar Bootstrap ou Foundation, não importa. O que importa é que você pode mantê-lo mais tarde e expandi-lo, se necessário.

Quase tudo o que você precisa para um projeto já foi feito antes e depois refeito algumas vezes. Portanto, para qualquer tarefa importante, pesquise e pergunte aos outros se eles têm sugestões antes de atravessar uma parede de cabeça. A maioria dos grandes frameworks tem comunidades muito ativas que criam código adicional e plug-ins para facilitar seu trabalho. Portanto, trabalhe de forma inteligente, não muito – e aprenda todos os dias. E, se você precisa de algo que ninguém construiu antes, então, você está abrindo novos caminhos! Escreva sobre isso e compartilhe com a comunidade — isso o ajudará a crescer como designer e desenvolvedor.

Escolhendo um CMS

Para alguns projetos de engenharia de front-end, você terminará assim que seu design existir em uma página da Web ao vivo. Geralmente são sites menores (por exemplo, para pequenas empresas, advogados, dentistas, etc.). Mas, muitas vezes, você ou seu cliente desejarão ter controle sobre o conteúdo do site. Nesse caso, você precisa de um sistema de gerenciamento de conteúdo (CMS). O objetivo de um CMS é permitir que você edite e publique conteúdo em uma página da Web sem precisar codificar cada novo detalhe manualmente, ou mesmo codificar.

De todos os grandes CMSs, eu me chamaria de WordPress Evangelista: eu adoro isso para outros desenvolvedores, especialmente iniciantes, por causa de sua versatilidade, facilidade de uso, documentação abrangente para desenvolvimento, grande comunidade, grande número de plug-ins gratuitos, e assim por diante…

Se alguém lhe disser que o Joomla! é melhor, especialmente para projetos menores - então eles não sabem do que estão falando. De qualquer forma, não acredite apenas na minha palavra: baixe WordPress e Joomla! temas iniciais, dê uma olhada em cada pasta e depois pergunte a si mesmo: qual você deseja explorar em sua nova função de front-end?

Eu precisaria de um artigo inteiro para escrever sobre esse tópico, mas confie em mim assim como você confiaria em Baz Luhrmann em protetor solar.

Se o seu projeto for particularmente pequeno e você precisar apenas de um CMS simples que possa ser implementado sem nenhuma habilidade de codificação, recomendo que você use o CouchCMS. Com apenas algumas tags XHTML, você pode colocá-lo em funcionamento em poucos minutos, e até sua avó saberá como usá-lo.

Mantendo seu site

Depois de entregar seu site e ter outro cliente satisfeito, tudo o que resta a fazer é manter o site. Se você criou um site HTML simples que não terá conteúdo novo, provavelmente já está pronto.

Se você já usou um CMS, terá que certificar-se de que a tecnologia esteja sempre atualizada para evitar qualquer violação de segurança. Isso inclui o próprio CMS e quaisquer plug-ins que você usou. Se você seguiu meu conselho e usou o WordPress, será notificado por e-mail para cada atualização disponível.

Esta é a base do meu processo. É verdade que isso não funcionará para todos e certamente não se aplicará a todos os projetos. Mas espero que isso ajude seus designers a adquirir as habilidades necessárias para se tornarem grandes engenheiros front-end e vice-versa, para que possamos continuar a desenvolver nossos talentos como desenvolvedores front-end.

Só posso lhe mostrar a porta. Você é o único que tem que passar por isso. - Morfeu, a Matriz

PS: Você pode encontrar um PSD do modelo acima e outros designs legais no meu portfólio de dribles.