X-Small
0px ~ 479px
Margin: 8px
Gutter: 16px
Flex columns: 4
Small
480px ~ 767px
Margin: 16px
Gutter: 16px
Flex columns: 6
Sistemas de diseño
By Demes Group
By Demes Group es una empresa distribuidora de material electrónico de seguridad con presencia en Europa, África y Oriente Medio. Su creciente presencia en Internet a través de su e-commerce demandaba un reacondicionamiento de su portal web con el último objetivo de aumentar sus conversiones. Con este objetivo se elavoró un UI kit con sistemas de diseño para su posterior implementación en el e-commerce.
Tipo de proyecto
Rediseño web
Roles
- UX researcher
- UX designer
- UI designer
Ámbito
Profesional
Año
2022
Proceso
Objetivos
- Mejorar la usabilidad del e-commerce
- Aumentar el tráfico orgánico
- Aumentar las conversiones
- Optimizar el formato móvil
Acciones
- Análisis heurístico
- Entrevistas
- Definición de contenido y funciones
- Diseño de la interfaz (UI kit, sistemas de diseño)
- Supervisión de implementación
Estrategia
- Reuniones con Stakeholders
- Visión y Objetivos
- Estrategia de Marca
Descubrimiento
- Benchmark
- Análisis Heurístico
- Entrevistas con Usuarios
- Observación de Usuarios
Análisis
- Casos de uso
- User Persona
- User Journey
- Diagramas de flujo
Diseño
- Mapa del sitio
- Sketchings
- Wireframes
- Prototipos
Producción
- Sistemas de Diseño
- Lanzamiento beta
- Test de Usuarios
- Mejoras
- Implementación
1
Sistemas de Diseño
Formatos adaptativos
x-small
0px ~ 479px
Margin: 8px
Gutter: 16px
Flex columns: 4
small
480px ~ 767px
Margin: 16px
Gutter: 16px
Flex columns: 6
medium
768px ~ 1023px
Margin: 16px
Gutter: 16px
Flex columns: 6
large
1024px ~ 1279px
Margin: 18px
Gutter: 20px
Flex columns: 12
x-large
≥1270px
Margin: 20px
Gutter: 20px
Flex columns: 12
Móvil
X-Small
0px ~ 479px
Margin: 8px
Gutter: 16px
Flex columns: 4
Small
480px ~ 767px
Margin: 16px
Gutter: 16px
Flex columns: 6
X-Small
0px ~ 479px
Margin: 8px
Gutter: 16px
Flex columns: 4
Small
480px ~ 767px
Margin: 16px
Gutter: 16px
Flex columns: 6
Tablet
Medium
768px ~ 1023px
Margin: 16px
Gutter: 16px
Flex columns: 6
Medium
768px ~ 1023px
Margin: 16px
Gutter: 16px
Flex columns: 6
Medium
768px ~ 1023px
Margin: 16px
Gutter: 16px
Flex columns: 6
Portátil
Large
1024px ~ 1279px
Margin: 18px
Gutter: 20px
Flex columns: 12
Large
1024px ~ 1279px
Margin: 18px
Gutter: 20px
Flex columns: 12
Large
1024px ~ 1279px
Margin: 18px
Gutter: 20px
Flex columns: 12
Escritorio
X-Large
≥1280px
Margin: 20px
Gutter: 20px
Flex columns: 12
X-Large
≥1280px
Margin: 20px
Gutter: 20px
Flex columns: 12
X-Large
≥1280px
Margin: 20px
Gutter: 20px
Flex columns: 12
Estilos tipográficos
Roboto
Heading 1
Weight: Black
Size: 24px
Line height: 28px
Heading 2
Weight: Bold
Size: 21px
Line height: 24px
Heading 3
Weight: Medium
Size: 18px
Line height: 21px
Heading 4
Weight: Bold
Size: 16px
Line height: 19px
Card Heading
Weight: Medium
Size: 14px
Line height: 14px
Case:: Uppercase
Roboto Condensed
Heading 1
Weight: Bold
Size: 24px
Line height: 28px
Heading 2
Weight: Bold
Size: 21px
Line height: 24px
Heading 3
Weight: Medium
Size: 18px
Line height: 21px
Heading 4
Weight: Bold
Size: 16px
Line height: 19px
Card Heading
Weight: Medium
Size: 12px
Line height: 14px
Case: Uppercase
Roboto
Heading 1
Weight: Black
Size: 24px
Line height: 28px
Heading 2
Weight: Bold
Size: 21px
Line height: 24px
Heading 3
Weight: Medium
Size: 18px
Line height: 21px
Heading 4
Weight: Bold
Size: 16px
Line height: 19px
Card Heading
Weight: Medium
Size: 14px
Line height: 14px
Case:: Uppercase
Roboto Condensed
Heading 1
Weight: Bold
Size: 24px
Line height: 28px
Heading 2
Weight: Bold
Size: 21px
Line height: 24px
Heading 3
Weight: Medium
Size: 18px
Line height: 21px
Heading 4
Weight: Bold
Size: 16px
Line height: 19px
Card Heading
Weight: Medium
Size: 12px
Line height: 14px
Case: Uppercase
Roboto
Heading 1
Weight: Black
Size: 21px
Line height: 24px
Heading 2
Weight: Bold
Size: 18px
Line height: 21px
Heading 3
Weight: Medium
Size: 16px
Line height: 19px
Heading 4
Weight: Bold
Size: 14px
Line height: 16px
Card Heading
Weight: Medium
Size: 12px
Line height: 12px
Case:: Uppercase
Roboto Condensed
Heading 1
Weight: Bold
Size: 21px
Line height: 24px
Heading 2
Weight: Bold
Size: 18px
Line height: 21px
Heading 3
Weight: Medium
Size: 16px
Line height: 19px
Heading 4
Weight: Bold
Size: 14px
Line height: 16px
Card Heading
Weight: Medium
Size: 10px
Line height: 12px
Case: Uppercase
Roboto
Heading 1
Weight: Black
Size: 21px
Line height: 24px
Heading 2
Weight: Bold
Size: 18px
Line height: 21px
Heading 3
Weight: Medium
Size: 16px
Line height: 19px
Heading 4
Weight: Bold
Size: 14px
Line height: 16px
Card Heading
Weight: Medium
Size: 12px
Line height: 12px
Case:: Uppercase
Roboto Condensed
Heading 1
Weight: Bold
Size: 21px
Line height: 24px
Heading 2
Weight: Bold
Size: 18px
Line height: 21px
Heading 3
Weight: Medium
Size: 16px
Line height: 19px
Heading 4
Weight: Bold
Size: 14px
Line height: 16px
Card Heading
Weight: Medium
Size: 10px
Line height: 12px
Case: Uppercase
Roboto
Subtitle
Weight: Medium
Size: 16px
Line height: 19px
Label
Weight: Medium
Size: 14px
Line height: 16px
Body 1
Weight: Regular
Size: 16px
Line height: 24px
Body 2
Weight: Regular
Size: 14px
Line height: 21px
Caption
Weight: Regular
Size: 12px
Line height: 14px
Roboto Condensed
Subtitle
Weight: Medium
Size: 16px
Line height: 19px
Label 1
Weight: Medium
Size: 14px
Line height: 16px
Label 2
Weight: Medium
Size: 12px
Line height: 14px
Body 1
Weight: Regular
Size: 16px
Line height: 19px
Body 2
Weight: Regular
Size: 14px
Line height: 16px
Caption
Weight: Regular
Size: 12px
Line height: 14px
Roboto
Subtitle
Weight: Medium
Size: 16px
Line height: 19px
Label
Weight: Medium
Size: 14px
Line height: 16px
Body 1
Weight: Regular
Size: 16px
Line height: 24px
Body 2
Weight: Regular
Size: 14px
Line height: 21px
Caption
Weight: Regular
Size: 12px
Line height: 14px
Roboto Condensed
Subtitle
Weight: Medium
Size: 16px
Line height: 19px
Label 1
Weight: Medium
Size: 14px
Line height: 16px
Label 2
Weight: Medium
Size: 12px
Line height: 14px
Body 1
Weight: Regular
Size: 16px
Line height: 19px
Body 2
Weight: Regular
Size: 14px
Line height: 16px
Caption
Weight: Regular
Size: 12px
Line height: 14px
Escritorio
Roboto
Heading 1
Weight: Black
Size: 24px
Line height: 28px
Heading 2
Weight: Bold
Size: 21px
Line height: 24px
Heading 3
Weight: Medium
Size: 18px
Line height: 21px
Heading 4
Weight: Bold
Size: 16px
Line height: 19px
Card Heading
Weight: Medium
Size: 14px
Line height: 14px
Case:: Uppercase
Roboto Condensed
Heading 1
Weight: Bold
Size: 24px
Line height: 28px
Heading 2
Weight: Bold
Size: 21px
Line height: 24px
Heading 3
Weight: Medium
Size: 18px
Line height: 21px
Heading 4
Weight: Bold
Size: 16px
Line height: 19px
Card Heading
Weight: Medium
Size: 12px
Line height: 14px
Case: Uppercase
Roboto
Heading 1
Weight: Black
Size: 24px
Line height: 28px
Heading 2
Weight: Bold
Size: 21px
Line height: 24px
Heading 3
Weight: Medium
Size: 18px
Line height: 21px
Heading 4
Weight: Bold
Size: 16px
Line height: 19px
Card Heading
Weight: Medium
Size: 14px
Line height: 14px
Case:: Uppercase
Roboto Condensed
Heading 1
Weight: Bold
Size: 24px
Line height: 28px
Heading 2
Weight: Bold
Size: 21px
Line height: 24px
Heading 3
Weight: Medium
Size: 18px
Line height: 21px
Heading 4
Weight: Bold
Size: 16px
Line height: 19px
Card Heading
Weight: Medium
Size: 12px
Line height: 14px
Case: Uppercase
Móviles
Roboto
Heading 1
Weight: Black
Size: 21px
Line height: 24px
Heading 2
Weight: Bold
Size: 18px
Line height: 21px
Heading 3
Weight: Medium
Size: 16px
Line height: 19px
Heading 4
Weight: Bold
Size: 14px
Line height: 16px
Card Heading
Weight: Medium
Size: 12px
Line height: 12px
Case:: Uppercase
Roboto Condensed
Heading 1
Weight: Bold
Size: 21px
Line height: 24px
Heading 2
Weight: Bold
Size: 18px
Line height: 21px
Heading 3
Weight: Medium
Size: 16px
Line height: 19px
Heading 4
Weight: Bold
Size: 14px
Line height: 16px
Card Heading
Weight: Medium
Size: 10px
Line height: 12px
Case: Uppercase
Roboto
Heading 1
Weight: Black
Size: 21px
Line height: 24px
Heading 2
Weight: Bold
Size: 18px
Line height: 21px
Heading 3
Weight: Medium
Size: 16px
Line height: 19px
Heading 4
Weight: Bold
Size: 14px
Line height: 16px
Card Heading
Weight: Medium
Size: 12px
Line height: 12px
Case:: Uppercase
Roboto Condensed
Heading 1
Weight: Bold
Size: 21px
Line height: 24px
Heading 2
Weight: Bold
Size: 18px
Line height: 21px
Heading 3
Weight: Medium
Size: 16px
Line height: 19px
Heading 4
Weight: Bold
Size: 14px
Line height: 16px
Card Heading
Weight: Medium
Size: 10px
Line height: 12px
Case: Uppercase
Comunes
Roboto
Subtitle
Weight: Medium
Size: 16px
Line height: 19px
Label
Weight: Medium
Size: 14px
Line height: 16px
Body 1
Weight: Regular
Size: 16px
Line height: 24px
Body 2
Weight: Regular
Size: 14px
Line height: 21px
Caption
Weight: Regular
Size: 12px
Line height: 14px
Roboto Condensed
Subtitle
Weight: Medium
Size: 16px
Line height: 19px
Label 1
Weight: Medium
Size: 14px
Line height: 16px
Label 2
Weight: Medium
Size: 12px
Line height: 14px
Body 1
Weight: Regular
Size: 16px
Line height: 19px
Body 2
Weight: Regular
Size: 14px
Line height: 16px
Caption
Weight: Regular
Size: 12px
Line height: 14px
Roboto
Subtitle
Weight: Medium
Size: 16px
Line height: 19px
Label
Weight: Medium
Size: 14px
Line height: 16px
Body 1
Weight: Regular
Size: 16px
Line height: 24px
Body 2
Weight: Regular
Size: 14px
Line height: 21px
Caption
Weight: Regular
Size: 12px
Line height: 14px
Roboto Condensed
Subtitle
Weight: Medium
Size: 16px
Line height: 19px
Label 1
Weight: Medium
Size: 14px
Line height: 16px
Label 2
Weight: Medium
Size: 12px
Line height: 14px
Body 1
Weight: Regular
Size: 16px
Line height: 19px
Body 2
Weight: Regular
Size: 14px
Line height: 16px
Caption
Weight: Regular
Size: 12px
Line height: 14px
Paletas
Colores primarios
80 light
#CCDDDE
40 light
#66999D
00
#00555B
40 dark
#003337
80 dark
#001112
Colores acento
80 light
#D2EAE8
40 light
#78C1B9
00
#1E988A
40 dark
#125B53
80 dark
#061E1C
Colores primarios
80 light
#CCDDDE
40 light
#66999D
00
#00555B
40 dark
#003337
80 dark
#001112
Colores acento
80 light
#D2EAE8
40 light
#78C1B9
00
#1E988A
40 dark
#125B53
80 dark
#061E1C
Categorías de producto
CCTV
#1E988A
Intrusion
#C99700
Access
#0085CA
Fire
#A6192E
IoT
#61A43E
Otras
Last Units
#FF8A00
Offers
#F44336
Solutions
#9E77B8
Categorías de producto
CCTV
#1E988A
Intrusion
#C99700
Access
#0085CA
Fire
#A6192E
IoT
#61A43E
Otras
Last Units
#FF8A00
Offers
#F44336
Solutions
#9E77B8
Mensajes del sistema
Success
#54BD54
Warning
#F3DA06
Info
#748CBB
Error
#B64D34
Mensajes del sistema
Success
#54BD54
Warning
#F3DA06
Info
#748CBB
Error
#B64D34
Elevaciones / Sombras
Low
2,0,2,15%
Medium
8,0,4,15%
High
16,0,8,20%
Elevaciones / Sombras
Low
2,0,2,15%
Medium
8,0,4,15%
High
16,0,8,20%
Principal
Colores primarios
80 light
#CCDDDE
40 light
#66999D
00
#00555B
40 dark
#003337
80 dark
#001112
Colores acento
80 light
#D2EAE8
40 light
#78C1B9
00
#1E988A
40 dark
#125B53
80 dark
#061E1C
Colores primarios
80 light
#CCDDDE
40 light
#66999D
00
#00555B
40 dark
#003337
80 dark
#001112
Colores acento
80 light
#D2EAE8
40 light
#78C1B9
00
#1E988A
40 dark
#125B53
80 dark
#061E1C
Categorías
Categorías de producto
CCTV
#1E988A
Intrusion
#C99700
Access
#0085CA
Fire
#A6192E
IoT
#61A43E
Otras
Last Units
#FF8A00
Offers
#F44336
Solutions
#9E77B8
Categorías de producto
CCTV
#1E988A
Intrusion
#C99700
Access
#0085CA
Fire
#A6192E
IoT
#61A43E
Otras
Last Units
#FF8A00
Offers
#F44336
Solutions
#9E77B8
Semánticos
Mensajes del sistema
Success
#54BD54
Warning
#F3DA06
Info
#748CBB
Error
#B64D34
Mensajes del sistema
Success
#54BD54
Warning
#F3DA06
Info
#748CBB
Error
#B64D34
Elevaciones
Elevaciones / Sombras
Low
2,0,2,15%
Medium
8,0,4,15%
High
16,0,8,20%
Elevaciones / Sombras
Low
2,0,2,15%
Medium
8,0,4,15%
High
16,0,8,20%
