Advertisement
  1. Web Design
  2. General

15 consejos: creando el sitio web perfecto para un portafolio fotográfico

Scroll to top
Read Time: 17 min

Spanish (Español) translation by Ana Paulina Figueroa (you can also view the original English article)

Mostrar un portafolio basado en imágenes en un sitio web puede ser una tarea complicada. Por lo general es muy diferente en comparación con el sitio web de un cliente normal o de un negocio. En un sitio web normal usualmente hay una estructura consistente, que incluye un encabezado, un menú de navegación, algunas veces una barra lateral y generalmente un pie de página. Sin embargo, al mostrar fotografías no hay límites. No necesitas una barra de navegación, ni un encabezado ni un pie de página si no quieres agregarlos. Mientras más creativo puedas ser, al mismo tiempo que te enfocas en el objetivo principal de tu sitio, más atención recibirás.

Nota del editor: Hoy echaremos un vistazo a un nicho muy especial dentro del diseño web: Los portafolios fotográficos. Owen Conti es un autor de nuestro sitio hermano, Phototuts+, y él estará guiándonos a través de algunos consejos útiles para crear un gran portafolio. Él estará hablando teniendo la fotografía en mente, pero casi cualquier portafolio basado en imágenes (de ilustración, diseño gráfico, pintura e incluso diseño web) puede beneficiarse de estos consejos... así que ¡esperamos que los disfrutes!.

Mañana estaremos reuniendo algunos de los 30 mejores portafolios fotográficos y basados en imágenes de la web que existen hoy en día!


Introducción

Tu portafolio fotográfico en línea está destinado a atraer clientes o a mostrar tus fotos e imágenes. Algunas personas eligen lo segundo, añadiendo fragmentos de texto a cada foto que publican, creando un blog de fotografía. Ese tipo de sitio no intenta atraer clientes y llevar dinero a casa, sino más bien ser una galería de visualización para cualquier persona que se encuentre con ella.

Los portafolios de fotografía generalmente tienen dos o tres secciones principales:

  1. La galería
  2. Una sección de contacto
  3. Algunas veces también se incluye una sección "Acerca de"

Esas son las tres secciones principales de un portafolio fotográfico. Esto permite al cliente ver tu trabajo, si le gusta puede leer más sobre quién eres o ponerse en contacto contigo. Aunque suena simple, hay muchas preguntas e inquietudes que pueden surgir, tales como:

  • ¿De qué tamaño deben ser las fotografías?
  • ¿Debería comprimirlas en absoluto?
  • ¿Debo usar Flash o HTML5?
  • ¿Debería usar una presentación de diapositivas automática?
  • ¿Cuántas fotografías debo incluir?

Durante el resto de la publicación veremos 15 consejos que pueden ayudarte a reducir las inquietudes que puedas tener con respecto a tu portafolio fotográfico.


El hilo común: ¿Qué tienen en común todos los portafolios sobresalientes?

Todos los portafolios sobresalientes tienen tres detalles principales en común:

  1. El primero es una selección reducida de tus mejores, y solamente tus mejores, imágenes. Indico que debe ser una selección reducida porque, personalmente, odio visitar el sitio de un fotógrafo para tener que sentarme y esperar mientras cargan 50 fotos, y luego de alguna manera tener que navegar a través de ellas. Hablaré más de esto posteriormente en el consejo 7.
  2. Además de tus mejores imágenes, los portafolios sobresalientes incluyen un método de contacto para el cliente potencial. Nunca obtendrás ninguna ventaja de tu portafolio si los visitantes no pueden ponerse en contacto contigo.
  3. El detalle final que todos los portafolios sobresalientes tienen en común es que todos usan imágenes de alta resolución. A pesar de los tiempos de carga, cuando se trata de tu portafolio debes mostrar la mejor calidad que puedas. Voy a explicar con más detalle en el consejo 5 más adelante.

Si incluyes estos tres sencillos detalles en tu portafolio fotográfico, ¡ya tienes todo para lograr un gran comienzo!


15 consejos para tu portafolio:

  1. Considera la demografía de tu audiencia

    Tu portafolio necesita reflejar la demografía de tu audiencia, ya sea que se trate de una pareja buscando una sesión de bodas o una agencia buscando una sesión comercial. Si tu portafolio tiene una imagen incorrecta, no podrás atraer a ninguno de los clientes que deseas.

    Piensa en el portafolio de un fotógrafo de bodas, generalmente blanco, limpio y fácil de usar. Esto es adecuado para el objetivo demográfico de un fotógrafo de bodas: por lo general parejas más jóvenes (algunas veces las mujeres están a cargo de ciertas decisiones) con sueños de tener la boda perfecta. Generalmente hablando, las bodas están llenas de color blanco, con flores hermosas y rayos de sol. Si quieres atraer a clientes de bodas, necesitas que tu portafolio se parezca a una boda.

    Sin embargo, al mismo tiempo, si tomas fotografías de moda principalmente, es probable que tomes fotos de temas modernos y eso es lo que tu objetivo demográfico está buscando. Haz que tu portafolio refleje eso. Suena demasiado simple como para tener que pensarlo demasiado, pero te sorprendería lo que algunas personas usan para rodear sus mejores trabajos.

  2. Esboza un diseño

    Esbozar un diseño antes de siquiera tocar el ratón es una práctica común entre los diseñadores web, y esto no debería ser diferente para tu portafolio. La razón por la que encuentro útil hacer un boceto es que me permite mantenerme enfocado en mis intenciones. Si recordamos el consejo 1, queremos que nuestro portafolio esté dirigido específicamente a nuestra demografía. Esto incluye colores, diseño, navegación, iconos, tipografía, todo. Si esbozas tu idea mientras aún está fresca en tu mente, no le perderás la pista ni tendrás otras ideas reemplazándola. Es una manera sencilla de adherirte a tu plan original.

    Sin embargo, recuerda que no hay problema si te desvías del plan cuando es por el bien de tu portafolio. Si terminas pensando que las miniaturas se verían mejor con tres de ancho en lugar de dos, entonces hazlo. Intenta adherirte al bosquejo lo más que puedas, cuando sea posible. Esta ahí para ayudarte, no para cimentar tu trabajo.


    ¡Esboza tu diseño antes de tocar la computadora!
  3. Agrega soporte para contenido dinámico

    Al esbozar tu sitio, recuerda añadir soporte para contenido dinámico. Imagina que decides que quieres usar Flickr como fuente de tu portafolio. Bueno, ciertamente se ve bien cuando hay 12 fotos, pero ¿qué pasa cuando hay 21 o 36? ¿cómo se verá tu portafolio con un número impar de imágenes en comparación con un número par, como decidiste esbozarlo?.

    Estas son el tipo de preguntas que tienes que hacerte al esbozar tu diseño. ¿Cómo puedo añadir más imágenes a mi diseño sin saturarlo? ¿la paginación es una opción? ¿solamente podré mantener una cantidad XX de imágenes visibles a la vez?.

    No puedo decirte cómo crear un boceto de tu portafolio, pero puedo dar consejos en base a experiencia personal. Intenta limitar la cantidad de fotografías que tienes en cada página, para que no se vea como si estuvieras saturando tu portafolio de contenido. Separa las fotos usando categorías o páginas. La paginación funciona bien, pero solamente si se hace correctamente. Considera la paginación solamente si tienes más de 12 imágenes por página. Considero que 12 es un buen punto de equilibrio, porque si tengo más que eso comienzo a perder el rumbo.

  4. Intenta mantener un contraste alto

    Dependiendo del estilo de fotografía, las imágenes generalmente se ven mucho mejor cuando las visualizas con un fondo negro. Esto suele pasar debido a que el negro ocasiona un mayor contraste en comparación a cuando ves algo contra un fondo blanco. El contraste ayuda a resaltar los colores de la foto que, a su vez, hacen que la imagen parezca más vívida y sorprendente. Si tomas cualquier tipo de fotografía deportiva, comercial, HDR, de naturaleza o retratos, intenta ver tu trabajo sobre negro y luego sobre blanco y determina cuál te parece mejor.

    Al diseñar un sitio obscuro, usualmente es una buena idea agregar un toque de color en algún lugar. Puede ser tu logotipo, o tu navegación, cualquier cosa. El blanco y negro puede ser extremadamente efectivo, pero añadir un poco de color agrega un toque de personalidad.

  5. Usa solamente imágenes con alta resolución

    Cuando un cliente potencial visita tu portafolio, éste espera ver imágenes de alta resolución y de apariencia profesional. ¡Así que dale eso!. No muestres imágenes en "tamaño completo" de 300px por 300px. El espectador está ahí para ver tu trabajo en su mejor calidad, no un trabajo de baja calidad optimizado para el ancho de banda. Cuando consideras tu objetivo demográfico, las posibilidades de que se encuentren cerca de ti son altas. Hoy en día la mayoría de nosotros tenemos conexiones por cable o DSL de alta velocidad, así que utilízalas.

    Proporciona imágenes de alta resolución a tus clientes, y a cambio ellos quizá tengan que esperar un par de segundos más. Si son tan impacientes como para no esperar a que tu portafolio cargue con la mejor calidad posible, entonces, personalmente, ellos son demasiado impacientes para ser mis clientes.

    En Internet todo tiene un precio; da la casualidad de que el precio por un trabajo de alta calidad es tener tiempos de carga más prolongados.

  6. Usa un área de visualización amplia

    Ahora que estás usando imágenes de alta resolución, ¿por qué no usas un área de visualización amplia también? W3Schools reporta que, en enero del año 2011, 0.6% de los usuarios aún usaban una resolución de pantalla de 800 x 600. Eso significa que, si quieres cubrir todas tus bases, debes diseñar tu portafolio para que quepa en esas dimensiones. De esa manera, los usuarios que usan una resolución superior a 800 x 600 aún pueden acceder a tu portafolio fácilmente. Para los usuarios en tabletas y teléfonos inteligentes puedes cambiar el tamaño de tu portafolio para que se ajuste a sus dispositivos.

    Un tema de moda de los últimos dos meses en el mundo del diseño web es el "Diseño web responsivo"; respondiendo a tus usuarios. Haz que tu sitio ajuste su diseño si un usuario tiene una resolución más pequeña de lo normal. Si un usuario tiene una pantalla más grande, intenta hacer que tu diseño se adapte cargando imágenes más grandes. Mediante el uso del "diseño web responsivo" en tu portafolio, puedes lograr una mayor satisfacción general con tus usuarios. Nada es peor que ver un sitio en tu iMac, solamente para que falle en tu iPhone la mañana siguiente durante el viaje en tren para ir al trabajo.

  7. Optimiza tu selección de imágenes

    Si bien es posible que tengas una gran colección de imágenes que te gustaría compartir en tu portafolio, intenta limitar tu selección a tus piezas más fuertes. Tener demasiadas imágenes en tu portafolio puede incrementar los tiempos de carga, y proporcionar demasiadas opciones al espectador. Esto puede ocasionar que tu portafolio se sienta como si nunca terminara.

    Si limitas tu selección el espectador ve solamente las mejores imágenes, y si está interesado en ver más, puede ponerse en contacto contigo. Limitar tu selección también permite que tu portafolio se vea más definido y estructurado. Si quieres publicar una vasta colección de todas tus fotos, usa servicios como Flickr y 500px.

  8. Ordena tus fotografías estratégicamente

    Cuando se te asigna la tarea de escribir un ensayo literario, tú organizas tus puntos en orden estratégico. Colocas los puntos más fuertes ya sea al principio o al final del ensayo y luego dejas los puntos más débiles en medio. Al colocar los puntos más fuertes al principio atraes instantáneamente al lector y captas su atención. Al colocar los puntos más fuertes al final del ensayo terminas con una nota alta, dejando al lector con algunos argumentos sólidos que no olvidará.

    Es lo mismo con tu portafolio fotográfico. Si colocas tus imágenes más fuertes al principio o al final del portafolio, ocasionarás un mayor impacto en el espectador. Yo recomiendo usar ambos extremos del espectro, capturar su atención desde el principio y dejarles algo para recordar al final del portafolio.

  9. Protege tu trabajo

    Con la tecnología de hoy en día, no importa cuánto intentes proteger tus imágenes, alguien, en algún lugar, puede robar una copia. Puedes intentar deshabilitando el clic derecho, o colocar todas tus imágenes como imágenes de fondo, y esperar que tus usuarios no tengan una particular destreza tecnológica; pero eso nunca va a funcionar.

    La única manera de proteger verdaderamente tus fotos es incrustar marcas de agua en ellas. Al incrustar marcas de agua en los archivos jpg, si los ladrones se llevan tu trabajo, la marca de agua siempre estará ahí. Mientras más grande sea la marca de agua, más difícil será deshacerse de ella.

    Hay dos desventajas del uso de marcas de agua:

    1. Te tomará tiempo procesar tus imágenes por lotes para añadir marcas de agua.
    2. Las imágenes de tu portafolio no se verán tan bien como podrían. Cualquier persona preferiría ver una imagen sin una marca de agua en lugar de ver una que la tenga.

    Ya no hay tanta gente usando marcas de agua, pero si te preocupa que las personas se roben tus imágenes, quizá valga la pena pensarlo.

  10. Proporciona detalles con cada fotografía

    A los espectadores les gusta saber para quién tomas fotos y a quién están viendo. Es posible que estén muy interesados en tus fotografías de moda y quizá les encante la idea de contratarte a ti y a alguno de los modelos que has fotografiado antes para trabajar juntos de nuevo.

    Si te parece adecuado proporcionar un poco de información acerca de cada foto, ¡hazlo!. No tienes que darle un "título" a cada pieza, sino más bien una descripción con una frase que indique para qué compañía tomas fotografías, o sobre quién es el modelo, o tal vez qué herramientas usaste o incluso el lugar en el que se tomó la fotografía.

    Cada pequeño detalle cuenta y, mientras más esfuerzo pongas en tu portafolio, más apasionado le parecerás al cliente potencial.

  11. Reconsidera tu sistema de navegación

    Al buscar en la web para encontrar ejemplos de portafolios fotográficos, a menudo encontré sitios que incluían miniaturas de cada imagen y flechas siguiente/anterior para navegar hacia adelante y hacia atrás en la galería. Lo que no encontré a menudo, pero que me llamó la atención más de lo que esperaba, fue la navegación con el teclado en adición a las miniaturas y a las flechas siguiente/anterior.

    Mientras más sencillo sea para el espectador navegar y desplazarse en tu sitio, más feliz estará al usarlo. Mientras más feliz sea al usar tu sitio, más sentimientos positivos tendrá al revisar tu trabajo. Lo mismo ocurre en la dirección opuesta, no lo olvides. Si tu sitio es demasiado difícil de usar, tus usuarios se desanimarán fácilmente y tendrán más sentimientos negativos con respecto a tu trabajo.

    Reconsidera tu navegación, para hacerla tan fácil y tan natural de usar como sea posible.

  12. Intenta limitar el desplazamiento

    Esta sugerencia contradice el #6, en donde aconsejé usar un área de visualización amplia para tus fotografías. La clave es ya sea:

    1. Encontrar un equilibrio entre pantalla pequeña vs pantalla grande, o...
    2. Usar tecnología para cambiar el tamaño de las imágenes, o usar múltiples tamaños de la misma imagen, dependiendo de la resolución de pantalla del espectador.

    Generalmente es una buena idea limitar el desplazamiento del usuario, sin importar el dispositivo ni la resolución que esté usando. Adapta tu sitio para pantallas más pequeñas reorganizando su diseño, o quizá creando miniaturas de un tamaño diferente.

    Como mencioné en el consejo #6, 800 x 600 aún es la resolución más pequeña que debes cubrir si te preocupa cada uno de tus posibles usuarios. Intenta diseñar para esa resolución sin necesidad de desplazamiento, y luego mejor el diseño y la estructura para pantallas y resoluciones mayores.

  13. Haz que sea sencillo para tus usuarios ponerse en contacto contigo

    Independientemente de lo bueno que sea tu trabajo, si tu espectador no puede ponerse en contacto contigo, no obtendrás ningún trabajo. Es realmente sencillo añadir detalles de contacto a tu sitio. Ya sea a través de una página de contacto, un número telefónico en cada página, o una dirección de correo electrónico al pie de la página, encontrar tu información de contacto debe ser muy sencillo para tus usuarios.

    Puedes poner lo que quieras en tus detalles de contacto, solo asegúrate de que cualquier cosa que pongas sea correcta. Un sencillo número telefónico será suficiente, aunque, si a un cliente potencial no le gusta mucho usar el teléfono, quizá sea mejor que conozca tu dirección de correo también. Recuerda pensar en todos tus usuarios antes de tomar decisiones finales.

  14. Obtén una segunda opinión

    ¡Genial! acabas de pasar una semana diseñando tu nuevo portafolio y otra semana programándolo. Lanzas tu nuevo sitio y lo anuncias al mundo, solamente para recibir un puñado de comentarios negativos sobre su usabilidad. Resulta que el sitio no se ve tan bonito en MacBooks de 13'' debido a que la resolución no se acerca en absoluto a la resolución de tu iMac de 27''.

    ¡Ups! parece que debiste hacer algunas pruebas. No solamente eso, sino que una segunda opinión ¡también hubiera estado muy bien!. Hacer que alguien con conocimientos en la industria revise tu nuevo portafolio por ti nunca es una mala idea. Ellos pueden proporcionarte una segunda opinión sobre áreas a las que quizá no hayas prestado tanta atención, y señalar cualquier error evidente que tal vez no estés viendo.

    Sin embargo, habiendo dicho eso asegúrate de seleccionar sabiamente tu segunda opinión. Intenta mantenerte alejado de amigos y familiares, no solamente debido a que sus opiniones quizá no sean imparciales, sino también porque tal vez no saben lo suficiente sobre la industria como para darte una opinión adecuada.

  15. ¡No olvides actualizar!

    Actualmente estamos en el año 2011, y la tecnología que tenemos es lo suficiente sofisticada para que cualquier persona, y quiero decir cualquier personal, posea y gestione un portafolio dinámico. Sin importar si administras tu portafolio con WordPress o con un sistema Flash, o si aún estás atrapado en HTML estático, deberías actualizar tu contenido.

    Los usuarios están acostumbrados a ver nuevo contenido cada vez que visitan un sitio web. Hemos abandonado los tiempos de ver el mismo contenido viejo durante cada visita. Esto es lo mismo en el caso de tu portafolio fotográfico, con un poco menos de énfasis en la frecuencia con la que debes actualizarlo. Lo ideal es actualizarlo cada vez que tengas nuevo contenido. Intenta no actualizar por lotes, subiendo un puñado de fotografías cada par de meses. En vez de eso, intenta mantener una agenda consistente pero flexible.

    Cuando actualices, solamente actualiza si el nuevo contenido es mejor que el anterior. No tiene sentido reemplazar una buena imagen con una menos impactante, no importa si es más reciente. Siempre debes estar fortaleciendo tu conjunto de habilidades, y tu portafolio debe reflejar eso.


Conclusión

Ya sea que estés diseñando tu portafolio de fotografía para trabajos pagados o simplemente para mostrar tus imágenes, siempre debes considerar al usuario final. Haz que sea lo más fácil posible para tus usuarios el ver tu portafolio. Las navegación y los diseños complejos quizá sean "geniales", pero también son inútiles si son demasiado difíciles para la mayoría de los usuarios.

Mientras menos frustrados se sientan tus usuarios al ver tu portafolio, más probable será que se pongan en contacto contigo, siempre y cuando les guste tu trabajo. No importa qué tan buenas sean tus fotografías, el formato y el detalle con las que las presentas determinará si valen la pena para el cliente o no.

Hemos cubierto 15 consejos sobre cómo crear un excelente portafolio fotográfico. Hagamos un resumen rápido:

  1. Considera la demografía de tu audiencia
  2. Esboza un diseño
  3. Agrega soporte para contenido dinámico
  4. Intenta mantener un contraste alto
  5. Usa solamente imágenes con alta resolución
  6. Usa un área de visualización amplia
  7. Optimiza tu selección de imágenes
  8. Ordena tus fotografías estratégicamente
  9. Protege tu trabajo
  10. Proporciona detalles con cada fotografía
  11. Reconsidera tu sistema de navegación
  12. Intenta limitar el desplazamiento
  13. Haz que sea sencillo para tus usuarios ponerse en contacto contigo
  14. Obtén una segunda opinión
  15. ¡No olvides actualizar!

Recuerda, estos solamente son consejos - guías útiles que puedes elegir usar en tu propio portafolio si lo deseas. No uses ninguno, uno ¡o todos ellos!. Depende de ti, pero nunca te olvides de tus usuarios finales. ¡Ellos son los que realmente importan!.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.