For newly developed or redeveloped manufacturing brands, digital considerations should be baked into visual design elements. However, legacy manufacturing brands may encounter issues that prevent them from being seamlessly integrated with the current standards of digital platforms. For legacy manufacturing brands where visual elements originated in print, marketers and related stakeholders need to become aware of the new challenges of adapting their visual branding for a new platform. Online, design plays a different, and more functional, role. The shapes you choose in your brand logo to your typography decisions are integral to your website’s performance, which serves as the center of your marketing and sales stack.
This guide outlines key areas of consideration for creating or refreshing a brand’s visual language or web presence, paying particular attention to issues that might arise for manufacturing companies transitioning their visual brand from print to digital. We’ll look at website accessibility considerations, best practices for digital logo use, and how to translate your flagship colors and fonts to your website. Additionally, we’ll explore key differences in guiding users through a website versus a print document, and how to use animation and interactivity to bolster conversion points throughout your website.
If you have any questions while reading this guide, you can always contact us directly at Kula Partners. Whether you’re redesigning your website from scratch or want to optimize your current website’s performance, we’d be happy to help you reimagine your manufacturing brand online.
Design for All User Experiences Using Website Accessibility Considerations
One way to ensure that your brand is for everyone is to create an inclusive experience. This means not just catering to users scrolling on mobile devices, but also designing for individuals using screen readers, hands-free mouse tracking, and voice controls.
Increasingly, organizations are required to ensure their content is accessible to a range of users—e.g. individuals with low vision, difficulty hearing, limited movement—across a range of digital devices. For any manufacturers in the US, there are potential legal ramifications for not meeting Website Content Accessibility Guidelines (WCAG). These are dictated by WCAG 2.1 and private businesses that fail to comply with WCAG have been met with court cases.
It’s imperative that WCAG considerations form the backbone of your website, from its initial architecture to the content you produce on a regular basis. Additionally, ensure that your team is educated in WCAG compliance, from performing quality assurance tests according to WCAG standards to basic everyday practices such as adding alt descriptions to website images and on the social platforms where you share your content.
Learn More About Website Accessibility Considerations:
Why Marketers Should Build Accessible Websites
Designing Manufacturing Websites for Everyone & Avoiding Accessibility Lawsuits
The Manufacturer Website Accessibility Checklist
Best Practices for Using Your Digital Logo
The age-old trope of “bigger is better” does not apply in website design since your website logo does not act as an advertisement on a billboard or the back page of a magazine. Online, the user is already well aware of whose site they are on. Instead, the logo becomes a navigation tool and users are trained that clicking on the logo will bring them back to the homepage. This “north star” dynamic becomes a consideration for the logo’s sizing and positioning as it is directly related to the navigation of the site and should be used in a harmonious way at the top of every page.
Digital logos have a few key requirements in order to appear seamlessly across multiple devices and in multiple spaces on your website as well as other branded digital assets.
- The logo should be legible and unfettered as it accompanies the user throughout their experience on manufacturers’ websites.
- Even as screen resolutions constantly advance, logos should be legible at all sizes—even when presented at 150 pixels in width.
- When designing logos, it is now important to make sure they follow a square or horizontal aspect ratio. That’s because vertical logos require greater height when displayed, which eats into display areas for content and makes the viewing experience for the user more awkward and compressed.
Good design is about balance, and the logo should operate as a balanced anchor on the site, not overpowering the more important information on the page the user is seeking. The only time you should consider using your logo in a more intrusive way in order to make a statement is above the fold on the homepage.
How to Keep Brand Logo Colors Consistent and Accessible
Color is a topic that is closely linked to the logo and accessibility. Color also causes the most issues with older or legacy visual branding. Often, we run into issues with brand color schemes that fail contrast rules. It may be necessary to tweak brand colors slightly to allow them to pass contrast accessibility levels. Inputting your brand colors into a tool such as a contrast grid will allow you to quickly see the combinations that pass WCAG minimum contrast and the font size requirements for each.
If you encounter issues and it’s imperative that the colors remain the same as the print logo, then you could tweak them in a roundabout way. Use the brand colors as accents or as other non-vital elements. When it comes to very important things such as call-to-action buttons, select a complementary or similar version of the color which does pass contrast. That will allow your visual brand to be present and still meet accessibility standards.
Typography: Font Choices, Style Rules
Typography provides just as much personality to a visual brand as any other element. It also requires the same level of consistency and consideration given to the logo and any imagery. Good, unique typography can really signify a brand, therefore it’s important to make sure the online and offline presentation remains consistent.
The first element that can cause issues online is the choice of font. Certain fonts aren’t available on all systems or backups have to be used. Google offers a vast selection of free fonts that can be utilized both in print and on the web. Consider using these fonts as your brand ones, or be sure to check that your chosen brand font can be used on your website.
Typography isn’t just about the font that is used. How the type is styled, including the alignment, sizing, and interactions with other elements needs to be considered to work both online as well as in print. The size of the browser window the user is seeing the site through is a constant variable. Ranging from large desktop screens all the way down to mobile devices, type needs to be styled in a way that is ordered and legible to all users at all screen sizes. Right justification can cause issues as the site size breaks down. There is absolutely no way to control the terrible paragraph breaks that occur as the column widths adjust.
Placing type over images must always be considered. Legibility is key, and this can also lead to accessibility issues. Unlike print design, where the designer has full control of the type positioning at all times, copy and imagery is constantly in flux at different screen sizes. Type can wander around to cover up someone’s face or into an area where contrast drops below permitted contrast limits.
Paragraph spacing is another aspect that should be well-considered by designers for online applications. As the content owner of the website has the ability to create pages with unlimited content combinations it is important that these combinations are planned out. Spacing before and after headings, subheadings, and so on, should be defined to ensure the type has the correct hierarchy and the user can easily scan and extract the different sections of information throughout. Monotone spacing can quickly create walls of copy, deterring users from reading.
Page Layout: Creating the User Experience
In print, the reader’s eyes can roam the page and absorb the information, all at their own pace. Interacting with website content is different. Users see snippets of the overall page, slowly working their way down as they scroll, accessing different information based on the buttons or other signposts they chose. It’s the designer’s responsibility to make sure they extract the information in a logical order and create relevant and well-placed design elements that will cue users towards particular actions, such as clicking on a button.
How content flows on the page is vital to user experience. Don’t jump around or distract users with links or offers at the wrong moment when you want them to focus on a certain section of important copy, but do finish a page strong with a clear call-to-action to keep them moving forward in their buying journey or to other information.
Learn More About Redesigning Manufacturing Websites:
Lessons from a Successful B2B Manufacturing Website Redesign featuring Christina Wegner, Vice President of Marketing at Vollrath Company
21 Tips for Creating a High-Performing International Manufacturing Website
10 Components of Effective Website Design
Interactivity and Animation
The big advantage that digital applications have over more traditional avenues is the level of interactivity involved. Well-considered interactive effects can elevate a site in its level of presentation, demonstrate a manufacturer’s brand personality, and create a memorable user experience.
Consider using animation effects throughout the site to bring attention to key content areas. They could be simple animations such as parallax effects, all the way up to elements that slide in or open like an accordion. Saving these effects for call-to-action sections is an effective technique to draw attention to key conversion points on your website.
Consider how interactive items can be made dynamic. All buttons should have a hover state, but how the button changes from one state to another can be accomplished in a variety of interesting ways.
Video and other multimedia content that can provide education around products or processes have bolstered manufacturing brands who typically need to relay a high level of technical content. You might even want to consider incorporating some of the latest technology such as augmented reality, or simpler 3D models that the user can interact with. 3D models also add the possibility of exploded versions so the user can see how they are constructed.
While interactivity and animation get many individuals excited, they do not immediately translate into a good user experience. Indeed, any unnecessary dynamic layered on top of your website gets in the way of the action you want a user to take: explore a product, click on a button, etc.
The content of the site is, beyond everything else, the most important part. Don’t add so much that it distracts or overwhelms the users. Keep the website experience clean and elegant. Any interactive element or animation should be relevant to the information or section it’s being applied to.
Transitioning Your Manufacturing Brand to the Web
In order to provide a digital experience that users have come to expect from the manufacturing industry as a whole, it is important to apply the basic principles outlined in this guide when creating or refreshing your brand’s visual language or web presence. Following accessibility considerations, ensuring that your logo and fonts are clear and legible, building intuitive navigation, and bolstering calls-to-action with interactive elements will allow you to create an engaging user experience around your manufacturing brand.