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 mais e mais em demanda . Sim, você poderia argumentar que os empregos são completamente diferentes - e talvez você simplesmente não goste de um deles - mas, verdade seja dita, em meus seis anos como desenvolvedor web freelance e doze anos como designer, eu aprendi que é muito mais difícil sobreviver apenas como web designer ou desenvolvedor front-end do que como engenheiro front-end que conhece os dois papéis.

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

Mas trabalhando como 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 em web design. Como um desenvolvedor técnico front-end, você usará seu “cérebro esquerdo”, o parceiro lógico e analítico de seu artista maluco à direita.

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

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

Uma noite com seu projeto

OK pronto? Ótimo! Digamos que você tenha sido convidado a criar o site para o miniCloud, uma startup que oferece soluções VPS personalizadas. Por 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 os produtos, serviços, concorrência, etc. do seu cliente. Em suma, o Google dá o fora. Depois disso, pense no projeto o dia todo: como ficará quando você terminar com ele? Leve-o para jantar e durma com seu novo design sexy em mente. Durante esse estágio, sempre tenha um lápis (ou telefone celular) pronto para anotar as ideias assim que chegarem a você. Esse tipo de trabalho mental geralmente ajuda a definir os principais aspectos do seu processo.

Dica pessoal : Eu descobri que muitas vezes o 'conselho' que recebo de pessoas não relacionadas ao cliente, projeto ou web design me dará o pior conselho. Portanto, quando ouço suas sugestões, sei exatamente o que não devo fazer. Funciona para mim!

Deixe sua criatividade fluir: o processo de design

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

Durante esta fase 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, o desenvolvedor front-end vai odiar você por isso. E seu desenvolvedor front-end é você -lembrar?

Portanto, guie-se pelas melhores práticas de Designer de Web (e algum bom senso), porque é altamente improvável que você vá desbravar qualquer novo terreno redesenhando o site do vestido de noiva de seu amigo. Isso não quer dizer que você não deve ter como objetivo criar um design fantástico e impressionante. Em vez disso, pense em algo que você sabe que é viável. Projetos que reinventam a web geralmente são feitos em seu tempo livre, sem prazos pendurados em sua cabeça.

Dica pessoal : Quando eu projeto, gosto de desligar todas as interrupções externas e dedicar minha atenção integral à tarefa em mãos. Isso significa sem telefone, sem Facebook, sem Twitter, sem fazer sanduíches, etc. Basta trabalhar! Ajuda-me a ouvir algo que não conheço, algo com letras que não conheço (como Trance vocal ), caso contrário, meu TDAH entra em ação e estou cantando e dançando em um piscar de olhos. Nós não queremos isso.

1. Esboço : Começo com um bloco de notas quadriculado e alguns lápis. O papel quadriculado é particularmente excelente porque você pode usá-lo para designs baseados em grade. Você não terá nenhum problema mais tarde, quando traduzir seu esboço em wireframes e, no final, em um site baseado em grade. Para o miniCloud, nosso esboço pode ser mais ou menos 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 qualquer parte do seu processo de design, mas têm uma boa aparência.

Personal tip : There are some great resources online where you can download and print sketch sheets. One of my favorites is sneakPeekit . They also have sheets for mobile and tablet design.

1. Wireframe : Agora que temos uma ideia básica de como será a aparência de nosso site, é hora de criar wireframes que podemos mostrar ao cliente. Há um muitas maneiras para fazer isso. Em alguns casos, você pode pular a etapa totalmente se achar que não há necessidade. Pessoalmente, eu uso Photoshop para wireframe minha ideia, já que é a ferramenta com a qual estou mais familiarizado. Há muitos kits wireframe grátis em .EPS ou .PSD que o iniciam em segundos, portanto, 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. Enfim, expandindo fora de nosso esboço , podemos criar um wireframe para nosso site assim:

1. Gráficos : Esta é minha parte favorita: transformar nosso wireframe em um lindo 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 grandes ideias - quem sabe, talvez haja um designer em você apenas 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 com o 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á a você a matéria-prima 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:

Dica pessoal : Se você não tiver materiais de clientes, use fotos de banco de imagens e algum texto que não seja Lorem Ipsum , para evitar perguntas como 'Esse texto em latim estará sempre lá?' e 'Por que há blocos cinza em nosso site?' Se você estiver usando Lorem ipsum, este gerador pode ser útil.

A propósito: se você acabar usando Photoshop , há 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 sobre eles sozinho, 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. Elementos Divinos : Cria WordPress temas diretamente de seus PSDs. É ótimo para iniciar rapidamente seu projeto WordPress. Embora digam “Não são necessárias habilidades de HTML”, você na verdade precisará de algumas se quiser obter resultados incríveis.
3. Padrões sutis : Coleção de padrões gratuitos para usar em seus designs, geralmente como fundos. Detalhes como esses fazem toda a diferença quando você está tentando transformar seus designs de bons em incríveis.

Dica pessoal : Ao projetar no Photoshop, certifique-se de agrupe e nomeie suas camadas corretamente , de modo que, quando você precisar fazer alterações posteriormente, não precise pesquisar em dezenas de camadas denominadas 'Nova camada 1 cópia 01'. Acredite em mim, quando você tem centenas de camadas, você vai agradecer a si mesmo. Se você estiver interessado em utilizar totalmente suas camadas, confira este guia .

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

Depois de terminar a fase de design e receber um OK do cliente satisfeito, estou pronto para transformar minhas imagens estáticas em sites ativos. Lembre-se, neste ponto, nosso design ainda é apenas isso: um design. Ainda temos muito que fazer antes de estar pronto para a web.

Neste estágio, é hora de usar a metade esquerda, mais analítica, de seu cérebro.

No mundo do web design, nos referimos a esse processo como 'fatiamento' . Embora o termo fosse mais preciso algum tempo atrás, antes CSS passou a ser o principal bloco de construção visual da web e você teve que cortar cada pedacinho de seu PSD ou PNG e colocá-lo em mesinhas terríveis, ele ficou por aí.

Se você é um web designer e ainda não sabe como ‘front-end’, você está com sorte - porque a programaçã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 examinar os fundamentos do desenvolvimento de 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.

Dica pessoal : Ao codificar, gosto de usar o 'Técnica do tomate' para gerenciar melhor meu tempo e alocar tarefas. Ao contrário da fase de design, permito-me ser interrompido - de propósito. Pomodoro é uma ótima técnica que ajuda a aumentar seu foco e recomendo que você dê uma olhada. Vale a pena.

Agora, se você criou alguns ótimos 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 estrutura de front-end, como 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 configurando minha estrutura HTML, antes de adicionar qualquer conteúdo real ou CSS, é escrever nas linhas, depois nas colunas e, em seguida, em coisas básicas como navegação, seguido por texto e espaços reservados para imagens. Isso permite que você descubra a estrutura básica primeiro e construa a partir daí. Olhando para este wireframe, podemos ver seis linhas:

1. Logotipo / Navigation
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, conforme você trabalha em mais e mais projetos, verá que o desenvolvimento de sites é em grande parte um processo iterativo e não há sentido em 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 Fundação -Não importa. O que importa é que você pode mantê-lo mais tarde e expandi-lo se necessário.

Dica pessoal: Se estou trabalhando em um projeto de médio prazo com um prazo curto, minha escolha seria Bootstrap. É fácil de usar, ágil e personalizável. Além disso, funciona bem com o WordPress.

Quase tudo que você precisa para um projeto foi feito antes e refeito algumas vezes. Portanto, para qualquer tarefa importante, pesquise e pergunte a outras pessoas se eles têm sugestões antes de passar pela parede de cabeça. A maioria dos grandes frameworks tem comunidades muito ativas que criam códigos e plug-ins adicionais para tornar seu trabalho mais fácil. Portanto, trabalhe com inteligência, não muito - e aprenda todos os dias. E, se você precisa de algo que ninguém construiu antes, bem, 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ê estará pronto assim que seu design estiver 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 vão querer 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 ter que codificar cada novo detalhe manualmente, ou mesmo codificar.

De todos os grandes CMSs, eu me chamaria de Evangelista do WordPress: elogio 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 o WordPress e o Joomla! temas iniciais, dê uma olhada em cada pasta e, em seguida, pergunte-se - qual você deseja explorar em sua nova função de front-end?

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

Dica Pessoal : WordPress tem essa grande capacidade de ser o que você quiser. Por exemplo, o WordPress pode ser uma solução de carrinho de compras para qualquer projeto de comércio eletrônico de pequeno a médio porte usando um plug-in chamado woocommerce . É seguro, fácil de usar, fácil de desenvolver e fácil de integrar em qualquer tema WordPress existente.

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

Mantendo Seu Site

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

Se você já usou um CMS, terá que se certificar de que o a tecnologia está sempre atualizada para que você evite qualquer brechas 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 sobre todas as atualizações disponíveis.

Este é o estádio 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 vocês, designers, a adquirir as habilidades de que precisam para se tornarem grandes engenheiros de front-end e vice-versa, para que possamos continuar a desenvolver nossos talentos como desenvolvedores de front-end.

Eu só posso te mostrar a porta. Você é aquele que tem que passar por isso. - Morpheus, a Matriz

P.S .: Você pode encontrar um PSD do modelo acima e outros designs interessantes no meu portfólio dribbble .