Fundamentos
de UX/UI
para developers
NO diseñador
Mario González
Lead Instructor @ The Refactor Project
Objetivos del taller
no eres diseñador/a
no has estudiado a tus usuarios/as
a nadie le importa que a ti te encante tu diseño
¿UI?
¿UX/UI?
¿UX?
UX
User eXperience
tú no
UX
no te flipes
UX
Users Research
UX
Information Architecture
UX
Flow Diagrams
UX
User Journey
UX
Prototypes
UI
User Interface
UI
Visual Hierarchy
UX/UI
UX/UI
UX/UI
UX/UI
La importancia del UX Research
UX/UI
UX/UI
UX/UI
UX/UI
UX/UI
Colaboración entre diseño y desarrollo
🧑🎨
🥷
Diseñadores/as
Developers
Historia
🤦♀️
😓
🤌
Colaboración entre diseño y desarrollo
🤌
👨🦲
🤶
🤩
Colaboración entre diseño y desarrollo
Colaboración entre diseño y desarrollo
Wireframes
Mockups
Prototypes
?
?
?
Wireframes
Wireframes
low fidelity
high fidelity
Mockups
wireframe
mockup
Mockups
Prototypes
Prototypes
UI Kits & Design Systems
UI kit
Design System
Design System
Design System
Design System
Atomic Design
Design Tokens
Design Tokens
Design
Tokens
Design Tokens
{
"color": {
"font": {
"base": "#111111",
"secondary": "#333333",
"tertiary": "#666666",
"inverse": {
"base": "#ffffff"
}
}
},
"size": {
"font": {
"base": 16,
"large": 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
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
Me estoy centrando en el usuario si...
hago target sizes suficientemente grandes
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
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
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
Formularios
8. Usables con teclado
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
Validación de formularios
Performance
Performance
Hay que seguir a Joan León @nucliweb
UX RESEARCH
y ahora...
UX for developers
By mariogl
UX for developers
- 169