NADRES
TIMEFRAME
2025
PROJECT
CATEGORY
PRODUCTION TIME
Portfolio web
Web design
1 week
A UX-driven redesign and development of a responsive portfolio for 3D artist Andrés Esquius, showcasing his workflow through immersive, story-based case studies.
DEFINING THE CHALLENGE
Problem statement
Andrés needed a professional online portfolio that effectively showcased his 3D modeling skills and creative process. His previous presentation lacked structure, storytelling, and accessibility across devices, making it harder for recruiters to grasp his full potential at a glance.
Goal
To design and develop a responsive, UX-centred portfolio that highlights Andrés’s strongest projects through clear storytelling, intuitive navigation, and a recruiter-friendly case study format.
Role
UX/UI Designer and Front-end Developer — responsible for research, information architecture, wireframing, prototyping, visual design, and the final implementation of the site.
RESEARCH
Process
The process began with a user interview with Andrés to understand his goals and expectations for the website. We discussed the overall objective, the type of projects he wanted to feature, and the kind of information and visuals needed for each case study — including screenshots, renders, and project details.
To better define the desired visual direction, we both created a small mood board to capture the tone, color, and style that would guide the final design. In parallel, I conducted my own research by analyzing several 3D artist portfolios, identifying common UX patterns and effective presentation methods.
This initial phase helped me clarify the structure, visual approach, and storytelling flow before moving on to the first wireframe drafts.
IDEATION & STRUCTURE
Information architecture
After the research phase, I defined the site’s main structure — core case studies, a secondary gallery, an About page, and a contact section. Each project was organized as a single, scrollable story showing the full 3D process.
Low-Fidelity Wireframes
I created a low-fidelity prototype to visualize layout and hierarchy. It wasn’t functional, but helped map where each element — images, buttons, sections — would appear in the final design.
Client Feedback & Refinement
I presented the wireframes to Andrés to gather feedback on structure and content. Together, we reviewed the project order, visual hierarchy, and how to best present his 3D workflow. His input helped adjust the organization of sections like About and Contact, ensuring the portfolio reflected both clarity and his personal priorities.
UI EXPLORATION
Design system
After validating the wireframes, I defined a simple design system. I selected a color palette that would harmonize with Andrés’s 3D work, ensuring the interface complemented the projects without competing with them. The mood board references guided these decisions, keeping the visual style subtle and supportive of the content.
Styled Wireframe
Using the design system as a foundation, I created a styled wireframe to visualize how all key elements — images, buttons, sections, and metadata panels — would integrate on the site. This allowed me to see how content, visuals, and interface components interacted together, providing a clear blueprint before moving on to actual development.
WEBSITE DEVELOPMENT & LAUNCH
For the development phase, I used Hostinger, which offered a good balance of cost and flexibility to implement Andrés’s requirements. Working without code allowed for a fast turnaround while still building a fully functional website.
I implemented all core interactions, including navigation, project case studies, galleries, and the contact form. I also integrated all images, metadata, and visual components defined in the styled wireframe. Once complete, the site was published and fully accessible, delivering a polished, recruiter-friendly portfolio that showcased Andrés’s 3D work effectively.
CONCLUSION
Results
The final website successfully met all the project goals. It effectively showcases Andrés’s 3D work through a clear narrative and intuitive structure, creating a storytelling experience that feels both professional and engaging. The portfolio aligns perfectly with his artistic identity, presenting his projects in a way that’s easy to navigate for recruiters and collaborators.
The outcome was well-received by both Andrés and those who later viewed the site, achieving the intended balance between functionality, aesthetics, and usability. Overall, the result was a cohesive and visually consistent platform that fully delivered on the original brief.
Learnings
Working side by side with Andrés made this project a really collaborative process. We discussed every stage together — from planning and structure to visuals and final adjustments — which made communication easy and the workflow smooth.
I learned how important it is to adapt the process to the project’s needs. In this case, skipping a full high-fidelity prototype was the right choice, since testing and feedback happened naturally along the way. It was a practical and rewarding experience that helped me improve both my design decisions and my way of working with clients.
