Project Criteria
In one of our most comprehensive projects to date, myself and colleague Chelsea Cohen were tasked with creating the full identity of Sketchback, the UX research and UI design of the web app, and numerous print and digital assets along the way. If it exists for Sketchback, we designed it.
Sketchback is a web app for designers to manage their ongoing client projects and communicate with their team or clients. It combines file storage, team-wide messaging, and project timeline management all in one software.
sadasdadas
First Logo Iterations
I designed these preliminary logos. Hover over each image to learn a little more about the concepts behind each one. Ultimately, these concepts were too abstract to directly communicate the purpose of Sketchback.
The elements of these logos that we wanted to carry forward with were the themes of collaboration, community, and a visible ‘S’.
sxatext
Calling attention to the drawing style and editing capabilities offered by Sketchback.
Two collaborators joining in the shape of a chunky 'S'.
Two layered pages, a subtle nod to the series of revisions that each project undergoes.
An abstract 'SB' lettermark.
Another abstract 'SB' lettermark.
Type Iterations
I undertook a few type studies, attempting to nail down the friendly and professional look that we were going for.
Click on each image to enlarge.
text
Final Logo + Logotype
In the end, we went with Source Sans for our headlines, and Roboto for our small text and body copy. It may seem unorthodox to pair such similar sans serifs together, but together, these two typefaces combined to fit every need. The legibility and structure of Roboto at small sizes lent itself well to even, steady paragraphs, and Source Sans gave us a friendly face, with distinct headlines.
The Sketchback logo is a lettermark that represents two teammates reaching out to join hands in the shape of an S.
Chelsea designed the ‘S’ and I designed the typography, as well as this animation, defining the collaborative element of the logo from its very inception.
Design Systems
UI Spacing
All elements in our UI are based off of a few guiding principles.
Colors
The color palette is intended to support the file revision and task management system within Sketchback. Red, yellow, and green, easily signify the progress of a project in a split second.
Brand Position
From the start, Sketchback had to establish a presence that set it apart from other project management software and appealed to designers. We wanted to reinforce themes of collaboration, playfulness, and professionalism across all of our visual communication.
Being designers at a small studio, we were the exact target audience for the very product we were creating. We drew from our own experience to create a product that could perfectly fit our needs and replace the current products that we were using.
For the UI design, I was responsible for establishing our spacing system, the visual hierarchy, and all of the "Tasks" and "Chat" windows.
UI Design
gg
Log In
Homepage
File Editor
Share File Popup
Settings
Delete Account Popup
Color Modes
Color modes were a necessity, as designers certainly have defined preferences for light or dark mode. Each color option was checked against the Web Content Accessibility Guidelines (WCAG) AA standard.
ss
Dark Gray Settings
Light Blue Settings
Dark Blue Settings
Web Design
Check out sketchback.com!
c
Landing Page
Applications
text;'
Illustration by Chelsea
As of Now
Currently, Sketchback has a waitlist for their demo, and is under development.
Working on a project that is going to enhance the lives of other designers has been an invaluable experience!
gg
