O sistema de design tornou-se tão elegante e quase uma ferramenta indispensável para uma empresa de TI quanto o uso de placas kanban e ágil. Existem muitas definições de um sistema de design: alguém entende por ele apenas um kit de interface do usuário, enquanto alguém acredita que um sistema de design necessariamente inclui uma base de componente no código.
De como entendemos que é hora de mudar de um kit de interface do usuário para esboçar e exibir estilos no código - abaixo do corte.
Por onde começamos
Primeiro, tínhamos um kit de interface do usuário de esboço para cada uma das plataformas - Web, iOS, Android. Também lançamos um guia do Wordpress que descreve como usar e combinar componentes e explica em que o estilo QIWI se baseia. O uso de um único kit e guias de interface do usuário ajuda a acelerar o trabalho dos designers e a tornar visualmente consistente a interface do produto em diferentes plataformas.
Um único kit de interface do usuário é usado no
QIWI Wallet , no
QIWI Piggy Bank , no
QIWI Bonus , no
QIWI Cashier e no
QIWI Teamplay . Também o usamos ao projetar interfaces para novos produtos. O número de produtos lançados está em constante crescimento; portanto, a criação de modelos para páginas internas foi uma etapa lógica. Modelos para páginas front-end ajudam a reduzir o nível de discrepância de estilos e a acelerar significativamente os processos de design.
Na primeira etapa, obtivemos um sistema de design visual, com base no qual agora podemos implantar um sistema de design no código.
O que agora
Começamos a preencher o sistema de design neste verão. Agora, desenvolvedores de diferentes equipes e todos os designers da QIWI Wallet estão trabalhando no sistema de design.
No estágio inicial, nos comunicamos ativamente com empresas que já implementaram com sucesso o sistema de design. Para entender o que será do sistema de design e determinar os estilos, realizamos reuniões regulares com a equipe de design.
Um aspecto importante ao criar um sistema de design é a comunicação com a equipe de desenvolvimento, uma das idéias do projeto é criar uma comunidade de desenvolvedores e designers de diferentes equipes que trabalharão juntos para criar e concluí-lo, compartilhando experiências entre si.
Agora ainda estamos no caminho, o processo está em andamento, os planos para o próximo ano são preencher a base dos principais componentes e, ao mesmo tempo, adicionar componentes exclusivos para produtos individuais, tanto nos segmentos B2B quanto nos B2C.
No entanto, nem todos os produtos QIWI estão incluídos no sistema de design. Por exemplo, a
consciência não está incluída - o estilo visual deste produto é deliberadamente diferente.
Como é o trabalho
Quando um novo componente aparece, nós o coordenamos dentro da equipe de design e o colocamos no kit da interface do usuário, depois ele entra em Zeplin e Abstract. Resumo permite que você versão layouts, é uma espécie de Git para designers. No kit da interface do usuário, o componente finalizado entra no repositório no GitHub, onde os desenvolvedores podem encontrá-lo.
Agora, o sistema de design está em processo de preenchimento, já possui os componentes básicos. A seguir, estão padrões e padrões maiores + componentes exclusivos do produto.
O sistema de design é útil para todos os participantes nos processos do produto:
- para negócios - o sistema de design permite duas vezes mais rápido lançar novas soluções e testar hipóteses de produtos;
- para a equipe - existe um único banco de dados de componentes testados, o que aumenta a velocidade e a qualidade do trabalho;
- para usuários - ajuda a criar uma experiência unificada para o usuário na família de produtos QIWI.
Agora estamos trabalhando para tornar o sistema de design flexível e personalizável para novos estilos.
Uma das principais tarefas é transferir produtos existentes para um único sistema. Isso ajudará a se livrar do legado em design e código e manterá constantemente as interfaces de produtos e serviços atualizadas.