La marca es el paso que más rinde por el esfuerzo invertido. Veinte minutos aquí cambian todas las pantallas que verá un miembro, desde la página de acceso hasta la factura.
La vista previa en vivo
El panel de la derecha muestra sus cambios según los hace. Alterne entre escritorio y móvil con los iconos de arriba, porque sus miembros llegan por ambos y un logotipo que se lee bien en un portátil puede ser ilegible en un teléfono. La misma fila cambia la vista previa entre el modo claro y el oscuro y la abre en Pantalla completa.
Nada se publica hasta que guarda.
Su logotipo
Suba dos versiones: una para el modo claro y otra para el oscuro. Los miembros eligen su propio modo, y un logotipo oscuro sobre fondo oscuro desaparece.
- Formato: SVG o PNG. El SVG se mantiene nítido a cualquier tamaño, el PNG necesita píxeles suficientes.
- Proporción: alrededor de 5:1, o sea un logotipo ancho más que cuadrado.
- Tamaño: 1000 x 200 px funciona bien para PNG.
Use una versión con fondo transparente. Una caja blanca alrededor de su logotipo se nota en el momento en que un miembro cambia al modo oscuro.
Si su logotipo es una marca cuadrada con el nombre al lado, esa es la versión que hay que subir. Una marca cuadrada sola se pierde en un espacio ancho.
Su favicon
El favicon es el icono pequeño de la pestaña del navegador. Suba también su versión clara y oscura.
- Formato: SVG o PNG.
- Proporción: 1:1, o sea cuadrado.
- Tamaño: 512 x 512 px.
Use la marca de su logotipo, no el nombre completo. A dieciséis píxeles una palabra es una mancha, mientras que una letra o un símbolo sueltos aún se leen.
Sus colores
Cuatro colores, definidos por separado para el modo claro y el oscuro:
| Color | Dónde aparece |
|---|---|
| Primario | Botones, enlaces, todo lo que quiere que se pulse |
| Texto | El texto corrido de toda la plataforma |
| Destacado | El elemento de menú activo, la pestaña seleccionada y otros acentos que llaman la atención sin ser un botón |
| Fondo | La superficie sobre la que se apoya todo lo demás |
El primario es el que importa. Tómelo de su marca actual y compruébelo contra el fondo en ambos modos. Un amarillo pálido que queda elegante sobre blanco se vuelve texto ilegible sobre blanco.
Cuando cambia el color primario, una nota le ofrece Ajustar el fondo a su color primario. Aplicar añade un 2 % de su color primario al fondo de la página, lo que une la superficie a su marca sin cambiar cómo se lee.
Pruebe ambos modos antes de dar por terminado. El modo oscuro no es aquí una idea de última hora, y un color que solo funciona en uno de los dos parecerá roto a la mitad de sus miembros.
Tipografía
Elija una fuente para toda la plataforma. La lista contiene familias sin serifa, con serifa, monoespaciadas, de exhibición y manuscritas. Para el texto a tamaños pequeños, que es la mayor parte de lo que leen sus miembros, lo que mejor funciona es una familia sin serifa o con serifa.
Una familia neutra suele ser lo correcto. Su logotipo aporta el carácter; el texto aporta las palabras.
Avatares de miembros
Avatares de miembros fija la forma de los avatares de miembros y usuarios en toda la plataforma: Redondo o Cuadrado. El cuadrado encaja con una marca de esquinas marcadas, el redondo es la opción habitual.
Más allá de la marca
Las pestañas de la parte superior de la página de diseño van más lejos:
- Disposición para la forma del área de miembros.
- Iniciar sesión y registrarse para la pantalla de inicio de sesión.
- Pantalla de carga para la animación que se ve mientras arranca la plataforma.
- Comunidad para la cabecera de la comunidad.
- Cursos para la cabecera del curso.
- Reproductor de vídeo para los controles de sus vídeos.
La marca primero. El resto merece un vistazo en cuanto su logotipo y sus colores estén puestos.