Style Guides: Paper vs Pixels

Style Guides: Paper vs Pixels

Style Guides for Different Mediums

Some customers already have an established print brand style guide, but we would still recommend they invest in a digital style guide as well. This can be pretty confusing – don’t they already have a style guide? Why can’t the developers use that?

Well, the answer is yes, the developers can use their print brand style guide, but they also need more.

The Web Has Different Needs Than Brand & Print Design

Some of the reasoning goes back to why we need to define who the target audience is. A brand-focused style guide is mainly created for brand partners and the internal team members in marketing areas. It shows them things like:

This is generally enough information to design things like marketing collateral, ads, technical documentation, and even more simple web pages like landing pages. This is because of a few key reasons – namely that ink doesn’t move!

Download Blue Acorn iCi’s Complete Customer Experience Report to learn how to create an unforgettable, personalized customer experience.

Digital Design is More Complex

Things that need to be taken into account when porting a brand to a digital user interface are some of the following:

Designing for AEM is Still More Complex

So we’ve adapted brand guidelines to a webpage! That’s wonderful. But then what happens when silly AEM authors come and plop in different components than we intended to be used there? Well… luckily for you, if you’re working with Blue Acorn iCi, we planned ahead. AEM is a powerful, flexible platform and we want you to be able to do just that! We don’t want your design to break when you do it, either. This is why we plan a design system.

A design system offers a library of visual style, components, and other concerns documented and released by an individual, team or community as code and design tools so that adopting products can be more efficient and cohesive.

Nathan Curtis of Medium.com

What does this mean for us and AEM? Basically, we don’t design one page at a time. We design components, and then make pages out of them using the principles of Atomic Design. What exactly is Atomic Design? Check out our blog post, 5 Major Elements of Atomic Design.

Advantages of Planning for Digital Design Systems

As the saying goes, slow is smooth and smooth is fast. Investing in a digital design system will pay back in spades for your organization. It allows designers and developers to share a common language, making prototyping and development faster and more efficient. Considerations like size, platform, and usage are automatically baked in. Digital design systems improve the customer experience by making it more consistent with a lot less work on QA.

A componentized design system also comes with baked in Authoring guidelines. ‘This is how this component is intended to work, and here’s how to use it on any page so that it looks good.’

So when you’re looking at a design project, don’t be surprised when you’re asked to consider investing in a design system!

Does your website need an updated, optimized design? Contact us today to talk to our team of experts.