Esta es una página de ejemplo donde se concretará el estilo general de los elementos de este sitio web. Siempre habrá un texto como este en cada una de las páginas.
Encabezado de sección
Introducción a la sección. Resumen sencillo donde te haces a la idea del contenido que seguirá a continuación. Quizás algo de texto en negrita para hacer énfasis sobre conceptos importantes. El encabezado de sección estará centrado, en grosor normal, y tendrá tamaño XXL.
Encabezado de subsección
Aquí se detalla lo expuesto en la introducción a la sección. Como hay más información, el contenido ocupa una mayor anchura. El encabezado de subsección tendrá tamaño XL y grosor normal, y su posición puede ser cambiante para dar algo de frescura y variedad. También puede contar con una línea debajo.
Espaciado
Los espaciados verticales siempre se harán con bloques independientes y nunca con márgenes. Estos bloques serán de tamaño 25, 50 o 100 píxeles, normalmente 100 para espaciar secciones, 50 para espaciar contenido dentro de una subsección y 25 para espaciados muy pequeños (que seguramente se puedan sustituir por padding, a juicio del creador).
Texto y enlaces
El texto estará en tamaño L, tendrá un grosor Claro y una tipografía Myriad Pro para dar una estética moderna. Los enlaces serán denotados con un sencillo subrayado que desaparecerá on hover.
Sección en Gris, Colores y Listas
Para introducir variedad añadimos secciones con fondo gris. Aquí el encabezado puede estar alineado a la izquierda. En cuanto a los colores, utilizaremos una paleta de escala de grises elegante y discreta:
- #111111: El color oscuro por defecto. Usado en el texto y en los botones.
- #FFFFFF: El color claro por defecto. Usado como fondo en todas las páginas.
- #F4F4F4: El color intermedio por defecto. Usado como color de fondo en esta sección.
Las imágenes serán pasadas por un filtro blanco y negro. En cuanto a la anterior lista, seguirá el esquema de bulletpoints tradicional. Podemos restaurar los bulletpoints customizados de círculos concéntricos (como los que aparecen en Mind Learning), quizás adaptando su color para mejor legibilidad a #111111.
Elementos
Cosa
Aquí tenemos una sección de ejemplo con dos columnas. Podemos presentar cualquier documento con una breve introducción y tener adyacente una imagen de su portada y un botón para descargarlo o saber más al respecto. La imagen tendrá esquinas punteadas, pero el botón las tendrá bastante redondeadas. De esta manera seguimos un esquema muy similar al de Apple (de hecho, los botones son prácticamente idénticos.
Su encabezado será un H3 del mismo tamaño que el texto, aunque lo podemos cambiar para que sea un H2 con tamaño XL.
