Behance Twitter LinkedIn Facebook
Página de inicio Cartera Contacto

Diseño web y construcción de prototipos para un fotógrafo independiente

Resumen del estudio de caso

Se me presentó un logo (una apertura de cámara en forma de símbolo femenino), algunas imágenes para la galería y una breve biografía para trabajar. La clienta tenía las siguientes peticiones:
  • El diseño tenía que ser audaz pero simple.
  • La página de inicio debe destacar y ser diferente.
  • La galería de imágenes debe ser convencional y fácil de usar.

Las soluciones

Diseño visual

Diseño de páginas web para dispositivos móviles

Diseño web para portátiles y dispositivos de sobremesa

Prototipo para dispositivos móviles

Prototipo para portátiles y dispositivos de sobremesa

Detalles del proyecto

Página de inicio

La idea detrás de un ojo femenino era transmitir el concepto de lo que hace un artista: ver el mundo a través de la lente de su propia experiencia en la vida, moldeada por sus puntos de vista y a veces nublada por sus propios preconceptos, y compartirlo con nosotros de la manera en que ellos lo ven. Capturan algo que les importa y algo de ello también puede resonar con nosotros.
Como Dorothy es una feminista fuerte, decidí poner su logo en forma de símbolo femenino en la pupila del ojo de una mujer. Descoloré la piel y dejé que el iris del ojo mantuviera su color original. Pensé que sería genial convertir la apertura del logo en un enlace que al hacer clic abriera su lente y llevara al espectador a la galería de imágenes, en otras palabras, trasladar al espectador al mundo del artista. Desafortunadamente, este efecto sólo funciona fuera de línea, debido a un error en la función de compartir en línea de Adobe XD, sin embargo la secuencia de prototipos que se muestra a continuación puede ayudar a visualizar la transición.
Elegí una fuente redonda y bastante afilada para la declaración de la misión. La página de aterrizaje resultó ser bastante audaz, pero femenina, y eso es lo que Dorothy quería.

un imac que muestra la página de aterrizaje en la pantalla
Pantallas de teléfono e ipad mostrando la portada y la galería del diseño web de un fotógrafo

Diseño para dispositivos móviles

La orientación de los retratos no permitiría que la imagen del ojo ocupara todo el espacio de la pantalla, así que la coloqué en el centro de la pantalla con la declaración de la misión abajo y el menú arriba.
La galería es muy simple y minimalista y hay consistencia en su diseño y disposición en todos los tamaños de pantalla con flechas de navegación muy finas y fondo negro.

Prototipos

He creado dos prototipos separados: uno para dispositivos con orientación a paisaje y otro para dispositivos con orientación a retrato (normalmente dispositivos móviles). Ambos utilizan la transición temporal para lograr el efecto de la apertura de la lente de la cámara en el centro del ojo. Originalmente utilicé 7 placas de arte para hacer la transición más suave, sin embargo Adobe XD no pudo procesar este número de transiciones de tiempo y se congeló, por lo que tuve que reducir el número de placas de arte a cuatro (tres en un móvil). Aún así, por el momento sólo funciona fuera de línea y el equipo de Adobe está tratando de resolver el problema.
El movimiento de desplazamiento se aplica para navegar por la galería en los dispositivos móviles.

Captura de pantalla de un prototipo para dispositivos con orientación horizontal Captura de pantalla de un prototipo para dispositivos móviles