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:

• How the company logo is to be used. How is it positioned on a page? What colors can it be? What text can be around it?
• What is the brand voice? How is the brand portrayed?
• What are the brand colors? This is typically limited to a key three to six colors, like red, blue, or green and some accent colors. Blue Acorn iCi’s standard blue color is a good example of this!
• What are the key fonts, and how are they to be used?

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:

• Components move and change. Buttons get clicked, menus and other interactive components have many different states of use.
• Different types of web elements need to be styled differently to best accommodate and communicate their functions; along with established web best practices and user expected behaviors.
• Many different sizes – and we don’t mean just mobile! An analytics report will show the different monitor sizes of your users, ranging from a large screen on desktop, to a tablet (iPad, Kindle, Nook, you name it), to mobile (iPhone, Android, Samsung, Google, again, you name it). Every single one has a different screen size. The logo that should be placed “20pts to the left” all of a sudden can’t be placed so easily!
• Different machines and browsers render things in different ways. There are a lot of different web browsers – Internet Explorer (versions 8, 9, 10, 11), Edge, Chrome, Firefox, Safari, etc.
• Did you know that each browser has its own opinion of how big a pixel is?
• Fonts! Yes, we can specify certain fonts and we can even use certain trickery to load particular fonts into a webpage. But then we need fallbacks, in case the user doesn’t have those fonts installed on their local machine!

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.

Subscribe to Our Newsletter

Get the latest insights from Blue Acorn iCi