reto - pepa cobos reto #deceroalacima ¢qu£© color elijo? lo primero de lo que tienes...

Download RETO - Pepa Cobos RETO #deceroalacima ¢Qu£© color elijo? Lo primero de lo que tienes que ser consciente

Post on 19-Aug-2020

0 views

Category:

Documents

0 download

Embed Size (px)

TRANSCRIPT

  • RETO #deceroalacima

    Crea tu web, planifica y triunfa

    5

    6

    #Día 2 Colores 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

    pepacobos@pepacobos.es

    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.

    mailto:pepacobos@pepacobos.es mailto:pepacobos@pepacobos.es

  • 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.

    http://deceroalacima.es/ http://deceroalacima.es/ http://deceroalacima.es/ http://deceroalacima.es/ https://www.facebook.com/groups/1179058268787609/ https://www.facebook.com/groups/1179058268787609/

  • 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.

    https://www.google.com/fonts https://www.google.com/fonts

  • 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 desde briangardner.com/google-font-combinations/

    http://www.angiemakes.com/best-google-web-font-combinations/ http://www.angiemakes.com/best-google-web-font-combinations/ http://angiemakes.com/best-google-web-font-combinations/ http://angiemakes.com/best-google-web-font-combinations/ http://angiemakes.com/best-google-web-font-combinations/ http://angiemakes.com/best-google-web-font-combinations/ http://briangardner.com/google-font-combinations/ http://briangardner.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.

View more