Fundamentos

de UX/UI
para developers

NO diseñador

Mario González

Lead Instructor @ ISDI Coders

Objetivos del taller

¿UI?

¿UX/UI?

¿UX?

UX

UX Research

UI

UX/UI

UX/UI

UX/UI

UX/UI

UX/UI

UX/UI

UX/UI

Un pasado oscuro

Colaboración entre diseñadores y developers

🧑‍🎨

🥷

🤦‍♀️

😓

🤌

Colaboración entre diseñadores y developers

🤌

👨‍🦲

🤶

🤩

Colaboración entre diseñadores y developers

Colaboración entre diseñadores y developers

Wireframes

Mockups

Prototypes

Wireframes, mockups and prototypes

Wireframes, mockups and prototypes

Wireframes, mockups and prototypes

UI Kits & Design Systems

UI kits & Design Systems

UI kits & Design Systems

UI kits & Design Systems

Design Tokens

Design Tokens

Design

Tokens

Design Tokens

{
  "color": {
    "font": {
      "base": { "value": "#111111" },
      "secondary": { "value": "#333333" },
      "tertiary": { "value": "#666666" },
      "inverse": {
        "base": { "value": "#ffffff" }
      }
    }
  },  
  "size": {
    "font": {
      "base":  { "value": "16" },
      "large": { "value": "20" }
    }
  }
}

Design Tokens

const theme = extendTheme({
  colorSchemes: {
    dark: {
      palette: {
        primary: {
          50: '#c0ccd9',
          100: '#a5b8cf',
          200: '#6a96ca',
          300: '#4886d0',
          400: '#2178dd',
          500: '#096bde',
          600: '#1b62b5',
          700: '#265995',
          800: '#2f4968',
          900: '#2f3c4c',
        },
      },
    },
  },
});

Design Tokens

import Typography from '@mui/joy/Typography';

<Typography
  sx={theme => ({
    color: `rgba(${theme.vars.palette.primary.mainChannel} / 0.72)`,
  })}
>

Design Tokens

Design Tokens

¿Cómo organizo mi CSS?

:root {
  --main-color: #db504a;
  --secondary-color: #4f6d7a;
}
.site-logo {
  display: inline-block;
  background-color: var(--main-color);
  padding: 0 7px;
  margin-top: 6px;
  border-radius: 15px;
}
@media screen and (max-width: 575px) {
  .site-logo {
    width: 80%;
    max-width: 240px;
  }
  .site-logo .logo {
    width: 40px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
  .site-logo {
    width: 120%;
    margin-top: 19px;
  }
  .site-logo .logo {
    width: 30px;
  }
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
  .site-logo {
    width: 100%;
  }
}
.site-logo img {
  width: 50px;
  display: inline-block;
  margin-top: -30px;
  color: #fff;
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
  .site-logo img {
    margin-top: -17px;
  }
}
.site-logo h1 {
  display: inline-block;
  font-family: Dosis, sans-serif;
  color: #fff;
  font-size: 54px;
  margin-top: -20px;
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
  .site-logo h1 {
    font-size: 35px;
  }
}
@media screen and (max-width: 575px) {
  .site-logo h1 {
    font-size: 45px;
  }
}
.course-item a,
.site-logo h1 a {
  color: inherit;
}
.course-item .course-thumb {
  position: relative;
}
.course-item .course-thumb > a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.course-item .course-author .ca-pic {
  position: relative;
}
.course-item .course-author .ca-pic a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
#cookieModal .modal-footer .btn-success {
  background-color: var(--main-color);
  border-color: transparent;
}
.privacy-policy-page h6 {
  margin: 20px 0 10px;
}
body,
html {
  height: 100%;
  font-family: Inter, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-weight: 600;
  color: #474747;
}
h1 {
  font-size: 70px;
}
h2 {
  font-size: 36px;
}
h3 {
  font-size: 30px;
}
h4 {
  font-size: 24px;
}
h5 {
  font-size: 20px;
}
h6 {
  font-size: 16px;
}
p {
  font-size: 14.1px;
  color: #878787;
  line-height: 2.2;
  font-weight: 500;
}
img {
  max-width: 100%;
}
button:focus,
input:focus,
select:focus,
textarea:focus {
  outline: none;
}
::-webkit-input-placeholder {
  font-style: italic;
}
::-ms-input-placeholder {
  font-style: italic;
}
:-ms-input-placeholder {
  font-style: italic;
}
::-moz-placeholder {
  font-style: italic;
}
::placeholder {
  font-style: italic;
}
a:hover {
  color: var(--main-color);
}
a:focus,
a:hover {
  text-decoration: none;
  outline: none;
}
ol,
ul {
  padding: 0;
  margin: 0;
}
.section-title {
  text-align: center;
  padding: 0 110px;
  margin-bottom: 110px;
}
.section-title h2 {
  font-size: 48px;
  font-weight: 600;
  margin-bottom: 25px;
}
.section-title p {
  margin-bottom: 0;
  font-weight: 500;
}
.set-bg {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top;
}
.spad {
  padding-top: 115px;
  padding-bottom: 115px;
}
.text-white a,
.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4,
.text-white h5,
.text-white h6,
.text-white li,
.text-white p,
.text-white span {
  color: #fff;
}
.rating i,
.rating svg {
  color: #fbb710;
}
.rating .is-fade {
  color: #e0e3e4;
}
.site-btn {
  display: inline-block;
  min-width: 196px;
  text-align: center;
  border: none;
  padding: 15px 10px;
  font-weight: 600;
  font-size: 16px;
  position: relative;
  cursor: pointer;
  background: var(--main-color);
}
.site-btn,
.site-btn:hover {
  color: #fff;
}
.site-btn.btn-dark {
  background: #000;
}
.site-btn.btn-fade {
  background: #e4edef;
  color: #1f1f1f;
}
#preloder {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 999999;
  background: #fff;
}
.loader {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -13px;
  margin-left: -13px;
  border-radius: 60px;
  animation: loader 0.8s linear infinite;
  -webkit-animation: loader 0.8s linear infinite;
}
@keyframes loader {
  0% {
    transform: rotate(0deg);
    border: 4px solid #f44336;
    border-left-color: transparent;
  }
  50% {
    transform: rotate(180deg);
    border: 4px solid #673ab7;
    border-left-color: transparent;
  }
  to {
    transform: rotate(1turn);
    border: 4px solid #f44336;
    border-left-color: transparent;
  }
}
@-webkit-keyframes loader {
  0% {
    -webkit-transform: rotate(0deg);
    border: 4px solid #f44336;
    border-left-color: transparent;
  }
  50% {
    -webkit-transform: rotate(180deg);
    border: 4px solid #673ab7;
    border-left-color: transparent;
  }
  to {
    -webkit-transform: rotate(1turn);
    border: 4px solid #f44336;
    border-left-color: transparent;
  }
}
.header-section {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  padding-top: 60px;
}
.main-menu ul {
  list-style: none;
}
.main-menu ul li {
  display: inline;
}
.main-menu ul li a {
  display: inline-block;
  font-size: 16px;
  color: #fff;
  margin-left: 45px;
  font-weight: 600;
  padding: 20px 0 5px;
}
.main-menu ul li a:hover {
  color: var(--main-color);
}
.header-btn {
  float: right;
  margin-right: 0;
}
.nav-switch {
  display: none;
}
.hero-section {
  height: 948px;
}
@media screen and (max-width: 767px) {
  .hero-section {
    background-position: 0;
  }
}
.hero-text {
  text-align: center;
  padding-top: 240px;
  margin-bottom: 105px;
}
.hero-text h2 {
  font-size: 60px;
  font-weight: 500;
  margin-bottom: 20px;
}

Arquitectura CSS

Arquitectura CSS

Arquitectura CSS

espaciado

layout

variables

resets

globals

componentes

ese elemento que quieres posicionar nosedónde

Arquitectura CSS

aprovecha la herencia

herencia

herencia

font-family

font-family

font-family

font-family

font-family

font-family

font-family

font-family

font-family

font-family

font-family

font-family

font-family

font-family

font-family

font-family

font-family

font-family

font-family

font-family

font-family

font-family

font-family

font-family

Arquitectura CSS

aprovecha la herencia

body,
h1,
h2,
h3,
h4,
h5,
h6,
p {
  font-family: $font.family.main-text;
}

Diseño centrado en el usuario

UX

dev

UI

NO es centrado en el usuario cuando decimos...

"en mi pantalla se ve bien"

la pantalla

del usuario

NO es centrado en el usuario cuando decimos...

"la tipografía no es pequeña, yo leo el texto perfectamente"

la pantalla

del usuario

NO es centrado en el usuario cuando decimos...

"Yo distingo los colores perfectamente, tienen suficiente contraste"

la pantalla

del usuario

NO es centrado en el usuario cuando decimos...

"Ya probé la app en el móvil el otro día"

la pantalla

del usuario

NO es centrado en el usuario cuando decimos...

"Si el usuario no lo entiende es su culpa"

la navegación súper intuitiva que me he inventao

NO es centrado en el usuario cuando usamos...

Un botón con un texto "Submit"

El usuario programador

Un botón con un texto "Submit"

NO es centrado en el usuario cuando usamos...

Un link con un texto "Click here"

NO es centrado en el usuario cuando usamos...

Placeholders sin labels porque fuá cómo molan

Sí me estoy centrando en el usuario si...

le doy importancia a la accesibilidad

Me estoy centrando en el usuario si...

desarrollo con enfoque mobile first

Me estoy centrando en el usuario si...

mi app da feedback al usuario

cuidado con las incoherencias en el feedback

Me estoy centrando en el usuario si...

la navegación es intuitiva y cómoda

Me estoy centrando en el usuario si...

priorizo la velocidad de carga

Me estoy centrando en el usuario si...

busco un alto grado de legibilidad

Me estoy centrando en el usuario si...

tengo en cuenta sus decisiones

Me estoy centrando en el usuario si...

pruebo mi app con usuarios reales

Conocimientos básicos de diseño

Tipografías
Paleta de colores
Espaciado
Legibilidad

Tipografías

Tipografías - familias genéricas

serif

El veloz murciélago hindú comía feliz cardillo y kiwi

Tipografías - familias genéricas

sans serif

El veloz murciélago hindú comía feliz cardillo y kiwi

Tipografías - familias genéricas

monospace

El veloz murciélago hindú comía feliz cardillo y kiwi

Tipografías - familias genéricas

script

El veloz murciélago hindú comía feliz cardillo y kiwi

Propiedades de las tipografías

  • Tamaño

  • Peso

  • Tracking

  • Kerning

  • Leading

  • Ligaduras

Propiedades de las tipografías

Tamaño

Propiedades de las tipografías

Peso

Propiedades de las tipografías

Tracking

Propiedades de las tipografías

Kerning

Propiedades de las tipografías

Leading

Propiedades de las tipografías

Ligaduras

Paleta de colores

Paleta de colores

Naming:

- Definitive

- Semantic

- Contextual

Definitive: nombre del color

Semantic: propósito, intención

Contextual: qué elemento es

Mezclados

Espaciado

por favor

usa

paddings

paddings

Legibilidad

Legibilidad

Legibilidad

Legibilidad

Legibilidad

Accesibility

Buena jerarquía de encabezados

Labels en los formularios

<a> o <button> para elementos clicables

prefers-reduced-motion

probado por personas con diferentes capacidades

Unidades CSS: rem cuando toque

Nombres accesibles

Textos alternativos

prefers-color-scheme

Usable con teclado

Herramientas para accesibilidad

Herramientas para accesibilidad

Herramientas para accesibilidad

Herramientas para accesibilidad

Herramientas para accesibilidad

Herramientas para accesibilidad

Herramientas para accesibilidad

Antipatrones

Interfaces sobrecargadas

Interfaces sobrecargadas

Diseño inconsistente

Mistery meat

Mystery meat

Overuse of popups

Overuse of popups

Overuse of popups

Overuse of popups

Placeholder misuse

Placeholder misuse

Formularios

1. Usa la etiqueta <form>

Formularios

2. Elige el type correcto

Formularios

3. Permite ver la contraseña

Formularios

4. Deja clara la acción del submit

Formularios

5. Da feedback antes de enviar

Formularios

6. Usa label para los checkboxes

Formularios

7. "opcional" mejor que "*"

Formularios

Validación de formularios

1. Evita la validación prematura

Validación de formularios

2. Evita la validación onBlur para todo

Validación de formularios

3. Evita errores desactualizados

Validación de formularios

4. Ahorra tiempo al usuario

Validación de formularios

4. Ten en cuenta los screen-readers

aria-invalid

aria-errormessage

required

Performance

Performance

Hay que seguir a Joan León @nucliweb

¡PIQUEN!

y ahora...

UX for developers

By mariogl

UX for developers

  • 90