Memoria Trabajo de Fin de Grado by Alejandro Cristobal Marquez

MEMORIA DE TRABAJO DE FIN DE GRADO ALEJANDRO CRISTÓBAL MÁRQUEZ DG4C

ÍNDICE DESCRIPCIÓN DEL PROYECTO -------------------------------------- 05 ANÁLISIS PREVIO --------------------------------------------------- 07- 10

BRIEFFING ---------------------------- 07 PRESUPUESTO ------------------------ 08- 10

INVESTIGACIÓN----------------------------------------------------- 13- 19 CONCEPTUALIZACIÓN ---------------------------------------------- 21-28

NAMING ------------------------------ 21- 25 LOGOTIPO ---------------------------- 25- 26 BOCETOS ---------------------------- 26- 28

ESTUDIO DEL PROYECTO ------------------------------------------- 31- 57

NAMING ------------------------------ 31 LOGOTIPO ---------------------------- 32 MANUAL DE IDENTIDAD -------------- 33- 46 MANAGER ---------------------------- 47- 52 VÍDEO PROMOCIONAL ---------------- 53- 54 PÁGINA WEB ------------------------- 55- 57

DESCRIPCIÓN DEL PROYECTO Mi proyecto se trata del diseño interactivo e identidad y de una empresa de comunicación y tecnología. De los campos del diseño gráfico, los dos que más interesantes y atractivos me parecen son el del diseño interactivo y el diseño audiovisual. Desde un primer momento tuve claro que el objetivo de mi trabajo de fin de grado tenía que ir encaminado a su aplicación en las nuevas tecnologías, y si el diseño gráfico tiene cabida en ellas, a día de hoy, es, en gran parte, mediante su trabajo en éstos dos campos. Con éstas premisas nace la idea de crear una empresa de comunicación y tecnología. Sin embargo, quería buscar un nexo que fundamentara la base sobre la que se asentarían todos los trabajos que la empresa realizaría, y, ésta base, es el diseño centrado en el usuario, es decir, diseñar buscando siempre la mejor experiencia del individuo que va a utilizar la plataforma para la que estás diseñando Con todo ésto comienzo con el trabajo para la creación de la identidad de una empresa de tipo tecnológico, centrada en el diseño interactivo y audiovisual y con el diseño centrado en el usuario como base. Para el correcto desarrollo y aplicación de ésta identidad, decidí desarrollar, paralelamente al diseño de la marca, su proyección en la página web, el diseño de interface para una aplicación móvil de gestión de proyectos y la creación de un vídeo promocional de la empresa. Todos los finales que desarrollé para mi TFG se fundamentaron en el diseño centrado en el usuario, siéndo éste el nexo común entre todos los resultados.

ANÁLISIS PREVIO 1.1 BRIEFFING DESCRIPCIÓN SIUX es una empresa dedicada al diseño interactivo y al diseño audiovisual, cuya base fundamental es el diseño centrado en el usuario, y que definirá todo el trabajo que la empresa realizará. Diseño de páginas Web, diseño de interface para aplicaciones móviles, motion design o vídeo promocional son algunos de los campos en los que la empresa se especializará. Hoy en día, el diseño aplicado a las tecnologías de la información y de la comunicación es algo que está en rápida evolución, ya que las tecnologías están cada vez más integradas en nuestro día a día. Por ello, no es de extrañar que haya una enorme de empresas con las que competir.

COMPETENCIA La competencia directa de SIUX serán todas las empresas dedicadas a la comunicación y la tecnología. Investigando, hay una enorme cantidad de empresas que se dedican al desarrollo de trabajos como los que lleva a cabo SIUX, sin embargo, a penas he encontrado empresas que mezclen los campos del diseño audiovisual y el diseño interactivo. Aquí es donde reside una de las ventajas de SIUX respecto al resto de empresas de su sector, ya que todos sus trabajos van encaminados a la búsqueda del resultado de la combinación entre los dos campos que fundamentan su trabajo. Además, como valor añadido, y diferenciador del trabajo de SIUX, tenemos el diseño centrado en el usuario.

PÚBLICO OBJETIVO El público de nuestra empresa es, en primera instancia, serán empresas que necesiten de un diseño para una web, una aplicación para móviles, un vídeo promocional, etc. Sin embargo, como ya he dicho, la base principal de SIUX es el diseño centrado en el usuario, así, que el público final, y el más importante, es el público de la empresa que solicite nuestro trabajo.

1.2 presupuesto PRESUPUESTO INTERNO ANTEPROYECTO Ideación de la idea general que desarrollaré en mi trabajo 10 HORAS INVESTIGACIÓN Y BÚSQUEDA DE REFERENCIAS La siguiente fase es la búsqueda de trabajos que ya hayan estudiado el campo que voy a desarrollar, para ver qué se ha hecho ya y qué puedo llegar a hacer. Será el primer paso, pero es algo que desarrollaré durante todo el trabajo. 30 HORAS IDEACIÓN Y PROCESOS CREATIVOS Procesos de creatividad para ver qué hacer y cómo hacerlo 60 HORAS REALIZACIÓN Trabajo y realización de todo lo que compone mi entrega final. PARTE DE IDENTIDAD DE MARCA MOTION GRAPHICS DISEÑO DE INTERFACE DISEÑO DE LA WEB VIDEO PROMOCIONAL 200 HORAS TUTORÍAS Y REUNIONES Reuniones con el tutor para hacer un seguimiento del trabajo 10 HORAS POSIBLES CORRECCIONES Y CONTRATIEMPOS Correcciones que puedan surgir en el proceso, reservar horas para contratiempos 20 HORAS DESPLAZAMIENTOS Desplazamientos con tutor, imprenta, etc 10 HORAS SEGUIMIENTO Seguimiento y contacto con terceros que puedan colaborar con la producción, como, por ejemplo, la imprenta. 8 HORAS

PRESENTACIONES Posibles presentaciones y explicaciones del trabajo encargadas por parte de la empresa a grupos que vayan a aplicar nuestro trabajo. 8 HORAS TOTAL DE HORAS: 356 horas. PRECIO POR HORA: 25 euros. PRECIO TOTAL POR EL TRABAJO PARA CUBRIR GASTOS: 8900 euros.

PRESUPUESTO EXTERNO TIMING 1-ANTEPROYECTO Ideación de la idea general que desarrollaré en mi trabajo 1 DE ENERO- 5 DE ENERO 2-INVESTIGACIÓN Y BÚSQUEDA DE REFERENCIAS La siguiente fase es la búsqueda de trabajos que ya hayan estudiado el campo que voy a desarrollar, para ver qué se ha hecho ya y qué puedo llegar a hacer. Será el primer paso, pero es algo que desarrollaré durante todo el trabajo. 6 DE ENERO- 13 DE ENERO 3-IDEACIÓN Y PROCESOS CREATIVOS Procesos de creatividad para ver qué hacer y cómo hacerlo 13 DE ENERO- 28 DE ENERO 4-REALIZACIÓN Trabajo y realización de todo lo que compone mi entrega final. IDENTIDAD CORPORATIVA DISEÑO DE PÁGINA WEB VIDEO PROMOCIONAL DISEÑO DE INTERFACE PARA APP MOTION DESIGN 1 DE FEBRERO-31 DE MAYO 5-MATIZACIONES Correcciones que puedan surgir una vez finalizado el proceso de trabajo 31 DE MAYO-10 DE JUNIO

TRABAJOS A PARTE DEL TIEMPO DE REALIZACIÓN PRESENTACIONES Posibles presentaciones y explicaciones del trabajo encargadas por parte de la empresa a grupos que vayan a aplicar nuestro material. 8 HORAS REUNIONES Reuniones con el cliente para llevar a cabo un seguimiento de cómo va el trabajo durante todo el tiempo de elaboración. 8 HORAS TOTAL DE HORAS: 356 horas. PRECIO POR HORA: 30 euros. PRECIO TOTAL POR EL TRABAJO: 10680 euros.

INVESTIGACIÓN En la investigación del proyecto me he centrado sobre todo en dos pilares de búsqueda, que son, la usabilidad en la web y el diseño interactivo y las referencias de trabajos que estén enfocados a las actividades que realiza la empresa, que son motion design, vídeo promocional, diseño web y diseño de aplicaciones para móviles. Respecto a la investigación sobre la usabilidad en la web, tomé como referencia dos artículos que encontré en internet y el libro “Diseño Interactivo. Teoría y aplicación del DCU”, de donde pude sacar todas las características que deberían tener mi página web y mi aplicación móvil para cumplir perfectamente todas las necesidades de accesibilidad y usabilidad. Me gustó un artículo que estudiaba 3 comportamientos del usuario en su navegación por la Web, sobre el cual realicé una ponencia para una de las asignaturas cursadas. http://www.trucosoptimizacion.com/index.php/2011/07/28/3-comportamientos-tipicos-usuario-web-como-testearlos/ Además, en el libro “Diseño Interactivo. Teoría y aplicación del DCU”, vienen todos los consejos necesarios para hacer accesible tu web, además de teoría muy útil sobre el diseño centrado en el usuario.

En cuanto a la búsqueda de referencias, que ocupó el grueso de la parte de investigación, me he centrado en buscar trabajos que traten la actividad de la empresa de mi proyecto. Me he basado en las webs de Behance y de Design Bombs para encontrar trabajos de diseñadores independientes que cumplan con las características de forma, estética y accesibilidad que busco para mis trabajos. A continuación muestro algunos de los trabajos que he tomado como referencia para el diseño de la web y la interface para la aplicación móvil.

REFERENCIAS DE DISEﾃ前S DE ALGUNAS APLICACIONES PARA Mﾃ天ILES

REFERENCIAS DE DISEﾃ前S DE ALGUNAS WEB CON DISEﾃ前S INTERESANTES

En mi investigación, también busqué referencias de empresas, estudios o diseñadores independientes que realicen el mismo trabajo que realizaré. No encontré muchas empresas que cubran los 4 campos que quiero trata. Existe un estudio que se llama “Obscura Digital”, formada por equipos de videoartistas y técnicos, que aplica el trabajo del video arte y el video mapping para diseño expositivo, y diseño para eventos como inauguraciones de exposiciones, ceremonias, etc.

Como no encontré apenas empresas que cubriesen todos los campos que quiero desarrollar yo en la mía, investigué sobre empresas que se dedicaran al diseño audiovisual y al diseño interactivo de manera independiente. Primeramente me fijé en las empresas de motion design y vídeo promociona, y vi que en España hay muchas que se dedican a ello. Tomé como referencia sus trabajos y la forma que tienen de trasladar al lenguaje audiovisual, toda la información que normalmente tratamos en modo de imágenes estáticas. Para mi proyecto, vi que, a diferencia de lo que tenía pensado hacer en un principio, muchas de éstas empresas, integran la animación con el vídeo grabado, así que, cambié el tipo de vídeo promocional que quería hacer a uno que siguiese éste tipo de trabajo, intentando integrar la animación con el vídeo grabado.

PONENCIA “EL COMPORTAMIENTO DEL USUARIO EN LA WEB” Dentro del mundo del diseño gráfico, uno de los campos con mayor crecimiento a día de hoy, y donde los diseñadores pueden proyectar gran parte de su futuro es el diseño interactivo. Pero, ¿Qué es el diseño interactivo?, pues se trata de aquella labor del diseño encaminada a mejorar la relación entre la persona y la máquina, en su proyección en la web, las aplicaciones móviles, la programación, etc Para ésta labor, es muy importante conocer el funcionamiento del soporte que el usuario va a utilizar, pero más importante aún es adelantarnos al usuario, y saber, cómo éste va a pensar y actuar cuando tenga en sus manos nuestra aplicación. Con el fin de adelantarnos a sus acciones, debemos fijarnos en cuáles son las características del usuario de nuestra plataforma. Si tenemos que definir a un usuario medio de la web con 4 adjetivos sería vago, conformista, curioso y autosuficiente. Vago porque el usuario intentará acceder a la información en el menor número de clicks posible. Según algunos estudios, el usuario medio abandona la página que visita a los 3 segundos de acceder a ella, y en la mayoría de los casos es porque no encuentra lo que busca a primera vista. Conformista porque el usuario no entra a la web para encontrar la información óptima y definitiva, sino algo que le pueda servir en el momento y lugar que se encuentre. Además, está demostrado que, de la misma manera que una página con dificultades en la accesibilidad es abandonada a los pocos segundos, una página en la que nada más entrar encuentres multitud de información, será igualmente poco atractiva al usuario, ya que tenemos contar con un factor esencial a la hora de diseñar nuestra Web, y esque el usuario es, por definición “curioso”. Quizá en usuarios tradicionales ésto no se vea tan claro, pero en los usuarios que están a dia de hoy navegando en la Web, y los que en los próximos años navegarán, se ve un gran afán de experimentación con la plataforma, buscan quedarse en ella para buscar la información, y sin caer en la inaccesibilidad, tenemos que ser lo suficientemente hábiles para que el usuario encuentre lo que busca en un par de clicks pero sin mostrarle todo de un primer vistazo, dejandeo que explore un poco nuestra web.

Un ejemplo de un mal uso en la clarificación de la información en la web son los anuncios y las páginas promocionadas de google. Las empresas anunciantes pagan millones de dólares a google para que sitúe sus páginas en los destacados, o en la cabecera del buscador. Sin embargo, si hacemos un estudio de en qué zonas del buscador de google hace más click la gente, las zonas menos “clickadas” son exactamente la zona de destacados y la cabecera de páginas promocionadas. ¿Y por qué es ésto? la respuesta está directamente relacionada con esa “curiosidad” de la que hablaba antes, el usuario tiende a “desconfiar” de lo que encuentra a primera vista. Autosuficiente porque al entrar en una web lo hace siendo consciente de que no va a necesitar ayudas para navegar por ella, se las va a ingeniar para que en un vistazo y con un par de clicks, la tenga dominada, y pueda hacer con ella “lo que quiera”. En base a éstas 3 características, podemos deducir que para un buen trabajo de diseño en la web, debemos tener en cuenta que hay que buscar un equilibrio entre darle la mayor accesibilidad a la información en la web, pero dejando un margen de “investigación” al usuario para mantenerle en nuestra página.

RELACIÓN DE WEBS DE REFERENCIA USABILIDAD EN LA WEB http://www.desarrolloweb.com/manuales/5/ Libro “Diseño Interactivo. Tecnología y Aplicación del DCU” http://www.trucosoptimizacion.com/index.php/2011/07/28/3-comportamientos-tipicos-usuario-web-como-testearlos/

EJEMPLOS DE TRABAJOS DE DISEÑO DE INTERFACE https://www.behance.net/gallery/Portfolio-Creative-Agency-Web-Design-For-Sale/14711685 https://www.behance.net/gallery/Cube-of-SpeedSounds-Music-App/14764829 https://www.behance.net/gallery/Nike-UI-UX/14548299 https://www.behance.net/gallery/Real-Estate-Branding-and-UIUX/9853399 https://www.behance.net/gallery/WpPage-System-Interface/14611569 https://www.behance.net/gallery/Weather-Dashboard-Global-Outlook-UIUX/12748107 http://www.behance.net/gallery/Freelance-application/14642859 http://www.behance.net/gallery/Period-Tracker-iPhone-App/13717129 http://www.behance.net/gallery/Budgivern/12119301 http://www.behance.net/gallery/Budgivern/12119301 http://www.behance.net/gallery/Glowee/10560073 http://www.behance.net/gallery/Customer-Care-UI-User-Experience/14852505 https://www.behance.net/gallery/iPhone-6-An-edgy-concept/7617209 https://www.behance.net/gallery/PlainWhite/10942757

EJEMPLOS DE DISEÑO DE PÁGINAS WEB http://www.designbombs.com http://www.zindhai.com/ http://www.nacaopropaganda.com.br/site/ http://www.budamail.com/ http://olszanska.pl/en/#page-strona-glowna

EMPRESAS DEDICADAS A los mismos campos que tratará siux http://www.obscuradigital.com/ http://www.deluxe-spain.com/ http://www.nohvfx.com/ http://www.efectoglobal.es/index.php http://www.errolfilms.com/ http://binalogue.com/ http://www.publiedit.com/ http://www.luisan.net/

conceptualización La primera fase, de trabajo, después de la investigación, fue la conceptualización, la fase en la que, mediante métodos de creatividad, mapas mentales, lluvias de ideas, etc, llego a todo aquello que quiero representar en mi identidad final. He dividido la fase de conceptualización en 2 secciones, en función de qué he estudiado en cada parte. Cuando llevé a cabo toda la fase de ideación, me centré, primeramente en la búqueda del naming, donde identifico toda la identidad y las ideas que quiero transmitir con una palabra, con un nombre que lo represente en su conjunto. Además, llevé a cabo una segunda fase de ideación en la que, con el nombre ya elegido, llegar a un buen logotipo que represente todo lo que en las fases anteriores he ido recogiendo. Adjunto algunas imágenes sobre algunos aspectos realizados en cada una de las fases de la ideación.

3.1 CONCEPTUALIZACIÓN PARA EL NAMING Y LA IDENTIDAD

IDENTIDAD Y ASPECTOS A DESTACAR EN LA MARCA

OPCIONES E IDEACIÓN PARA EL NAMING

lista de posibles nombres

Para poder llegar a un buen nombre para la empresa, comencé por hacer una lluvia de ideas con todo aquello que conforme los pilares de la identidad y su trabajo. Algunos de los elementos resultantes de ésta lluvia de ideas son: -Diseño web -Diseño Interactivo -Móviles -App -Interactividad -Usuario -Interfaz -Motion -Comunicar -Movimiento -Usabilidad De todo ésto, decidí quedarme con 4 que pudiésen servirme para utilizar como cimientos sobre los que construir toda la identidad que vendría después. -Usabilidad -Interactividad -Movimiento -Usuario Con éstos 4 elementos decidí que la identidad y el trabajo de la empresa estaría, en todo momento encaminada a buscar la unión entre el diseño centrado en el usuario y el diseño audiovisual.

En base a todo lo anterior, llego a la conclusión de que los dos pilares que compondrán mi empresa serán el diseño audiovisual y el diseño interactivo, siempre buscando mejorar la experiencia del usuario en su relación con las nuevas tecnologías de la información y la comunicación. Me fijo en nombres de empresas que se dediquen a la tecnología y que hagan trabajos parecidos a los míos, y veo que en muchos casos, empresas que se dediquen al diseño para el usuario, llevan la terminación -UX al final del nombre, haciendo referencia a la experiencia del usuario. Decido que en el nombre contaré con esa terminación, ya que clarifica mucho la labor de la empresa y su pilar más importante. Un vez representada la parte de “diseño para el usuario” en el nombre, me centro en intentar hacer referencia al diseño audiovisual.

Recojo algunos de los términos resultantes de la lluvia de ideas que estuviesen relacionados con el diseño audiovisual, y con ellos intento hacer combinaciones que puedan funcionar con la terminación -UX. De ellos me quedo con 4 que son: -VIUX -SIUX -MUX -VISUX Con éstos 4 hago una relación de posibles puntos a favor y en contra que puedan tener cada uno de ellos para intentar encontrar el adecuado.

El que más me convence es SIUX, ya que representa muy bien las bases de la identidad, es muy simple y conciso, el “SI” es positivo, y, además, me gustaba el hecho de que sea una palabra que exista en realidad, ya que eso podía darme alguna ayuda a la hora de realizar mi logotipo.

3.2 CONCEPTUALIZACIÓN PARA EL LOGOTIPO

Para la realización del logotipo, tuve en cuenta 3 factores que pudiesen darle una solución gráfica. Primero el movimiento y la parte audiovisual de la empresa, para lo cual pensé una serie de elementos que pudiesen servirme, como son “flecha, desenfoque, mover, figuras, avance, alante, ver, ojo, etc”

Lo mismo hice con la parte de usabilidad, con elementos como “touch, tocar, huella, dedo, flecha, mano, cursor, mover, móvil, botón”. Además, por si acaso podía hacer algún juego, me gustaba la idea de intentar hacer referencia a los indios SIUX, ya que comparte nombre con la empresa, así que tuve en cuenta algunos elementos definidores de ésta estética, como podían ser las plumas, las flechas, el arco, etc

De todos los elementos expuestos hasta ahora llevé a cabo una selección de los que me parecían más interesantes, para, con ellos, intentar crear un logotipo que representase el movimiento, la simbiosis del usuario con la plataforma, y la interactuación de los distintos campos de la empresa. Con todo ésto y el nombre decidido me puse con la fase de bocetos, en los cuales hice varias fases hasta llegar al logotipo definitivo.

3.3 fase de bocetos En mi trabajo de abocetaje, comencé por estudiar cómo podría integrar en el nombre una representación gráfica de todo lo estudiado hasta el momento. Comencé con la forma gráfica de la flecha, la cual representaba muy bien el dinamismo y el movimiento que caracteriza el trabajo de motion design.

En ésta primera fase de abocetaje me centré en integrar la forma gráfica de la flecha con el logotipo, llegando a algún resultado que me convencía. Además, hice pruebas de colores y contrastes que podrían funcionar en el logo. Sin embargo, no me convencía, ya que más o menos representaba el concepto de diseño en movimiento, sin embargo, la parte de diseño centrado en el usuario quedaba totalmente aislada de la representación, así que decidí intentar representarla de algún modo. Para poder hacer referencia al diseño centrado en el usuario, decidí buscar alguna forma gráfica, algún elemento, que representara la relación directa del usuario con la plataforma. Me centré en cómo el usuario utiliza las plataformas con las que la empresa trabajaría comúnmente, y llegué a la conclusión de que, cuando el usuario navega en la web, o utiliza una aplicación en su móvil, lo hace mediante el cursor del ratón y el “touch” de los dispositivos móviles, así que me centré en trabajar con éstos dos elementos

En ésta segunda fase, busqué como representar el diseño centrado en el usuario en base a lo que estudié anteriormente, comencé a utilizar la forma gráfica del cursor, que también se asemeja a una flecha, y que representa la relación del usuario con los sistemas informáticos. Además busqué la forma de integrarlo con el texto de SIUX. Éste logo me convencía más que la versión anterior, ya que representaba el diseño centrado en el usuario mucho mejor. Sin embargo, quedaba demasiado simple, y no representaba la unión entre los dos pilares de la empresa, así que para las fases posteriores me centré en intentar representar esa unión entre los trabajos que realizaría manteniendo el nombre y la forma gráfica del cursor.

Con éstas opciones, ya representaba todo lo que quería, ya que el cursor, conformado ahora mediante la unión de varios fragmentos, simbolizaba el trabajo conjunto de todos los campos que ocuparían a la empresa. Sin embargo, como logotipo, no funcionaba bien, ya que tenía fallos en la reducción, en la reproducción a una sola tinta, era demasiado complejo, etc Finalmente, busqué una solución al problema de la reducción y la complejidad de la versión anterior, así que decidí buscar una alternativa a los fragmentos que se unen y superponen para representar la unión entre los distintos campos de trabajo de la empresa. Haciendo muchos bocetos llegué a una representación que me convencía, que era más simple, que funcionaba a una tinta, que reducía y que representaba bien lo que estaba buscando.

En la versión final del logotipo opté por sustituir los fragmentos que formaban el cursor del logotipo por un sistema de puntos unidos por segmentos, en los cuales, los puntos representaran los campos en los que trabaja la empresa, y los segmentos, la unión entre los mismos. Ésta unión era algo muy importante que quería representar en el logotipo, y creo que en ésta versión es en la que más patente queda.

estudio del proyecto Respecto a la realización de mi proyecto, dividré su estudio en 4 partes, trtándose de el nombre, la marca, la web, el vídeo promocional y la aplicación para dispositivos móviles.

4.1 ESTUDIO DEL NAMING

SIUX

En la fase de conceptualización ya hablé de cómo llegué al nombre final de mi proyecto, pero ahora explicaré un poco más a fondo qué es lo que con él pretendo representar y cuáles son las ideas que se esconden tras sus letras. Primeramente es necesario recordar que las dos bases sobre las que se asienta el trabajo de la empresa y que condicionarán la producción de todos nuestros resultados, son el diseño interactivo y el diseño audiovisual, siempre con la constante del diseño centrado en el usuario. Dado que éstas son las dos bases de la empresa, en el nombre era necesario reflejarlas. Primeramente explicaré cómo está reflejado en el nombre el diseño interactivo centrado en el usuario. Buscando referencias de empresas que hiciesen los mismos trabajos que SIUX desarrolla, encontré, que en muchas de las que se dedican al diseño de aplicaciones para móviles, diseño web, y, en general, el diseño centrado en el usuario, utilizaban la terminación -UX, que significa User Experience. Ésta terminación me gustaba para el nombre, ya que con dos letras representa muy bien la parte más improtante de la empresa, así que decidí utilizarla en el nombre. La parte que queda es representar el diseño audiovisual en el nombre. Elegí las siglas SI por varias razones. Primero, se tratan de las siglas que representan “Sonido e Imagen”, que son la base del diseño audiovisual. Además el SI es positivo e indirectamente, esa positividad se ve reflejada en el nombre.

4.2 ESTUDIO DEL LOGOTIPO

El logotipo está basado en varios elementos que representan los pilares de SIUX, que son la forma gráfica de la flecha, la unión entre los puntos y las líneas, y lo más importante, que es la flecha convertida en un cursor. FORMA GRÁFICA DE LA FLECHA: Desde un primer momento quise representar la flecha en el logotipo, ya que representa el movimiento y la direccionalidad, que son elementos propios del motion design y el vídeo promocional. En cierto modo, con la flecha quería representar el dinamismo propio del diseño en movimiento. UNIÓN ENTRE LOS PUNTOS Y LOS SEGMENTOS: Con éste sistema de uniones entre los puntos, quería representar el trabajo conjunto entre las dos bases de la empresa para conseguir un resultado común y óptimo para el usuario. CURSOR: El cursor me pareció la forma más elemental de representar la relación entre el usuario y la tecnología, y por ello, lo elegí como la forma representativa del logotipo. Además, continúa siendo una flecha, que representa direccionalidad.

4.3 MANUAL DE IDENTIDAD

SIUX // MANUAL DE IDENTIDAD // MARCA // LOGOTIPO

LOGOTIPO

En el manual de identidad explico todas las normas de uso de la marca, las tipografías y colores corporativos, aplicaciones, tratamiento fotográfico, construcción, etc

SIUX // MANUAL DE IDENTIDAD // MARCA // LOGOTIPO

LOGOTIPO

SIUX // MANUAL DE IDENTIDAD // MARCA // CONSTRUCCIÓN

CONSTRUCCIÓN

36 1/5X

SIUX // MANUAL DE IDENTIDAD // MARCA // CONSTRUCCIÓN

CONSTRUCCIÓN 1/5X

SIUX // MANUAL DE IDENTIDAD // MARCA // CONSTRUCCIÓN

ESPACIO MÍNIMO RESPETABLE

38 Además, el grueso de sus trazos en BOLD permite componer muy bien con el resto de elementos de una página, siendo éste grosor el destinado a tipografía en cartelería, títulos a gran escala, etc, y dejando el resto de grosores para tamaños más reducidos, como pueden ser pies de página, pies de foto, numeración, etc

ABCDEFGHIJKLMnOPQRSTUVWXYZ 0123456789¿?¡!,;.:”-()$%&/ ABCDEFGHIJKLMnOPQRSTUVWXYZ 0123456789¿?¡!,;.:”-()$%&/

BEBAS NEUE REGULAR

BEBAS NEUE BOLD

SIUX // MANUAL DE IDENTIDAD // TIPOGRAFÍA CORPORATIVA

Su tamaño y proporciones la hacen adecuada para su legibilidad tanto para grandes escalas como para tamaños más reducidos.

ABCDEFGHIJKLMnOPQRSTUVWXYZ 0123456789¿?¡!,;.:”-()$%&/

Se utiliza en el logotipo corporativo, y será la tipografía destinada a títulos, cartelería, portadas, marcas, etc.

BEBAS NEUE BOOK

Bebas Neue es la tipografía corporativa que conformará la marca y todas sus aplicaciones.

ABCDEFGHIJKLMnOPQRSTUVWXYZ 0123456789¿?¡!,;.:”-()$%&/

BEBAS NEUE LIGHT

TIPOGRAFÍA

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789¿?¡!,;.:”-()$%&/

SIUX // MANUAL DE IDENTIDAD // TIPOGRAFÍA texto SEGUIDO

GILL SANS SEMIBOLD

GILL SANS LIGHT

TIPOGRAFÍA

Para ello utilizaremos el grosor “Light”, dejando el grosor “Semi-Bold” para destacar determinados puntos de un texto corrido, títulos y subtítulos, apuntes, etc

Gill Sans es la tipografía destinada al texto corrido, en el caso de que tenga que ser utilizado, por ejemplo, en cartas, documentos, pdf, word, etc.

40 C: 13% M: 0% Y: 0 % K: 95%

SIUX // MANUAL DE IDENTIDAD // COLORES

C: 0% M: 41% Y: 95% K: 0%

El uso del color siempre irá encaminado a la búsqueda del contraste entre el blanco y negro y el amarillo corporativo.

COLORES

SIUX // MANUAL DE IDENTIDAD // TRATAMIENTO FOTOGRÁFICO

TRATAMIENTO FOTOGRÁFICO

Además, si hay que colocar alguna información sobre la fotografía, se reducirá la opacidad de la misma o se le aplicará un desenfoque para resaltar la información en cuestión.

Se utilizarán fotografías en blanco y negro siempre que sea posible.

La fotografía tendrá un papel fundamental en todo lo que rodee a la identidad y las aplicaciones de la marca SIUX, y por ello, hay que definir la estética de la misma.

42 NO ALTERAR LAS PROPORCIONES DE CONSTRUCCIÓN

NO UTILIZAR FUENTES DISTINTAS A LAS CORPORATIVAS

SIUX // MANUAL DE IDENTIDAD // COLORES

SIUX

NO UTILIZAR COLORES DISTINTOS A LOS CORPORATIVOS

NO DEFORMAR EL LOGOTIPO

USOS INCORRECTOS

NO UTILIZAR EFECTOS COMO SOMBRAS, LUCES, RESPLANDORES, ETC

RESPETAR EL ESPACIO MÍNIMO ALREDEDOR DEL LOGOTIPO

CARTA DE CORREO

SIUX // MANUAL DE IDENTIDAD // APLICACIONES

CARTA DE CORREO

MADRID, 2 DE MAYO DE 2014

SIUX, DIRECCIÓN DE ARTE

Nombre: Alejandro Cristóbal Márquez Dirección: c/ Castrillo de Aza nº13 Tel: 691400018 E-mail: alejandrocristobal0809@gmail.com

APLICACIONES

SIUX, DIRECCIÓN DE ARTE

REVERSO DE LA TARJETA DE VISITA

ANVERSO DE LA TARJETA DE VISITA

Alejandro Cristóbal Márquez DISEÑADOR GRÁFICO 691400018 alejandrocristobal0809@gmail.com

SIUX // MANUAL DE IDENTIDAD //APLICACIONES

WWW.SIUX.COM

APLICACIONES

PEGATINAS/ CHAPAS

WWW.SIUX.COM

SIUX // MANUAL DE IDENTIDAD // APLICACIONES

APLICACIONES

APLICACIÓN EN LA WEB

SIUX // MANUAL DE IDENTIDAD //APLICACIONES

APLICACIONES El vídeo promocional es una de las aplicaciones más importantes de la marca, ya que en unos pocos segundos explicará con imágenes y sonido, de qué trata la empresa y a qué se dedica.

4.4 SIUX MANAGER Como ya he comentado antes, el pilar fundamental de SIUX es el diseño centrado en el usuario, así que, todo lo que en la empresa creemos irá, siempre, encaminada a cubrir todas las necesidades del público que utilice nuestras plataformas. Ésto lo extendemos a la interacción entre el cliente y el equipo de trabajo de SIUX, así que para mejorar la comunicación entre ambos, una de las herramientas con las que contará SIUX es una aplicación que facilitará el contacto constante entre las dos partes.

El nombre de la app es “SIUX MANAGER”, y con ella, el cliente podrá enviar y recibir mensajes a la empresa, llevar a cabo un control sobre su trabajo, enviar modificaciones, intercambio multimedia de archivos, e, incluso, podrá solicitar presupuestos para futuros trabajos en caso de que haya quedado satisfecho con el trabajo resultante. Para ésto, la aplicación contará con 3 secciones. Primeramente un “Home”, en el que el usuario, nada mas loguear podrá consultar si ha recibido alguna comunicación por parte de la empresa, mensajes, archivos, etc. En la sección “Manager”, el usuario podrá consultar la fase en la que se encuentra el proyecto, recibir comentarios sobre el trabajo que se está realizando en ese momento, y enviar alguna sugerencia o consulta que requiera al equipo de trabajo. En la tercera sección, “Presupuesto”, el cliente puede enviar presupuestos al equipo de SIUX para que, en primera instancia, la empresa se haga una idea de lo que el usuario va a requerir, y pueda ponerse en contacto con él en caso de estar interesada.

HOME BOTÓN “ATRÁS”: Botón para ir a la pantalla anterior a la que en el momento nos encontramos.

IDENTIFICACIÓN: Nombre de usuario con el que has logeado a la aplicación.

PANEL DE NOVEDADES: Panel en el que se muestran todas las notificaciones e interactuaciones desde la última conexión.

MENÚ DE NAVEGACIÓN: Menú con el que acceder a las otras dos secciones..

manager a

PROYECTOS EN CURSO: Navegaci贸n entre los distintos proyectos en curso que el cliente tenga en ese momento, mediante paneles desplegables.

manager b

IMAGEN DE PORTADA: Imagen con la que de un primer vistazo podremos ver de qué proyecto se trata.

Fase del trabajo: En éste punto, el usuario podrá consultar en qué fase se encuentra su proyecto. COMENTARIOS DEL DISEÑADOR: Con ésta sección, el diseñador podrá escribir un comentario al cliente en caso de que necesite comunicarle algo, tenga alguna duda, etc ENVÍO DE ARCHIVOS: Desde éste punto, el cliente podrá enviarle los archivos que estime oportunos para guiar al diseñador, pedirle cambios o cualquier cosa que el usuario necesite. ENVÍO DE PREGUNTAS: Con ésta herramienta, el usuario se podrá poner en contacto con el equipo de la empresa para lo que considere oportuno.

PRESUPUESTO

NOMBRE: Aquí el usuario especificará el nombre del trabajo sobre el que quiere recibir información. DESCRIPCIÓN: El usuario especificará las características fundamentales del trabajo que requiera, el campo de trabajo al que pertenece, el objetivo, etc TIMING: El usuario especificará el tiempo disponible para la elaboración del proyecto.

SUBIDA DE ARCHIVOS: Herramienta con la que el usuario tendrá la oportunidad de subir cualquier archivo multimedia que pueda facilitar la comprensión por parte del equipo de trabajo de SIUX.

La aplicación actualmente está disponible para el sistema Android en cualquiera de sus plataformas, ya que el diseño de la app es flexible a todas las resoluciones de pantalla. En el futuro habrá que contemplar su programación para iOS, además de arreglar algunos problemas como son su exceso de peso en la descarga y la adición de nuevas funcionalidades. Sin embargo, en su primera versión puede ser una herramienta muy útil para el trabajo conjunto entre el diseñador y el cliente.

4.5 VÍDEO PROMOCIONAL Un elemento casi necesario para la promoción de la empresa es el vídeo promocional. El uso del vídeo promocional como forma de promoción tiene una enorme cantidad de ventajas como son la rapidez de difusión, la fácil captación de ideas a través de la combinación de imágenes, texto y audio y, además, es una buena muestra de la capacidad de la empresa en la producción de material de éste tipo. En mi caso, con el vídeo, quise destacar la importancia a dia de hoy de la existencia de empresas como SIUX, ya que nos encontramos en una sociedad totalmente dependiente de la tecnología. Hoy en día pasamos el dia “pegados” a nuestro Smartphone, y casi sustituimos las relaciones físicas por el “Whatsapp” y el “Twitter”. Con ésta explosión tecnológica, aparecieron millones de plataformas distintas que cubrían los mismos servicios y necesidades de los usuarios. Además, casi el 90% de las aplicaciones que los usuarios utilizamos en nuestro día a día son gratuitas. Es decir, en un mundo en el que tenemos miles de alternativas que cubren una misma necesidad, y, que además, son gratuitas, ¿en base a qué elegirá el usuario?. La respuesta a ésta pregunta es, claramente, aquella que le ofrezca el diseño más atractivo a la par que “cómodo” de usar en su día, y ahí es donde SIUX juega su papel fundamental, en el diseño funcional de las aplicaciones y en la transmisión clara de la información.

FOTOGRAMA DEL VÍDEO

El trabajo para el vídeo promocional me lo planteé como un proyecto desde 0, con lo cual, llevé a cabo una fase de conceptualización inicial.

CONCEPTUALIZACIÓN DEL VIDEO

Busqué cómo representar de la manera más clara posible lo que conté anteriormente, para ello pensé en llevar a cabo una visión general de cómo la tecnología está sumergida en nuestra vida diaria, para después indicar cuál es el papel de SIUX en esa enormidad. El formato del vídeo es de 1280x720 a 30fps, y el tratamiento fotográfico sigue la misma línea que el resto de aplicaciones, imágenes en blanco y negro, con opacidad reducida sobre sólido negro y con la información en el amarillo corporativo. Link del vídeo en Vimeo.

STORYBOARD Y CONCEPTUALIZACIÓN PARA EL VÍDEO PROMOCIONAL

4.6 PÁGINA WEB La tercera aplicación de la marca es la página Web, en la cual, se persigue hacer un repaso por las actividades de la empresa y mostrar la “Calidad” de algunos de los trabajos realizados por SIUX. Para ello, en la web podremos encontrar, primeramente, una visión general de los campos especializados de la empresa, una sección con el vídeo promocional y una parte dedicada a la aplicación SIUX Manager, donde se explicará su función y se ofrecerá el link de descarga.

CABECERA DE LA WEB

Primeramente, en la web, podemos encontrar la cabecera, en la cual veremos el logotipo sobre un pase de imágenes en las que se mostrarán algunas fotografías relacionadas con la actividad de la empresa.

EL TRABAJO DE SIUX

En la segunda sección de la web podemos ver los dos campos en los que trabaja SIUX (diseño audiovisual y diseño de interface) y la constante que basa todo el trabajo y que distingue a la empresa, que es el diseño centrado en el usuario.

EL VÍDEO PROMOCIONAL

La tercera sección de la web está dedicada a la proyección del vídeo promocional, en el que poder mostrar a todos los visitantes lo que hacemos en la empresa y cuál es nuestro trabajo.

SIUX MANAGER

La última sección de la web está encaminada a la promoción y descarga de la app para móviles SIUX Manager.

CARACTERÍSTICAS DE LA WEB La página web se caracteriza por su diseño de una sola página continua, sin enlaces a otras páginas, en la que de un solo vistazo podemos encontrar toda la información que el usuario pueda necesitar de la empresa. Además, cabe destacar que éste diseño contínuo, está pensado para verse en todas las plataformas, tanto móviles como fijas, ya que se trata de un diseño flexible y adaptativo a todas las resoluciones de pantalla, en el cual no se pierda en ningún momento ningun punto de información útil para el usuario.

La web está construida en html5, con la aplicación de javascript para algunas funcionalidades como son los sliders de imágenes. Los programas utilizados son el adobe dreamweaver y el Adobe edge Reflow.