Tempo para os designers mudarem de design baseado em imagem para design baseado em código

Por que mudar de design baseado em imagem para design baseado em código?

Tem havido um grande problema desde o início do design de produto digital. Os designers são separados do processo de desenvolvimento do produto e são forçados a trabalhar apenas com software.

Os designers usam gráficos raster ou ferramentas de design vetorial para desenhar imagens à medida que são isoladas do resto da organização. O processo na maioria dos casos permanece idêntico, mesmo que funcionem em softwares diferentes, como Photoshop, Gimp, Sketch ou Fireworks. Um conjunto de imagens estáticas é enviado aos engenheiros conforme a intenção renderizada pelos designers.

É extremamente tedioso mostrar diferentes estados da interface por meio de placas de arte estáticas. Portanto, nem tudo é detalhado pelos designers. E, eventualmente, toda a interface do usuário é construída pelos engenheiros com a ajuda de um conjunto de imagens estáticas incompletas. Muitas vezes, em uma longa comunicação de ida e volta, todos os estados interativos geralmente são resolvidos.

A experiência não é representada com precisão com designs estáticos e, portanto, os testes geralmente são cansativos para os usuários. É devido a esses processos ineficientes que uma organização leva a produtos malsucedidos e equipes frustradas.

Graças à evolução da tecnologia, hoje temos uma maneira melhor de projetar as coisas. As ferramentas de design baseadas em imagem estão sendo rapidamente substituídas pelo paradigma de ferramentas de design baseado em código. As representações estáticas do design extraídas de ferramentas de design vetorial ou raster são substituídas por designs renderizados em que os designers o intencionam diretamente no código sem realmente saber como codificar.

Um novo fluxo de trabalho é fornecido pelo novo conjunto de ferramentas onde:

• Projetistas e Engenheiros estabelecem uma única fonte de verdade
• Sem nenhuma experiência de codificação, ele capacita os designers com todo o poder da codificação
• A dupla de designers e engenheiros está conectada por meio de um único processo criativo colaborativo que cria uma evolução espetacular do fluxo de trabalho

Design baseado em imagem para design baseado em código com UXPin

A primeira e básica questão aqui é o que não é bom ou ineficiente com o design baseado em imagem antes de fazer a transição do design baseado em imagem para o design baseado em código. Você deve estar bem ciente de que existem dois paradigmas de ferramentas de design, ou seja, ferramentas de design baseadas em código e baseadas em imagem.

Uma ferramenta de design baseada em imagem é uma abordagem que vem sendo usada há muitas décadas e é consideravelmente antiga. Os designers têm que construir gráficos vetoriais ou raster quando desenham algo que é a ideia desta abordagem de ferramentas.

Com esta abordagem, os designers têm a máxima flexibilidade. De ilustrações avançadas a ícones simples, tudo pode ser efetivamente desenhado dessa maneira, incluindo o mais belo nível de detalhes. Embora quando se trata de desenvolvimento profissional de produtos digitais, geralmente quebra. Aqui está a razão pela qual isso acontece.

1. Falta de interoperabilidade: A interface real de um produto, exceto para fotografias, ilustrações e ícones, nunca é construída com esses gráficos. Os designers trabalham fora das restrições configuradas no código ao trabalhar no design de interface em ferramentas de design baseadas em imagem. Devido a isso, eles podem criar coisas que são caras para codificar e aquelas que são difíceis de uma maneira desconhecida.

2. Falta de precisão: Além de criar designs maravilhosos e detalhados, os resultados mais imprecisos durante o processo de desenvolvimento geralmente são com ferramentas baseadas em imagens. O trabalho do designer é renderizado com um processo completamente diferente.

Portanto, há uma diferença no código de gradientes, texto e cor escolhidos por um designer e por um engenheiro mesmo com a aplicação das mesmas especificações. As equipes são afetadas por um desalinhamento maciço por causa disso.

3. Design Estático: O foco do fluxo de trabalho na ferramenta de design baseado em imagem está na construção de pranchetas estáticas para todos os estados da interface que eventualmente são vinculados. Para projetos profissionais, esta é uma abordagem inovadora. Na janela estática, os padrões mais simples tornam-se como uma lista suspensa que não pode ser gerenciada.

Isso acontece devido à falta de capacidade de preservar componentes interativos para reutilização e devido a uma quantidade consideravelmente grande de pranchetas. Além de todas essas ferramentas, permitem apenas a interação básica sem a capacidade de definir variáveis ​​para conteúdo, estados de elementos, lógica condicional e outros.

4. Fraca colaboração na engenharia de projeto: O processo de engenharia é completamente diferente desta ferramenta e não pode ser mesclado. A saída de ambos os mundos está desconectada de sua própria natureza.

As tecnologias usadas pelos usuários são o produto final do trabalho dos desenvolvedores, enquanto camadas adicionais de abstração que estão longe da experiência do usuário final são introduzidas pelo design baseado em imagem.

Designers e engenheiros estão desconectados e frustrados uns com os outros por causa de componentes interativos reutilizáveis, falta de interações reais e a capacidade de importar conexões do código.

Singularidade no design baseado em código

É importante saber o que há de especial neste design, pois estamos enfatizando a transição do design baseado em imagem para o design baseado em código. Quando um usuário desenha algo usando uma ferramenta de design baseada em código, ele cria CSS/HTML/JS relevante e envolve o navegador. Isso renderiza o mecanismo para mostrar os resultados visualmente.

A seguir estão os benefícios para os designers após a transição do design baseado em imagem para o design baseado em código.

1. Fidelidade: Há uma correspondência de cem por cento entre a intenção de um designer e um resultado codificável quando se usa um design baseado em código. Para renderizar todos os projetos de design, a tecnologia usada no design baseado em código é a mesma do desenvolvimento web.

2. Elimina a diferença de restrição entre designers e desenvolvedores: Coisas difíceis de projetar e impossíveis de recriar em código podem ser criadas pelos designers em ferramentas baseadas em imagem. Essas mesmas restrições são aplicáveis ​​tanto para designers quanto para desenvolvedores em ferramentas baseadas em código. Por isso, garante que designers e desenvolvedores permaneçam em sincronia.

3. Substituindo quadros de arte por componentes interativos: Em vez de quadros de arte vinculados, a ferramenta de design baseada em código usa as interações mais avançadas nos componentes. Essa abordagem capacita diretamente os designers a criar sistemas de design interativos altamente reutilizáveis ​​e também imita o desenvolvimento.

4. Interações realistas e poderosas: Com a transição de projetos baseados em imagem para projetos baseados em código, os objetos podem interagir uns com os outros, mover-se na tela e criar padrões complexos. Não requer que se saiba codificar o que é mais importante para colaboração com engenheiros e testes com usuários.

5. Cria a colaboração mais forte de todos os tempos: Uma abordagem completamente nova e revolucionária para a colaboração de engenharia e design é alcançada por meio de um paradigma baseado em código.

Artigo relacionado

Diferença entre Web Designer e Desenvolvedor Web