Dicas para melhorar a transferência de design de seu site

No processo de construção de um website, ocorrem algumas etapas. Se tivéssemos de simplificar e olhar para um site padrão, as etapas seriam:

1. A necessidade - Alguém precisa de um site por um motivo ou outro.
2. Brainstorming - decidir sobre a estrutura geral, objetivos e muito mais.
3. A Proposta - O cliente encontra um freelancer ou uma agência para construir o site.
4. Conteúdo - artigos, imagens, etc., qualquer coisa que possa ser encontrada nas páginas de destino, mapas do site, etc.
5. Design - Uma pessoa / equipe trabalha no design e layout com base no conteúdo.
6. Desenvolvimento - Uma pessoa / equipe desenvolve a parte funcional do site com base no design.

Na maioria das vezes, você pode misturar aqui. Você pode alterar a ordem das coisas que são feitas e a equipe ainda pode produzir ótimos resultados. No entanto, isso pode ser difícil quando você tem pessoas de agências diferentes trabalhando no mesmo projeto, o que é o principal motivo para optar por uma agência versátil que pode cuidar de tudo.

Para este artigo, partimos da etapa 5, o Design, para a etapa 6, o Desenvolvimento. É aqui que as coisas podem dar errado, atrasando o desenvolvimento e bagunçando o que foi previamente decidido no processo de planejamento.

As coisas que um designer deve considerar

“Os designers deveriam saber como codificar?” é uma pergunta comum e muito razoável. Se um designer entende o código por trás e idealmente pode produzi-lo (até certo ponto), ele / ela pode ajudar toda a equipe em seu esforço para concluir o projeto mais rápido.

Aqui estão alguns motivos pelos quais isso ocorre:

1 - No final, tudo acaba no navegador.

Todos os designs que você criar no Figma, Adobe, etc. serão exibidos no navegador. Todos os navegadores utilizam um tipo de linguagem de programação conhecido como HTML / CSS para processar uma página. Se Javascript for usado, você pode tornar seus designs interativos.

A observação importante a se tirar disso é que qualquer design deve ser executável em HTML / CSS. Muitos desenvolvedores front-end talentosos podem implementar quase qualquer coisa, desde que a tecnologia permita. Mas lembre-se, - nem sempre é sobre “Você pode fazer isso?”, É sobre “Você pode fazer isso bem e torná-lo sustentável”.

2 - Consistência

Ter sustentabilidade é o segredo de um projeto de sucesso. Você não quer gastar horas ajustando os elementos existentes do site e adicionando novos porque o código-base é uma bagunça. Às vezes, projetos extremamente complexos com poucos ou nenhum componente reutilizável acabam em uma bagunça.

Algumas dicas do web designer:

• Projete com os componentes em mente. A maioria das ferramentas agora oferece essa funcionalidade (Figma, Adobe XD, Sketch). Obrigue-se a usá-los com mais freqüência até que não seja mais chato fazer isso.
• Alinhe bem os elementos. Seções semelhantes devem ter a mesma distância entre si. 80px é uma boa separação para manter, por exemplo. Não espace seções aleatoriamente usando 80 aqui, 86 ali, 92 em um terceiro e 78 no outro. Mantenha-o limpo e arrumado.
• Use uma grade! Todas as ferramentas fornecem um sistema de grade. O ideal é ir para uma grade de 12 colunas.
• Exiba seu design em telas grandes (1920 px ou mais). Isso ajuda os desenvolvedores a descobrir como cada seção e seu plano de fundo funcionam.

3 - Peso do site

Todos nós queremos um site rápido, certo? Bem, o designer também faz parte disso. Considere o seguinte: um site com 8 enormes imagens de alta resolução, quatro vídeos e elementos animados. . Boa sorte em otimizar isso a tempo. Embora seja possível, serão necessários tempo de desenvolvimento e técnicas adicionais para carregar imagens e vídeos lentamente, otimizar mídia no upload, oferecer suporte a formatos de arquivo de imagem melhores e adicionar abordagens de animação inteligente para alto desempenho.

Se os desenvolvedores não são muito experientes ou não estão preocupados com a velocidade, seu site pode ficar extremamente lento em smartphones e laptops de nível baixo a médio.

Como ajudar os desenvolvedores?

Como designer, um dos seus objetivos a ter em mente é tornar o desenvolvimento mais fácil e rápido, mantendo a aparência do site.

Você deve considerar o que pode ser feito facilmente na web.

• Caixas - são todas caixas. Você pode arredondar alguns cantos, sim, você pode fazer elipses (que são definidas em uma caixa) e muito mais. Porém, quando você usa formas mais complexas que interagem com o layout, as coisas se tornam difíceis.
• É difícil animar uma posição precisa - Imagine que deseja clicar em uma imagem e depois movê-la para o outro lado do texto? Parece “fácil”, mas não é. A posição para a qual a imagem se moverá deve permanecer relativa ao contêiner do site, que muda com base na janela de visualização e mais. E então o que acontece se a imagem for maior?
• As dimensões da caixa de animação afetam o layout. Isso se refere a qualquer mudança na forma como os elementos são ordenados durante uma animação. Isso pode ser extremamente pesado para o navegador e geralmente resultará em um grande atraso.

Considere um conteúdo diferente!

Como ficaria o design com 2x o texto? Ou como uma imagem de retrato em vez de uma imagem de paisagem? Você nunca sabe o que a equipe editorial enviará. Deve haver restrições como proporção de aspecto ou até mesmo as bordas das imagens? Se você puder, mostre isso no design.

Forneça seus projetos em ferramentas como o Zeplin

A maioria das ferramentas de design como Figma ou Adobe XD tem uma maneira de “compartilhar” designs com os desenvolvedores. A partir daí, a equipe de front-end pode inspecionar cores, configurações de tipografia, espaçamentos e outras propriedades visuais das camadas, o que permitiria que elas ficassem bem próximas aos designs.

Fornece outros recursos, como fontes ou vídeos

Se você usou uma fonte específica no site, forneça-a aos desenvolvedores. Se estiver licenciado e acessível por meio de URLs específicos, certifique-se de compartilhar também. É importante para um desenvolvedor trabalhar com as fontes corretas desde o primeiro dia. Se houver vídeos - compartilhe também! Os vídeos seriam no YouTube, Vimeo ou auto-hospedados?

Não vá para o “pixel perfeito”

Essa noção de manter a aparência final do site perfeitamente igual ao design é uma maneira fácil de fazer sua equipe de desenvolvedores odiar você e pode destruir qualquer chance de ir ao ar no prazo. Em quase todos os casos, o design NÃO será perfeito. É impossível ter 100% de certeza de que antes de cada botão você tem um espaçamento exatamente de 18 px? E não 19px? Ou que cada título tem 38px e não 37px? Ou talvez todas as bordas sejam #ddd e não haja nenhuma preta que tenha 15% de opacidade?

Os desenvolvedores corrigem pequenos erros como esses aqui e ali para manter a consistência em todo o site. Eles incorporam componentes que seguem as mesmas regras. Contanto que não haja uma mudança obviamente intencional em um caso específico, não deve haver uma razão pela qual um elemento não pode ser o mesmo em todo o quadro.

No final, o site codificado deve seguir a aparência geral do design.

Deixe comentários no design

Se você deseja que um determinado elemento seja interativo, como guias, acordeões, controles deslizantes e similares, reserve alguns segundos para escrever como ele deve funcionar no desktop, celular e o que é clicável, caso seja trocado.

Pense como um usuário

Quando terminar, pare por um segundo e imagine que está usando o site. Leia de cima para baixo, role para baixo, clique em algum lugar para ver mais. Existe algo que pode estar faltando no fluxo de trabalho? Existe uma visão de um determinado elemento que muda na interação do usuário? Se isso for verdade e não houver design, então você está deixando seus desenvolvedores descobrirem, o que adiciona estresse ao trabalho. Se os prazos forem apertados, você pode compartilhar os arquivos gerais com sua equipe e informá-los de que um poucas visualizações de “estado” estão por vir (certifique-se de mencionar quais são).

Visualizações responsivas

É assustador criar 15 páginas no Desktop e depois fazer uma versão móvel. É ainda mais irritante fazer uma versão ligeiramente diferente para tablet além disso. É por isso que alguns designers ignoram adicioná-lo. No entanto, isso significa que os desenvolvedores terão que fazer isso no código. E tomar decisões por causa disso. Se você vir elementos complicados, o ideal é exibir suas visualizações no tablet, mesmo se você não fizer o site inteiro.

Em suma

O designer pode tornar a vida do desenvolvedor um pesadelo ou uma experiência muito boa. A chave para alcançar este último é entender melhor a tecnologia que está sendo usada, HTMl / CSS, quais elementos interativos são viáveis, etc.

Se você tem a sorte de estar perto de desenvolvedores e está preocupado com certos elementos, ligue para eles para dar uma olhada em tudo. Eles certamente lhe darão dicas sobre o que é complicado e o que é fácil.