Comment les pages Web tinkoff.ru sont créées et maintenues

Bonjour à tous! Je m'appelle Sergey Mikhailov, chez Tinkoff je travaille en tant que chef du groupe de conception d'acquisition: je m'occupe des services internes, et je suis également responsable de la composante conception du service d'acquisition de clients. Je vais vous dire comment nous assemblons rapidement des pages à l'aide de notre constructeur.





Comment ça marche maintenant

Tinkoff a environ 2000 pages avec des designs différents et le département des attractions est responsable de toutes ces pages. Il se compose de divisions responsables des produits de cartes, des dépÎts, des investissements, des assurances, du mobile, des voyages, etc.





Toutes nos pages sont constituĂ©es de blocs. Par exemple, sur la page principale, il y a un en-tĂȘte, des blocs avec la banniĂšre principale, avec un titre et une fiche produit.





Disposition des blocs dans Figma
Disposition des blocs dans Figma

Les pages sont assemblées à partir de blocs dans notre constructeur.





Générateur de pages
Générateur de pages

Voici un exemple d'un tel bloc avec des cartes:





Bloquer les "cartes de nourriture"
Bloquer les "cartes de nourriture"

Il a dĂ©jĂ  une logique en retrait intĂ©grĂ©e, la possibilitĂ© de dĂ©sactiver le titre ou de changer le style du bouton. De plus, la logique d'Ă©tirement est dĂ©jĂ  intĂ©grĂ©e au bloc. Par exemple, un bloc pour un Ă©cran de 1024 et Ă  une rĂ©solution de 1360, le bloc s'Ă©tirera. C'est ainsi que tous les blocs fonctionnent pour nous. 





, , — CMS. — , .





Écran Pages et brouillons collectĂ©s

. 2 . , .





, , , , — . 





. , , — , -.





Version bureau et mobile de la page Tinkoff Platinum
« »

, . , «». .





, .





2016 : « — . , ?».





, 0. , . . , 1.0.





Constructeur version 1.0
1.0

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





Constructeur version 2.0.
2.0.

, Material Design. , - -, . , .





:





  • . , - , , . 





  • , . , , «», .





  • .





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





3.0.





Constructeur version 3.0.
3.0.

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





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





, , , , — , - , - .





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





::





  • . .





  • .





  • - , - .





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





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





- , «», , , . , .





:





  • — , , product owner.





  • — .





  • — .





  • — , . 





  • - — , (, , ).





  • — .





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





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





:





  • . , .





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





  • . , , . , , , , .





  • . , , - — - -. 









  • .





, :





  • , -, .





  • . .





  • . Figma , , , .





  • .





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





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





. - , Figma, , , .





: , . , .





?

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





  1. , , — . . .





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





Bloc de mise en page pour la mise en page

Multistory, .





Multistory , , , , , .





MultiStory
MultiStory

, , .





BibliothĂšque de blocs dans le constructeur

RealStory. , (, ), , . : .





Histoire vraie
RealStory

, -, . , . - , - . 





, , - , — : , . . 





, , . , , , , , . 





Notion, , - , , . .





Process in Notion
Notion

?

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





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








All Articles