Ferramentas E Tutoriais
A lacuna entre desenvolvedores e designers está desaparecendo
Desde a última década, tem havido uma guerra fria entre designers e desenvolvedores. Designers reclamaram sobre o quão dependentes devem ser os desenvolvedores para criar maquetes que vão além de imagens estáticas. Por outro lado, os desenvolvedores se ressentem da necessidade de habilidades de designers para ajudá-los a transformar seus conceitos em interfaces capazes e amigáveis ao usuário.
Mas, à medida que as ferramentas de design se tornam cada vez mais fáceis de usar, a guerra fria está chegando ao fim.
Agora é possível criar um protótipo interativo bastante impressionante com um aplicativo sem qualquer experiência de codificação. Isso significa que os designers podem testar novos aplicativos sem ter que escrever uma única linha de código, e isso significa que os desenvolvedores podem usar ferramentas simples para trabalhar profissionalmente em seus designs sem precisar de ajuda profissional.
Os designers, obviamente, ainda podem se beneficiar mais se aprenderem a usar código, e os desenvolvedores provavelmente deveriam estudar design, mas a lacuna entre as duas habilidades está cada vez mais fácil de transpor.
Não faz muito tempo, em uma web muito, muito longe ...
O papel principal de designers digitais Cinco ou sete anos atrás, ela estava projetando imagens estáticas de páginas e telas no Photoshop para depois serem enviadas a um desenvolvedor mágico que as transformaria em um site ou aplicativo funcional. A maquete sempre foi um resultado limitado. Era estático, os dados eram falsos e não havia interações. Você já fez um teste de usuário com uma imagem estática? Não vai muito longe.
A comunicação de ida e volta entre designers e desenvolvedores tentando entender as intenções do designer criaria cadeias de e-mail longas o suficiente para engolir o mundo inteiro. Semanas de desenvolvimento se passariam apenas para descobrir, após o lançamento, que o que o desenvolvedor entendeu como 'swipe up' era muito diferente do que o designer tinha em mente. Foi um inferno.
Em um mundo como este, não há dúvida de por que todo desenvolvedor escreveu um artigo onde os designers tiveram que aprender como usar o código. O desenvolvedor que recebeu um PSD sem anotações com dezenas de camadas sem nomes não seria culpado de querer pular pela janela.
Ao mesmo tempo, os desenvolvedores interessados em criar seus próprios aplicativos ficavam frustrados com ferramentas complexas como o Photoshop ou o Illustrator. Eles precisam de uma educação abrangente em design gráfico, além de seus estágios de ciência da computação, para concretizar suas idéias. Os desenvolvedores que tentam cortar arestas e projetar para eles na hora acabam com aplicativos com um baixo nível de design e teste que tropeçam assim que entram no mercado.
O design digital não tresanda mais
Agora a situação entre designers e desenvolvedores é significativamente melhor. Com a invenção de ferramentas e plataformas de design inteligentes como Craft by InVision, o aplicativo InVision, Framer, Flow, Flinto / Principle e Sketch, designers Y Os desenvolvedores podem projetar facilmente um protótipo de um aplicativo e testá-lo sem que o usuário saiba que está usando um aplicativo sem back-end.
O aplicativo parecerá funcionar inteiramente da perspectiva do usuário. Cada interação e fluxo estarão lá. Os designers obtêm informações valiosas sem tocar em uma linha de código, e o desenvolvedor pode criar seus próprios designs com apenas alguns cliques.
Vamos examinar mais de perto essas seis ferramentas de design:
Este conjunto de aplicativos permite que os designers obtenham dados reais, em vez do “Lorem ipsum” padrão e do preenchimento de ícones de Michael Jackson. Os vários aplicativos trabalham juntos para tornar o processo de design mais suave e automatizado. Os aplicativos suportam colaboração, maquete de protótipos, sincronização e, o mais importante, seus próprios dados.
A InVision realmente mudou o jogo, permitindo que os designers criassem maquetes que não eram estáticas. Com as ferramentas simples da InVision, as imagens podem ser transformadas em protótipos clicáveis e interativos que parecem aplicativos reais. O InVision oferece suporte à colaboração, tornando mais fácil para outros designers e usuários comentarem sobre as mudanças em cada etapa do processo.
Veja o protótipo que foi criado usando Marvel (um concorrente do Invision):
Framer É quase como o InVision, mas tem a capacidade de realizar interações mais complexas. Algumas grandes empresas usam o Framer para criar aplicativos intuitivos e úteis, mas também simples. Uber é um bom exemplo, eles usaram o Framer para projetar seus app de Apple Watch Y UberPOOL .
Ambos os aplicativos podem ser usados para criar animações complexas em minutos. Ambos requerem um pouco de prática, mas uma vez que os designers se tornem fluentes com esses aplicativos, eles podem criar facilmente animações que terão uma aparência extremamente profissional e não desnecessariamente desordenadas. Você pode ver aqui muitos exemplos incríveis do que os usuários podem fazer com o Principle.
O Sketch é como o Photoshop, mas com cerca de quatro vezes a quantidade de recursos para desenvolvedores web e móveis. Essa ferramenta poderosa resolve o problema de designs estáticos sem fazer nada, permitindo que os designers criem ícones, interfaces e sites que são totalmente exclusivos e feitos à mão.
Este parece um gancho de Mike Tyson. O Webflow basicamente elimina a necessidade de designers de escrever código de front-end. Agora os designers usam este lindo editor WYSIWYG para lidar com todo o trabalho pesado.
Apps sem qualquer código
Heco : Esta agência criou animações incrivelmente complexas e alcançaram um front-end bastante sofisticado, sem desenvolvedores de front-end, usando apenas Webflow.
Como sua lista de tarefas (ou lista de afazeres ) funciona nesta maquete ao vivo. Ao tocar no aplicativo, você pode ver toda a funcionalidade de como Todoist funciona sem adivinhações.
A criação de animações CSS costumava precisar de assistentes CSS que soubessem como trabalhar com transformações, atrasos 3D e infindáveis hacks de CSS e JS para criar algo complexo. Com o Webflow, você pode criar algo como esta animação na metade do tempo e sem escrever uma única linha de código.
O futuro é design e há muito para ver
Com ferramentas de design como essa, os designers não precisam se concentrar em imagens estáticas e não precisam depender dos desenvolvedores para criar protótipos profissionais bonitos e funcionais.
Ao mesmo tempo, os desenvolvedores não precisam mais depender dos designers para apresentar grandes ideias. Os desenvolvedores podem e devem começar a adicionar habilidades de design ao seu currículo, começando com as ferramentas mencionadas acima. Nenhum desses programas é particularmente complexo de aprender, e se os desenvolvedores parassem de depender de designers e começassem a criar lindos protótipos, eles poderiam tornar os profissionais mais fáceis de contratar e sentir a satisfação (sem mencionar a economia) de levar suas ideias desde o conceito para o mercado.
Isso pode soar como uma má notícia para os designers, mas não é. Com a adição de integração simples de API, fluxos de trabalho automatizados e a capacidade de trazer dados reais, os designers podem criar protótipos sofisticados e testáveis sem ter que ir e voltar constantemente com um desenvolvedor. O resultado é que o designer pode se concentrar no que faz melhor: Projeto .
Não há mais necessidade de o trabalho do designer ser interpretado e, inevitavelmente, maculado por quem não compartilha de sua visão. Portanto, embora essas mesmas ferramentas permitam aos desenvolvedores projetar, isso não deve ameaçar os designers experientes. Em vez de se preocupar com os desenvolvedores entrando em seu campo, os designers devem ter a vantagem em todas as ferramentas descritas acima e seguir em frente com suas criações.
