Skip to content
A screenshot from the collections page of irenebielsa.com

IreneBielsa.com

IreneBielsa.com is a fashion designer's website that focuses on exhibiting her creative work on the web, while offering an e-commerce experience for her visitors that appreciate the products.

Background#

This website was built as a result of a freelance project for a fashion designer. The website had to have a simple design and be easy to use.

Mobile-first design#

Taking into consideration the massive shift to mobile browsing over the last decade and the client's advertising in Instagram, it was an important step of developing the site in a mobile-first design. No less important was the fact that the website had to have a responsive layout.

Mobile screen of a Product Detail Page.
Mobile screen of a Product Detail Page.

High quality imagery#

Being an e-commerce fashion website, the designer's need for presenting her collections' pictures in high resolution was an important matter. E-commerce fashion websites are usually loaded with pictures and this is no exception. For this reason I needed to use something more sophisticated in order to mitigate the page speed impact that would come from the high quality images used throughout the website.

Tech stack#

Netlify dashboard showing the build process connected to Prismic
Prismic was connected to Netlify so that new deployments were triggered after each publishing within Prismic.

Front-end#

The website is statically generated and server-side rendered through the use of the Gatsby.js JavaScript framework. The choice of framework was simply governed by Gatsby's trivial and all-rounding image optimisation and serving approach.

The gatsby-plugin-sharp was a key plugin in order to serve quality adaptive images for low speed networks without losing the quality or damaging the user experience.

CMS#

For the client to add content, upload images and update the website at her own time had to be a hassle-free process. For this task, Prismic CMS was leveraged to provide the client with the power of updating the website frequently and with no delays in spinning up a new version of the website.

Prismic was then connected to Netlify so that new deployments were triggered after each publishing within Prismic.

Page speed#

Lighthouse report Performance score of 71 for Product Detail Pages
Lighthouse report Performance score for Product Detail Pages

Page speed, among other factors (i.e. Accessibility and SEO), was carefully taken into consideration from the beginning and throughout the journey of developing and maintaining the website.

Lighthouse report source on WebPageTest