Allconnect Illos

Done for

Allconnect

Art Director

Dustin Putnam

Categories

Illustration, Iconography, Web, Brand Strategy, Design System

Allconnect’s rebrand is meant to redefine the value of the brand & create more trust with consumers. Their ultimate goal is to be the go-to marketplace for home service comparisons. The company wants to be seen as an authoritative figure that has all of the information you need to switch service providers, but is also friendly & approachable. The audience is composed of average tech users--60% of users are on mobile & can be categorized as research oriented. As part of the brand overhaul, I created all of the illustrations & iconography for the site, along with responsive brand guidelines.

Jump to a section:

Large Illos↝Small Illos↝Iconography↝

Large Illos

Illustrations

For TRANSACTIONAL pages

To create a more relatable experience for users, the illustrations are grounded in a pseudo-reality through a faux 3D effect, semi-realistic environments, and relevant smart devices. Each of these are responsively created, meaning that they are laid out differently for desktop, tablet and mobile, to enable faster load times.

Faux 3D effect

Every illustration, with the exception of a few product illustrations, is treated with a faux 3D effect. This is defined by having the appearance of a 3D perspective, but every element is placed on a horizontal line. This makes it easy to create an illustration that feels like it has depth, without getting into the math of perspective, or worse, eyeballing the perspective. Less experienced illustrators can take the bones of assets already created and feel confident in creating new scenes with minimal effort.

Brand Guidelines (PDF)↝

Responsive Guidelines

Desktop

Desktop illustrations are normally wider than other breakpoints, but depending on the design of the page, it could make sense to be proportion it differently.

Tablet

When sizing an illustration down to tablet, reposition or remove elements while still keeping enough elements to convey the overall idea. Usually, the people do not scale down.

Mobile

When sizing down to mobile, increase the height instead of the width. Usually, the entire image scales down from the tablet version and becomes slightly taller.

Responsive Landscapes

Desktop

Desktop landscapes usually span the width of the container.

Tablet

Tablet landscapes usually do not scale down. Instead, remove buildings or elements.

Mobile

Mobile landscapes scale down and remove buildings or elements.

AUTHOR Illustrations

For Blog pages

These are illustrations of the editorial writers for Allconnect. Each illustration adds in personal characteristics, an internet device & the Allconnect logo.