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.
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 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 |
|---|---|
| Principal | Botones, enlaces, estados activos, todo lo que quiere que se pulse |
| Texto | El texto corrido de toda la plataforma |
| Destacado | Acentos que llaman la atención sin ser un botón |
| Fondo | La superficie sobre la que se apoya todo lo demás |
El principal 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.
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 que cargan rápido y se leen bien en pantalla a tamaños pequeños, que es la mayor parte de lo que hacen sus miembros.
Una familia neutra suele ser lo correcto. Su logotipo aporta el carácter, el texto aporta las palabras.
Más allá de la marca
Las pestañas de la parte superior de la página de diseño van más lejos:
- Diseño para la forma del área de miembros.
- Iniciar sesión y registrarse para la pantalla de inicio de sesión.
- Pantalla de carga para lo que se ve mientras carga una página.
- 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.