Projeto VS Code - Por que eles deveriam andar de mãos dadas?

Os designers devem se concentrar apenas na arte da marca visual de um site? Os desenvolvedores só devem saber como codificar? Qual é a importância do desenvolvimento de front-end no Drupal? Vamos encontrar respostas para todas as suas perguntas neste artigo.

Quando nos aprofundamos nesse enigma do design versus código, nos ocorre que ambos são, na verdade, complementares um ao outro. Mas a pergunta é porque? Por que os designers de UI / UX precisam aprender o código e seus fundamentos e o mesmo vale para os desenvolvedores em termos de design.

Ambos os domínios envolvem ser criativo, entender os usuários e seu comportamento. Ser um designer sem conhecer as habilidades básicas de codificação e estrutura de código é como preparar um bolo pela metade, que ao comer pode levá-lo a uma farra no banheiro.

Mas antes de tudo, vamos ao básico com um exemplo.

Projetando Vs Coding: A semelhança com uma diferença

Para um escritor, é preciso imaginar e concluir seus pensamentos antes de realmente escrevê-los. Ninguém apenas pega um diário ou vai a um blog ou plataforma de mídia social e começa a escrever imediatamente. É por isso que todo o procedimento é chamado de composição. E sim, escrever um e-mail no Gmail também é chamado de “escrever”. Agora, por que estamos falando sobre escritores, composições e tudo. Vamos direto ao assunto. Nesse caso, a imaginação é o seu projeto e registrar seus pensamentos é o desenvolvimento. Espero que você tenha uma imagem melhor agora; vamos avançar para um lado diferente deste tópico.

Os designers devem aprender a codificar e os desenvolvedores a aprender sobre UI / UX?

Durante sprints de código de design, você pode se deparar com situações em que todos os designs criados não são viáveis. Eventualmente, o produto final acaba sendo uma versão ajustada do design original. As discussões acontecem, o cliente muda os requisitos, mas o problema permanece consistente. Essas situações podem ser evitadas se as equipes de design e desenvolvimento trabalharem juntas simultaneamente desde o início. Dessa forma, o trabalho é realizado com mais eficiência porque eles estão recebendo feedback contínuo uns dos outros sobre o que é viável ou não.

Compreender os dois domínios não é tão difícil quanto você pode pensar. Em qualquer um deles, é preciso imaginação, processo de pensamento e prática. E sim, sem mencionar que as habilidades fundamentais são design e código, que é uma escolha a ser aprendida, mas não obrigatória se você conhece um.

Um designer deve conhecer a viabilidade, a possibilidade e os desafios de um design e você só saberá disso quando souber como fazer isso por meio do código. O mesmo vale para os desenvolvedores. Quando os desenvolvedores entendem os diferentes cenários pelos quais os usuários podem passar, sua experiência de usuário, solução de problemas, solução, etc., isso pode tornar as coisas muito mais simplificadas e eficientes.

Aqui estão as razões pelas quais um indivíduo deve aprender o básico de qualquer uma das habilidades (código ou design) além de sua especialidade principal

1. Mais controle sobre a aparência do produto: o que isso basicamente significa é que quando um desenvolvedor sabe como a análise de design funciona e qual processo de design está envolvido, ele pode adaptar essas ideias de design e ter mais controle sobre o produto final e, assim, resultando em uma entrega mais rápida do produto.
2. Entenda os usuários e aplique isso ao design: quando um desenvolvedor entende o produto da perspectiva do usuário, isso dá a ele um enorme poder de construir algo que os usuários realmente precisam e desejam. Por exemplo, ele compreenderá como os usuários reagirão a diferentes tipografias, diferentes estilos de botão, esquemas de cores, etc.
3. Adaptação de design: É igualmente importante para os designers saberem como codificar. Quando ele sabe como o produto projetado será estruturado durante o desenvolvimento, ele pode melhorar o design e torná-lo mais eficiente, reduzindo assim o tempo e o esforço dos desenvolvedores.

Elaborando as consequências de ter apenas conhecimentos básicos com exemplos

Para uma melhor compreensão de por que o Design e a codificação devem andar de mãos dadas, vamos mergulhar em alguns exemplos.

O acima é um exemplo clássico do uso de estrutura não sequencial. Aqui, a estrutura é reordenada enquanto é desenvolvida para dispositivos móveis. Esta não é apenas uma prática ruim; também é demorado e complicado. No entanto, se um designer conhecesse a estrutura do código que está sendo desenvolvido, isso poderia ter sido fácil e possivelmente evitado.

Considere o exemplo acima de uma sobreposição pop-up com um pergaminho. Uma sobreposição pop-up é projetada de forma que deve desviar a atenção do usuário para um único assunto e só é usada como um foco quando uma determinada informação precisa ser exibida. Aqui, a sobreposição de pop-up tem uma rolagem no fundo que pode distrair o usuário e pode não ser ineficaz

Um desenvolvedor sempre se concentra em concluir a tarefa com mais eficiência e em um ritmo mais rápido e, no processo, ele perde alguns aspectos do design, que ele pode considerar desnecessários ou que poderiam ser feitos ajustando um pouco o design. O exemplo mencionado acima mostra o cenário exato em que um desenvolvedor faz seu trabalho, mas acaba comprometendo o design. Portanto, se o desenvolvedor tivesse uma experiência com UI / UX básica, esse problema poderia ser evitado de maneira fácil e fácil.

Como outro exemplo, vamos tirar as capturas de tela acima que são de um aplicativo de economia de dinheiro. A tarefa em si não possui nenhum campo de entrada para uma assinatura digital. Além disso, ao enviar o formulário, a mensagem de erro não fornece ao usuário qualquer orientação ou sugestão de como obter uma assinatura digital válida. Se um desenvolvedor conhecesse os fundamentos de UI / UX, ele poderia facilmente guiar o usuário no próximo processo ou poderia ter exibido a mensagem de uma forma mais simples com uma referência adequada ao campo ou sugestões.

Onde começar?

Começar é sempre uma boa ideia. Para designers, o básico a aprender é HTML, CSS e um pouco de JS / jQuery. Existem muitas plataformas de aprendizagem online e sites com ferramentas IDE ao vivo para você praticar e aprender.

HTML: A estrutura básica de qualquer design vem primeiro, e é o código de qualquer produto.
JS / jQuery: Sliders, pop-ups, drop-downs e muito mais podem ser alcançados com estes
Sandbox: ferramenta dinâmica para brincar com seu código
CSS / SCSS : definir o estilo da estrutura é um processo criativo e você pode obtê-lo por CSS / SCSS
W3Schools: uma plataforma de aprendizagem online simples e uma boa para começar
Codrops (Tympanus): uma vasta biblioteca com design e mente de desenvolvedor na mesma plataforma

Para desenvolvedores, você pode começar seguindo as melhores práticas sobre UI / UX com -
Behance: pilha de design completa para portfólio profissional e inspiração
Dribbble: ideias de design para postar e se inspirar
Muzli: blogs, inspirações, ideias
Meio: blogs sobre qualquer campo (quase), melhores práticas e tutoriais
Awwwards: sites indicados para melhor design e vencedores para se inspirar
XD / Figma / Sketch: Ferramentas para projetar maquetes, wireframes para UI / UX

Para Designers

Para desenvolvedores

Desenvolvimento de front-end em Drupal

O Drupal 8 como um CMS é uma estrutura de gerenciamento de conteúdo de interface do usuário / UX muito amigável ao designer porque tem muito a oferecer direto da caixa, sendo o mais significativo a variedade de temas disponíveis e designs responsivos. Claro, há muitos outros recursos nos quais posso pensar agora, mas vamos deixar isso para outro dia.

Enquanto os designers de UX aplicam suas habilidades criativas e se concentram na apresentação visual de um site Drupal, os desenvolvedores de front-end do Drupal preenchem a lacuna entre os designers de UX e os desenvolvedores de back-end do Drupal. São eles que implementam os componentes visuais entregues pelo designer em um site Drupal. Embora o designer de UX e o desenvolvedor de front-end do Drupal pensem em termos de experiência do usuário e solução de problemas relativos à UX, eles adotam abordagens diferentes para resolvê-los. Este último, porém, sempre encontra uma resolução por meio do código.
Os desenvolvedores front-end do Drupal são responsáveis ​​por entregar belos sites do Drupal trabalhando e personalizando os temas do Drupal. Eles devem ser capazes de solucionar problemas de front-end para os quais precisariam estar equipados com conhecimento de PHP, CSS, jQuery, CSS, HTML e, o mais importante, design de sites mobile-first.

Com a crescente popularidade dos sites Drupal sem cabeça e da arquitetura desacoplada, os desenvolvedores de front-end Drupal que entendem de estruturas de desenvolvimento de front-end como Angular, ReactJS, Vue.js, sempre têm uma vantagem competitiva.
Portanto, para ser capaz de se destacar no desenvolvimento front-end do Drupal, é necessário sair da zona de conforto e aprender a melhor forma de criar e implementar experiências digitais modernas equipadas com as tecnologias mais recentes.