Building SONY Pro website UI involved creating a streamlined process in Figma to seamlessly translate briefs into initial mock-ups and then directly in to the final build. This approach ensured efficient , high-quality design outcomes that met all project requirements.
Working across SONY Digital, I was tasked with designing pages to be built using modules that exist for developers. Historically, the pages were built in XD and photoshop, requiring designers to move modules around by eye instead of automatically.
To best create the SONY template, I used figma and approached the project using Atomic Design principles. Starting with atoms, I built out a library of colours, fonts and weights and components that could be re-used across the wider site.
In the next level of Atomic Design, molecules are complex structures using the atoms previously created. This would include layouts of compontents that are used in multiple modules across the site.
Organisms consist of nested molecules which make up larger parts of the site. These organisms can be built with variants so that they can be adapted to suit the need of the module instead of being built separately.
Templates are then built using the organisms to balance out spacing of the site and maintain a style throughout the website.
From these templates, a multitude of pages can be built at speed using the relevant modules in the desired order.