- No es necesario seguirlas al pie de la letra, pero estas reglas casi siempre se pueden aplicar tal cual
Usar colores cercanos al negro y al blanco en lugar de negro/blanco puros
- El negro puro se ve poco natural en pantalla, y el blanco puro es demasiado brillante
- Usa #222222 y #F2F2F2 en lugar de #000000 y #FFFFFF
- A partir de aquí, cuando se mencione negro/blanco, nos referimos a estos colores
Darle un tinte de color a los neutros
- Los neutros normalmente son negro/blanco/gris
- Si vas a usar color, agrega solo un poco de color a los neutros (light red en lugar de grey, dark blue en lugar de black)
- Esto hace que la paleta de color se sienta más consistente
- Si usas HSB, basta con agregar aproximadamente 5% o menos de saturación
Usar alto contraste en los elementos importantes
- Todos los elementos a los que el usuario debe prestar atención: botones, contenido, etc.
- En divisores, drop shadows, etc., usa la menor cantidad de contraste posible
Todo en el diseño debe ser intencional
- Incluyendo márgenes, alineación, tamaño, espaciado, color y sombras
- Si alguien pregunta por una parte específica del diseño, deberías poder explicar por qué está hecha así
La alineación optical suele ser mejor que la alineación matemática
- Hay formas que se ven mejor si se alinean visualmente en vez de hacerlo de forma estrictamente matemática
- Alinear a ojo requiere práctica, pero si lo haces con regularidad puedes captar rápido la diferencia
En texto grande, reducir el espaciado entre letras y la altura de línea; en texto pequeño, aumentarlos
- Esto aplica a todo el texto
- Cuanto más grande sea el texto, menos espacio necesita entre letras y líneas. Y al revés también
El borde de un contenedor debe contrastar con el contenedor y con el fondo
- El borde debe ser de un color más oscuro que el fondo, no un color intermedio entre el interior del contenedor y el color de fondo
Todo debe estar alineado con algo más
- La alineación comunica que las cosas están relacionadas entre sí
- Si algo no está alineado con otra cosa, se siente como si no perteneciera al diseño
- Idealmente, cada elemento debería alinearse con otros según algún tipo de lógica
Los colores de la paleta deben tener valores de brillo propios
- Si los valores de brillo de los colores son distintos entre sí, puedes darles una personalidad visual no solo por el tono, sino también por el brillo
- Esto mejora la paleta porque los colores compiten menos entre sí
Si vas a teñir los neutros, usa solo Warm o Cool; no ambos
- Si mezclas colores cálidos y fríos en los neutros, la paleta de color deja de sentirse consistente
Los tamaños deben estar relacionados matemáticamente
- El espaciado entre elementos y sus tamaños deberían definirse según algún tipo de escala. Eso ayuda a que el diseño se vea consistente
- En el ejemplo, todos los elementos usan múltiplos de 8. Los espacios son 8/16/24/32, la altura de línea 48/40/24 y el tamaño de texto 40/32/16
Los elementos deben colocarse en orden de peso visual
- Si en una fila o columna hay varios elementos y algunos se ven visualmente más pesados que otros (como 2 botones y 3 links),
el elemento visualmente más pesado debe ir primero, y los más ligeros deben ir después en orden hasta el final
- Ojo: el elemento visualmente más pesado debe quedar en la parte más exterior
Si usas una grilla horizontal, usa 12 columnas
- Si vas a dividir por columnas, 12 te permite usar 1, 2, 3 o 4 columnas y ofrece mucha flexibilidad
Deja espacio entre puntos de alto contraste
- Como nuestros ojos detectan los bordes de los elementos a partir del contraste, esperan que haya espacio entre zonas contrastantes
Los elementos más cercanos deben ser más claros
- Cuanto más cerca estén del usuario los elementos en pantalla (mientras más al frente parezcan), más claros deberían ser
- Esto también aplica en modo claro y modo oscuro. Así es como funciona el mundo real
Configurar el blur de la drop shadow al doble del valor de distancia
- Si defines una sombra que se desplaza 4 píxeles en el eje Y, el valor de blur debería ser de 8 píxeles
- Cuando un elemento se “acerca” al observador, también conviene reducir la opacity de la sombra
Pon algo simple sobre algo complejo, o algo complejo sobre algo simple
- Un fondo complejo (como un degradado llamativo) se ve mejor cuando el frente (texto) es simple
- Si el frente es complejo, lo mejor es un fondo simple
- También se puede poner algo simple sobre algo simple, pero puede verse soso
- Debes evitar poner algo complejo sobre algo complejo porque genera confusión visual
Mantener el color del contenedor dentro de límites de brillo
- La diferencia de brillo entre el fondo y el contenedor debe ser de 12% o menos en interfaces oscuras, y de 7% o menos en interfaces claras (según el valor de brillo del sistema de color HSB)
- Esto se obtuvo de un estudio que comparó el brillo del contenedor con el del fondo en aproximadamente 100 sitios web bien diseñados
El padding exterior debe ser igual o mayor que el padding interior
- El padding interior de un contenedor es el espacio entre los elementos dentro del contenedor. El padding exterior es el espacio entre los elementos y el borde del contenedor
- El padding exterior debe ser igual o mayor que el padding interior
Mantener el texto principal en 16px o más
- 16px es el tamaño de texto predeterminado en la mayoría de los navegadores
- El texto por debajo de ese tamaño es difícil de leer, así que es más seguro no usarlo para el cuerpo del texto
Usar una longitud de línea de unas 70 letras
- No importa demasiado si son 60 u 80, pero si te alejas mucho de ese rango pueden aparecer problemas de legibilidad
Configurar el padding horizontal de los botones al doble del padding vertical
- El patrón estándar de un botón es ser más ancho que alto
- Si quieres que la gente lo reconozca como botón, conviene seguir ese patrón
Usar como máximo 2 tipografías
- La segunda tipografía es una oportunidad para reforzar el concepto detrás del diseño
- También ayuda a agregar variedad al diseño
- Casi nunca hace falta usar más de dos, y el diseño puede sentirse visualmente confuso
Tratar correctamente las esquinas anidadas
- A veces se superponen dos o más esquinas redondeadas
- Para que se vea bien, configura el radio de la esquina interior con el valor del radio exterior menos la distancia entre ambas
- Ejemplo: si el radio exterior es de 30px y la esquina interior está a 20px de distancia, el radio interior debe ser de 10px
No poner dos divisores juntos
- Las transiciones de fondo, los bordes del contenedor y las líneas divisorias son difíciles de distinguir visualmente
- No dejes dos o más divisores pegados entre sí
6 comentarios
@xguru
Para mejorar la legibilidad de GeekNews, yo lo veo con este estilo, como se muestra abajo. ;-)
https://userstyles.org/styles/179148#comments-section-wrapper
Gracias.
Esto está muy bien... Siempre me costaba el diseño, pero con una guía así creo que se podría aumentar mucho la productividad.
¡Gracias por la traducción! Me ayudó mucho.
¡Está buenísimo!
@xguru
Quiero comentar que hay una traducción errónea.
"Los elementos más cercanos deben ser más ligeros" -> "Los elementos más cercanos deben ser más brillantes"
Ah, sí, es verdad. ¡Gracias~!