90 Tutoriales de diseño de logos.

30 fuentes libres perfectas para logos.

Artículos relacionados

• IxEdit, la primera herramienta para crear interacciones ‘al vuelo’
• 19 combinaciones de fuentes qué crean un alto nivel estético
• Guía de soporte CSS para clientes de email

Cada maestrillo tiene su librillo y en este artículo quiero compartir mi técnica para la elección de colores en esas primeras fases en el desarrollo del layout de un diseño.

Para mi estos estadios iniciales son esenciales, los mas complicados y hasta críticos ya que de ello dependera el progreso del aspecto visual del proyecto. No acertar adecuadamente a la hora de elegir colores y como utilizarlos puede resultar en una perdida de tiempo considerable una vez ya el diseño este avanzado.

Crear una paleta de colores.

Vamos primero a pensar en el contexto del contenido de la web que estamos realizando. Supongamos por ejemplo que nuestro diseño está relacionado con el mundo de la construcción, en primer lugar escogeria una fotografía en la que se vean diferentes elementos relacionados con el contexto del contenido, por ejemplo esta:

El siguiente paso sería abrirla en photoshop (o tu programa de edición fotográfica preferido) y aplicarle una pixelación considerable. En photoshop lo haríamos aplicando el Filtro Pixelizar, escogiendo la opción Cristalizar.

Alternativamente tenemos también el Filtro Textura en su opción Vidriera:

ver imagen

Quedandonos con la primera opción obtenemos el siguiente resultado:

Hecho esto ya disponemos de multitud de pixeles que mediante la herramienta cuentagotas podremos ir seleccionando y anotando su código de color.

ver imagen

ver imagen

Con esto podremos obtener una paleta de colores, a elección de cada cual el número de muestras a seleccionar.  Aconsejo tomar un bueno número de ellos y procurando elegir colores que contrasten entre ellos.

El siguiente paso es estudiar como esos colores pueden influir en el contraste, brillo y consistencia del diseño. Para ello tenemos una estupenda herramienta que se basa en los estandares de accesibilidad definidos por la WCAG.

WCAG 2.0 nos define el ratio de luminancia y WCAG 1.0 la diferencia entre brillo y control. Si seguimos estas lineas definidas por la W3.org obtendremos combinaciones con el suficiente contraste de luminancia entre texto y color.

El punto 1.4.3 nos habla del contraste mínimo: La presentación visual de texto e imágenes de texto tiene que tener un ratio de contraste de al menos 4.5:1, excepto para el ‘nivel AA’, Texto de gran tamaño, en este caso el contraste debe ser de al menos 3:1.

El punto 1.4.6 nos habla del contraste sugerido: En este caso la presentación debe tener un ratio de al menos 7:1 exceptuando el caso del ‘nivel AAA’, Texto de gran tamaño con el cual el ratio debe ser de al menos 4.5:1.

Nuestra herramienta es una aplicación air llamada Contrast-A y nos ayuda a buscar combinaciones de colores accesibles, puedes descargarla y probarla.

ver imagen

ver imagen

Artículos relacionados

• Cajas de precios en formato PSD
• Página de error en formato PSD
• Interfaz de usuario del iPAD en vectores

Desde el comienzo de los tiempos, el hombre ha intentado averiguar cuál es la proporción correcta de las cosas, o como llamó Luca Pacioli en el Renacimiento, cuál es la “divina proporción”, o bien, cuál es la manera de crear una obra armónica.

Aunque los egipcios ya conocían esta proporción, no aparece formulada por primera vez hasta los tiempos Griegos (Euclides s. III a.C).

La sección áurea fue empleada por filósofos, científicos y artistas que terminaron llamándola en el Renacimiento la Divina proporción, aunque lo increíble de todo esto es que esta proporción expresada matemáticamente se da también en ‘construcciones’ de la naturaleza, encontrándola por ejemplo en las formas de las galaxias, la estructura de caracolas marinas y en las formaciones de borrascas y tormentas.

Este no es el lugar para desarrollar las ecuaciones que dan como resultado el número de oro, sino conocerlo y como aplicarlo al diseño de nuestros sitios. La solución que nos aparece de las formulaciones es 1,6180339… Podemos quedarnos perfectamente con el primer decimal.

1,6: El número divino.

Veamos la proporción en un segmento:

Veamos la proporción en un rectángulo:

Encontramos ejemplos de esta proporcionalidad aplicada al arte en todas sus vertientes y a lo largo de la historia. Las dimensiones del Partenón están basadas en la sección áurea como puedes ver en la imagen.

En la escultura de la Venus de Milo observamos también la aparición del número de oro.

Rectángulos con proporción divina en la catedral de Notre Dame en Paris.

Y también en la composición en el mundo de la pintura, “La Anunciación“, de Da Vinci.

Bien, creo que te habrás percatado a estas alturas de la funcionalidad del 1,6 a la hora de componer nuestros diseños. Si maquetas con el número de oro en la cabeza (y en la calculadora) podrás olvidar la preocupación por conseguir tamaños y disposiciones que no alteren la armonía del diseño.

Pongamos como caso un sencillo layout de dos columnas, una izquierda principal y una segunda lateral y partimos de que el ancho principal del diseño va a ser 950px.

A partir de aquí ya todo queda a tu imaginación. Recuerda que la proporcionalidad puede ser aplicada a cualquier elemento de diseño. Las dimensiones de un logo, los altos, anchos e interlineados en la tipografía, etc.

Artículos relacionados

• Un par de enlaces si estás buscando recursos para diseñar logos
• IxEdit, la primera herramienta para crear interacciones ‘al vuelo’
• Como añadir un botón de ‘Ir arriba’ en tu wordpress

Trip wire Magazine hace una super recopilación de recursos para Photoshop. En ella puedes encontrar de todo, absolutamente de todo:

• Tutoriales
• Chuletas
• Texturas
• Patterns
• Brushes
• Acciones
• .PSD descargables
• Inspiración

A disfrutarlas aquí.

Artículos relacionados

• Cajas de precios en formato PSD
• Página de error en formato PSD
• Interfaz de usuario del iPAD en vectores

Artículos relacionados

• No hay artículos relacionados