design
1.0.0
3.1 Nunca use más de tres tipos de letra en una página a la vez.
¿Por qué? Una gama de tipos de letra utilizados en una sola página demuestra una marca mal definida y puede parecer flojo y desordenado. A lo sumo, se pueden usar tres tipos de letra diferentes a la vez (logotipo, encabezados, contenido del cuerpo).
3.3 Mantener una jerarquía de tipo consistente. Solo debe usar un puñado de tamaños de fuente y uno o dos pesos de fuentes para desarrollar la jerarquía de tipo. Piense en las etiquetas de encabezado HTML H1, H2, H3, etc. Debe tener estilos visuales distintos para al menos cuatro de ellos, utilizando variaciones en el brillo, el tamaño y el peso para denotar la importancia del texto. Para obtener un excelente ejemplo de jerarquía de tipo, consulte las pautas de la interfaz humana de Apple.
[3.4] Mantenga el texto de su cuerpo un peso normal y bien espaciado. El texto siempre debe ser legible, por lo que reserva la luz o las fuentes audaces para encabezados o casos grandes en los que el peso de la fuente tendrá poco impacto en la legibilidad del texto. Además, siempre mantenga el espacio de línea del texto de su cuerpo en 1.15 a 1.5 (dependiendo del tamaño) para maximizar la legibilidad. Por ejemplo, este artículo tiene aproximadamente un espacio de línea REM 1.5. Justificar los párrafos de tu cuerpo tampoco duele.
3.1 Los fondos del cuerpo siempre deben ser sombra de gris
¿Por qué? Los fondos coloreados, incluso los grises muy oscuros, pueden crear fácilmente una tensión en los ojos. Para contenido importante, como el cuerpo de texto de una página web o aplicación, es crucial que los usuarios pueden leer e intencionarse la página con facilidad.
3.3 En la mayoría de los casos, use texto blanco en cualquier imagen, fondo de color o gradiente. Si es necesario, aplique una sombra de caída muy ligera (<= 10% de opacidad) al texto.
¿Por qué? White-on-Dark es a menudo más atractivo y más fácil de crear variantes. Decidir sobre un color oscuro para usar con un fondo de color a menudo puede ser un desafío. Sin embargo, asegúrese de que cualquier combo de color que elija también sea accesible.
3.4 Nunca use negros absolutos.
¿Por qué? El negro puro y opaco (#000) a menudo es demasiado duro para la mayoría de las páginas web. Incluso el color de la fuente del cuerpo de GitHub es #24292E, no 000. En caso de duda, puede usar códigos HEX numéricos a escala de grises a seguridad web ( #111, #222 ... #AAA, #BBB, etc.).
3.5 Asegúrese de que los componentes de color no se bordean entre sí.
¿Por qué? A menos que los colores sean muy fuertes entre sí, a menudo el contraste de dos colores vecinos puede crear una sensación de polarización y división que rompa el flujo de su página. En el caso de dónde una barra de navegación podría tocar a un héroe de color, opte por un fondo transparente de Navbar.
Asegurar la consistencia en todos los componentes. Una vez que haya definido una fuente de luz para su página, asegúrese de que todas las sombras sigan su dirección. Si la luz está "golpeando" su página a 135 grados, entonces cada sombra y gradiente debe caer a 135 grados. Use sombras como herramienta para presentar jerarquía o estado. Las sombras deben usarse para resaltar los componentes de la página, proporcionar estructura de página o representar el estado. Por ejemplo, puede representar que un botón se presiona bajando su elevación en lugar de cambiar su color. Demasiadas sombras pueden presentar demasiada dimensionalidad, así que tenga cuidado (por ejemplo, no cree un sitio con 18 elevaciones únicas). El desplazamiento de su sombra debe igualar aproximadamente la mitad de su radio desenfoque. Por ejemplo, una sombra con un desplazamiento x / a de 10px debería tener un radio desenfoque de aproximadamente 20 px. Este enfoque hace que la sombra más auténtica. Siempre mantenga la opacidad de las sombras a menos del 25%. Err en el lado de la sutileza para no restar valor a su diseño. Si está utilizando un fondo oscuro, en algunos casos es posible que necesite aumentar la opacidad de su sombra para garantizar su visibilidad. Las sombras no siempre necesitan ser negras. Cuando se usa sombras en superficies de colores, a menudo es ventajoso usar una variante muy oscura o opaca del color de fondo para mejorar la mezcla de la sombra.
