Sirve para indicar peligro. No sobrecargar una web con el color rojo, molesta y distrae al usuario.
Más amigable que el rojo. Se utiliza mucho para los CTA (Call To Action) -> Botones de interacción con el usuario, para llamar la atención.
Se suele usar mucho para temas infantiles (cuando se quiere evitar utilizar el típico rosa)
Color 'amable', 'neutro', 'estable'. Se encuentra entre el azul y amarillo. Tono más estable para web.
Se abusa para sitios web corporativos.
Funciona con cualquier otro color, es perfecto para equilibrar pesos visuales.
Funciona con cualquier otro color, es perfecto para equilibrar pesos visuales. Recomendado para realzar textos.
- Los colores cálidos 'avanzan' (se utilizan para llamar la atención) y los colores fíos 'retraen' (se utilizan para pasar a un segundo plano acciones)
-
https://htmlcolorcodes.com/ (Paletas)
-
https://coolors.co/ (Paletas de colores que además te permiten ver las distintas deficiencias cromáticas)
-
https://colorschemedesigner.com/csd-3.5/ (Paletas de colores)
-
https://jxnblk.github.io/colorable/demos/text/ (Puedes ver el contraste Fondo - Color Fuente y te da la puntuación)
-
https://www.colourlovers.com/ (Paletas de colores hechas por la comunidad)
-
https://play.google.com/store/apps/details?id=asada0.android.cvsimulator&hl=es_419 (App que te permite hacer fotos y ver cómo es dicha foto en las distintas deficiencias cromáticas)
- Muy importante tener en cuenta las posibles deficiencias cromáticas de los usuarios. Apoyar el color con iconos para hacerlo más intuitiva
-
Para textos las que más legibilida tienen: Arial y Helvética (No abusar de su uso)
-
Se pueden mezclar fuentes pero no más de 3 tipos de fuentes distintas. Que contrasten entre ellas.
-
Tamaño mínimo de tamaño de letra: 14/16px. (Mejor 16px)
-
Cuidado con las
mayúsculas y cursiva(dificultan la lectura). -
Interlineado recomendado: 1.4 veces el tamaño de la letra de 16px.
-
Evitar el texto justificado para no tener huecos.
-
El blanco ayuda a descansar la mirada y, a la vez, para concentrar la atención de nuestras visitas.
-
Longitud recomendada de línea: 45 - 75 caracteres.
-
Cuando hay que meter a mano una fuente (no importarla desde enlace) hay que 'comprimirla' y obtener todos los formatos de fuentes:
- TTF
- EOT
- SVG
- WOFF
- WOFF2
Se pueden convertir mediante una web, por ejemplo: https://www.fontsquirrel.com/
-
Variable fonts:
Únicamente se carga un archivo de fuentes y desde CSS se pueden modificar todas sus propiedades. (No hay que importar la versión normal, bold, italic, etc)
- Se pueden establecer la fuerza de un elemento respecto al ojo.
- Más grande: Mayor peso visual.
- Colores: Más cálidos llaman más la atención.
- Ubicación: Más arriba, más peso.
- Textura: Cambiar la textura del elemento.
- Formas: Formas irregulares.
- Orientación: Vertical es más pesado.
- Saturación: Más saturación, más peso.
- Color blanco: Distribuir espacio.
- Definir foco de atención de lo que queremos mostrar.
- Establecer la dirección en la que queremos que se guíe la lectura e interacción. (El flujo de dirección).
- La regla de los 3 tercios.
- Las 12 columnas (de Boostrap, Fundation, Material Desing, etc).
- 8px Grid System. (Múltiplos de 8).
- Proporción Aurea.
- "Above the fold".
- "Thumb Zone" (Elementos importantes situados en las zonas en las que llega el pulgar).
-
Ejemplos: https://uimovement.com/
-
Mejorar la navegación.
-
Facilitar la interacción del usuario con un dato.
-
Distraer al usuario mientras se realizan cargas en segundo plano. (Spinners)
- No más de 3 clicks para acceder a los datos.
- No más de 3 niveles de navegación.
- "Above the fold".
- Hacer evidente que haya que usar el scroll para moverse por la página.
- Uso de mapas de calor (Zonas más utilizadas o menos): https://www.hotjar.com/
- Peso máximo: 100Kb.
- Carga a demanda de diferentes tamaños de la misma imagen (srcset).