la marca.
Juan Carlos Saloz se licenció en Periodismo por la UAB en 2016 y completó su máster en Dirección Cinematográfica por la ESCAC en 2018. Es uno de los cofundadores de la productora audiovisual “Lachiribita”, donde ha escrito guiones, producido y dirigido diversos proyectos que abarcan una amplia gama de ámbitos, desde ficción hasta videoclips e incluso publicidad.
Su trabajo combina una mirada sensible con una estética visual potente, reflejando el pulso contemporáneo de la imagen.
Este portfolio digital fue diseñado para transmitir su estilo: profesional, creativo y expresivo.
período de tiempo.
6 semanas.
mi papel.
Diseño UI, Diseño visual, Prototipado, Desarrollo Web.
herramientas.
Figma, Illustrator, WordPress, Elementor Pro.
el desafío.
Crear una web portfolio que no solo muestre el trabajo de Juan Carlos Saloz, sino que también refleje su identidad como fotógrafo y productor audiovisual.
El mayor desafío fue encontrar el equilibrio entre funcionalidad y expresión visual, permitiendo que las imágenes hablen por sí solas, sin perder una estructura clara ni una navegación fluida.
La web debía ser:
- Profesional pero accesible.
- Visualmente atractiva pero sin exceso de elementos.
- Dinámica, responsive y fácil de actualizar para que pueda seguir creciendo junto con su carrera.
el objetivo.
Diseñar y desarrollar una web minimalista y visualmente impactante, que funcione como carta de presentación digital de Juan Carlos. El sitio debía permitirle:
- Exhibir sus trabajos en diferentes formatos (foto fija, video, proyectos).
- Contar quién es y cuál es su enfoque profesional.
- Estar disponible desde cualquier dispositivo con óptima experiencia de usuario.
- Ser compartida fácilmente con potenciales clientes, festivales o contactos profesionales.
cómo.
exploración.
Se investigaron portfolios de fotógrafos contemporáneos para entender cómo se presenta hoy el trabajo visual en web.
diseño ui.
El diseño se centró en crear un sistema visual sobrio y equilibrado.
prototipo.
A través del prototipo se validaron la estructura, la disposición de los contenidos y la interacción.
testeo y ajustes.
Revisión funcional y visual en distintos navegadores y pantallas. Ajustes finales para asegurar accesibilidad, legibilidad y coherencia visual.
desarrollo.
El sitio fue desarrollado con WordPress y Elementor Pro, lo que permitió una construcción flexible, visual y fácilmente editable por el cliente.
diseño ui.
tipografía.
DM Serif Display
Utilizada para títulos y encabezados, aporta un carácter distintivo y sofisticado. Sus serifas marcadas y su estructura editorial refuerzan el estilo visual del portfolio y captan la atención sin opacar las imágenes.
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 0
Montserrat.
Aplicada a los textos secundarios, botones y secciones informativas. Su estilo geométrico y limpio garantiza una excelente legibilidad, adaptándose bien a diferentes tamaños de pantalla y resoluciones.
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 0
paleta de colores.
La paleta elegida transmite profesionalismo, creatividad y un toque personal. Está compuesta por tonos fríos y elegantes, con matices suaves que aportan modernidad sin perder sobriedad
sistema visual.
El diseño de la web está completamente orientado a lo visual y expresivo, con una narrativa donde las imágenes y videos ocupan un rol protagónico. Muchas de las piezas audiovisuales se muestran en pantalla completa (100% del ancho), generando una experiencia inmersiva desde el primer scroll.
Se prioriza una composición de alto impacto, con contrastes fuertes, fondos oscuros y elementos de gran tamaño que refuerzan el carácter artístico del portfolio. La combinación de materiales en color, blanco y negro, y el uso de texturas o imperfecciones intencionales (como polvo, grano, desenfoque) aportan una estética cinematográfica y contemporánea.
secciones.
Cada sección del sitio fue diseñada con una estética propia, manteniendo siempre la coherencia visual general del portfolio. Esta decisión responde a la versatilidad artística de Juan Carlos Saloz, que se expresa de distintas formas según el tipo de proyecto.
La línea gráfica principal —sofisticada, sobria e impactante— actúa como hilo conductor, mientras que cada espacio (Bio, Dirección, Editorial y Guion) desarrolla su propio sello visual: tipografía, ritmo de lectura, uso de imágenes o disposición del contenido varían sutilmente para acompañar mejor la naturaleza de cada disciplina.
Esta diferenciación no solo enriquece la experiencia del usuario, sino que también refuerza la identidad multifacética de Juan Carlos, permitiéndole mostrar sus trabajos desde una narrativa más personalizada y potente.
botones.
El sistema de botones se diseñó con una estética sobria pero versátil, en sintonía con la identidad visual del sitio:
Tipografía: Todos los botones utilizan DM Serif Display en caja alta, lo que aporta elegancia y refuerza la presencia visual en cada sección.
Estilos: Se utilizaron dos variantes principales:
Contorno: fondo transparente con borde blanco o violeta y texto en alto contraste.
Sólido: fondo lila claro (#E7D9D9) con texto en violeta oscuro, para destacar acciones específicas.
Distribución: Se emplean de forma estratégica para guiar al usuario entre las secciones del portfolio, manteniendo una jerarquía clara.
Este diseño logra un equilibrio entre fuerza visual y funcionalidad, adaptándose al carácter artístico y profesional del trabajo de Juan Carlos Saloz.
El diseño UI del sitio se construyó en torno a una identidad visual potente, que refleja el estilo único y versátil de Juan Carlos Saloz como fotógrafo y realizador audiovisual. Se priorizó un enfoque altamente visual, con imágenes y videos a pantalla completa que impactan desde el primer momento.
prototipo.
secciones.
El prototipo se desarrolló con foco en una experiencia visual inmersiva y clara, pensada para destacar el trabajo artístico de Juan Carlos. En la home se priorizó el impacto con un video a pantalla completa, funcionando como carta de presentación directa y sin distracciones.
La navegación se resolvió mediante un menú superior fijo, que permite acceder a cada sección (bio, dirección, editorial, guion) sin scroll innecesario. Cada una de estas secciones fue prototipada con un diseño particular que responde al contenido y estilo narrativo de sus piezas, manteniendo la identidad visual general del sitio.
flujo de usuario.
Tarea: Buscar información sobre los juegos.
El prototipo permitió visualizar de manera concreta la estructura, navegación y estética del sitio antes de entrar en desarrollo. Fue clave para validar decisiones de diseño relacionadas con la jerarquía de la información, el sistema visual y la experiencia del usuario.
testing y ajustes.
contacto.
Durante la fase de testeo, se realizaron ajustes basados en la experiencia de navegación y las preferencias personales de Juan Carlos. Uno de los principales cambios fue la sección de contacto: originalmente se había planteado como una página independiente con formulario, pero se decidió simplificarla. Juan Carlos prefirió incorporar su correo electrónico y redes sociales directamente en la sección Bio, permitiendo un contacto más directo y personal, alineado con el tono auténtico de su trabajo.
Durante la fase de testeo, se realizaron ajustes basados en la experiencia de navegación y las preferencias personales de Juan Carlos. Uno de los principales cambios fue la sección de contacto: originalmente se había planteado como una página independiente con formulario, pero se decidió simplificarla. Juan Carlos prefirió incorporar su correo electrónico y redes sociales directamente en la sección Bio, permitiendo un contacto más directo y personal, alineado con el tono auténtico de su trabajo.
desarrollo.
responsive.
Durante la fase de testeo, se realizaron ajustes basados en la experiencia de navegación y las preferencias personales de Juan Carlos. Uno de los principales cambios fue la sección de contacto: originalmente se había planteado como una página independiente con formulario, pero se decidió simplificarla. Juan Carlos prefirió incorporar su correo electrónico y redes sociales directamente en la sección Bio, permitiendo un contacto más directo y personal, alineado con el tono auténtico de su trabajo.
desktop.
tablet.
mobile.
