Design System Woonkly
Web Library
Design System Woonkly
Web Library
Design System Woonkly
Web Library
Contexto
En Woonkly se necesitaba simplificar el proceso de diseño debido a la cantidad de pantallas que se requerían y de cierta manera los componentes debían replicarse y mantener una consistencia. La construcción del Design System ayudo a crear las interfaces más rápido y se logró tener una librería con componentes modulares para las diversas necesidades que surgieran.
¿Por qué se consideró importante?
Permitiría una consistencia del producto lo cual resultaría una mejor experiencia al usuario.
Mejoraría la colaboración de los equipos de diseño y desarrollo, ya que proporciona un lenguaje compartido.
Tendríamos un proceso de diseño más ágil gracias a los componentes y directrices prediseñados.
Como empecé
Primero recopile información sobre la identidad de la marca para empezar por la base de todo esto, colores y tipografías. Luego cree una lista de componentes y realice una investigación sobre cada uno, cuales eran las pautas, las dimensiones comunes y de que manera podría construirlos. Posteriormente empece por los estilos foundation y construí algunos componentes dentro del sistema de grillas para que estos se adaptaran por columna.
Foundation
Elementos visuales base para crear interfaces atractivas de extremo a extremo. Esto incluye orientación sobre iconografía, tipografía, diseño y estructura.
Components
Componentes reutilizables del sistema de diseño. Cada componente cumple con una interacción específica o una necesidad de interfaz de usuario, y se creó específicamente para trabajar en conjunto, para crear patrones y experiencias de usuario intuitivas.
Preparé un Index donde se pudiera tener acceso más rápido para los desarrolladores y equipo de producto.
Design System Woonkly
Web Library
Contexto
En Woonkly se necesitaba simplificar el proceso de diseño debido a la cantidad de pantallas que se requerían y de cierta manera los componentes debían replicarse y mantener una consistencia. La construcción del Design System ayudo a crear las interfaces más rápido y se logró tener una librería con componentes modulares para las diversas necesidades que surgieran.
¿Por qué se consideró importante?
Permitiría una consistencia del producto lo cual resultaría una mejor experiencia al usuario.
Mejoraría la colaboración de los equipos de diseño y desarrollo, ya que proporciona un lenguaje compartido.
Tendríamos un proceso de diseño más ágil gracias a los componentes y directrices prediseñados.
Como empecé
Primero recopile información sobre la identidad de la marca para empezar por la base de todo esto, colores y tipografías. Luego cree una lista de componentes y realice una investigación sobre cada uno, cuales eran las pautas, las dimensiones comunes y de que manera podría construirlos. Posteriormente empece por los estilos foundation y construí algunos componentes dentro del sistema de grillas para que estos se adaptaran por columna.
Foundation
Elementos visuales base para crear interfaces atractivas de extremo a extremo. Esto incluye orientación sobre iconografía, tipografía, diseño y estructura.
Components
Componentes reutilizables del sistema de diseño. Cada componente cumple con una interacción específica o una necesidad de interfaz de usuario, y se creó específicamente para trabajar en conjunto, para crear patrones y experiencias de usuario intuitivas.
Preparé un Index donde se pudiera tener acceso más rápido para los desarrolladores y equipo de producto.
Design System Woonkly
Web Library
Contexto
En Woonkly se necesitaba simplificar el proceso de diseño debido a la cantidad de pantallas que se requerían y de cierta manera los componentes debían replicarse y mantener una consistencia. La construcción del Design System ayudo a crear las interfaces más rápido y se logró tener una librería con componentes modulares para las diversas necesidades que surgieran.
¿Por qué se consideró importante?
Permitiría una consistencia del producto lo cual resultaría una mejor experiencia al usuario.
Mejoraría la colaboración de los equipos de diseño y desarrollo, ya que proporciona un lenguaje compartido.
Tendríamos un proceso de diseño más ágil gracias a los componentes y directrices prediseñados.
Como empecé
Primero recopile información sobre la identidad de la marca para empezar por la base de todo esto, colores y tipografías. Luego cree una lista de componentes y realice una investigación sobre cada uno, cuales eran las pautas, las dimensiones comunes y de que manera podría construirlos. Posteriormente empece por los estilos foundation y construí algunos componentes dentro del sistema de grillas para que estos se adaptaran por columna.
Foundation
Elementos visuales base para crear interfaces atractivas de extremo a extremo. Esto incluye orientación sobre iconografía, tipografía, diseño y estructura.
Components
Componentes reutilizables del sistema de diseño. Cada componente cumple con una interacción específica o una necesidad de interfaz de usuario, y se creó específicamente para trabajar en conjunto, para crear patrones y experiencias de usuario intuitivas.
Preparé un Index donde se pudiera tener acceso más rápido para los desarrolladores y equipo de producto.