Introduction

Hanna Helsens, a talented freelance illustrator based in Rennes, wanted a portfolio website to showcase her creative works. With a love for gouache painting and a unique artistic touch, she needed a digital space that reflected her personality and craftsmanship. Our goal was to create an intuitive, visually appealing, and highly functional portfolio website that would not only display her artwork but also provide seamless navigation for visitors interested in purchasing prints and contacting her for commissions.

The Vision

Our journey began with a deep understanding of Hanna’s artistic style and vision. She emphasized the importance of a warm, inviting aesthetic that aligns with her illustrations. The website had to feel like an extension of her artwork—playful yet professional, simple yet immersive.

From the start, our key objectives were:

• A visually engaging UI – The design had to complement her artwork without overpowering it.
• User-friendly navigation – Visitors should be able to explore her works effortlessly.
• A robust shop system – Seamless browsing and purchasing experience for customers.
• Responsive design – The site had to look perfect on all devices.

Design & Planning

We began by wireframing the website structure using Figma. This phase involved multiple brainstorming sessions, sketching out different layouts, and experimenting with UI components that would best serve Hanna’s brand. We wanted the homepage to feel like stepping into her creative world, where visitors could immediately engage with her artwork.

The design process followed these key steps:

• Mood Board Creation – We compiled a collection of color palettes, typography choices, and website inspirations to define the site's aesthetic direction.
• Wireframing & Prototyping – Using Figma, we built a responsive wireframe to map out user journeys.
• UI Design – We incorporated soft pastel colors, subtle textures, and elegant typography to match Hanna’s artistic identity.

Development Process

Once the design was finalized, we moved to the development phase, using HTML5, CSS, and JavaScript to bring the designs to life.

Frontend Development

We started by creating a clean, minimal, and lightweight codebase that ensured fast loading times and smooth performance.

• HTML5 structured the content efficiently, ensuring SEO-friendly markup.
• CSS (with Flexbox and Grid) allowed us to craft a responsive, well-balanced layout.
• JavaScript was used for interactive elements like image sliders, animations, and smooth scrolling.

Building the Shop

One of the main features was the Shop Section, where users could explore and purchase Hanna’s original prints. We focused on a clean product display with:

• High-resolution product previews
• A simple and intuitive checkout process
• Secure payment integration

Mobile Responsiveness

Given that a large portion of visitors would browse via mobile devices, we ensured the site was fully responsive. We fine-tuned breakpoints and layouts to provide a seamless experience across desktops, tablets, and smartphones.

Optimizations & Final Touches

After development, we focused on fine-tuning performance. We implemented:

• Lazy loading for images to reduce initial load times.
• CSS animations for smooth transitions.
• SEO best practices to enhance discoverability.

Challenges & Learnings

While building Hanna Helsens’ website, we encountered a few challenges:

• Balancing Visuals & Performance – High-quality artwork needed optimization without losing clarity. We used WebP formats to maintain sharpness while reducing file size.
• User-Friendly Navigation – With a lot of content, we had to ensure easy navigation. Implementing a sticky menu and well-organized categories solved this issue.
• Shop Integration – Ensuring a seamless shopping experience required careful UI/UX decisions, including an easy checkout process.

The Final Outcome

The final website https://www.hanna-helsens.com/ successfully represents Hanna Helsens’ artistry, offering an immersive experience for visitors. The combination of an elegant design, smooth functionality, and engaging visuals has resulted in a site that not only showcases her work but also enhances her professional presence.

Key Takeaways from the Project:

• ✅ A design-first approach ensured the website aligned with Hanna’s artistic style.
• ✅ Performance optimizations made the site fast and efficient.
• ✅ The shop functionality provided a smooth experience for buyers.
• ✅ Mobile-first design guaranteed accessibility across all devices.

Conclusion

Working on Hanna Helsens’ portfolio site was an exciting and enriching experience. By blending creativity with technical precision, we built a platform that truly represents her work. This project reaffirmed the importance of collaboration, user-centric design, and performance optimization in crafting a meaningful online presence for artists.