Conceitos de desenvolvimento web Todos os web designers devem entender

Há muito a ser dito sobre a divisão encontrada entre designers e desenvolvedores. Concedido há muitos híbridos designer / desenvolvedor que podem entender os dois lados da moeda, mas eles são poucos e distantes entre.

Projetos criativos prosperam comunicação adequada. No entanto, isso pode ser difícil quando designers e desenvolvedores não têm certeza sobre como conversar um com o outro. Eu não acho que os designers precisem saber como escrever JavaScript adequado, nem os desenvolvedores devem dominar a seleção de tipografia. Mas existem alguns tópicos fundamentais que eu acho ir nos dois sentidos.

Os tópicos a seguir são de minha opinião pessoal ideias vitais de desenvolvimento web que todos os designers devem entender. Como designer / desenvolvedor, sei o quão confuso pode ser estudar ambas as áreas. Mas vale sempre a pena o esforço para aprender, porque uma compreensão clara melhora a comunicação e torna o designer muito mais valioso para uma equipe criativa..

Comportamento do Código Frontend

Geralmente, acredita-se que os designers da Web tenham habilidades de frontend junto com seus talentos de design. Este é um tópico muito debatido, principalmente porque há sem resposta correta.

Designers devem fazer o que eles estão confortáveis ​​com. Se isso significa apenas fazer um trabalho de design visual, assim seja. No entanto, uma breve compreensão das tecnologias frontend pode fazer o mesmo designer mais intuitivo ao criar ativos para desenvolvedores.

Eu acredito que todo designer deveria ao menos entender o três linguagens fundamentais do desenvolvimento frontend (HTML, CSS e JS), juntamente com a forma como são usados. Por exemplo, a maioria dos menus suspensos depende do JavaScript, mas também há alternativas apenas para CSS.

Quando um designer cria um menu suspenso, eles podem pensar no complexidade de implementá-lo via código. Um designer que entende quais elementos exigem JavaScript pode estar mais bem preparado para entender o que eles estão pedindo aos desenvolvedores para construir.

Isso é possível sem aprender a escrever uma única linha de código.

CSS é feito para estilo o site. É principalmente estático além de animação CSS e CSS cria a maioria dos visuais numa página. A maioria dos recursos dinâmicos são criados com JavaScript.

Se você puder entender essa divisão, ela irá inspirar um esforço consciente no trabalho de design. Isso também forçará os projetistas de movimento de UX a considerar quanto trabalho vai para animar uma interface.

Técnicas Responsivas

Todo web designer deve pelo menos conhecer o termo design responsivo. Isso permite que os sites adaptar-se a diferentes tamanhos de tela, para cada um dos quais um layout diferente pertence. As dimensões do dispositivo quando um novo layout é aplicado são definido por pontos de interrupção, adicionado em (um dos) arquivo (s) CSS.

Os pontos de interrupção são especificados por um certa largura de pixel (e / ou às vezes altura), mínimo ou máximo, no qual o layout se adapta para se adequar ao tamanho da tela. Portanto, um layout responsivo terá uma aparência diferente em um monitor de 1080px do que em um smartphone de 320px.

Para ver como os pontos de interrupção funcionam em sites reais, confira o site de consultas de mídia.

Seu trabalho como designer é considerar como cada ponto de interrupção influenciar o maquete. Você pode ser encarregado de projetar várias composições, cada encaixe em diferentes dimensões da tela.

Depois de entender que um ponto de interrupção CSS define as condições quando o layout muda, você terá muito mais facilidade para entregar esses recursos à equipe de desenvolvimento..

Pense modular com projetos

Os desenvolvedores sempre querem reutilizar código tanto quanto possível, já que essa abordagem torna o desenvolvimento menos verboso e reduz o tamanho dos arquivos - na verdade, é uma importante técnica de otimização de código.

Design modular descreve um método de criação de sites fora de “módulos” Isso pode ser reutilizado ao longo do tempo. Pense nos botões, entradas de formulário, estilos de título ou blockquotes com estilos extravagantes.

Se vocês elementos de design modular, torna-se mais fácil para os desenvolvedores codificarem o layout com classes CSS reutilizáveis. É sempre uma boa ideia pensar em onde você pode razoavelmente reutilizar as mesmas cores, texturas e elementos de página, mas você precisa ser inteligente para não prejudicar a estética geral.

É ainda melhor se você anotar quais elementos você copiou em diferentes maquetes, para que os desenvolvedores possam marque essas partes do site com o código de repetição - tornar o desenvolvimento mais rápido e simples.

Design modular refere-se a desenho atômico, ambas as abordagens são voltadas para desenvolvedores. Contudo visualização pode ajudá-lo a entender como o código funciona, por isso, se você está lutando para visualize design modular confira este post para ver alguns exemplos.

Entenda Imagens Retina e SVG

Geralmente é trabalho do designer preparar imagens, capturar fotos necessárias e criar ícones do zero. Isso significa que os designers são os únicos responsáveis ​​por entregando os recursos visuais que os desenvolvedores eventualmente codificam no layout. É por isso que é importante entender tamanhos de retina e para passar ativos suportados pela retina para os desenvolvedores junto com a (s) maquete (s) final (ais).

Eu recomendo altamente este post Smashing Magazine, se você quiser saber mais sobre os fluxos de trabalho de design de retina. Retinize É uma coleção gratuita de ações do Photoshop que pode criar automaticamente versões de retina dos seus ativos.

A maioria dos designers já sabe apoiar Imagens @ 2x, mas os mais novos dispositivos iPhone 6+ Resoluções @ 3x. No entanto, alguns projetos não se incomodam com os tamanhos de imagem @ 3x, portanto converse com o líder do projeto antes de finalizar qualquer ativo.

Uma última coisa a considerar é a avanço do SVG Na internet. Todos os navegadores modernos suportam SVG, que é um formato de imagem baseado em vetor. Isso significa que os ícones SVG escalar automaticamente sem perda de qualidade, para que você não precise de recursos de retina para gráficos SVG.

Nem todas as equipes de criação estão dispostas a usar SVGs para web design. Eles são suportados pelos navegadores com certeza, mas em alguns casos eles também podem ser difíceis de implementar. É por isso que a comunicação é vital para um relacionamento de designer / desenvolvedor bem-sucedido.

Discuta os prós e contras de usar gráficos vetoriais e decida o que funciona melhor para cada projeto. Por ter uma compreensão desses recursos, você poderá se comunicar com os desenvolvedores com clareza e até mesmo ajudá-los a codificar o layout do suporte de retina..

Entenda a acessibilidade

Aprimoramento progressivo e degradação graciosa Existem duas maneiras diferentes de lidar com o mesmo problema: acessibilidade. Nem todos os usuários estarão em dispositivos ou executarão navegadores que suportem 100% dos recursos dinâmicos de um site.

Esses usuários ainda devem obter experiência que funciona, e isso precisa ser tratado com codificação adequada. Alguns leitores de tela podem ignorar todo o código JavaScript e CSS, mas o site ainda precisa funcionar.

Eu fiz recentemente um post cobrindo aprimoramento progressivo em detalhe, como é o meu método preferido de desenvolvimento. Aprimoramento progressivo começa com características muito básicas, então trabalha até mais “avançado” características.

Degradação graciosa é o abordagem oposta Onde todos os principais recursos são projetados primeiro, então o desenvolvedor decide como lidar com esses recursos se o usuário não suportar JavaScript ou CSS.

É improvável que um designer seja solicitado a fazer modelos para qualquer uma dessas situações. Mas é importante que os designers entendam esses termos e o que eles significam, porque eles afetam o processo de desenvolvimento. Isso é especialmente verdadeiro para projetos em que a acessibilidade é uma grande preocupação.

No fechamento

Existem alguns tópicos que eu pulei porque considero-os opcionais. Controle de versão, tratamento de erros e animações em JavaScript são alguns tópicos mais complexos que os designers podem querer aprofundar.

Mas, sinceramente, os pontos abordados neste post vão mais do que ajudar os designers a entender os requisitos de uma equipe de desenvolvimento. Por apenas skimming a superfície do desenvolvimento web você vai ter uma visão isso ajudará você a comunicar idéias e simpatizar com problemas que ocorrem durante a produção.

Se você está procurando por mais conteúdo relacionado, dê uma olhada nestes posts:

• Como se comunicar eficazmente com os desenvolvedores (smashingmagazine.com)
• Ajude os designers e desenvolvedores a aprenderem a entender uns aos outros (uie.com)
• Aprender a codificar lhe dá vantagens como designer de experiência (jessicaivins.net)