Back

Rizzolo Guitars

Bespoke static site showcasing hand made instruments

Rizzolo Guitars
#React#Gatsby#Styled System#React Spring#Contentful

It was a pleasure to re-build my father's website in order to truly showcase his amazing instruments!


I prototyped the home and instruments pages/cards, and key design elements (colours, typography, grid, spacing) in Adobe XD.



Once I was happy with the overall design concept, I moved to building components with Styled System, creating a minimal UI library using Storybook.


I then started the Gatsby project and began to lay out the home page. In the mean-time I set up Contentful and started creating pages/sections as needed. Over time the design evolved to be less sharp (softer shadows, larger border radii/rounded buttons).



I wanted to use a cover video for the home page, but didn't want it to be shown right away, as I felt it can be a bit jarring seeing a large auto-playing video immediately. I used Scroll Magic to reveal the video after scrolling past the initial cover image. An SVG clip path was used to reveal the video with the curve of an acoustic guitar body.



I really enjoyed building this site, and particularly benefited from the theming and quick UI development that Styled System allows.


P.S I took a lot of the instrument photos so I'm extra proud of this one!

View