Tras haber construido nuestra marca personal, es importante desarrollar un manual de

identidad visual donde se mostrarán las diferentes aplicaciones de la marca a los formatos escogidos tanto online como offline. En este apartado detallaremos cómo sería nuestra página web dedicada a nuestro portfolio digital.

Posteriormente definiremos una estrategia de comunicación a seguir con dicho portfolio y por último una serie de pautas a seguir para controlar el mantenimiento y seguimiento de dicha plataforma.

6.1. Obtención y preparación de recursos

6.1.1. Organización de los recursos

Una vez acabada la parte teórica del TFM, comenzamos la realización del manual de identidad visual correspondiente y por tanto necesitamos preparar nuestro lugar de trabajo para trabajar de la forma más organizada.

Comenzamos con la organización de nuestro árbol de directorios para los archivos. De tal manera que designamos una carpeta «A4» para el manual, una carpeta «Indesign» que contenga el archivo original editable, una carpeta «PDF» que contenga las exportaciones y una carpeta «Assets^[3]» para los elementos que usaremos en el manual y dentro de esta una llamada «Icons» para los iconos gráficos y por último la correspondiente al «logo» (podemos añadir otras como imágenes y otros). De esta forma siempre tendremos fácilmente los archivos con una ruta sencilla para nosotros y para localizar archivos a través de Indesign.

6.1.2. Obtención de Iconos

Una de las mejores plataformas para obtener iconos tanto gratuitos con licencias Creative commons^[4] o Premium, es la conocida flaticon.es donde conseguir cualquier temática y estilo, además de que en muchas ocasiones son archivos editables que podemos modificar en color y forma para adaptarlo a nuestro estilo y por ende ahorrar tiempo.

Plataforma de recursos gráficos general. Fuente: freepik. es.

La opcion mas recomendable es usar los packs de iconos, ya que suelen tener el mismo estilo y podemos adaptarlos de forma conjunto con mayor facilidad. Contra mas ver versiones tenga mejor puesto que tendremos mas versatilidad a la hora de futuras aplicaciones.

Una vez seleccionado los paquetes de iconos a utilizar, los guardaremos en la carpeta Assets para incorporarlos posteriormente a nuestro manual.

Otra platforma muy conocida para obtencion de recursos gratuitos es freepik.com donde tenemos de todo tipo, ademas de los iconos podemos obtener vectores, imagenes, PSD de todo.

Una vez seleccionado los paquetes de iconos a utilizar, los guardaremos en la carpeta Assets para incorporarlos posteriormente a nuestro manual.

6.1.3. Archivo Logo

Una de las cosas principales a realizar es el logo que usaremos durante el manual y por tanto tendremos que generarlo. En este caso, por facilitar el desarrollo usaremos el nombre «On-line Design S.L.» para facilitar el proceso. Usando tal nombre con una tipografía y características determinadas para nuestro Brand.

No obstante, deberemos crear el símbolo del logotipo por ejemplo en ilustrator u otro editor vectorial. Nosotros sencillamente hemos usado la inclusión de las iniciales dentro de una forma. Podría ser cualquier tipo de estilo, forma y color siempre que este funcione, aunque existen criterios académicos, secciones aureas y conceptos que nos proporcionan la armonía perfecta. Lecturas recomendables son «Construyendo valores (Logos) de Diego García Guillen» y «Logo Design. Global Brands de Julius Wiedemann» siendo este último un catálogo de las 4500 marcas comerciales mejor valoradas en cuanto a identidad corporativa.

6.1.4. Creación del documento Indesign base

Suponiendo que tenemos los recursos necesarios en su gran medida, lo siguiente es generar el documento de Indesign con una serie de parámetros para su óptima exportación o acabado final. Siempre teniendo en cuenta que ha de funcionar tanto digitalmente como para imprenta.

Usaremos los parámetros que se muestran en la imagen, calidad de impresión, el número de páginas como mínimo 4 y puedes ir creándolas en función de la necesidad, el tamaño del documento y orientación de un A4 vertical.

Márgenes de 30mm en todos los lados y un sangrado de 3mm.

Estilos de párrafo.

Crearemos dos con diferentes tamaños con la tipografía Source Sans, o bien como alternativa gratuita Open Sans y Raleway. Sino quisiéramos instalar fuentes, podemos usar una aplicación llamada FontBase donde podemos activar o desactivar diversas fuentes a nuestro gusto. Daremos en el icono superior derecha, nuevo estilo de párrafo (igual para carácter)

Estilos de carácter.

Crearemos por ejemplo un estilo para cuando sea necesario sin indicar ningún otro parámetro que el texto en «bold». Daremos en el icono superior derecha, nuevo estilo de carácter (igual que en paso anterior).

6.2. Breve manual de Identidad Visual

6.2.1. Portada

Para trabajar con mayor comodidad, vamos a configurar las páginas para mostrar 3 columnas, dese Maquetación / Márgenes y columnas.

Podemos ajustarlo como consideremos en función del logo a realizar, o el diseño que tengamos en mente.

Para nuestro caso lo configuraremos de la siguiente manera según la imagen.

Crearemos 4 capas diferenciadas por colores con las que trabajaremos el resto del documento y usaremos para albergar el texto, gráficos, imágenes y fondos. En ese orden puesto que lo primero que se visualizará será la capa superior.

Hecho esto creamos una caja cuadrada para introducir un primer fondo que reajustaremos a nuestro gusto, o con la imagen ya editada previamente en Photoshop, guardando está en la capa de fondo. Para ello podemos darle a Archivo / Colocar, o bien crear la caja o una forma y arrastrar en ella la imagen que deseamos, ajustando esta después.

Crearemos un pequeño rectángulo gris (que guardamos en la capa gráficos) para acompañar a la caja de texto del título. Y por último crearemos en la misma capa de texto un gráfico que acompaña al título. Y un subtítulo para la parte inferior. Ajustando los ys» tamaños para diferenciar el peso de cada elemento. Nosotros en el caso del titular I usamos Open sans semibold 53pt de tamaño y 59pt de interlineado, para la fecha H open sans semibold 14 e interlineado automático o cero, y para el subtítulo Open m sans bold 18pt con interlineado automático o cero.

Aprovechando que es la primera imagen que cargamos, recordemos la importancia de porqué organizar los archivos en carpetas mientras editamos en Indesign. Y es que, si vemos en la parte superior izquierda un pequeño símbolo de una interrogación, esto indica que la imagen usada no se encuentra probablemente porque hayamos movido algún archivo de sitio. Por lo que podemos indicarle cual es la nueva ruta de ese archivo desde «Vínculos», seleccionando cualquiera de las imágenes perdidas y con clic derecho, volver a vincular.

Y terminamos la portada añadiendo una sección de contacto, un pie de página con nuestro logo y datos similares.

6.2.2. Indice.

La primera página dejaremos bastante espacio para dejar respirar y separar el título del índice puesto que en ediciones literarias por lo general se adopta esta técnica para dejar respirar.

En la siguiente página, crearemos un rectángulo donde incluiremos una imagen, el gráfico general, gráfico de detrás de texto y título. Después, crearemos un borrador de la tabla del contenido que terminaremos al final cuando ya hayamos terminado.

Por último, como detalle se ha añadido la palabra Brand en vertical con la opacidad bajada desde efectos.

6.2.3. Introducción manual Brand

Empezamos creando el primer capítulo de nuestro manual de identidad visual donde explicamos con un poco la dirección de nuestra marca mediante una pequeña introducción, la misión, la promesa y la personalidad de nuestra marca que tenemos previamente definida mediante nuestro trabajo de investigación.

En esta sección he desplazado el marco negro rectangular con una opacidad del 90% para que apreciéis ese juego con los gráficos, debajo hay una imagen que vamos a oscurecer con este gráfico transparente para seguir dentro del estilo. Y de nuevo jugaremos con los tamaños de las tipografías para diferencias el contenido.

Esta maquetadón sigue las pautas anteriores en la página izquierda con una imagen de fondo a sangre (con los 3mm) esto permite que en caso de ser impresa en imprenta no queden bordes blancos. Una forma rectangular gris detrás y otra negra ambas al 90% de opacidad, un rectángulo fino y otro grueso con diferentes tonos en gris en el lateral de la página. Y las cajas de texto con titular, subtítulo y texto jugando en cada caso con los formatos de texto para diferenciarlo. Así como los grafismos de adorno.

Para la página derecha, la maquetadón varia jugando con cajas de texto libres e imágenes para configurar una ruptura de la forma organizativa hasta ahora usada.

Del mismo modo, seguimos añadiendo el contenido para la sección de    promesa y composición de las cajas de texto a una, tres o cuatro columnas, jugando con las justificaciones y fondos con gráficos rectangulares.

6.2.4. Elementos de Online Brand

Mantenemos la misma estructura para los titulares de secciones a dos páginas y mismo estilo.

En esta sección tendremos que hacer referencia en modo resumen a cómo encajar nuestra marca, elementos gráficos, estilos, imágenes, colores y otras configuraciones para mantener esa línea corporativa que deseamos. Primero mostramos las posibilidades resumidas, el logo principal, variaciones cromáticas, tipografía e imagen. En la segunda página, detallamos un poco más indicando los colores exactos donde es aconsejable incluir el código RGB, CMYK y hexadecimal. El tono principal, la organización de los elementos en la rejilla base y el contenido en relación a esta. Muy importante también describir las tipografías usadas, estilos fotográficos o ilustraciones aceptadas.

6.2.5. Seguimos desde el manual en PDF de ejempllflcaclón.Devonn

El contenido del manual en gran medida es real y explicativo en cuanto al contenido que se debe de integrar en este, salvo algunos textos Lorem Ipsum o secciones añadidas para facilitar que cada usuario juegue con esos elementos añadiendo o quitando información como considere, ya partiendo de unos gráficos dentro del documento.