Details

2017-2020
Art Direction
Brand Standards
Website Design
Iconography
Digital Design

Designers:
Sam Nielsen, Justin Horstmann

SketchUp

Progressing the brand standards for the most popular 3D modeling software in the world.

Project Brief

SketchUp’s requirements are diverse and demanding. As the art director for this small team, we are tasked with tight deadlines and large volumes of work. Design needs range from redesigning the website to building on and improving brand standards in both digital and print formats. This work requires leveraging the in-house team and directing external resources. 

Web Design
Web Design
Line Break-Invert

SketchUp gets over 90 million unique views to their website annually. For 2019, we redesigned the website under an exceptionally tight timeline. The user experience was rethought, and it was given visual overhaul. To make the home page more dynamic, we integrated native browser-based animation using Air BnB’s Lottie, which allowed us to bring complex animations directly out of After Effects into the browser. 

Style Guide
Style Guide
Line Break-Invert

A thorough style guide helps build brand consistency and provides a strong backbone from which designers and other team members can build from, and reference to represent the brand correctly.

SU-Style Guide-v1,0 1-Opt
SU-Style Guide-v1,0 5-Opt
SU-Style Guide-v1,0 26-Opt
SU-Style Guide-v1,0 29-Opt
SU-Style Guide-v1,0 38-Opt
SU-Style Guide-v1,0 43-Opt
SU-Style Guide-v1,0 50-Opt
SU-Style Guide-v1,0 55-Opt
Marketing Imagery
Marketing Imagery
Line Break-Invert

A new website required a large library of new imagery. Working directly with The Boundary, one of the world’s leading architectural visualization firms based in the UK, I art directed the project from the beginning. By managing the project from the inception, and working directly with one of The Boundary’s founders, Henry Goss, we were able to achieve a modern design that was structurally feasible, with a high degree of photo realism that integrated SketchUp’s unique look and feel, all while building a digital architecture that was inhabitable in both Augmented Reality and Virtual Reality systems.

SU-Boundary-Ext-01-16×9@2400-Opt
SU-Boundary-Ext-12-1×1@2400-Opt
SU-Boundary-Ext-16-1×1@2400-Opt
SU-Boundary-Ext-07-16×9@2400-Opt
Digital Assets
Digital Assests
Line Break-Invert

SketchUp’s marketing team has a variety of needs to support their digital touch points. Responding to their requests, our design team provides hundreds of images a year.

SU-Digital Ads-v4@2x
Icons / Marketing
Icons / Marketing
Line Break-Invert

To support the needs of the SketchUp website, a full custom icon set was designed. The set totals over 90 unique icons, each with 4 different versions to work at different scales and breakpoints. 

ico-su-web-48px
ico-su-analysis-48px
ico-ext-wh-48px
ico-interoperability-48px
ico-xr-viewer-48px
ico-su-mobile-viewer-48px
ico-customer support-48px
ico-detailed-drawing-sets-48px
ico-full-feature-desktop-modeler-48px
ico-geopositioning-48px
ico-training-48px
ico-model-anywhere-48px
Product Imagery
Product Imagery
Line Break-Invert

When users open SketchUp, the first imagery they see is the product imagery—something designed using the software. Working with in-house and out-of-house designers, I art directed the team on the creation of the product imagery for 2019 and 2020.

2019 Release

Intern: Kelly Phillips

SU-2019-Hero Image-Opt
SU-2019-Offline Image-Opt
SU-2019-Error Image-Opt

2020 Release

Designers: Eric Sargeant, Justin Horstmann

SU-2020-Hero Image-Opt
SU-2020-Offline Image-Opt
SU-2020-Error Image-Opt

© 2020 Mike Heighway

© 2020 Mike Heighway