Eleonora Aldea: Creación portafolio Ea! Fotografía

De Casiopea




Título
Palabras ClaveFotografía, Diseño Gráfico, Internet, Portafolio, Lenguaje Computacional
Período2010-2010
CarrerasDiseño Gráfico
Alumno(s)Eleonora Aldea
ProfesorJorge Barahona

Creación Portafolio EA! Fotografía

Maquetas Navegables en HTML

Sitio de pruebas

Briefing

El primer paso en la Documentación del proyecto es la creación de un Brief, con algunos datos simulados, en los cuales se presentan los datos básicos de la empresa y el proyecto que requiere. En este caso el proyecto consiste en la creación de un portafolio en internet, para la empresa Ea! Fotografía, empresa pequeña de fotografía en la Quinta Región que presta servicios a particulares y agencias.

Descarga Brief de Ea! Fotografía


Resumen del Brief

  • Definición de la empresa: Es una pequeña empresa de fotografía que ofrece servicios a particulares, agencias, y músicos.
  • Rubro/Actividad: Básicamente se ubica en el rubro de la fotografía para eventos musicales, registros familiares, books para modelos y diseñadores, y fotografía de eventos.
  • Aspiraciones: Convertirse en un servicio que más que prestar sólo servicios fotográficos se conecta con sus clientes para registrar de la mejor forma posible los eventos en los que participe.
  • Proyecto: El proyecto consiste en la creación de un portafolio en internet para la empresa, mostrando los trabajos más recientes, las tarifas, los servicios que presta, etc.
  • Objetivos: Establecer una cercanía con los clientes y potenciales clientes, establecerse como un servicio de confianza y calidad superior entre sus pares. Mostrar la calidad del servicio de una forma moderna y ordenada.
  • Público Objetivo: Pequeños productores que deseen registrar sus productos en forma bella. Familias y parejas que requieran fotografías familiares. Músicos o agencias que necesiten fotografías para sus eventos.
  • Competencia: 1 / 2 / 3
  • Referencias: 1 / 2 / 3

Benchmark

Luego de realizar el Brief, estudiamos los sitios que tienen relación con el proyecto en el cual nos embarcamos. En este caso elegimos un sitio similar al que se creará, un sitio popular que sirve como referencia, y dos sitios que pertenecen a la competencia ya que se tratan de portafolios de fotógrafos de la zona.

1. Portafolio Rosario Oddo (proyecto similar)

  • Sitio creado en HTML usando indexhibit
  • Diseño simple y minimalista
  • Navegación en una barra lateral a la derecha
  • Navegación horizontal de fotografías a gran tamaño
  • No utiliza redes sociales
  • No publica tarifas
  • Categorías poco claras
  • Poca jerarquía en contenidos
  • Sitio más enfocado hacia lo artístico que lo comercial
  • No tiene blog
  • No tiene formulario de contacto

2. Our Labor of Love (referencia)

  • Sitio creado en Flash
  • Diseño femenino
  • Navegación en una barra superior
  • Navegación de fotografías en flash
  • Utiliza redes sociales
  • Sí publica tarifas
  • Pocas categorías
  • Jerarquía poco clara
  • Tiene formulario de contacto
  • Tiene blog
  • Servicio enfocado sólo en matrimonios

3. wedding Photographer (competencia)

  • Sitio creado en HTML
  • Color negro, con énfasis en rosado
  • Navegación en una barra superior
  • Navegación de fotografías en flash (autoviewer)
  • No utiliza redes sociales
  • No publica tarifas
  • Jerarquía poco clara
  • Tiene formulario de contacto
  • Tiene blog
  • Servicio enfocado sólo en matrimonios

4. Sandra Gonzalez (competencia)

  • Sitio creado en HTML
  • Diseño anticuado
  • Navegación a través de imágenes
  • Navegación de fotografías en flash (autoviewer)
  • No utiliza redes sociales
  • No publica tarifas
  • Muchos enlaces rotos
  • No tiene formulario de contacto
  • Tiene blog


Card sorting

Terminado el estudio de los sitios en el Benchmark, definimos las secciones y subsecciones que deberían encontrarse en el proyecto. Para organizarlas jerárquicamente realizamos un Card Sorting, herramienta mediante la cual se le pide a distintas personas que ordenen los conceptos según les parece adecuado.

Los conceptos son: Home, Servicios, Portafolio, Música, Bodas, Retratos, Moda, Tarifas, Contacto, Clientes, Información, Enlaces, Blog, Redes sociales, Últimos trabajos, Recomendaciones, Currículum, Acceso Clientes, Cotizaciones, Reconocimientos.

En el caso del tercer card sorting, el usuario propone la creación de dos categorías principales que le añadirían un carácter más creativo y original a la navegación. Las categorías principales recomendadas son "Lo hecho", "Lo por hacer", las cuales englobarían las otras categorías en el sitio.

Índice de contenidos

A partir de los resultados del Card Sorting realizamos el siguiente índice de contenidos:

  1. Home
    1. Blog
    2. Redes sociales
    3. Enlaces
  2. Lo que he hecho
    1. Información
      1. Currículum
      2. Reconocimientos
    2. Clientes
      1. Acceso clientes
      2. Recomendaciones
    3. Portafolio
      1. Últimos trabajos
      2. Música
      3. Retratos
      4. Moda
      5. Bodas
  3. Lo que hago
    1. Servicios
      1. Tarifas
      2. Cotizaciones
    2. Contacto

Se piensa también para el futuro, añadir una sección de Descargas, y una sección de Venta de Productos, utilizando las fotografías.

Mapa de navegación

Mapanavegacion eafotografia.png

Wireframes: Primera Propuesta

Wireframes: Segunda Propuesta

Wireframe "Home"
Wireframe "Home" con menú desplegable
Wireframe Portafolio
Archivo:Wireframe portafolio música.png
Wireframe Portafolio: Música
Archivo:Wireframe sección ea.png
Wireframe Sección Información

Finalmente se modifican los Wireframes iniciales, dándole prioridad a las imágenes grandes utilizadas de fondo para los divs, y dejando contenido en el inicio sobre las fotografías.

Interfaz

Interfaz "Home"

La idea es que al actualizar el sitio la imagen de fondo cambie, usando un código de javascript. En la galería a continuación se muestran ejemplos de la misma interfaz con distintos fondos.

Interfaz "Pantalla Home con Menú"
Interfaz "Portafolio"
Archivo:Pantalla portafolio música ea.png
Interfaz "Portafolio: Música"
Archivo:Pantalla sección ea.png
Interfaz Sección Información

Para la interfaz se decidió un diseño de alto contraste, con enlaces y títulos en Helvética Black y mayúscula, con un interlineado negativo, y el uso de imágenes de fondo en todas las secciones menos en la de Portafolio, ya que el énfasis estará puesto en un slideshow de fotografías divididas por temática (el cual se construirá utilizando JQuery).