{"id":85101,"date":"2020-09-18T01:54:48","date_gmt":"2020-09-18T08:54:48","guid":{"rendered":"https:\/\/oroinc.com\/b2b-ecommerce\/?p=85101"},"modified":"2020-10-15T08:51:02","modified_gmt":"2020-10-15T15:51:02","slug":"introducing-the-orocommerce-storefront-style-guide-for-b2b-ecommerce-brands","status":"publish","type":"post","link":"https:\/\/oroinc.com\/b2b-ecommerce\/blog\/introducing-the-orocommerce-storefront-style-guide-for-b2b-ecommerce-brands\/","title":{"rendered":"Introducing the eCommerce Style Guide for B2B Brands | OroCommerce"},"content":{"rendered":"

Today\u2019s customers expect their eCommerce experiences to be memorable. Brands invest into their image in order to leave strong impressions and win the hearts and minds of their audiences. By taking control of your brand experience, you not only stand apart from your competitors but get your workplace and customers rally behind your company.<\/span><\/p>\n

One way of doing this is by using a style guide<\/a> that standardizes your visual (logo, colors, elements) and written (typefaces) styles. Their consistency must also be maintained as your brand, products, and customers change over time. Your style guide doesn’t have to be complicated, but it has to be well organized and easy to follow. <\/span><\/p>\n

In this post, we\u2019ll talk about the OroCommerce Storefront Style Guide, its benefits, and who it can help.<\/span><\/p>\n

What Is a Style Guide?<\/h2>\n

A style guide<\/span> consists of templates and UI components. We’ve combined it into\u00a0a single file that can be opened in a Sketch application<\/a>. Its job is to help designers, marketers, and developers to standardize the design workflow. It\u2019s also essential for keeping consistency as it ensures all your design, text, and user interface elements follow the same strict pattern.<\/span><\/p>\n

Who Does Oro\u2019s Design Style Guide Help?<\/h2>\n

The <\/span>OroCommerce Storefront Style Guide<\/span><\/a> is designed to save you time and money. Rather than spend time searching for elements needed to design your projects, you can keep all elements in one place. It\u2019s also easy to focus on the most important tasks, modify designs, as well as collaborate with team members. Plus, it helps you communicate your design mission throughout the organization.<\/span><\/p>\n

Designers<\/h3>\n

Designers and illustrators are able to better convey brand and product values by mirroring existing styles. Content creators can maintain a typography in line with the brand\u2019s image, using the right typography and text elements for needed emphasis.<\/span><\/p>\n

Marketing teams<\/h3>\n

Marketers rely on a style guide for uniformity, helping them deliver the same high-quality message every time. Marketers can save time, stay focused, and enable a culture of constant improvement.<\/span><\/p>\n

Front-end developers<\/h3>\n

Front-end developers will appreciate the ease with which they can keep track of design issues and make changes while the design is still in progress. The right elements like buttons, arrows, and headers greatly speed up prototyping and reduce back-and-forth.\u00a0<\/span><\/p>\n

Everyone within and outside of the company can benefit from a style guide, too. Whether it\u2019s new employees, collaborators, distributors, or retailers, everyone needs to know how to represent your brand accurately.<\/span><\/p>\n

Why Did We Create the OroCommerce Style Guide?<\/h2>\n

Starting an existing style from scratch is difficult. Aside from reinventing the wheel in many aspects, a good style guide can introduce you to new effects and ways to create your own custom elements. OroCommerce\u2019s design style guide was created to help make life easier for designers, allowing them to work more efficiently. Our UI style guide was built with interactivity in mind and helps designers to build on top of existing elements and create more complicated themes.<\/span><\/p>\n

The Atomic Design Principle<\/h3>\n

\"atomic<\/p>\n

[Source<\/a>]<\/span><\/p>\n

Oro\u2019s UI kit uses Brad Frost\u2019s <\/span>Atomic Design methodology<\/span><\/a>, comprising five distinct \u201clevels\u201d, each building upon its predecessor. This methodology turns complex ideas into clear and easy to understand concepts, leading to increased user adoption by employees and customers. Most importantly, this method helps brands craft consistent page design and marketing messages.<\/span><\/p>\n