Visual Design Document

Colors

Our Colors

When creating an app that instills creativity and relaxation, we wanted our main color to be blue, then following we have grey, white, and black secondary colors.

Blue Primary (#0083FF)
Used for logo, loading screen background, title card backgrounds, and background of all buttons

White Secondary (#FFFFFF)

Used for logo accents, loading screen type, title card type, button type, and headers

Black Tertiary (#000000)

Used for title card backgrounds, header type, and second header on title cards

Gray Tertiary (#A0A0A0)

Used in deselected favorites star

Yellow Tertiary (#F8CC46)

Used in selected favorites star

Sketch.it

Our Logo

Here are the various files for the logo
Design Guide

Typefaces and Typographic Scale

Page Headings San Francisco: Large Title

Size points: 34, Leading Points: 41, Weight: Regular, Color: Black

Title Cards Main Text San Francisco: Title 1

Size points: 28, Leading Points: 34, Weight: Regular, Color: White

Title Cards Extra Text San Francisco: Headline

Size points: 14, Leading Points: 22, Weight: Semi-bold, Color: White

Button Text San Francisco (Default Button)

Weight: Semi-bold, Size: Default Button

Sketch.it

In-app Screenshots

Here are in-app images for promotional and template purposes
Discussion

Research into Sketch.its Design Story

Color is an incredibly important part of User Experience: Here is why we chose what we did

Color

Blue is often associated with calmness, serenity, reflection, and trust.

Upon solidifying our main color, we went to compare it with other sketching apps. We found our competition had utilized color schemes reliant on rainbows or just black and white. Overall, We wanted to portray a sense of seriousness which is why we stuck with a limited color theme. In research studies, blue was picked as the most reliable and trusted color. Similarly, we took inspiration from major tech companies like Google who also utilized a buoyant blue.

Fonts

Savoye LET and San Francisco

We chose to use Savoye LET for the loading screen because it is elegant enough to be aesthetically pleasing when we used the handwritten effect, but clear enough to be read quickly and easily. To develop the loading screen, we used Adobe After Effects and Adobe Media Encoder.We appreciated Google’s clean colors and Apple’s clean cut fonts. Both work hand in hand to help bring our app a level of satisfaction that we know have been liked by others already. As such, we decided to utilize their simple yet bold typeface San Francisco for a majority of our app. According to Apple’s Human Interface Guidelines, San Francisco a “sans serif type family” that includes in it SF Pro, SF Pro Rounded, SF Mono, SF Compact, and SF Compact Rounded. These typefaces are simple yet bold and very easy to read. Given that the main focus of this app is visuals, we didn’t want a font that detracted away from the main point of the app. More than that, the rounded edges and simplicity of the typeface contribute to the overall relaxed and approachable feel of the app. The point of the SketchIt app is to convey accessibility as a means to encourage anyone and everyone to learn to draw and be creative. Our decision in a simple font reflects that purpose.

Color

Black is associated with sophistication and elegance, but just because the color of the text is black does not make the app itself elegant or sophisticated.

We decided to use the color black for the text because it is easy to read and common color for text. It is a simple color that is serving a simple purpose: to keep things easy. We want to make our app as accessible as possible, and black is the easiest color for all people to read. We wanted to make sure we took into account all users including those with colorblindness or diminished sight.

Copyright © All rights reserved | This template is made with by Colorlib