Skip to content

Versions

Historial de actualizaciones y mejoras en Harmonía.

>Versión 2.0_

Marzo 2023

· Correcciones en Fundamentos
·
Index de componentes
· Glosario de componentes existentes
· Creación de la sección: Components

Iconography: Se genero imagen sprite en .svg de los iconos de la plataforma

Glossary:
Accordion, Avatar, Badge, Breadcrumbs, Button, Category Card, Card, Detail card, Product Card, Checkbox, Combobox, Date input, Date picker, Drawer, Dropdown menu, Fieldset, Footer, Form, Header, Heading, Hero banner, Horizontal rule, Icons, Image, Input description text, Link, List, Modal, Navigation, Pagination, Paginator, Pager, Progress indicator, Quote, Radio button, Rating, Search input, Segmented controls, Select, Skeleton, Skip link, Slick dots, Spinner, Stepper, Table, Tabs, Text input, Text area, Toast, Toggle, Tooltip, Visually hidden

Componentes:
· Skeleton Loader

>Versión 1.1_

Febrero 2023

· Extensión de Fundamentos
· Auditorías en e-commerce de Elektra.mx
· Pruebas y Documentación de Fundamentos
· Presentaciones y workshops a otras áreas
· Creación de elementos gráficos para descargar
· Ajustes en Color System

· Materials:
· Buenas prácticas
· Tipos
· Material & Shape

· Accesibility:
· Buenas prácticas
· Interacciones
· Gestos
· Botones y Controles
· Entrada al Usuario
· Descripciones de Contenido
· Visualización de Texto
· Color y Efectos
· Animaciones

· Branding:
· Imagotipo
· Aplicaciones Visuales
· Proporciones gráficas
· Áreas de protección
· Tamaño mínimo
· Logotipos en aplicaciones
· Fuente
· Colores
· Usos incorrectos
· Buyer Persona
· Contenido
· Ejemplos

· Image Formats:
· Importancia de los formatos
· Tipos de imágenes utilizadas
· Calidad de las imágenes
· Formatos válidos
· WebP
· Png
· Jpg
· Imágenes en VTex
· Prácticas recomendadas

· Illustrations:
· Porqué utilizar ilustraciones
· Ilustraciones con personajes
· Micro ilustraciones
· Animaciones
· Illustrations Set

· Illustrations Set:
· 43 ilustraciones descargables

· Micro illustrations Set:
· 24 ilustraciones descargables

· Color System:
· Principios
· Colores primarios y secundarios
· Colores semánticos
· Definición de la paleta de colores
· Color styles
· Dark Mode

· Dark Mode:
· ¿Qué es el Dark Mode?
· Evitar la fatiga visual
· Optimizar consumo de batería
· Uso de dispositivos en ambientes obscuros
· Principios
· Cómo aplicar correctamente el dark mode
· Colores desaturados
· Uso de colores

· Iconography:
· Icon Set

· Icon Set:
· 130 iconos descargables
· UI Actions
· Categorías
· E-commerce


>Versión 1.0_

Diciembre 2022

· Definición de Fundamentos
· Auditorías en e-commerce de Elektra.mx
· Investigación y documentación de estado actual
· Pruebas y Documentación de Fundamentos
· Desarrollo de harmonia-elektra.mx

· Grid:
· 8px Grid
· Nudge Amount
· Unidades Válidas

· Layout:
· Web Breakpoints
· Content Layout
· Vertical Rhythm
· Spacing

· Typography:
· Tipografía Oficial
· Jerarquía
· Cajas de Texto
· Interlineado
· Alineación
· Longitud

· Color System:
· Colores Principales
· Paleta de Colores

· Iconography:
· Tamaño Standard
· Tamaños Adicionales

· Elevation & Shape:
· Sombras


También puedes consultar

Equipo

Quienes están detrás de Harmonía

Figma

Nuestra herramienta de diseño

Atomic Design

Diseñando de lo particular a lo general

A través de nuestro sistema de diseño establecemos prácticas que nos permitan el diseño de una interfaz más aceptable y que ayuden a mejorar la experiencia de nuestro usuario para el e-commerce de Elektra.mx

Aquí puedes encontrar el portal digital y las apps disponibles:

© Grupo Elektra 2023