MOTOROLA SOLUTIONS

Modular webpage banners

The 2023 Motorola Solutions brand refresh included a major update to the corporate website, including newly-developed hero banners, content modules and interactive elements.

The global design team was responsible for the conceptual design and creation of dozens of mobile-responsive graphics to populate the new webpage modules before site launch. In order to maintain strong design consistency and empower quicker turnaround, I developed a system of linked, layered and clearly labelled Illustrator templates for the designers to use.

Conceptualize

Working with the web design team and communications leadership, who developed a new page hierarchy for the navigation and flow of the updated website content, I closely followed the new graphics specifications as well as guidance for overlaid text.

Each category of pages – corporate information, technology overviews, featured industries – needed its own distinct appearance, which still fit within the new brand strategy being launched.

Using new design elements, approved brand colors and updated photography, I completed the design and review process with the leadership team to ensure brand consistency and professional presentation across all pages.

AVAILABLE IN INTERVIEW

More details on each design

Create

Once the design concept for each graphic type was reviewed and approved, I was responsible for refining the designs into the correct pixel dimensions and into file formats that enabled consistent, repeatable designs – sometimes for more than 20 different versions.

Each graphic version was usually required in multiple sizes, for desktop, tablet and mobile views of the same webpage.

This required careful, strategic design and constant collaboration with the web design team and marketing experts to ensure the different graphics loaded properly in each page and that we were using the best photography and brand colours to speak to each category effectively.

AVAILABLE IN INTERVIEW

Considerations for each mobile size

Templatize

Webpage designs, like all digital platforms, continuously evolve and require updates – feature photography changes, new content is required, new technologies and initiatives are launched.

Based on this, I knew it was important not only to create all of the new graphics in a clean and organized way, but to formalize the design details into a set of templates to help speed up – and bring consistency to – future new graphics and updates.

I used Illustrator artboards, labelled layers, Creative Cloud libraries, file naming guidelines and pre-set clipping masks to set up each file in such a way that any designer on our team could pick it up and adapt it with new photos and colors without reinventing the wheel.

AVAILABLE IN INTERVIEW

Demo of sample template

Flexible approach

The steps and specifications used to create this set of web banner templates can easily be adjusted for any large set of digital graphics which need to showcase a consistent branded design across different dimensions.

Social media graphics, media kit assets, digital signage – any of these materials can be templated and distributed using this same expertise.

AVAILABLE IN INTERVIEW

More about templates I’ve created

Previous
Previous

Design Team Workflow

Next
Next

Life-Sized Device Cutouts