Proyecto
Rafael
Rodríguez
Quinto
curso.
Diseño
de
página
García
Mañana
web
Índice -Introducción/abstract.............6 -Palabras clave/keywords...........7 -Breafing..........................8 -Objetivos.........................9 -Antecedentes.....................10 -Hipótesis de trabajo.............12 -Cuerpo de trabajo................14 -Conclusiones.....................24 -Biblilografía....................25
1 Resumen/abstract En este proyecto nuestro gabinete de diseño gráfico se ha encargado de la completa realización de un sitio web por encargo de una empresa de diseño gráfico llamada “Borra”. Esta empresa está constituida por los diseñadores andaluces Rafael Rodríguez García y Borja Mateo Viaña, jóvenes talentos en el sector y formados en las bellas artes. Tras varias reuniones con los clientes vimos que su necesidad para la publicidad de su empresa se basaba en la construcción de un sitio web a través del cual el cliente pudiese contactar fácilmente con ésta y tener una referencia visual del estilo de la empresa en proyectos anteriores. A través de este dossier veremos cómo ha sido el desarrollo de este proyecto y cuál ha sido la metodología seguida para el mismo.
In this project our graphic design office has been responsible for the completion of a website commissioned by a graphic design company called “Borra”. This company is formed by Andalusian designers Rafael Rodriguez Garcia and Borja Mateo Viaña, youngs talents in the industry and trained in the fine arts. After several meetings with clients saw their need for advertising your company is based on building a website through which the client could easily contact the company and have a visual reference of the style of the company in previous projects . Through this dossier will see how has been the development of this project and what was the methodology followed for the same. .
2 Palbras clave/ Key words Algunos de los t茅rminos esenciales para el desarrollo del proyecto han sido: Borra Coherencia Pattern Usabilidad Motivaci贸n Dreamweaver Vintage
Some of the key terms for the development of the project were: Borra coherence pattern Usability motivation Dreamweaver Vintage
3 Breafing En este caso el breafing proporcionado como punto de partida para el proyecto ha sido dado por la misma empresa de diseño. Las exigencias del mismo son breves. Se nos pedía la realización de un sitio web llamado como la propia sociedad mercantil y que sirviese como portal de comunicación oficial de la misma. El mínimo de contenidos solicitados para el sitio web sería de una página de contacto a través del la cual el cliente pudiese comunicarse con la empresa y un sitio de que funcionase como galería donde el cliente pudiera visualizar proyectos anteriores realizados por la empresa que le sirvieran como referencia. A parte, se nos pedía una coherencia estética donde se pudiesen ver unos criterios seguidos en todo el planteamiento de la web.
4 Objetivos Objetivos generales -Desarrollar un sitio web con funcionalidad -Plantear una parte de contacto y otra parte destinada a servir como galería. -Obtener una coherencia de estilos en toda la página. Objetivos específicos -Desarrollar un sitio web para la empresa “Borra”. -Construir una breve entidad corporativa de dicha empresa. En este objetivo podemos mencionar la intención de diseñar el logo de la empresa, los colores y texturas básicas para su entidad y las tipografías más comunes en la utilización de la entidad. -Reflejar una seriedad en la construcción del sitio web, pudiendo ser éste apto para una empresa real y lo suficientemente depurado para su subida a la red. -Dar a conocer las principales señas de la empresa a través del sitio web como una empresa joven, carismática, fresca pero a la vez comprometida, elegante y seria.
5 Antecedentes Para el desarrollo del proyecto nos hemos servido de varias influencias. - http://www.bce-online.com De este sitio web dedicado a la impresión de tarjetas de visita podemos sacar el diseño general de construir la página a través de una sola tabla principal donde el banner está situado en la fila superior, los botones principales están situados en una fila media y el contenido queda en la parte inferior. - http://bybu.es/ De este portal web de la empresa de diseño “Bu” nos hemos inspirado a la hora de influenciarnos por su estética de un toque naif y vintage. - http://www.mfmancera.com Del sitio web de este artista sevillano y profesor de la universidad de Sevilla podemos sacar el uso de algunos script como “lightbox” utilizado a la hora de visualizar la imágenes de las galerías. - http://www.marisavadillo.es/ del sitio web de esta artista y profesora de bellas artes de la facultad de Sevilla hemos sacado el uso del index como una página que a través de un solo botón móvil nos deriva a nuestro sitio home donde encontramos el menú principal
(http://www.bceonline.com)
(http://bybu.es/)
(http://www.mfmancera. com)
(http://www.marisavadillo. es)
6 Hipótesis trabajao
de
Para el desarrollo de este proyecto nos hemos propuesto seguir una metodología específica. Previo a la puesta en marcha de la construcción del sitio web concertamos varias entrevistas con los clientes, donde pudimos conocer la buena relación que existen entre ellos. Nos explicaron su metodología a la hora de trabajar y nos enseñaron varios trabajos y proyectos anteriores donde nos dieron a conocer cuál era su estética. Esto último nos resultó enormemente interesante a la hora de construir el sitio web, ya que nos resultaba imprescindible que tanto el sitio web como los elementos desarrollados en lo relacionado a su entidad corporativa reflejasen la estética de sus proyectos. Lo primero que hemos realizado en cuanto a los elementos básicos de su entidad corporativa ha sido el diseño de la imagen de la empresa. Nuestro cliente, la empresa de diseño gráfico “Borra”, no contaba con la realización de una imagen propia para la empresa. Por lo tanto lo primero fue diseñar un logo para la misma ya que nos parecía imprescindible empezar por la construcción de un logo que estuviese presente en todo el sitio web. En su realización tuvimos que ceñirnos en este caso a las pautas de los clientes. Éstos nos contaron la intencionalidad que tenía el nombre de la empresa al jugar con el inicio de los nombres de ambos y construir de esta manera la palabra “Borra” como conjunto de los dos diseñadores. Al dar como resultado este juego de nombres la palabra “Borra”, elegimos la imagen de la goma de borrar como forma que reflejaba en su máxima representación este concepto. Sobre la forma de la clásica goma de borrar colocamos el nombre de la empresa con una tipografía de carácter infantil utilizada en el preescolar. Esta tipografía la utilizamos como tipografía principal al dar a conocer la estética de los dos diseñadores y a su interés por el diseño infantil y los álbumes ilustrados. Junto a esta tipografía elegimos otra llamada Futurist Fixed-width para que apareciese el nombre de ambos diseñadores. Nos parecía que esta tipografía contrastaba su-
ficientemente con el carácter infantil de la tipografía anterior y que le otorgaba cierta seriedad a la imagen de la empresa. Resaltamos en colores diferentes las letras “Bo” y “Ra” de los nombres de ambos diseñadores para dar a entender el juego de palabras de la construcción del nombre de la empresa. El logo de la empresa fue aprobado por ambos diseñadores al igual que nuestro acierto en el uso de la tipografía. Una vez diseñados los rasgos principales de la imagen de la empresa lo siguiente construir diferentes bocetos de la organización de nuestro sitio web. Para ello realizamos a través del programa Adobe Photohop diseños previos con diferentes colores de fondo y de tablas. Una vez planteado el diseño que queríamos para nuestra página web nos dispusimos a desarrollarla en lenguaje html para su uso en red.
(Tipografía básica para la entidad de “Borra)
(Tonos básicos para la entidad de “Borra”)
(Logo final para “Borra”)
7 Cuerpo del trabajo 7.1
Metodología
Definir el encargo Planificación
Briefing Ajustarnos a las fechas fijadas para el proyecto.
Análisis
Estudiar las necesidades de los clientes y la aprobación previa de los diseños de los rasgos principales de su entidad corporativa Solucionar gráficamente el problema de diseño a través de varias propuestas. Escoger los mejores bocetos para elegir la mejor propuesta. Llevar a cabo la propuesta elegida
Formalización
Presentación Producción Facturación Valoración
Analizar el coste de todas la operaciones llevadas a cabo en el proceso Sacar conclusiones del proyecto.
7.2
Cronología
06/03/2013: Comienzo del proyecto web y briefing 18/03/2013: Propuesta de la fecha de entrega para el día 01/04/2013 09/04/2013: Rectificación de la fecha de entrega para el día 20/05/2013 20/05/2013: Entrega final del proyectoy y presentación del mismo.
7.3
Presupuesto
Presupuesto diseñadores Número de diseñadores: 1 Rafael Rodríguez García.
Gastos de movilidad Tarifa -Diseño logo 50€ -Diseño web 30€ -Desarrollo html 80€
Presupuesto total
10€
160€
170€ I.V.A 21%: 49,32€ 357€
7.4
Desarrollo
Una vez aprobados los diseños realizados para los elementos básicos de la imagen corporativa de Borra nuestro equipo se dispuso a realizar la realización del sitio web. En primer lugar para el desarrollo del sitio nos dispusimos concretar el contenido que debía aparecer en la misma. Vimos que el contenido sería complejo, ya que era necesario que contuviese una galería donde se pudieran visualizar anteriores trabajos de la empresa y que estos sirviesen como precedentes. Una vez concretado el contenido de nuestro sitio las secciones serían las siguientes: -Un menú principal -Una galería que derivara a tres galerías diferentes: diseño gráfico, obra gráfica y álbumes ilustrados. -Una sección para que el cliente pudiera contactar con la empresa. -Una tienda desde la cual el cliente pudiera encargar algunos productos de merchandasing de le propia empresa. Tras establecer los contenidos nos pusimos a elaborar diferentes propuestas de diseño creando diferentes jpg para tener una noción sobre la estructura y elementos de diseño a utilizar. Creímos adecuado utilizar un fondo sobre el cual todo el contenido se desarrollara sobre una tabla principal. En esta tabla estaría situado un banner principal con el logo de la empresa y el nombre de los diseñadores. En la fila de en medio irían los botones principales desde los cuales nos dirigiríamos a las diferentes secciones, y en la fila inferior iría el contenido propio de cada sección. En cuanto al fondo, probamos (Estampado de ojo de al principio con un tono verde y rosa que perdíz en cruz utilizado como pattern) nos recordara a los colores de la típica goma de borrar. Al final nos decantamos por incluir un pattern geométrico.
Una vez concretada la estructura de nuestro sitio y los rasgos estilísticos principales nos dispusimos a desarrollarla gracias al software de Adobe Dreamweaver. En el cual creamos todo el desarrollo de la página en lenguaje html añadiendo estilos css y algunos scripts. Más tarde empezamos a analizar la interactividad de nuestro sitio. Creímos importante establecer en este apartado algunos criterios: -Claridad ante el usuario. -Coherencia -Desarrollar algo llamativo predominando la elegancia sobre el efectismo. En esta línea de actuación, vimos importante desarrollar algunos comportamien
(Propuesta de diseño 1)
(Propuesta de diseño 2)
(Comportamiento “on mouse” de los botones de sección)
En esta línea de actuación, vimos importante desarrollar algunos comportamientos que actuasen cuando el ratón se situase por encima de ciertos vínculos (on mouse). Es el caso de los botones principales de las secciones. En estos botones al pasar por encima el ratón podemos ver cómo se subraya el texto con un trazo irregular en un tono rosa. Este comportamiento lo mantiene en todas las secciones. También creímos atractivo apostar en algunos casos por imágenes de sustitución. Podemos ejemplificar esto con el logo de Facebook, el cual al pasar el ratón por encima cambiará el logo de color. Este logo estará vinculado con el perfil en Facebook de Borra. En el caso de las galerías vimos oportuno utilizar el sistema Lightbox para la visualización del contenido gráfico. Este plugin insertado como un script en nuestra página nos permite ver la imagen pinchando sobre ésta y abriéndose por encima de un fondo gris y dejando ver una explicación de la imagen.
(Ejemplo de imagen de sustitución “on mouse” en vínculo para perfil de Fadebook)
(Ejemplo de imagen de sustitución “on mouse” en vínculo para para galería )
(Ejemplo de script Lightbox para visualización de imágenes en la galería)
Finalmente concluimos el desarrollo de nuestra página creado los siguientes html finales.
(Index)
((Home)
((GalerĂa)
(Galería diseño)
(Galería obra gráfica)
((Tienda)
((Contact)
8 Conclusiones Creemos que la valoración final del proyecto es muy posita. El sitio web creado responde a las necesidades de los clientes. Hemos realizado los rasgos principales de la entidad corporativa de la empresa y hemos sabido incluir estos rasgos dando una imagen fuerte de la empresa hacia sus clientes. También podemos añadir que hemos sabido conjugar la seriedad, elegancia y coherencia del sitio web con la frescura y dinamismo de sus diseñadores. En el desarrollo del proyecto podemos destacar la dificultad a la hora de programar el sito por falta de experiencia en proyectos de esta tipología. Sin embargo lejos de resultarnos una justificación de un proyecto de escasa calidad, esto ha sido una motivación para buscar cierta complejidad y dinamismo en los componentes de nuestro sitio web.
9 BibliografĂa -http://www.bce-online.com/ -http://bybu.es/ http://www.mfmancera.com/ http://www.marisavadillo.es/