Cómo se crean y mantienen las páginas web tinkoff.ru

¡Hola a todos! Mi nombre es Sergey Mikhailov, en Tinkoff trabajo como jefe del grupo de diseño de adquisiciones: me ocupo de los servicios internos y también soy responsable del componente de diseño del Departamento de Adquisición de Clientes. Te diré cómo ensamblamos páginas rápidamente usando nuestro constructor.





Como funciona ahora

Tinkoff tiene alrededor de 2000 páginas con diferentes diseños y el departamento de atracción es responsable de todas estas páginas. Consiste en divisiones que son responsables de productos de tarjetas, depósitos, inversiones, seguros, móviles, viajes, etc.





Todas nuestras páginas están formadas por bloques. Por ejemplo, en la página principal hay un encabezado, bloques con el banner principal, con un título y con una ficha de producto.





Diseño de bloque en Figma
Diseño de bloque en Figma

Las páginas se ensamblan a partir de bloques en nuestro Constructor.





Creador de páginas
Creador de páginas

Aquí hay un ejemplo de un bloque de este tipo con tarjetas:





Bloquear "Tarjetas de comida"
Bloquear "Tarjetas de comida"

Ya tiene una lógica con sangría incorporada, la capacidad de desactivar el título o cambiar el estilo del botón. Además, la lógica de estiramiento ya está incrustada en el bloque. Por ejemplo, un bloque para una pantalla de 1024 y con una resolución de 1360, el bloque se estirará. Así es como nos funcionan todos los bloques. 





, , — CMS. — , .





Pantalla de páginas recopiladas y borradores

. 2 . , .





, , , , — . 





. , , — , -.





Versión de escritorio y móvil de la página Tinkoff Platinum
« »

, . , «». .





, .





2016 : « — . , ?».





, 0. , . . , 1.0.





Constructor versión 1.0
1.0

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





Constructor versión 2.0.
2.0.

, Material Design. , - -, . , .





:





  • . , - , , . 





  • , . , , «», .





  • .





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





3.0.





Constructor versión 3.0.
3.0.

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





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





, , , , — , - , - .





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





::





  • . .





  • .





  • - , - .





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





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





- , «», , , . , .





:





  • — , , product owner.





  • — .





  • — .





  • — , . 





  • - — , (, , ).





  • — .





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





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





:





  • . , .





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





  • . , , . , , , , .





  • . , , - — - -. 









  • .





, :





  • , -, .





  • . .





  • . Figma , , , .





  • .





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





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





. - , Figma, , , .





: , . , .





?

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





  1. , , — . . .





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





Bloque de diseño para diseño

Multistory, .





Multistory , , , , , .





MultiStory
MultiStory

, , .





Biblioteca de bloques en el Constructor

RealStory. , (, ), , . : .





Historia real
RealStory

, -, . , . - , - . 





, , - , — : , . . 





, , . , , , , , . 





Notion, , - , , . .





Proceso en la noción
Notion

?

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





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








All Articles