MEMORIA COMPRENSIÓN DEL PROBLEMA
BRIEF:
Se define y descompone el problema en segunda persona, como si tratásemos estos aspectos con un cliente real. Pues estas cuestiones suelen ser tratadas entre el diseñador y el cliente.
Quién: • Empresa freelance de diseño gráfico en el ámbito publicitario y creativo.
DEFINICIÓN DEL PROBLEMA I: • Dos diseñadoras/ fundar un estudio freelance/ necesitan darse a conocer, diferenciarse e identificarse del resto. • Producto a desarrollar: Diseño web, marca, Identidad corporativa.
Descomposición del problema: ¿Qué tipo de estudio? • Estudio freelance de diseño gráfico en el ámbito publicitario y creativo. ¿Con qué finalidad? • Trabajar para empresas de diseño gráfico/ publicidad. ¿Para qué se necesita/ se quiere la web, marca e Identidad Corporativa? • La web, para mostrar visualmente, en la práctica, a las empresas de diseño lo que hacemos o sabemos hacer. Marca e Identidad Corporativa, para diferenciarnos del resto e identificarnos. DEFINICIÓN DEL PROBLEMA II: Empresa freelance de diseño gráfico en el ámbito publicitario y creativo precisa de diseño web, marca, e Identidad Corporativa, que muestre visualmente el trabajo que se realiza, y se identifique y diferencie del resto, destinado a empresas de diseño gráfico y publicidad.
Trabajo a realizar: • Diseño web, marca e identidad corporativa. Finalidad, objetivo del trabajo: • Diseño web: Mostrar visualmente los trabajos realizados. • Marca e Identidad Corporativa; Identificar y diferenciar del resto (competidores). Público Objetivo: ¿a quién va dirigido? ¿A quién hay que comunicar? • Empresas y Estudios de Diseño Gráfico. ¿Qué se quiere que haga el público objetivo? ¿Qué respuesta se espera? • Valoración de los trabajos. Contratación de los servicios de diseño. ¿Cómo se va a motivar esta respuesta? • Situando la Empresa Freelance al nivel del público objetivo. • Comunicando los valores que el público objetivo comunica. Por tanto; ¿qué hay que comunicar? Mensajes prioritarios. (Habiendo estudiado los valores comunicacionales del público objetivo.) • Investigación, creatividad, calidad, eficacia y profesionalidad. ¿Cómo se va a comunicar? •Calidad y profesionalidad: con una ejecución minuciosa y perfeccionista. La claridad es sinónimo de orden, por lo que una buena composición conseguirá transmitir estos valores.
•Creatividad e investigación: Investigando y desarrollando en los elementos del proyecto factores estéticos y de comunicación propios del público objetivo, a través de fotografías, texturas, planos, composiciones y tipografía, descontextualización, juegos de palabras, etc.
PÚBLICO OBJETIVO Identificar y visualizar el perfil de los distintos grupos de consumidores a los que les puede interesar nuestro producto u oferta empresarial (segmentación de mercado). Respecto a los servicios de diseño gráfico publicitario, existe una demanda por parte de diversos perfiles; empresas de cualquier tipo, particulares, o profesionales autónomos, Administraciones públicas y empresas de diseño. En lo referente a las empresas que contratan diseñadores freelance, la cantidad de las mismas va en constante aumento, esto está relacionado con los beneficios que aporta a las empresas. Las empresas tienen la posibilidad de contratar especialistas por un tiempo concreto para una tarea concreta, lo que implica un aumento en la calidad de los trabajos. De otro modo la empresa debería aumentar la plantilla de trabajadores para cubrir ciertos tipos de trabajos, o encomendarlos a un empleado que puede no estar debidamente cualificado para su desarrollo. La contratación de freelance, tiene una consecuencia directa en los costos fijos de la empresa referente a aspectos como pueden ser; el espacio fijo necesario para albergar a los trabajadores y el equipamiento para la producción y desarrollo de los trabajos. Por tanto para aquellos que precisan de los servicios de diseño, contratar a especialistas en la disciplina, que trabajan de manera independiente supone
una ventaja importante para el empresario. De este modo, establecernos como diseñadoras freelance nos favorece a disfrutar de esta situación.
Valorar y seleccionar, analizar uno o varios segmentos de mercado a los que se piensa conquistar (definición del público objetivo) Principalmente nos dirigimos a empresas de diseño. Sin embargo, no todas las empresas de diseño se pueden determinar cómo nuestro público, sino que hay que fijar como objetivo a las empresas de diseño gráfico y publicidad. Y más concretamente aquellas que cumplen con las siguientes características: El tipo de empresas que suelen estar compuestas por un amplio equipo que desarrolla tareas multidisciplinares, es decir, cada una de las personas pertenecientes al equipo, desarrolla su papel individual en una disciplina concreta, de la cual es especialista, puede ser miembro del departamento de informática, ilustración, fotografía, diseño gráfico, etc. Por tanto, son empresas que creen y apuestan por el trabajo en equipo, como método imprescindible para llevar a cabo la resolución de problemas, cuyo fin será ofrecer resultados óptimos. Empresas que trabajan la solución de problemas para ofrecer servicios que parten desde la creación de la marca, hasta la liquidación de la última pieza. Es por esto que, al abarcar todo lo referente al diseño y la publicidad, están abiertos, a la contratación de colaboradores externos, para ciertos cometidos y/o proyectos concretos.
Posicionamiento del producto en el mercado. El Estudio Freelance, que se desarrolla en este proyecto, se dirige a un tipo de Empresas y otros estudios de diseño en concreto. Para que el público objetivo valore el trabajo que muestra el estudio y lo elija para colaborar con él, debemos estudiarlos
y descubrir cuáles son los valores esenciales que se debe transmitir para que elijan nuestro estudio para participar en el proceso de la resolución de problemas. Así mismo, nuestro estudio freelance, hace del trabajo en equipo un valor añadido; un valor potencial a explotar, para ofrecer a nuestro público objetivo. Debemos analizar también, aquellos factores o características que diferencian a nuestro público del resto, como son los aspectos comunicativos y estéticos, para poder dirigirnos a ellos en el mismo lenguaje y que éste sea eficiente. Entonces: ¿Qué comunican? Presumen de investigación, desarrollo y ejecución de proyectos, con el objetivo de dar solución a los problemas de comunicación. Defienden el trabajo en equipo para cumplir con este objetivo. Investigan con tipografías, texturas, espacios, planos y objetos, para trabajos con resultados creativos, innovadores y eficaces. Para ellos un resultado eficaz, es aquel diseño cargado de conceptos, mensajes directos, en definitiva, que cumplan con la esencia de la comunicación y no sean un simple adorno. A esto se debe añadir que el resultado debe tener el menor ruido posible, es decir, diseños sencillos y claros, simplicidad estética. ¿Cómo lo comunican? Con una clara influencia del estilo suizo en lo que respecta a la investigación, pruebas y diseños con
tipografía, como el uso de la diagramación; líneas compositivas que dan sentido al diseño. Transmitiendo mensajes directos, como en la corriente minimalista, descartando aquello que no son más que elementos decorativos y centrándose en lo esencial, es decir, simplificando, de modo que refleje lo realmente importante, el mensaje. Desarrollan también el concepto de estudio e investigación con texturas, tipografías, planos, fotografías, objetos,… descontextualizándolos de modo que comuniquen un mensaje distinto. Dando sentido a las tipografías con la manipulación de tipos en algunos casos, y en otros, le dan sentido jugando con los colores, la disposición, los planos, etc. Por tanto estos serán factores esenciales y necesarios en los aspectos comunicativos y estéticos del Estudio Freelance.
COMPETENCIA La competencia estará formada por aquellos diseñadores o estudios freelance que trabajen para otras empresas de diseño y/o publicidad. Existen varios diseñadores y estudios freelance que se pueden definir como competencia. Trabajan para editoriales, estudios de publicidad, diseño, etc. En la gran mayoría de casos la competencia ofrece unos servicios amplios de diseño, que van desde la creación de la marca hasta el producto final, y otros ofrecen servicios de diseño en algún área únicamente, como ilustración, motion graphic, etc. Del mismo modo que el púbico objetivo llama a sus empresas, bien con su nombre (Manuel Estrada estudio), con una combinación de apellido y socios (Ruiz+company), o bien nombres asociados al diseño, o juegos de palabras (Pornographics), la competencia lo hace de la misma manera (Iban
Ramón, Alex Trochut, El señor García, Coco bongo, Hey studio, Velckro, etc). Aprovechando este análisis de la competencia, se puede añadir lo referente a factores diferenciales de los mismos, en lo que a la marca se refiere. En el presente caso, se ha compartido la búsqueda de nombres asociados al diseño y juegos de palabras, pero va más allá. El nombre que define y diferencia la empresa, transmite unos valores concretos; investigación, búsqueda de soluciones creativas, contacto con lo artesanal, lo manual, etc.; y su forma visual, como imagen de marca muestra todo aquello en los que se basa la comunicación; sencillez, orden, profesionalidad, claridad. Mientras que la competencia se queda en la originalidad, la descontextualización, la sonoridad, la brevedad, etc., sin duda aspectos importantes y en muchos casos bien trabajados, pero a lo que se pretende hacer referencia, es a la falta de asociación del nombre con el estudio que denomina. Lo que se pretende decir es que el nombre no se corresponde por asociación de palabras y significados con la filosofía del estudio que denomina. Factores que en el presente caso se han tenido en cuenta. Pero este apartado se verá más desarrollado en los siguientes puntos, de la Memoria de la marca y Testimonio gráfico. Tenemos en común el público objetivo, por lo que resaltan cualidades semejantes a las que se pretende comunicar en el presente caso, esto era de esperar, se comparten intereses, objetivos, servicios, etc. Sin embargo, existe otro factor importante que nos diferencia de los competidores. En la mayoría de los casos de la competencia la imagen que proyectan a través de su web, que es lo que llegará al público objetivo a modo de carta de presentación, es muy similar a la del público al que se dirige; misma disposición de elementos, misma presentación de trabajos, etc.
Si bien es cierto, que hablan el mismo lenguaje que el púbico al que se dirigen, y que la presentación de trabajos es un factor imprescindible para que observen como se trabaja y el estilo al que pertenecen, en el presente caso de nuevo, la intención va más allá. Pues si el propósito es realizar una carta de presentación, al fin y al cabo, lo que se intenta es persuadir; conquistar al observador y transmitirle unos valores; comunicarle un mensaje. Estos aspectos son propios del diseño gráfico, pero sobre todo de la publicidad, pues finalmente se busca vender unos servicios a un público determinado. Factores que se han tenido en cuenta durante todo el proceso, y que obtienen un resultado diferenciador, como se observará más detenidamente en los resultados del trabajo y en las explicaciones de su desarrollo en los puntos Memoria del diseño web y Testimonio gráfico.
Aspectos relevantes de la comunicación, valores concretos a representar. Planteamiento de necesidades concretas de comunicación. Definición de valores de identidad. Una vez estudiados los aspectos comunicacionales del público objetivo, se desarrollan aquellos valores que serán importantes representar para lograr conquistarlos. Es imprescindible transmitir al público objetivo que el Estudio Freelance desarrolla sus trabajos y procesos proyectuales por medio de la investigación, la búsqueda de necesidades y el planteamiento de soluciones. Éstas, a su vez, deben ser soluciones creativas, innovadoras y eficaces en su cometido de transmitir un mensaje determinado. Por tanto usaremos la Identidad Corporativa, Marca, Diseño Web y contenidos de la misma para transmitir la resolución de un problema proyectual y el carácter innovador y creativo basado en la investigación de las formas, las tipografías, las composiciones, y los objetos, así como el trabajo en equipo para lograrlo. Por tanto los conceptos y mensajes comunicacionales–Valores a comunicar–, serán: •Investigación, creatividad, eficacia, y profesionalidad.
Aspectos estéticos; Concreción de las referencias estéticas y justificación de los referentes utilizados. Cómo responden éstos a las necesidades de comunicación y a los valores seleccionados: correspondencia idónea y/o coherente entre referencias estéticas y valores de comunicación o identidad. Ready-made; Marcel Duchamp
El estilo suizo y el estilo internacional son una de las
referencias estéticas que influyen en el proyecto y, especialmente las características estructurales y la importancia de la eficacia comunicacional. Estas características se aplican y observan en el uso y la composición de imágenes y textos. Con una utilización sistemática de la tipografía como objeto para la transmisión de un mensaje de forma clara, así como la claridad en las formas para explicar ideas complejas, gracias al uso de estructuras compositivas. El uso de estas características cumplen con los factores comunicacionales de eficacia en la transmisión de mensajes y claridad compositiva, un elemento fundamental para transmitir el concepto de profesionalidad. Otra de las referencias características de los aspectos estéticos es el uso de las imágenes y las fotografías, que se convierten en mensajes conceptuales en forma de “poemas objeto”, experimentando con montajes y aplicándoles conceptos y significados, alejándolas de su entorno habitual, es decir, aislándolas y usándolas como objeto transmisor de un mensaje, es por ello que hablamos de “objeto poema”, una definición usada por Daniel Gil, del que hablaremos más adelante. En este aspecto se podría hablar de influencias del Dadaísmo, el Surrealismo y el Arte Conceptual, corrientes vanguardistas de principios del S.XX. Algunas de las características del Dadaísmo, compartidas en cierto modo con el Arte conceptual eran; el montaje de fragmentos y objetos de desecho o uso cotidiano, presentados como objetos artísticos, fotomontajes y composiciones con frases o palabras aisladas. Algunos artistas referenciales son Marcel Duchamp, el cual en su dedicación a la escultura fue precursor del arte ready-made, que consistía en la combinación o disposición de objetos de uso cotidiano, elevando a la categoría de arte objetos como una rueda de bicicleta.
Ejemplo de arte conceptual es la obra “Una y tres sillas” de Joseph Kosuth, en la que crea una obra con una silla como protagonista, una fotografía de la misma, y la definición de la silla del diccionario, con la que busca que el público conteste en cuál de los 3 elementos se encuentra la identidad del objetos.
la combinación de objetos con textos, frases o palabras, con el fin de comunicar, se puede concluir que de dichos referentes se extrae el concepto de investigación para conseguir resultados creativos. Conceptos que forman parte de los aspectos comunicacionales que se pretenden cumplir. Todas estas tendencias de vanguardia, son a su vez extraídas de los referentes estéticos y comunicacionales del público objetivo. Aproximándonos más a la actualidad, resulta imprescindible hablar de Diseñadores Gráficos que actúan o actuaron bajo unos conceptos aproximados a los que nos estamos refiriendo, como son Daniel Gil, Manuel Estrada o David Gill, cuyos trabajos se basan en las composiciones limpias y claras, la transmisión de un mensaje de manera eficiente, y la investigación de; imágenes, objetos, planos, textos, etc., y las composiciones y combinaciones de los mismos.
Por otra parte, el Surrealismo se caracterizó, entre otras cosas, por la conjunción de imágenes dispares (reales o irreales), tanto en el tiempo como en el espacio. Los objetos y formas sin su significación tradicional (principio de la “desorientación”, el espectador queda desorientado). Ejemplo de esta vanguardia es el artista René Magritte, con el estilo que desarrolló en la primera década del S.XX en el que se decidió a representar los objetos según su fría apariencia. Las relaciones insospechadas entre ellos como fuente de efectos poéticos se convirtieron en la columna vertebral de su obra. Respecto a estos referentes estéticos que tienen en común el uso de objetos descontextualizados o aislados, la combinación de los mismos, y de nuevo
A modo de conclusión, el estilo suizo, con sus líneas compositivas, sus características estructurales y su importancia en la eficacia del mensaje dotarán al proyecto de esa claridad y limpieza característica de los trabajos profesionales. Las vanguardias dadaísta, surrealista y conceptual se aplicarán en la investigación de objetos, imágenes, planos, textos, fotografías, etc., para que adquieran una profundidad simbólica o metafórica, que cumplirá con la necesidad de comunicar el uso de la investigación para conseguir resultados creativos, como poemas-objeto y objetos-arte, dentro del estilo próximo al de Daniel Gil, Manuel Estrada o David Gill, entre otros. Por tanto, aclarar que no se trata de un efecto imitador entre el plagio y el homenaje de todos estos referentes, sino de un impulso hacia una exploración. Y de la búsqueda de una identidad que nos haga avanzar en el mundo del diseño.
DISEÑO WEB 1.
1.1 1.2 1.3
PLANIFICACIÓN.
2.
Objeto del proyecto. Análisis del proyecto. Análisis del público objetivo. CONCEPTUALIZACIÓN. Análisis de las necesidades reales. Experiencia del usuario. Arquitectura de la información.
3.
DISEÑO.
2.1 2.2 2.3
3.1 Aspectos comunicacionales y estéticos.
PLANIFICACIÓN. 1.1
Objeto del proyecto.
Realizar un Diseño Web, también denominado interface gráfica o diseño visual. Definición de interface gráfica: En sus inicios los ordenadores funcionaban bajo líneas de comandos, lo que requería por parte del usuario un alto conocimiento sobre su funcionamiento. Las interfaces gráficas surgieron por la necesidad de hacer más accesible el ordenador a usuarios comunes, es decir, desarrollar un entorno gráfico para que el ordenador pudiera destinarse a un público masivo. Actualmente las interfaces gráficas se encuentran en todo tipo de software y en todas las páginas web. Por tanto, la interface gráfica de una web es el diseño visual de la misma, es decir, la capa que el usuario percibe como resultado final. Sin embargo, para la creación de esta “capa final” es necesario haber estudiado y analizado los factores que influyen en su diseño. Estos factores son los que se desarrollan a continuación.
1.2Análisis del proyecto, diseño web.
•Definición de la web. Web para Estudio Freelance que ofrece los servicios de diseño dentro del ámbito de la gráfica publicitaria. •Finalidad de la web. Promocionar y dar a conocer el estudio, sus servicios y trabajos. Y que esto sirva para la contratación. •Primeros Objetivos. Promocionar la marca que identifica el estudio freelance. Exponer los trabajos y los servicios de diseño que ofrecen. Captar al público objetivo. Atraer al público objetivo.
1.3
Análisis del público objetivo.
La definición del público objetivo está desarrollada en el apartado del mismo nombre en el principio de la memoria. Como se ha comentado antes, el proyecto se dirige a empresas de diseño gráfico y publicidad, compuestas por equipos de profesionales en las distintas áreas del diseño, y que a menudo contratan ayuda o colaboración externa. Teniendo en cuenta los valores estéticos y de comunicación del público objetivo, es necesario analizar tanto los sitios web de dichas empresas y estudios, como los trabajos (web) que realizan. Estas han sido pautas esenciales para la búsqueda de web que pertenecen al público objetivo. Para llevar a cabo el estudio se han seguido también unas pautas de análisis que se muestran a continuación en el estudio de una web, que sirve como ejemplo del proceso realizado.
La imagen pertenece a la página de inicio de la web. Presenta un grupo de trabajos de papelería, no especifica nada, pero se puede deducir que es la que aplican a su estudio. De este modo dejan claro a que se dedican mostrando uno de sus trabajos. La presentación sigue la misma estructura para mostrar todas las imágenes. El menú principal aparece desplegado con todas las secciones a la vista, trabajos, animación, archivo e información. En el navegador Google Chrome no hay problema de visualización, un pequeño scroll vertical para los trabajos. Pero en el caso de usar otro navegador con una barra de buscador y herramientas más ancha el menú no se visualiza entero y aparece un scroll vertical dentro de la página.
Los títulos de menú principal están realizados con la tipográfica Helvética bold de 22px, y las secciones de contenido con Helvética bold 13px. La presentación de los trabajos, como se ha comentado antes, sigue siempre la misma estructura, y su tratamiento gráfico de imágenes con fondos blancos permite que éstos a su vez se fundan con el fondo de la web. Para la secuencia de imágenes se utilizan los botones prev y next, y muestra en número la imagen que se está viendo, y el total de las existentes. La estructura de la web presenta el mismo espaciado X para todas las imágenes, aunque varíe el tamaño. El texto del menú ocupa 6 veces ese tamaño, y está alineado a la izquierda. El título Work comparte línea base y altura con los botones prev y next, que también es una X.
Dvein. DVEIN es un estudio especializado en Motion Graphics y Dirección de Arte ubicado en Barcelona. Formado en la actualidad por tan solo tres personas, han trabajado para clientes de la talla de Voll Damm, National Geographic, Diesel o Hewlett Packard; todo ello gracias a sus grandes dosis de imaginación, sus impresionantes creaciones y la minuciosidad en todos los detalles que acompañana a sus sobresalientes trabajos. Un estudio que todavía tiene mucho que decir, y que experimenta y exprime al máximo los recursos con los que cuentan a la hora de llevar a cabo cada una de sus magnificas obras.
La imagen anterior pertenece al inicio de la web, en la que se muestra directamente la sección de trabajos. El menú se compone por las secciones noticias, trabajos, sobre nosotros, y contacto. La rueda de la izquierda presenta todos los trabajos, con imágenes. La tipografía Helvética Thin 10pt para los títulos de sección; medium 12pt para textos de sección; bold 14pt para texto marcado-resaltado.
El equipo lo componen Teo Guillem, Fernando Dominguez y Carlos Pardo. Trabajan con apoyos externos que les ayudan en determinadas partes del desarrollo y no descartan que el equipo crezca en los próximos años. Esto se debe a que están buscando abrirse a todos los campos posibles; la publicidad y el diseño gráfico. La web cuenta con una sección Intro en la que aparece su logotipo, creado por Alex Trochut – diseñador freelance – y un esquema a modo de instrucción sobre el funcionamiento de la web.
En la imagen se muestra la estructura de la página, que sirve de base para las demás secciones de la web. Especialmente la alineación del texto justificado a la izquierda, que coincide en todas las secciones con la vertical de los botones de menú. Se puede distinguir la división de la web en 5 columnas verticales que conforman junto a los espacios superior e inferior, y un claro espacio central, para contenidos como vídeos, imágenes y textos.
Conclusiones extraídas del análisis:
La mayoría de las webs propias de los Estudios de Diseño o Publicidad siguen estos dos estilos mostrados. Por un lado la sobriedad del texto y las grandes imágenes de los trabajos, en páginas con contenidos básicos, limpias, claras, y que juegan únicamente con las alineaciones de la página, ya que el resto del trabajo visual lo realizan las imágenes de los trabajos que realizan. El segundo tipo de web del público objetivo, suelen tener un diseño centrado, color o imagen de fondo. Pero igualmente siguen un estilo simple, sin sobrecarga de elementos. Se dividen de igual modo en web Html y Flash. Con estructuras base para todas las páginas, con la que consiguen una continuidad del estilo en elementos puntuales. Comparten en su mayoría el uso de la tipografía Helvética, corregida en algunos casos para textos corridos, y títulos, para aumentar su legibilidad. Estos factores, además de tamaños tipográficos, de logotipo y de los márgenes y contenidos han servido de referencia para el desarrollo de la web.
Competencia.
El tratamiento gráfico y compositivo es igual que el perteneciente al primer ejemplo de público objetivo. Alineando el texto/ menú a la izquierda, y a continuación la presentación de las imágenes. La web conserva esta estructura para todas las secciones de la web. Esta imagen pertenece a la página principal o home, en la que presenta directamente las miniaturas de las imágenes de sus trabajos. Una forma rápida de mostrar lo que haces.
Joel Lozano
Usa la tipografía Arial bold 12px, para menú y texto corrido. Y la Helvética bold 36px, para títulos de sección.
Estudios de diseño y freelance que trabajan con para otras empresas o estudios de diseño y/o publicidad.
Diseñador gráfico freelance de Barcelona. Filosofía: Ofrecer creatividad en las diferentes áreas del diseño que trabaja, basándose en la investigación e innovación de los lenguajes de comunicación. Desarrolla trabajos de diseño gráfico, ilustración, motion graphics y tipografía. Colabora con empresas de diseño gráfico y publicidad.
Como se puede observar en esta segunda imagen, el parecido con las webs del “grupo 1” del público objetivo, es más que razonable. Por tanto la estructura base coincide con el primer ejemplo, al igual que el uso de imágenes de los trabajos con fondos blancos, para que de este modo, se integren en la composición web.
Estructura web.
Velckro.
Este es un ejemplo de otra web, Velckro, diseñador freelance que también trabaja para otras empresas de diseño y publicidad. La estructura base es similar a la anterior. Se trata por tanto de una estructura muy generalizada, en la que se realiza un diseño semejante al del público objetivo. Las únicas variantes de la competencia analizada son el cambio de alineación a la izquierda por un diseño centrado, y en algunos casos, como en la siguiente imagen, una imagen de presentación antes del paso a los contenidos de la web.
CONCEPTUALIZACIÓN. 2.1 Necesidades
Teniendo en cuenta los objetivos principales, el público objetivo, y los aspectos descritos en el apartado “Aspectos comunicacionales”, podemos identificar las necesidades del diseño web. Si se pretende llegar de forma clara al publico objetivo, y que identifiquen desde el primer momento de quién es la web y de qué trata, se puede deducir que será necesario una página de inicio o home, en la que tanto la marca y como el mensaje principal “diseño” tengan gran importancia. De este modo, el usuario reconoce a quién pertenece la web, y de qué trata. Si otro de los aspectos de comunicación, relacionados con los estéticos, es transmitir una capacidad de investigación, composición, y la importancia de la tipografía, será necesario mostrar estos aspectos en la web, es decir, componer con textos e imágenes. Para mostrar la forma de trabajo que representa la marca se incluirá una sección de “filosofía” que incluya el sistema y método de trabajo característicos. Una sección de portfolio es igualmente necesaria, será la que cumpla con el objetivo de mostrar los trabajos realizados. Al igual que una sección en la que se describan los trabajos que se pueden solicitar y los diferentes modos de contacto para poder solicitarlos.
Un conjunto que transmita calidad de forma clara y directa, requiere de elementos dispuestos bajo un criterio, por tanto las líneas compositivas y las leyes de percepción también serán aspectos necesarios.
2.2 Experiencia del Usuario.
Las personas nos formamos una idea de cómo son y cómo funcionan los sistemas cuando interactuamos con ellos, ya sean ordenadores u otros aparatos. No se trata de una imagen exacta de la realidad, tan sólo es una idea imprecisa que nos ayuda a hacerlos funcionar. Esta idea mental recibe el nombre de “modelo mental del usuario”. Josep Casanovas, ingeniero de software. Modelo mental del usuario en sistemas de proceso transaccional. http://www.alzado.org/articulo.php?id_art=286 De esta cita se deduce que el usuario ya tiene una manera preconcebida de visualizar la web, basado en experiencias previas. Diseñar pensando en el usuario y teniendo en cuenta su experiencia, permitirá aprovechar la interactividad, centrar su atención en lo que interesa, en lugar de fomentar un abandono rápido de la web. Esto es fundamental, ya que los hábitos de los usuarios no son tan diferentes de los del cliente que entra en una tienda. Ambos miran lo que les llama la atención, en una vista general, y si no encuentran lo que buscan, abandonan la tienda, abandonan la web. Para saber cómo debe ser el diseño de la web es fundamental saber a qué tipo de usuario va destinada. El anterior análisis del público objetivo facilita esta tarea, porque ya sabemos que se trata de empresas y estudios de diseño, por lo que se puede definir que el usuario tiene una alta experiencia en cuanto a web y navegación. Pero además da información sobre qué es lo que interesa al usuario, qué es lo que busca, y qué sería aquello que le haría abandonar la web.
Si un diseñador recibe o busca una página web de un Estudio Freelance de diseño, lo primero que querrá saber es qué hacen y cómo lo hacen. Por tanto, si lo primero que se muestra es un diseño visual impactante que aclare que se trata de un estudio creativo de diseño, le llevará a ojear los trabajos que realizan. Esta primera impresión de la se habla dura apenas unos segundos, y es el tiempo del que se dispone para conquistarle. Pero el diseño visual de la web, para ser impactante necesita adquirir un significado conjunto con todas sus partes, para componer un mensaje y que éste pueda ser comprendido. Estos aspectos se tratan en profundidad en el punto 3. Diseño.
2.3 Arquitectura de la información.
Realización del organigrama gráfico y estructura web. La forma en que se estructura y organiza el contenido de la web será determinante para que los usuarios encuentren o no lo que buscan; es una parte esencial de la usabilidad. Organigrama gráfico: Agrupación de los contenidos de acuerdo a las tareas que se pueden realizar dentro del sitio web.
Home
Filosofía Texto
Portfólio Grupo 1 Grupo 2 Grupo 3
Servicios Diseño Gráfico Diseño web Diseño Editorial Diseño Multimedia
Contacto Email Teléfono Skype
Estructura de las páginas en red: de acuerdo a este sistema de navegación todas las páginas se conectan entre si, por medio de un menú presente en todas las secciones. Esta estructura permite una navegación más cómoda para el usuario, pues se eliminan páginas sin regreso, que obliguen a usar los botones de retroceso del navegador, que no serían visibles en la opción de pantalla completa o fullscreen de la página web, opción que se desarrolla en el apartado de aspectos técnicos.
Home
Filosofía
Portfólio
Servicios
Contacto
3 DISEÑO. Aspectos comunicacionales y estéticos. Para conseguir crear y transmitir un mensaje, aspectos técnicos y de comunicación, se tendrán en cuenta los procesos perceptivos y de composición. El conocimiento de los procesos perceptivos, que son aquellas respuestas a los estímulos visuales, incrementa el control del significado del mensaje que se pretende transmitir. La realización de una estrategia compositiva de la imagen permitirá justificar el contenido del diseño visual y puede llevar a una comprensión más clara de los mensajes visuales. A esto podemos añadir que, en el presente caso, el proyecto se dirige a un público objetivo que conoce estos procesos y las líneas generales de composición, por lo que su “ojo educado” percibirá rápidamente una buena o mala composición. El diseño visual estará formado por partes individuales que deberán crear un conjunto. El modo de definir estas unidades y el conjunto de las mismas se llevará a cabo tratando por un lado; los aspectos de las formas individuales como formas básicas, y sus características, como el color, la línea, la simetría, la reiteración, el tono y el acento, y por otro; la combinación de dichos elementos individuales, el conjunto, llevando a cabo la composición, mediante estructuras base que permitan establecer una relación entre las unidades. Dicho de otra forma, se crea un diseño a partir de varias formas, texturas, tonos contrastes… Se relacionan activamente esos elementos y se pretende un significado; el resultado es la composición. Los elementos que compondrán el diseño visual del proyecto serán gráficos y tipográficos, es decir, compuestos por textos e imágenes.
La razón de usar elementos gráficos es sencilla, pues como es sabido por todos, poca gente lee en la web, y además un apoyo visual es un elemento de gran importancia y significancia, si su tratamiento es el correcto. La visión es una experiencia directa, de modo que la información implícita de la imagen también lo es. La razón de esto se debe a que al ver experimentamos lo que ocurre de manera directa, mucho más directa que si lo leemos o lo escuchamos. Por eso es importante crear un mensaje visual. También es un dato relevante el saber que se piensa con imágenes, es decir, se visualiza. Arthur Koestler, en su libro The Act of Creation, observa: “El pensamiento en imágenes domina las manifestaciones del inconsciente, el sueño, las alucinaciones psicóticas, la visión del artista. […]” De este modo, cuando indicas a un turista hasta la catedral de Cuenca, estas visualizando las calles y trazando un camino, y sin duda, al turista le sería más útil ver el camino en imágenes que escuchar la explicación. El acto de visualizar, es de gran importancia en el diseño, pues permite ver algo antes de realizarlo. Koestler, en The Act of Creation, observa: “El pensamiento en conceptos emergió del pensamiento en imágenes a través del lento desarro independientemente de que su naturaleza sea real o abstracta, y que constituyen la fuerza visual, indispensable para el significado del mensaje y muy influyente en la respuesta”. Rudolf Arnheim, se refiere a este hecho, en el que la percepción de la forma comienza por los aspectos básicos, en Arte y Percepción Visual: “…cuando algunos niños de dos años y chimpancés hubieron aprendido que, de dos cajas que se les presentaban, la que tenía un triángulo de determinada forma y tamaño contenía siempre comida apetitosa, no tenían ninguna dificultad para aplicar lo aprendido a trián-
gulos de aspecto muy distinto. Se hacía más grande o más pequeño el triángulo, o se le daba la vuelta; se sustituía un triángulo negro sobre fondo blanco por otro blanco sobre fondo negro, o un triángulo solamente perfilado por otro relleno. Esos cambios no parecían inhibir el reconocimiento”. Esto refuerza el hecho de diseñar teniendo en cuenta que el estímulo primario debe contener rasgos formales con información suficiente para la transmisión de la esencia del mensaje. Cuando vemos algo, también imponemos ejes implícitos para ajustar el equilibrio y un mapa estructural para representar y medir la acción de las fuerzas compositivas, vitales para el contenido y por tanto, vitales para el input y el output del mensaje. (Información de entrada y de salida, respectivamente). Todo esto ocurre al tiempo que decodificamos muchas clases de símbolos. El diseño visual, como se ha comentado anteriormente se compone de partes que forman un todo, el conjunto. El conjunto o contenido del diseño visual está intensamente influido por el significado de las partes formado por la textura, el color, el tono, la dimensión, la proporción y su composición. Las partes, a su vez, están formadas por elementos básicos; el punto, la línea, el contorno, la dirección, la dimensión y el movimiento. La composición es el paso más importante para la resolución de un problema visual. El resultado de la composición será el que se encargue de la transmisión del mensaje y por tanto, de lo que recibe el espectador. Mediante la composición se controla el trabajo y se tiene la oportunidad de expresar el “aire” comunicativo que se pretende transmita el diseño. En el presente caso, la composición estará basada en el principio de la simplicidad. Una composición simple se visualizará más fácilmen-
te, se leerá más rápido. Pero la simplicidad no es sinónimo de número de elementos. Arnehim, hace referencia a la simplicidad en Arte y Percepción Visual, exponiendo: “…Cuando las cosas están dispuestas de tal modo que al sernos representadas por los sentidos podemos imaginarlas fácilmente y en consecuencia recordarlas fácilmente, decimos que están bien ordenadas y en el caso contrario mal ordenadas o confusas…”. De este párrafo se puede llegar a la conclusión de que; “lo simple, lo organizado se recuerda mejor y se percibe como claro”. El principio de la simplicidad, y por tanto, claridad, gobernará las soluciones visuales que se realicen en el proyecto, siendo la simplicidad el estilo necesario para transmitir el significado o concepto de claridad y profesionalidad. En las soluciones visuales influirá y condicionará en muchos aspectos, el medio en el que se realiza el diseño y por tanto el medio para el que se realiza. Estas influencias pueden ser limitaciones o necesidades, que se desarrollan en el apartado “Aspectos Técnicos” pero que se han tenido en cuenta a lo largo de todo el proceso de desarrollo proyectual. QUÉ SE PRETENDE COMUNICAR: La estructura o composición, como hemos citado, es una parte fundamental para la comunicación de un mensaje, sobre todo, si lo que se persigue es transmitir el significado de calidad íntimamente relacionado con la profesionalidad. Sin factores compositivos ni perceptivos no sería posible justificar que el diseño realizado transmite estos valores, pues quedaría bajo el juicio subjetivo del observador. Los elementos que compondrán el diseño visual serán los que doten al mismo del carácter de investigación y creatividad. Serán imágenes con un mensaje implícito, en el que se jugará con las texturas, los planos, montajes, etc.
ASPECTOS TECNICOS DE LA WEB: Las aplicaciones informáticas para la ejecución de los bocetos del diseño web ha sido Adobe Photoshop CS4 por la disposición de los elementos en diferentes capas, para composición de imágenes y textos, retoque fotográfico, estructuras y plantillas; Adobe Illustrator CS4, por su opción que permite tener varios documentos en la mesa de trabajo, para la creación de ilustraciones, dibujo vectorial y producción de gráficos en general, estructuras, plantillas y primeros frameworks en ordenador. Los procesos técnicos necesarios para la producción del diseño web han sido; Diseño de plantillas que delimiten el tamaño del documento y de los elementos dispuestos en él. Bocetos de la disposición de los elementos hasta encontrar la solución adecuada a las necesidades y objetivos. Paso de los bocetos finales, escogidos como mejor solución, al ordenador. Pruebas de composición, tamaño, color, formas, gráficos, textos, etc. Tanto en Photoshop como en Illustrator. Y sus respectivos retoques y cambios hasta la adecuación del diseño a sus necesidades y objetivos. Selección de los bocetos representativos del estilo y composición final a seguir, de las pantallas más relevantes de la web. Realización del producto final, diseño web, en base a los estilos y esquemas seleccionados, con la creación de imágenes necesarias y preparación para su presentación. El tiempo estimado para la realización del producto final, con la realización y adecuación de las imágenes, oscila en dos semanas, quedando tiempo suficiente para solventar cualquier problema si lo hubiera, y para su correcta disposición y compilación para la entrega.
En lo referente a la realización web como producto real, como web online, se procederá por parte de personal externo al Proyecto Final, más exactamente por la empresa de programación Lliure sistems, a la realización del proceso de programación, incluyendo los aspectos; contratación de dominio, servidor o hosting y posicionamiento.
Esquema metodológico. Planteamiento: - Planteamiento de la propuesta a desarrollar. - Documentación y análisis. - Definición del problema. - Descomposición del problema. - Subdivisión de tareas. - Precisión del problema proyectual a resolver y producto a diseñar. Desarrollo proyectual: - Elaboración de bocetos, alternativas. - Evaluación de bocetos, alternativas. - Selección de la alternativa adecuada al problema proyectual a resolver. - Desarrollo de la alternativa seleccionada y verifica ción. - Memoria. - Procesos técnicos. - Evaluación de costes. Realización: - Elaboración del modelo definitivo. Presentación: - Organización, revisión y selección de imágenes y material para la exposición. - Definición y configuración del modelo de presentación. - Guión de presentación. - Preparación en el lugar de presentación, pruebas, ensayos.
DISEﾃ前 WEB Arte final
Pรกgina inicial de la web.
Secuencia de im谩genes que pertenecientes a la animaci贸n inicial de la web.
Inicio con menĂş desplegado.
Secci贸n Filosof铆a.
Secci贸n Servicios.
Presentaci贸n Portfolio.
Secci贸n Portfolio.
Ejemplo presentaci贸n de proyectos con cambio de color en el logotipo.
Ejemplo presentaci贸n de proyectos con cambio de color en el logotipo.