Case Study

Abstract
Brand Identity

5

Brand Identity, Web Design, Illustration, Design Systems, Technology
A refreshed brand identity for Version-Control design tool, Abstract.
A refreshed brand identity for Version-Control design tool, Abstract.
A refreshed brand identity for Version-Control design tool, Abstract.
A refreshed brand identity for Version-Control design tool, Abstract.
A refreshed brand identity for Version-Control design tool, Abstract.
A refreshed brand identity for Version-Control design tool, Abstract.
A refreshed brand identity for Version-Control design tool, Abstract.
A refreshed brand identity for Version-Control design tool, Abstract.
A refreshed brand identity for Version-Control design tool, Abstract.
A refreshed brand identity for Version-Control design tool, Abstract.
A refreshed brand identity for Version-Control design tool, Abstract.
A refreshed brand identity for Version-Control design tool, Abstract.
A refreshed brand identity for Version-Control design tool, Abstract.
A refreshed brand identity for Version-Control design tool, Abstract.
A refreshed brand identity for Version-Control design tool, Abstract.
A refreshed brand identity for Version-Control design tool, Abstract.
A refreshed brand identity for Version-Control design tool, Abstract.
A refreshed brand identity for Version-Control design tool, Abstract.
A refreshed brand identity for Version-Control design tool, Abstract.
A refreshed brand identity for Version-Control design tool, Abstract.

a5

Designer Fund

Brand Refresh and Web, 2019

a4

Abstract

Brand Refresh and Web, 2018

a3

Zendesk

Brandland, 2019

a2

Zendesk

Industries, 2019

a1

The Verge

CES Identity, 2018

b5

Backdrop

Poster, 2019

b4

Grove Financial

Website Design, 2019

b3

NPR

Apple Podcasts, Collage, 2019

b2

Airbnb

Luxe Brand Identity, 2019

b1

Webflow

Graphic Design Archive, 2019

C1

Personal

Illustrations

A refreshed brand identity for leading design tool, Abstract.
A refreshed brand identity for leading design tool, Abstract.
A refreshed brand identity for leading design tool, Abstract.
A refreshed brand identity for leading design tool, Abstract.
A refreshed brand identity for leading design tool, Abstract.
A refreshed brand identity for leading design tool, Abstract.
A refreshed brand identity for leading design tool, Abstract.

A1

A refreshed brand identity and web presence for modern design workflow and collaboration tool, Abstract.

2018

Abstract is a modern design workflow tool that helps designers version, collaborate, and manage their files. We were challenged with the brief of creating and designing a brand identity for designers like ourselves. In partnership with Devin Jacoviello and the Abstract in-house design team, we reimagined a new visual identity and designed a website that matched their ambitious mission.

Contents

Credits

Devin Jacoviello, Design partner
Heather Phillips, Design director
Abstract design team
Josh Brewer, CEO

i1
i2

i. Identity

5

i1

We started with a simple insight—the design process can be frustrating and messy, but people shouldn't lose confidence in their work. That mess can be surprisingly insightful, productive, creative, and full of energy. Ideas can come from every direction; they can multiply, diverge, and converge.

i1

IDENTITY

i1

Symbols were created to be the main graphical hooks that the brand latched onto. These symbols represent the qualities of the product—collaboration and a central, reliable place to work from.

i2

The color system relies on dark colors at first glance, but utilizes warm and bright colors in graphic and illustrative treatments. The primary colors use a mix of functional dark and light swatches for type and backgrounds with an extended color palette featuring distinct saturated colors and shades for variety.

Abstract brand guide.

i2a

Abstract brand guide

Abstract brand guide, featuring extended color palettes and main color palettes.

i2b

(Top) Extended color palette, used primarily for illustrations;
(Bottom) Main color palette, used for backgrounds, text, and web UI; page from Abstract brand guide

Business card design.

i2c

Business card design

ii. Typography

3

i1

Thinking about our unique vantage point of creating an identity for a company that serves a creative industry, we wanted to pay homage to the graphic design cadences of the past, while also setting up the brand for success, typographically.

ii1

Devin and I worked with the Abstract team to create a distinct type system using two typeface families for the Abstract brand—Vesterbro, a punchy yet dynamic and legible serif, and GT America Mono, a workhorse typeface that handles technical matters and numbers with style and ease.

III. Illustration

7

i1

We developed a visual system that had a distinct gritty and textural style to match the voice and tone—both visually and verbally—of where the Abstract brand was going.

iii1

With this system, we could pull back or forward the levers when needed, depending on the context. An illustration for a blog post needed to strike a different chord than a feature homepage illustration.

Simultaneous files illustration.

iii1a

Simultaneous files

Version control illustration.

iii1b

Version control

Community illustration.

iii1c

Community

Product release illustration.

iii1c

Product release

Product release illustration.

iii1c

Product release

ii2

We created secondary brand elements that all meant something, whether it was tying back to the product, or being a visual metaphor for collaboration.

Secondary brand elements.

i2a

Secondary brand elements

Building blocks elements.

i2b

Building blocks to be used to add subtle brand moments

IV. Website

5

i1

With the brand identity and visual language in place, we put it all together with a new website that utilizes a robust type system, web style guide, components, and feature illustrations.

Website design snippet.

iv1a

Website design

Website design.

iv1b

Customer story page

Customer story page.

iv1c

Customer story page

Type scale.

iv1d

Typographic scale as part of the web design system

Form fields.

iv1e

Form and form-fields example

We chose GT America as the secondary font for the in-house brand team at Abstract to have flexibility and fun pulling out the different weights of the super dynamic typeface.

iv1

Outfitting the site with a strong brand presence was our primary goal. Creating a nuanced typographic scale with several header, paragraph, and utility styles helped to tell stories in different expressions across all screens.

V. Explorations

2

i1

IDENTITY

v1

Concept based on illustrating common design tropes (golden ratio pictured)

v2

Play on perspective

A refreshed brand identity for Version-Control design tool, Abstract.
A refreshed brand identity for Version-Control design tool, Abstract.
A refreshed brand identity for Version-Control design tool, Abstract.
A refreshed brand identity for Version-Control design tool, Abstract.
A refreshed brand identity for Version-Control design tool, Abstract.
A refreshed brand identity for Version-Control design tool, Abstract.
A refreshed brand identity for Version-Control design tool, Abstract.
A refreshed brand identity for Version-Control design tool, Abstract.
A refreshed brand identity for Version-Control design tool, Abstract.
A refreshed brand identity for Version-Control design tool, Abstract.
A refreshed brand identity for Version-Control design tool, Abstract.
A refreshed brand identity for Version-Control design tool, Abstract.
A refreshed brand identity for Version-Control design tool, Abstract.
A refreshed brand identity for Version-Control design tool, Abstract.
A refreshed brand identity for Version-Control design tool, Abstract.
A refreshed brand identity for Version-Control design tool, Abstract.
A refreshed brand identity for Version-Control design tool, Abstract.
A refreshed brand identity for Version-Control design tool, Abstract.
A refreshed brand identity for Version-Control design tool, Abstract.
A refreshed brand identity for Version-Control design tool, Abstract.
Index

The Verge

A1

Zendesk Industries

A2

Zendesk Brandland

A3

Abstract

A4

Designer Fund

A5

WEbflow

B1

Airbnb

B2

NPR

B3

Grove Financial

B4

Backdrop

B5

Illustration

C1

Adam Ho is a freelance graphic & interactive designer based in Brooklyn, New York.
Social
Adam Ho is a freelance graphic & interactive designer based in Brooklyn, New York.
Contact