Today’s 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.
One way of doing this is by using a style guide 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.
In this post, we’ll talk about the OroCommerce Storefront Style Guide, its benefits, and who it can help.
What Is a Style Guide?
A style guide consists of templates and UI components. We’ve combined it into a single file that can be opened in a Sketch application. Its job is to help designers, marketers, and developers to standardize the design workflow. It’s also essential for keeping consistency as it ensures all your design, text, and user interface elements follow the same strict pattern.
Who Does Oro’s Design Style Guide Help?
The OroCommerce Storefront Style Guide 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’s 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.
Designers
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’s image, using the right typography and text elements for needed emphasis.
Marketing teams
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.
Front-end developers
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.
Everyone within and outside of the company can benefit from a style guide, too. Whether it’s new employees, collaborators, distributors, or retailers, everyone needs to know how to represent your brand accurately.
Why Did We Create the OroCommerce Style Guide?
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’s 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.
The Atomic Design Principle
[Source]
Oro’s UI kit uses Brad Frost’s Atomic Design methodology, comprising five distinct “levels”, 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.
- Atoms Just like the building blocks to matter, these are the smallest elements of your user interface. An example would be a color palette, a field, an input box, or a search button.
- Molecules Like different elements in the periodic table, molecules perform a particular function. While a text field isn’t too useful in and of itself, a field with a button has a clear purpose.
- Organisms Molecules are joined together to create larger page elements called organisms. An example is a product thumbnail with the product name and price, site header or footer.
- Templates Organisms linked together to create whole layouts of pages are called style guide templates. They establish a design structure, the look and feel of individual pages, and ultimately the site.
- Pages The page is the final product, complete with all content, including user-generated content. This is what the end-user or customer interacts with.
Why Use OroCommerce’s Storefront Style Guide?
Storefront design, just like any design, is a subjective art. Oro’s eCommerce style guide helps brands align their business mission to every aspect of their brand identity. It helps business leaders, marketers, designers, illustrators, content writers, and developers perform the following:
Keep a uniform visual style
Good design keeps your brand memorable and helps you grow sales. Your design should help customers reach their objectives quickly and get them to come back to your store.
Keep a content structure
Every brand’s approach to content, such as typography, placement, and content style will depend on their target audience and the emotions they want to get across.
Focus on user experiences
Keep up a design language that works for business customers. B2B eCommerce storefronts are typically used by merchants with numerous job titles, backgrounds, and access permissions.
Improve productivity
A style guide is a single source of information for the entire organization. It reduces conflicts, errors, omissions, and ensures that everyone is on the same page.
Maintain control
When introducing new products or services, brands can veer off track. UI guidelines help ensure your business interests are aligned with your audience.
What Can You Do With OroCommerce’s Style Guide?
OroCommece’s design style guide is designed for use with the Sketch App. It includes everything you need, including fonts, colors, and shapes that can be changed instantly. After downloading the kit, you’ll be able to start a new design by working off the elements included.
It’s a great starting point for any design project, and with your design guidelines and branding assets at hand, you can quickly and easily customize the design of your page to fit your company’s look and feel.
Since all the elements and naming conventions in the style guide appear the same way as they’re used in OroCommerce, it’s easy for designers, developers, and other stakeholders to apply them to their design projects.
Here are some style guide examples of elements that you can modify:
- Create new pages from scratch using existing elements and page blocks.
- Modify or add additional fonts for titles, headings, and paragraph text.
- Edit button properties such as colors and size for different button states.
Lastly, it’s also useful for creating your own styles and maintaining even greater control over your designs. If your vision of your website or shopping experience is unique and you want that to reflect in your UI, you might want to hire a designer to assist you with a custom style guide.
Keep Your Design Language Consistent With OroCommerce
No matter how simple or complex your design guidelines are, it’s no use to anyone if they’re not being used. With Oro’s design guide, we give you the tools to create and maintain your designs over time. We help you ensure your team produces amazing work, free of errors, inconsistencies, and time-consuming revisions.
Want to get started? Explore Oro’s Storefront Style Guide in the documentation.
