Como as páginas da web tinkoff.ru são criadas e mantidas

Olá a todos! Meu nome é Sergey Mikhailov, na Tinkoff, trabalho como chefe do grupo de design de aquisição: lido com serviços internos e também sou responsável pelo componente de design do Departamento de Aquisição de Clientes. Vou lhe dizer como montamos páginas rapidamente usando nosso construtor.





Como funciona agora

A Tinkoff possui cerca de 2.000 páginas com designs diferenciados e o departamento de atração é responsável por todas essas páginas. É composto por divisões responsáveis ​​por produtos de cartão, depósitos, investimentos, seguros, celular, viagens e assim por diante.





Todas as nossas páginas são compostas por blocos. Por exemplo, na página principal há um cabeçalho, blocos com o banner principal, com um título e com um cartão de produto.





Layout de bloco na Figma
Layout de bloco na Figma

As páginas são montadas a partir de blocos em nosso Construtor.





Construtor de página
Construtor de página

Aqui está um exemplo de tal bloco com cartas:





Bloquear "Cartões de comida"
Bloquear "Cartões de comida"

Ele já tem uma lĂłgica indentada incorporada, a capacidade de desligar o tĂ­tulo ou alterar o estilo do botĂŁo. AlĂ©m disso, a lĂłgica de extensĂŁo já está embutida no bloco. Por exemplo, um bloco para uma tela de 1024 e com uma resolução de 1360, o bloco será esticado. É assim que todos os blocos funcionam para nĂłs. 





, , — CMS. — , .





Páginas coletadas e tela de rascunhos

. 2 . , .





, , , , — . 





. , , — , -.





Versão para desktop e celular da página Tinkoff Platinum
« »

, . , «». .





, .





2016 : « — . , ?».





, 0. , . . , 1.0.





Construtor versĂŁo 1.0
1.0

, - , , , . , , , , . 2.0.





Construtor versĂŁo 2.0.
2.0.

, Material Design. , - -, . , .





:





  • . , - , , . 





  • , . , , «», .





  • .





, , - . , . , , , User Story Mapping. .





3.0.





Construtor versĂŁo 3.0.
3.0.

: , , , , . , (, ) «» — . . .





, , , -, . — . . , , .





, , , , — , - , - .





. -, , . -, — : « », , , .





::





  • . .





  • .





  • - , - .





, , . , : « », , , , , .





, , , , , , . — . , - , . .





- , «», , , . , .





:





  • — , , product owner.





  • — .





  • — .





  • — , . 





  • - — , (, , ).





  • — .





, , . . -, - . , Figma , - Figma . , :





, , Figma , - figma- , . , , .





:





  • . , .





  • . , , Figma, . , , , . , - figma-, , . , . 





  • . , , . , , , , .





  • . , , - — - -. 









  • .





, :





  • , -, .





  • . .





  • . Figma , , , .





  • .





? -, . , , - . , , , , .





: , , , ; Figma . ( — PDF Figma, ). 





. - , Figma, , , .





: , . , .





?

, ( ), . , : « ». , , , . , :





  1. , , — . . .





  2. , . Figma , , , , UI . , . .





Bloco de layout para layout

Multistory, .





Multistory , , , , , .





MultiStory
MultiStory

, , .





Biblioteca de blocos no construtor

RealStory. , (, ), , . : .





HistĂłria real
RealStory

, -, . , . - , - . 





, , - , — : , . . 





, , . , , , , , . 





Notion, , - , , . .





Processo em noção
Notion

?

-, - , , : « , ». , . , , . , (, ), . , , . 





, . , — . : , , -. - — , .








All Articles