Bagaimana halaman web tinkoff.ru dibuat dan dipelihara

Halo semuanya! Nama saya Sergey Mikhailov, di Tinkoff Saya bekerja sebagai kepala grup desain akuisisi: Saya menangani layanan internal, dan saya juga bertanggung jawab atas komponen desain Departemen Akuisisi Pelanggan. Saya akan memberi tahu Anda cara kami merakit halaman dengan cepat menggunakan konstruktor kami.





Bagaimana cara kerjanya sekarang

Tinkoff memiliki sekitar 2000 halaman dengan desain berbeda dan departemen atraksi bertanggung jawab atas semua halaman ini. Terdiri dari divisi yang bertanggung jawab atas produk kartu, deposito, investasi, asuransi, seluler, perjalanan, dan sebagainya.





Semua halaman kami terdiri dari blok. Misalnya pada halaman utama terdapat header, blok dengan banner utama, dengan judul dan dengan product card.





Tata letak blok di Figma
Tata letak blok di Figma

Halaman dirakit dari blok di Pembuat kami.





Pembuat halaman
Pembuat halaman

Berikut adalah contoh balok dengan kartu:





Blokir "Kartu makanan"
Blokir "Kartu makanan"

Itu sudah memiliki logika menjorok ke dalamnya, kemampuan untuk mematikan judul atau mengubah gaya tombol. Selain itu, logika peregangan sudah tertanam di blok. Misalnya, blok untuk layar 1024, dan pada resolusi 1360, blok tersebut akan meregang. Beginilah cara semua blok bekerja untuk kita. 





, , โ€” CMS. โ€” , .





Halaman yang Dikumpulkan dan Layar Draf

. 2 . , .





, , , , โ€” . 





. , , โ€” , -.





Versi desktop dan seluler dari halaman Tinkoff Platinum
ยซ ยป

, . , ยซยป. .





, .





2016 : ยซ โ€” . , ?ยป.





, 0. , . . , 1.0.





Pembuat versi 1.0
1.0

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





Pembuat versi 2.0.
2.0.

, Material Design. , - -, . , .





:





  • . , - , , . 





  • , . , , ยซยป, .





  • .





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





3.0.





Pembuat versi 3.0.
3.0.

: , , , , . , (, ) ยซยป โ€” . . .





, , , -, . โ€” . . , , .





, , , , โ€” , - , - .





. -, , . -, โ€” : ยซ ยป, , , .





::





  • . .





  • .





  • - , - .





, , . , : ยซ ยป, , , , , .





, , , , , , . โ€” . , - , . .





- , ยซยป, , , . , .





:





  • โ€” , , product owner.





  • โ€” .





  • โ€” .





  • โ€” , . 





  • - โ€” , (, , ).





  • โ€” .





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





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





:





  • . , .





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





  • . , , . , , , , .





  • . , , - โ€” - -. 









  • .





, :





  • , -, .





  • . .





  • . Figma , , , .





  • .





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





: , , , ; Figma . ( โ€” PDF Figma, ). 





. - , Figma, , , .





: , . , .





?

, ( ), . , : ยซ ยป. , , , . , :





  1. , , โ€” . . .





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





Blok tata letak untuk tata letak

Multistory, .





Multistory , , , , , .





MultiStory
MultiStory

, , .





Perpustakaan blok di Konstruktor

RealStory. , (, ), , . : .





Kisah nyata
RealStory

, -, . , . - , - . 





, , - , โ€” : , . . 





, , . , , , , , . 





Notion, , - , , . .





Proses di Notion
Notion

?

-, - , , : ยซ , ยป. , . , , . , (, ), . , , . 





, . , โ€” . : , , -. - โ€” , .








All Articles