Hola :)

  • La importancia de trabajar en equipo entre UX/UI
  • Themes
  • Component library
  • Atomic Design 
  • Design System
  • Styleguide

Escenario

Requerimiento

El look and feel de nuestro website debía estar abierto a ser modificado por front-end developers para la creación de themes.

Qué es un theme?

"A theme is a collection of property settings that allow you to define the look of pages and controls, and then apply the look consistently across pages in a Web application, across an entire Web application, or across all Web applications on a server".

Cómo creamos un marco de trabajo para la creación de themes?

UX + UI

Persona

"Una persona es una descripción ficticia pero realista de un usuario primario, principal u objetivo del  producto. Es un arquetipo en lugar de un ser humano real, que deben describirse como si fueran personas reales."

Eugenia:

"Escribo código e implemento el front-end de la tienda web. Me gusta enfocarme en los detalles, pero sobre todo me gustan los sitios web que funcionan rápido y se ven estéticamente lindos".

👩‍💻

Developer perspective

Component Library

Atomic Design

Atoms

  • Buttons
  • Copy
  • Form elements
  • Headings
  • Icons
  • Menu & Navigation elements
  • Messages

Molecules

  • Date picker
  • Accordions
  • Modals
  • Pagination
  • Tabs
  • Information cards

Organisms

  • Forms
  • Header
  • Footer
  • Navigation
  • Search
  • Image carrousel
  • List structure

Templates

Templates are page-level objects that place components into a layout and articulate the design’s underlying content structure.

Pages

Pages are specific instances of templates that show what a UI looks like with real representative content in place.

Design System

A visual design system is built out of the core components of typography, layout, shape or form, and colour (....) These concepts, design decisions or rules, created around the core components are used consistently across your product to create a cohesive feel..."

  • Typography
  • Color Palette
  • Spacing

Cómo implementamos esta solución en nuestro source code?

Typography

// Font sizes
$font-size-base: 15px !default;
$font-size-xxs: 0.75rem !default;
$font-size-xs: 0.87rem !default;
$font-size-s: 0.93rem !default;
$font-size-m: 1rem !default;
$font-size-l: 1.067rem !default;
$font-size-xl: 1.2rem !default;
$font-size-xxl: 1.47rem !default;
$font-size-xxxl: 1.73rem !default;

// Font family
$font-family: “Open Sans”, Helvetica, Arial, sans-serif !default;

// Font weight
$font-weight-light: 300 !default;
$font-weight-normal: 400 !default;
$font-weight-semibold: 600 !default;
$font-weight-bold: 700 !default;

Colors

// Colors for primary and secondary actions
$color-primary: #e23200 !default;
$color-secondary: #15607b !default;

// Neutral Shades Palette
$neutral-shade: #4D5256 !default;
$neutral-shade-900: darken($neutral-shade, 25) !default;
$neutral-shade-700: darken($neutral-shade, 18) !default;
$neutral-shade-500: $neutral-shade !default;
$neutral-shade-300: lighten($neutral-shade, 20) !default;
$neutral-shade-0: lighten($neutral-shade, 100) !default; 

// Theme Color palette
$color-theme: #97CCDF !default;
$color-theme-900: saturate(darken($color-theme, 55), 18) !default;
$color-theme-700: saturate(darken($color-theme, 45), 17) !default;
$color-theme-500: $color-theme !default;
$color-theme-300: desaturate(lighten($color-theme, 15), 3) !default;
$color-theme-100: desaturate(lighten($color-theme, 23), 3) !default;

// Link's colors
$color-link: #0067b9 !default;
$color-link-hover: desaturate(lighten($color-link, 25), 15) !default;
$color-link-active: desaturate(lighten($color-link, 10), 15) !default;

// Text's colors
$color-copy-dark: $neutral-shade-700 !default;
$color-copy: $neutral-shade-500 !default;
$color-copy-light: $neutral-shade-300 !default;

Spacing

// Padding variables
$padding-base: 5px;
$padding-lv1: $padding-base !default;
$padding-lv2: $padding-base * 2;
$padding-lv3: $padding-base * 3;
$padding-lv4: $padding-base * 4;
$padding-lv5: $padding-base * 5;
$padding-lv6: $padding-base * 6;
$padding-lv7: $padding-base * 7;
$padding-lv8: $padding-base * 8;

// Margin variables
$margin-base: 5px !default;
$margin-lv1: $margin-base;
$margin-lv2: $margin-base * 2;
$margin-lv3: $margin-base * 3;
$margin-lv4: $margin-base * 4;
$margin-lv5: $margin-base * 5;
$margin-lv6: $margin-base * 6;
$margin-lv7: $margin-base * 7;
$margin-lv8: $margin-base * 8;
.button-primary {
    display: inline-block;
    padding: $padding-lv3;

    color: $neutral-shade-0;
    font-size: $font-size-m;
    font-weight: $sc-font-weight-normal;

    background: $color-primary;
    border: 1px solid darken($color-primary, 15);

    &:hover {
    	background: ligthen($color-primary, 20);
    }

    &:active, &:focus {
        background: ligthen($color-primary, 10)
    }

    &:disabled {
        opacity: 0.6;
    }
}

Buttons

Bootstrap example

.accordion-head {
    font-size: $font-size-xl;
    font-family: $font-family;
    font-weight: $font-weight-semibold;
}

.accordion-body {
    background-color: $neutral-shade-0;
    border: 1px solid $color-theme-700;
}

Cómo documentamos estás definiciones para que Eugenia pueda utilizarlas?

KSS

// Primary buttons
//
// The primary action is generally the action that completes a task or desired action.
// Primary buttons use bright and use saturated colors to provide stronger 
// visual weight that catches the users attention to avoid confusion and competing 
// with secondary actions.
//
// Markup:
// <button class="button-primary button-medium">Button Primary</button>
//
// Styleguide 2.1.1

.button-primary {
    display: inline-block;
    padding: $padding-lv3;

    color: $neutral-shade-0;
    font-size: $font-size-m;
    font-weight: $sc-font-weight-normal;

    background: $color-primary;
    border: 1px solid darken($color-primary, 15);

    &:hover {
    	background: ligthen($color-primary, 20);
    }

    &:active, &:focus {
        background: ligthen($color-primary, 10)
    }

    &:disabled {
        opacity: 0.6;
    }
}

Styleguide

Node JS + KSS parser

=

Styleguide

Conclusiones

Preguntas

Gracias :)

Matías Hernández

mtt.hernandez@gmail.com

      @mtthernandez

Antonella Clavero

hiantonellaclavero@gmail.com

 

@holahongo

@holahongo

Matías Hernández

Design System & Styleguide

By antonellaclavero

Design System & Styleguide

  • 510
Loading comments...

More from antonellaclavero