Sistemas de diseño y UI kit para página web e-commerce

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
Ámbito

Profesional

Año

2022

Proceso

Objetivos
Acciones
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

Retícula para móvil pequeño para sistemas de diseño e-commerce
small

480px ~ 767px
Margin: 16px
Gutter: 16px
Flex columns: 6

Retícula para móvil para sistemas de diseño e-commerce
medium

768px ~ 1023px

Margin: 16px
Gutter: 16px
Flex columns: 6

Retícula para tablet para sistemas de diseño e-commerce
large

1024px ~ 1279px

Margin: 18px
Gutter: 20px
Flex columns: 12

Retícula para portátil para sistemas de diseño e-commerce
x-large

≥1270px

Margin: 20px
Gutter: 20px
Flex columns: 12

Retícula para PC de escritorio para sistemas de diseño e-commerce
Móvil
Retícula para móvil pequeño para sistemas de diseño e-commerce
X-Small

0px ~ 479px

Margin: 8px
Gutter: 16px
Flex columns: 4

Retícula para móvil para sistemas de diseño e-commerce
Small

480px ~ 767px

Margin: 16px
Gutter: 16px
Flex columns: 6

Retícula para móvil pequeño para sistemas de diseño e-commerce
X-Small

0px ~ 479px

Margin: 8px
Gutter: 16px
Flex columns: 4

Retícula para móvil para sistemas de diseño e-commerce
Small

480px ~ 767px

Margin: 16px
Gutter: 16px
Flex columns: 6

Retícula para móvil pequeño para sistemas de diseño e-commerce
X-Small

0px ~ 479px

Margin: 8px
Gutter: 16px
Flex columns: 4

Retícula para móvil para sistemas de diseño e-commerce
Small

480px ~ 767px

Margin: 16px
Gutter: 16px
Flex columns: 6

Tablet
Retícula para tablet para sistemas de diseño e-commerce
Medium

768px ~ 1023px

Margin: 16px
Gutter: 16px
Flex columns: 6

Retícula para tablet para sistemas de diseño e-commerce
Medium

768px ~ 1023px

Margin: 16px
Gutter: 16px
Flex columns: 6

Retícula para tablet para sistemas de diseño e-commerce
Medium

768px ~ 1023px

Margin: 16px
Gutter: 16px
Flex columns: 6

Portátil
Retícula para portátil para sistemas de diseño e-commerce
Large

1024px ~ 1279px

Margin: 18px
Gutter: 20px
Flex columns: 12

Retícula para portátil para sistemas de diseño e-commerce
Large

1024px ~ 1279px

Margin: 18px
Gutter: 20px
Flex columns: 12

Retícula para portátil para sistemas de diseño e-commerce
Large

1024px ~ 1279px

Margin: 18px
Gutter: 20px
Flex columns: 12

Escritorio
Retícula para PC de escritorio para sistemas de diseño e-commerce
X-Large

≥1280px

Margin: 20px
Gutter: 20px
Flex columns: 12

Retícula para PC de escritorio para sistemas de diseño e-commerce
X-Large

≥1280px

Margin: 20px
Gutter: 20px
Flex columns: 12

Retícula para PC de escritorio para sistemas de diseño e-commerce
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%

Iconos

Productos y Servicios
CCTV
Intrusión
Accesos
Incendio
IoT SmartHome
Últimas Unidades
Soluciones
SAT
Promociones
Ofertas
Descuentos
Regalo
Kit
Cantidad
Funcionalidades
Añadir Usuario
Filtrar
Adjuntar
Cerrar
Llamar
Reservar
Abrir Ticket
Categorías
Productos y Servicios
CCTV
Intrusión
Accesos
Incendio
IoT SmartHome
Últimas Unidades
Soluciones
SAT
Promociones
Promociones
Ofertas
Descuentos
Regalo
Kit
Cantidad
Acciones
Funcionalidades
Añadir Usuario
Filtrar
Adjuntar
Cerrar
Llamar
Reservar
Abrir Ticket

Otros proyectos