{"id":14,"date":"2026-02-01T16:00:40","date_gmt":"2026-02-01T16:00:40","guid":{"rendered":"https:\/\/brightmist.co.uk\/developer\/?p=14"},"modified":"2026-03-13T22:40:54","modified_gmt":"2026-03-13T22:40:54","slug":"component-library","status":"publish","type":"post","link":"https:\/\/brightmist.co.uk\/developer\/2026\/02\/01\/component-library\/","title":{"rendered":"Banner Component Library: Functional Layout Templates"},"content":{"rendered":"\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<p>Established a reusable <strong>banner component library<\/strong> with multiple layout options for high-traffic zones across 20+ N Brown Group websites. This improved the online team&#8217;s <strong>workflow efficiency<\/strong> and accelerated the delivery of promotional assets. I used the bem methodology to ensure there were 0 code conflicts with other brands.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<p>CLIENT&nbsp;|&nbsp;<a href=\"https:\/\/www.nbrown.co.uk\/\" target=\"_blank\" rel=\"noreferrer noopener\">NBrown Group<\/a><\/p>\n<\/div>\n<\/div>\n\n\n<div class=\"wp-block-ub-divider ub_divider ub-divider-orientation-horizontal\" id=\"ub_divider_78b088c4-a721-4316-b36a-b79af64208ed\"><div class=\"ub_divider_wrapper\" style=\"position: relative; margin-bottom: 2px; width: 100%; height: 2px; \" data-divider-alignment=\"center\"><div class=\"ub_divider_line\" style=\"border-top: 2px solid #ccc; margin-top: 2px; \"><\/div><\/div><\/div>\n\n\n<h2 class=\"wp-block-heading\">Building the Components in Figma<\/h2>\n\n\n\n<div style=\"padding:57% 0 0 0;position:relative;width:100%;margin:auto;\">\n  <iframe src=\"https:\/\/player.vimeo.com\/video\/1172811544?background=1\" \n    style=\"position:absolute;top:0;left:0;width:100%;height:100%;\" \n    frameborder=\"0\" allow=\"autoplay; fullscreen\" allowfullscreen>\n  <\/iframe>\n<\/div>\n\n\n<div class=\"wp-block-ub-divider ub_divider ub-divider-orientation-horizontal\" id=\"ub_divider_6f20ee36-0b38-4248-a354-e643573ec238\"><div class=\"ub_divider_wrapper\" style=\"position: relative; margin-bottom: 2px; width: 100%; height: 2px; \" data-divider-alignment=\"center\"><div class=\"ub_divider_line\" style=\"border-top: 2px solid #ccc; margin-top: 2px; \"><\/div><\/div><\/div>\n\n\n<p>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.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-2 is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" data-id=\"271\" src=\"https:\/\/brightmist.co.uk\/ux-designer\/wp-content\/uploads\/sites\/5\/2026\/02\/Frame-1.png\" alt=\"\" class=\"wp-image-271\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" data-id=\"272\" src=\"https:\/\/brightmist.co.uk\/ux-designer\/wp-content\/uploads\/sites\/5\/2026\/02\/Frame-2.png\" alt=\"\" class=\"wp-image-272\"\/><\/figure>\n<\/figure>\n\n\n<div class=\"wp-block-ub-divider ub_divider ub-divider-orientation-horizontal\" id=\"ub_divider_03fe927d-fbfe-4b1e-b66c-56cf8064a19a\"><div class=\"ub_divider_wrapper\" style=\"position: relative; margin-bottom: 2px; width: 100%; height: 2px; \" data-divider-alignment=\"center\"><div class=\"ub_divider_line\" style=\"border-top: 2px solid #ccc; margin-top: 2px; \"><\/div><\/div><\/div>\n\n\n<h2 class=\"wp-block-heading\">Development Setup<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Reusable Component Banner\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/25GkRsV1utA?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n<div class=\"wp-block-ub-divider ub_divider ub-divider-orientation-horizontal\" id=\"ub_divider_091cdaa3-7430-4430-b5c6-9d7c4e7fb895\"><div class=\"ub_divider_wrapper\" style=\"position: relative; margin-bottom: 2px; width: 100%; height: 2px; \" data-divider-alignment=\"center\"><div class=\"ub_divider_line\" style=\"border-top: 2px solid #ccc; margin-top: 2px; \"><\/div><\/div><\/div>\n\n\n<h2 class=\"wp-block-heading\">Some Examples <\/h2>\n\n\n\n<p>Below is a small example of some banners I designed using the templates I created <\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-1 is-cropped wp-block-gallery-2 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" data-id=\"177\" src=\"https:\/\/brightmist.co.uk\/ux-designer\/wp-content\/uploads\/sites\/5\/2026\/02\/03_Partnership-Banners-1-1024x659.jpg\" alt=\"\" class=\"wp-image-177\"\/><\/figure>\n<\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Established a reusable banner component library with multiple layout options for high-traffic zones across 20+ N Brown Group websites. This improved the online team&#8217;s workflow efficiency and accelerated the delivery of promotional assets. I used the bem methodology to ensure there were 0 code conflicts with other brands. CLIENT&nbsp;|&nbsp;NBrown Group Building the Components in Figma [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":165,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-14","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-work","has-thumbnail"],"featured_image_src":"https:\/\/brightmist.co.uk\/developer\/wp-content\/uploads\/sites\/7\/2026\/02\/Banner-Master-Templates.png","author_info":{"display_name":"Judith Knight","author_link":"https:\/\/brightmist.co.uk\/developer\/author\/vintageworld\/"},"_links":{"self":[{"href":"https:\/\/brightmist.co.uk\/developer\/wp-json\/wp\/v2\/posts\/14","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/brightmist.co.uk\/developer\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/brightmist.co.uk\/developer\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/brightmist.co.uk\/developer\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/brightmist.co.uk\/developer\/wp-json\/wp\/v2\/comments?post=14"}],"version-history":[{"count":11,"href":"https:\/\/brightmist.co.uk\/developer\/wp-json\/wp\/v2\/posts\/14\/revisions"}],"predecessor-version":[{"id":197,"href":"https:\/\/brightmist.co.uk\/developer\/wp-json\/wp\/v2\/posts\/14\/revisions\/197"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/brightmist.co.uk\/developer\/wp-json\/wp\/v2\/media\/165"}],"wp:attachment":[{"href":"https:\/\/brightmist.co.uk\/developer\/wp-json\/wp\/v2\/media?parent=14"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/brightmist.co.uk\/developer\/wp-json\/wp\/v2\/categories?post=14"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/brightmist.co.uk\/developer\/wp-json\/wp\/v2\/tags?post=14"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}