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.
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.
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.
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.
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.
Desktop landscapes usually span the width of the container.
Tablet landscapes usually do not scale down. Instead, remove buildings or elements.
Mobile landscapes scale down and remove buildings or elements.
Filled icons are to be used for 18px or smaller iconography and for non-branded material (e.g. carts, provider pages).
Outlined icons are to be used in cases where the icon should be secondary. It should be used at 18px or smaller.
Duo-tone icons are to be used on branded materials and be at least 18px or larger.