​Banner Component Library: Functional Layout Templates

Developed a universal library of banner components in Figma to be used as a “blank slate” starting point for all N Brown websites. This toolkit provided the design team with standardized templates that ensured layout consistency and typographic quality across the entire brand portfolio.

CLIENT | NBrown PLC


Building the Components in Figma


I also developed various guides for teams to use when placing banners across the site. Using the browser inspector tool, banners were tested in the live environment to see exactly how they would look in each space. Screenshots were then used to map out the entire user journey from the homepage to the product pages and checkout. This ensured the layout stayed consistent and provided a clear user journey guide for the team to follow.


Some Examples

Below is a small example of some banners I designed using the templates I created