Composición
En Cabify nos movemos por más de 40 ciudades de todo el mundo. Sus calles forman parte de nuestro día a día, por lo que, para crear el sistema visual, nos hemos basado en una unidad fundamental: sus manzanas. Sus distintos tamaños y formas nos han inspirado para crear nuestra composición.
Construcción del layout
El layout es la pieza clave de composición. De su correcta construcción se deriva el uso apropiado del resto de elementos visuales: fotografía, tipografía, ilustración, logotipos…
Estas guías son la base para la construcción de nuestro layout. El objetivo es tener un amplio margen de actuación, para que tengan cabida creatividades diversas, pero mantener la coherencia con el sistema visual de la marca en cualquier de sus manifestaciones.
Empezamos definiendo la unidad base (X)
Definir el tamaño de X nos permite definir el margen de seguridad, el área de respeto, las divisiones y gutters, así como el tamaño del logotipo.
Según el formato elegido, definiremos la unidad base (X) que servirá para construir toda la pieza y establecerá desde el inicio el margen exterior.
X = 5%* del lado menor del layout.
*redondeado a la unidad par más cercana.
Ejemplo: la pieza mide 545px x 949px por lo que X se obtendrá multiplicando 545 x 0,05 = 27,25. Redondeamos a la unidad más cercana, por tanto X es igual a 26px.
Ejemplos
El formato cuadrado mide 545px x 545px por tanto X es igual a 26px. (545 x 0,05).
El formato vertical mide 356px x 545px por lo que X es igual a 18px (356 x 0,05).
El área de respeto también será igual a X.
Podemos prescindir del área de respeto si no vamos a utilizar ninguna manzana dentro de la composición.
Divisiones a la mitad
La base del concepto de nuestro layout es la división en partes iguales de dos. Este principio puede aplicarse a cualquier formato, como una forma de estructurar el espacio mediante un sistema de cuadrícula. Al fraccionar el área en 2, 4, 8, 16, 32 o 64 columnas, se establece un marco que facilita tanto la toma de decisiones como la organización del contenido. Gran formato, OOH, piezas de digital… cualquiera de nuestras composiciones se regirá por el concepto de partes iguales.
Marcamos las divisiones
Las divisiones definirán el grid y pueden ser tantas como necesitemos para nuestra pieza, partiendo siempre del medio de la pieza tanto vertical como horizontal y progresivamente añadiendo una nueva división en cada mitad.
Añadimos el gutter
El gutter se añadirá entorno a las divisiones marcadas anteriormente, ayudándonos con la unidad base (X). El gutter nos será de mucha utilidad para poder colocar los elementos (cajas de texto, manzana…) en nuestro layout y que entre ellos respiren adecuadamente.
Y ahora el logotipo
La medida del logotipo también se obtendrá de la unidad base (X). Recomendamos multiplicar la unidad base (X) por 1,5x pero si fuera necesario que el logotipo fueses más grande se puede multiplicar por 2x o 2,5x. En ningún caso más de 2,5x.
Relación Logotipo / Claim
El alto del logotipo lo obtendremos multiplicando la Unidad Base (x) *1,5. Y el alto del claim será justo la mitad del logotipo, sin contar las ascendentes y las descendentes. El logotipo siempre irá a la izquierda y el claim a la derecha, siendo este opcional en la composición.
Colocación del logotipo
Aunque la colocación primaria del logotipo es la esquina superior izquierda, este puede ir en cualquiera de las cuatro esquinas de la pieza. La elección dependerá de criterios como la composición fotográfica de la pieza, las necesidades de comunicación o de formato de la misma.
Construcción del footer
El footer es opcional: puede ir o no según las necesidades de comunicación. Siempre estará en la parte inferior de la pieza y el alto que debe ocupar lo obtendremos sumándole una X al área de respeto inferior, dividiéndola en dos partes y colocando el footer en la parte inferior de esta división.
La altura de sus componentes la obtendremos multiplicando X * 0,75x y redondeando a la unidad par más cercana.
Alineación del footer
La alineación del footer la definirá la presencia o no de la manzana en la pieza, alinieándolo con esta.
Colocación del texto
Las cajas de texto deben estar ajustadas a las divisiones y gutters marcados. Pudiéndose ajustar a cualquiera de ellas, desplazándolo por la pieza y creando diferentes opciones en función de las necesidades comunicativas de la pieza. Criterios útiles a la hora de decidir dónde colocar las cajas de texto son, por ejemplo: que no tapen elementos clave de la fotografía como caras, que no tapen otros textos, que traspasen la manzana…
La manzana
Manzana y border radius
La manzana (ciudad) siempre irá a retícula y puede contener tanto ilustración como fotografía como texto.
El border radius será igual a la unidad base por 0,5.
Si quedan decimales redondeamos a la unidad par más cercana.
Pieza final
Texto dentro de manzana vertical
Las reglas de construcción de este tipo de piezas son las mismas, pero tendremos que tener en cuenta que el texto dentro de la manzana respetará el área de respeto. Esta es siempre la Unidad Base (x).
Pieza final
Pieza con dos manzanas
Las reglas de construcción de este tipo de piezas son las mismas pero tendremos que tener en cuenta que el texto dentro de la manzana tendrá un área de respeto. Esta será siempre la Unidad Base (x).
Pieza final
Manzana con ángulo
A la manzana le podemos añadir un cierre en uno de sus lados que tenga un ángulo del 5%. En este caso mantendremos siempre el mismo border radius en todas las esquinas.
Manzana con diferentes border radius
También podemos modificar los bordes de las manzanas para que sean más flexibles y aportar dinamismo a la pieza, intentando que la composición quede equilibrada y no afecte al contenido. Intentaremos que siempre al menos uno de los lados mantenga el border radius estándar (x*0.5).
Combinar manzanas
Está permitido el uso de más de dos manzanas dentro de una misma pieza. Esto puede ayudarnos a meter diferentes recursos acotándolos a su propio espacio.
Salirse de la manzana
Puedes salirte de la manzana con algunos elementos como la ilustración o alguna fotografía recortada.
Alinear los elementos según la composición
También puedes desplazar algunos elementos del footer o el header para que acompañen a la composición y aporten dinamismo.