Skip to content

Instantly share code, notes, and snippets.

@flynnduism
Last active July 10, 2016 21:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save flynnduism/dd8a4dfbd416ae811086684437a731de to your computer and use it in GitHub Desktop.
Save flynnduism/dd8a4dfbd416ae811086684437a731de to your computer and use it in GitHub Desktop.

Brand Styles

Before getting into dashboard ideas, it helps to frame the overall look and feel of Chatterbug with some branding exercises - to define some visual rules to keep a sense of order to the design (a set color theme, hierarchy of text styles, etc).

For this I usually make Style Tiles - rather than building fully-fledged mockups, you can quickly iterate on styles to show different vibes.

--

Moodboard

I made a mooboard, looking through different consumer sites/brands that have a playful feel. Ultimately, something that has a couple of strong colors and a motif that you can adapt and apply to different settings (and that looks good big or small).

screen shot 2016-07-09 at 11 30 10

See the moodboard here: https://niice.co/m/809b33ec652b7214c59a3d4392a2ef6f

--

Style Tiles

I started out comparing humanist, sans-serif styles / and more formal serif styles. Discussed with Scott, who expressed a preference for the more humanist, consumer-looking sans-serif and colorful approach.

screen shot 2016-07-06 at 14 32 09

(1) Punchy, bold type work mark:

screen shot 2016-07-09 at 11 18 47

For the icon element, I’m just sticking abstract shapes together - to look bold and simple, rather than trying to convey complex bug/language/chatting/learning visuals.

The bold, modernist type will work well with stark backgrounds and solid blocks of color. I elaborated a bit more with some brand blocks (better for print assets) and how a milder treatment could look for screen use (menus, buttons, etc).

screen shot 2016-07-09 at 11 18 55

This type of approach is pretty stark, and can look very professional and clean - often corporate. The colors keep it from being totally cold.

(2) To contrast this, I wanted to look at a warm, nostalgic type style. Slightly more bookish:

screen shot 2016-07-09 at 12 07 29

Here I’ve added a little chat bubble at the end, so it’s a bit more direct than the first one; though it’s not necessarily referencing language or learning either.

screen shot 2016-07-09 at 12 07 42

The color palette is warmer. It’s important to have a strong / dark tone to contrast with, hence the navy. I also tried a more retro, illustration approach with this branding style:

screen shot 2016-07-09 at 11 18 25

I like this one, it’s playful. For German in particular, this reminds me of their flag and certain aspects of Bavarian culture.

Summary

These are the results of initial experiments. I wanted to show some theme ideas, to aid the design conversation - and to create some baseline rules for the dashboard UI ideas (to follow).

Note: I know you guys have been working with some brand elements thus far, I don’t mean to disregard the bug motif and the yellow/blue colors entirely. These brand ideas are explorations - I can happily incorporate any elements, colors, fonts etc that you would like into the overall theme.

@flynnduism
Copy link
Author

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment