{"id":13,"date":"2026-03-08T18:00:36","date_gmt":"2026-03-08T18:00:36","guid":{"rendered":"https:\/\/brightmist.co.uk\/ux\/?p=13"},"modified":"2026-04-01T07:40:23","modified_gmt":"2026-04-01T07:40:23","slug":"banner-component-xd-library","status":"publish","type":"post","link":"https:\/\/brightmist.co.uk\/ux-designer\/2026\/03\/08\/banner-component-xd-library\/","title":{"rendered":"\u200bBanner 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>Developed a universal library of banner components in Figma to be used as a &#8220;blank slate&#8221; 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.<\/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 rel=\"noreferrer noopener\" href=\"https:\/\/www.nbrown.co.uk\/\" target=\"_blank\">NBrown PLC<\/a><\/p>\n<\/div>\n<\/div>\n\n\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\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\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\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 loading=\"lazy\" decoding=\"async\" width=\"1300\" height=\"904\" 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\" srcset=\"https:\/\/brightmist.co.uk\/ux-designer\/wp-content\/uploads\/sites\/5\/2026\/02\/Frame-1.png 1300w, https:\/\/brightmist.co.uk\/ux-designer\/wp-content\/uploads\/sites\/5\/2026\/02\/Frame-1-300x209.png 300w, https:\/\/brightmist.co.uk\/ux-designer\/wp-content\/uploads\/sites\/5\/2026\/02\/Frame-1-1024x712.png 1024w, https:\/\/brightmist.co.uk\/ux-designer\/wp-content\/uploads\/sites\/5\/2026\/02\/Frame-1-768x534.png 768w, https:\/\/brightmist.co.uk\/ux-designer\/wp-content\/uploads\/sites\/5\/2026\/02\/Frame-1-400x278.png 400w, https:\/\/brightmist.co.uk\/ux-designer\/wp-content\/uploads\/sites\/5\/2026\/02\/Frame-1-800x556.png 800w\" sizes=\"auto, (max-width: 1300px) 100vw, 1300px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1300\" height=\"904\" 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\" srcset=\"https:\/\/brightmist.co.uk\/ux-designer\/wp-content\/uploads\/sites\/5\/2026\/02\/Frame-2.png 1300w, https:\/\/brightmist.co.uk\/ux-designer\/wp-content\/uploads\/sites\/5\/2026\/02\/Frame-2-300x209.png 300w, https:\/\/brightmist.co.uk\/ux-designer\/wp-content\/uploads\/sites\/5\/2026\/02\/Frame-2-1024x712.png 1024w, https:\/\/brightmist.co.uk\/ux-designer\/wp-content\/uploads\/sites\/5\/2026\/02\/Frame-2-768x534.png 768w, https:\/\/brightmist.co.uk\/ux-designer\/wp-content\/uploads\/sites\/5\/2026\/02\/Frame-2-400x278.png 400w, https:\/\/brightmist.co.uk\/ux-designer\/wp-content\/uploads\/sites\/5\/2026\/02\/Frame-2-800x556.png 800w\" sizes=\"auto, (max-width: 1300px) 100vw, 1300px\" \/><\/figure>\n<\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\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 loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"659\" 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\" srcset=\"https:\/\/brightmist.co.uk\/ux-designer\/wp-content\/uploads\/sites\/5\/2026\/02\/03_Partnership-Banners-1-1024x659.jpg 1024w, https:\/\/brightmist.co.uk\/ux-designer\/wp-content\/uploads\/sites\/5\/2026\/02\/03_Partnership-Banners-1-300x193.jpg 300w, https:\/\/brightmist.co.uk\/ux-designer\/wp-content\/uploads\/sites\/5\/2026\/02\/03_Partnership-Banners-1-768x494.jpg 768w, https:\/\/brightmist.co.uk\/ux-designer\/wp-content\/uploads\/sites\/5\/2026\/02\/03_Partnership-Banners-1-400x257.jpg 400w, https:\/\/brightmist.co.uk\/ux-designer\/wp-content\/uploads\/sites\/5\/2026\/02\/03_Partnership-Banners-1-800x515.jpg 800w, https:\/\/brightmist.co.uk\/ux-designer\/wp-content\/uploads\/sites\/5\/2026\/02\/03_Partnership-Banners-1.jpg 1500w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Developed a universal library of banner components in Figma to be used as a &#8220;blank slate&#8221; 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&nbsp;|&nbsp;NBrown PLC Building the Components in Figma I also developed various [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":138,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-13","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ux","has-thumbnail"],"featured_image_src":"https:\/\/brightmist.co.uk\/ux-designer\/wp-content\/uploads\/sites\/5\/2026\/02\/Banner-Master-Templates.png","author_info":{"display_name":"Judith Knight","author_link":"https:\/\/brightmist.co.uk\/ux-designer\/author\/vintageworld\/"},"_links":{"self":[{"href":"https:\/\/brightmist.co.uk\/ux-designer\/wp-json\/wp\/v2\/posts\/13","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/brightmist.co.uk\/ux-designer\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/brightmist.co.uk\/ux-designer\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/brightmist.co.uk\/ux-designer\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/brightmist.co.uk\/ux-designer\/wp-json\/wp\/v2\/comments?post=13"}],"version-history":[{"count":37,"href":"https:\/\/brightmist.co.uk\/ux-designer\/wp-json\/wp\/v2\/posts\/13\/revisions"}],"predecessor-version":[{"id":295,"href":"https:\/\/brightmist.co.uk\/ux-designer\/wp-json\/wp\/v2\/posts\/13\/revisions\/295"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/brightmist.co.uk\/ux-designer\/wp-json\/wp\/v2\/media\/138"}],"wp:attachment":[{"href":"https:\/\/brightmist.co.uk\/ux-designer\/wp-json\/wp\/v2\/media?parent=13"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/brightmist.co.uk\/ux-designer\/wp-json\/wp\/v2\/categories?post=13"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/brightmist.co.uk\/ux-designer\/wp-json\/wp\/v2\/tags?post=13"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}