RETO#deceroalacima
Crea tu web, planifica y triunfa
5
6
#Día 2Colores y tipografías
Copyright ©2015 Pepa Cobos. Todos los derechos reservados.
Puedes imprimir una copia de este documento para tu uso personal. Excepto para ese fin,
ninguna parte de esta publicación puede ser reproducida, guardada o transmitida de cualquier
forma, ya sea electrónica, mecánica, grabada, fotocopiada, escaneada o por cualquier otro medio
sin el permiso expreso del autor. Las peticiones al respecto deben hacerse llegar a
Descarga de responsabilidad: Aunque el autor ha puesto el máximo empeño en preparar esta
guía y en que todo su contenido esté actualizado y correcto, los consejos y estrategias contenidos
en la misma pueden no ser adecuados para tu situación particular. En caso de duda deberías
consultar con un profesional. El autor no se hará responsable en ningún caso por ninguna pérdida
de beneficios o cualquier otro efecto indeseado que se produzca como consecuencia de la
aplicación de estos consejos.
Algunos de los enlaces que aparecen en esta guía pueden ser enlaces de afiliado, lo que
quiere decir que gano una pequeña comisión por cada producto vendido a través de ellos aunque
NUNCA recomiendo nada que no haya probado antes y me guste.
RETO #deceroalacima
¿Qué queremos conseguir hoy?
Hoy quiero que decidas si no lo has hecho ya, o te asegures en caso
de que ya lo tengas, de que las tipografías (los tipos de letra) y lo colores
que usas o planeas usar en tu web son los correctos.
Obviamente hay gustos para todo y nadie puede poner en duda que,
para ti, el morado sea el color más bonito del mundo o que el amarillo te
resulte atractivo pero ¿encajan esos colores con la imagen de marca que quieres dar?
Lo mismo pasa con los tipos de letra. El objetivo final de toda web es
que el lector, usuario, cliente,... pueda leer sin dificultad el contenido. Si
además es visualmente atractivo mejor, pero NUNCA vamos a sacrificar el objetivo final que no es otro que conseguir que esa persona que ha
entrado a nuestra web no se marche.
¿Qué tienes que hacer?
En las siguientes páginas tienes una explicación más o menos teórica sobre colores y tipografías; además puedes ver un vídeo que he
preparado expresamente para ello desde aquí. Tendrás que acabar
teniendo el código de, al menos, tres colores y dos o tres tipografías elegidas. Puedes, si quieres, compartirlo con todos en Facebook y recibir
las opiniones de tus compañeros. ¿Vamos?
¿Todavía no estás apuntado al grupo de Facebook?
Puedes hacerlo desde aquí. Cada día allí continúa el aprendizaje. Deja tus impresiones, comentarios o dudas. Entre todos seremos mucho más
fuertes.
© Pepa Cobos - Prohibida la reproducción total o parcial de este documento.
RETO #deceroalacima
Imagen obtenida de http://kinkeaddesigns.com
La teoría del color
La ilustración superior muestra una rueda en la que puedes ver de forma
gráfica la teoría del color.
Hay colores primarios, secundarios y terciarios y, además, todos ellos están agrupados en colores calientes y colores fríos.
Se que estarás pensando que existen muchísimos más colores pero en
realidad todos ellos se forman añadiendo blanco o negro a estos que ves.
Si añades blanco tendrá diferente matiz. Y si añades negro tendrá diferente
tono.
© Pepa Cobos - Prohibida la reproducción total o parcial de este documento.
RETO #deceroalacima
¿Qué color elijo?
Lo primero de lo que tienes que ser consciente es de que tiene que existir
una unidad, un hilo conductor entre todo lo que hagas. No sería muy lógico que
tu logo o imagen tuviera colores amarillos pero luego el amarillo no apareciera por ningún lado en tu web. ¿Ya tienes logo? Es un buen punto de partida.
Tienes que saber, también, que los colores se asocian, aunque sea de
manera inconsciente a distintas emociones.
Rojos - Pasión, amor, fuerza,...
Amarillos - Alegría, energía,...
Azules - Confianza, calma, inteligencia,...
Verdes - Natural, equilibrado, calmante,...
Morados - Creatividad, elegancia, lujo,...
Naranjas - Original, feliz,...
© Pepa Cobos - Prohibida la reproducción total o parcial de este documento.
RETO #deceroalacima
Vale, teoría entendida ¿Y ahora qué?
Ahora viene la parte divertida, o por lo menos a mi me lo parece...
En el vídeo que puedes ver desde aquí te enseño cómo “capturar” colores
que te gustan en cualquier página web, cómo guardarlos y nombrarlos y cómo elegir los que combinan con el que hayas elegido como color “dominante”.
Ten en cuenta que al final lo que tienes que conseguir son como máximo
tres colores (mejor que sean dos) además del gris/negro que uses para la letra. No pienses que con eso te restringes ya que de un mismo color luego puedes
usar distintas tonalidades o matices en diferentes partes de la web.
MIS COLORES VAN A SER:
COLOR 1
#
COLOR 3
#
COLOR 2
#
COLOR LETRA
#
© Pepa Cobos - Prohibida la reproducción total o parcial de este documento.
© Pepa Cobos - Prohibida la reproducción total o parcial de este documento.
RETO #deceroalacima
Tipografías
Además del color, el otro ingrediente que marca la personalidad de una
página web es el tipo de letra utilizado.
Como te comentaba en un principio lo ideal sería tener dos fuentes distintas, una para títulos y otra para texto, aunque la mayoría de la gente
prefiere contar con tres, una para texto, otra para títulos y una última para
acentos (texto que quieras destacar sobre los demás) y que usarás en contadas ocasiones.
En esto, como en todo, hay modas. De repente verás que todas las páginas
a las que entras parecen haberse puesto de acuerdo y mañana todas
cambiarán. Hay que tener personalidad propia y elegir con criterio.
Eso si, recuerda, tu objetivo principal es que el texto pueda ser leído. Ya
puede ser el tipo de letra todo lo bonito que quieras que si tu visitante no es
capaz de saber lo que dices se irá.
Teniendo esto en cuenta, intenta que los títulos y el texto se puedan
diferenciar de forma clara. Puede ser por el grosor de la fuente, por el tamaño,
por la forma,....
Hay muchísimos sitios en los que puedes buscar fuentes, aunque el
estándar por cantidad, calidad y facilidad de uso es Google Fonts.
Ten en cuenta que el logo no tiene por qué entrar dentro de este criterio.
En ese aspecto puedes ser absolutamente creativo (si quieres).
Pasa un buen rato navegando y buscando; en la siguiente página te
muestro algunas parejas de tipografías que está demostrado que “casan” entre
ellas, son atrayentes al ojo y fácilmente legibles. Puede que te ahorre algo de trabajo.
RETO #deceroalacima
© Pepa Cobos - Prohibida la reproducción total o parcial de este documento.
Puedes acceder a la imagen completa desde angiemakes.com/best-google-web-font-combinations/
Puedes acceder a la imagen completa desdebriangardner.com/google-font-combinations/
RETO #deceroalacima
© Pepa Cobos - Prohibida la reproducción total o parcial de este documento.
MIS TIPOGRAFÍAS VAN A SER:
TIPOGRAFÍA TÍTULOS
TIPOGRAFÍA ACENTOS
TIPOGRAFÍA TEXTO
Deberes para hoy
Entra en el grupo de Facebook y comparte tus colores y tus tipografías, así también
podrás ver las de los demás.
