Wie tinkoff.ru-Webseiten erstellt und gepflegt werden

Hallo zusammen! Mein Name ist Sergey Mikhailov, bei Tinkoff arbeite ich als Leiter der Akquisitionsdesigngruppe: Ich beschĂ€ftige mich mit internen Services und bin auch fĂŒr die Designkomponente der Kundenakquisitionsabteilung verantwortlich. Ich werde Ihnen sagen, wie schnell wir Seiten mit unserem Konstruktor zusammenstellen.





Wie es jetzt funktioniert

Tinkoff hat ungefĂ€hr 2000 Seiten mit unterschiedlichen Designs und die Attraktionsabteilung ist fĂŒr all diese Seiten verantwortlich. Es besteht aus Abteilungen, die fĂŒr Kartenprodukte, Einzahlungen, Investitionen, Versicherungen, MobilgerĂ€te, Reisen usw. verantwortlich sind.





Alle unsere Seiten bestehen aus Blöcken. Auf der Hauptseite befindet sich beispielsweise eine Kopfzeile, die mit dem Hauptbanner, einem Titel und einer Produktkarte blockiert ist.





Blocklayout in Figma
Blocklayout in Figma

Seiten werden in unserem Konstruktor aus Blöcken zusammengesetzt.





Seitenersteller
Seitenersteller

Hier ist ein Beispiel fĂŒr einen solchen Block mit Karten:





Block "Lebensmittelkarten"
Block "Lebensmittelkarten"

Es ist bereits eine eingerĂŒckte Logik eingebaut, die es ermöglicht, den Titel auszuschalten oder den Stil der SchaltflĂ€che zu Ă€ndern. Außerdem ist die Strecklogik bereits in den Block eingebettet. Beispiel: Ein Block fĂŒr einen 1024-Bildschirm und bei einer Auflösung von 1360 wird der Block gedehnt. So funktionieren alle Blöcke bei uns. 





, , — CMS. — , .





Bildschirm "Gesammelte Seiten und EntwĂŒrfe"

. 2 . , .





, , , , — . 





. , , — , -.





Desktop- und Mobilversion der Tinkoff Platinum-Seite
« »

, . , «». .





, .





2016 : « — . , ?».





, 0. , . . , 1.0.





Konstruktor Version 1.0
1.0

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





Konstruktor Version 2.0.
2.0.

, Material Design. , - -, . , .





:





  • . , - , , . 





  • , . , , «», .





  • .





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





3.0.





Konstruktor Version 3.0.
3.0.

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





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





, , , , — , - , - .





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





::





  • . .





  • .





  • - , - .





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





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





- , «», , , . , .





:





  • — , , product owner.





  • — .





  • — .





  • — , . 





  • - — , (, , ).





  • — .





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





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





:





  • . , .





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





  • . , , . , , , , .





  • . , , - — - -. 









  • .





, :





  • , -, .





  • . .





  • . Figma , , , .





  • .





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





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





. - , Figma, , , .





: , . , .





?

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





  1. , , — . . .





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





Layoutblock fĂŒr Layout

Multistory, .





Multistory , , , , , .





Mehrstöckig
MultiStory

, , .





Blockbibliothek im Konstruktor

RealStory. , (, ), , . : .





Wahre Begebenheit
RealStory

, -, . , . - , - . 





, , - , — : , . . 





, , . , , , , , . 





Notion, , - , , . .





Prozess in Notion
Notion

?

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





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








All Articles