presented byVEXILLUM CONSULTING

MOOD BOARD | SEPTEMBER 2015

COLOR PALETTE

3

PRESENTED BY VEXILLUM CONSULTINGDOE MOOD BOARD

DOE GREEN

DOE YELLOW

GRAY

LIGHT GRAY

DARK GRAY

BLUE

COLOR PALETTE

Beyond black and white, we wanted to be sure to have a rich greyscale palette to choose from. The three shades of grey displayed here have just a slight color offset to give them a slight color tint. The three colors (blue, green & yellow) will be used for accent and important information. We intend on

using the green and yellow more than the blue but thought a third (blue) color would be needed for certain elements of the UI.

LOGO USAGE

5

PRESENTED BY VEXILLUM CONSULTINGDOE MOOD BOARD

LOGO USAGE

Usage of the DoE logo on different background colors will be as shown above. Darker hues will get a reversed (or white) logo treatment and lighter hues will get a solid black or dark logo shade. This will

ensure optimum readability of your logotype.

TYPOGRAPHY

7

PRESENTED BY VEXILLUM CONSULTINGDOE MOOD BOARD

GOTHAM

AaBbCc01234abcdefghijklmnopqrstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWYZ

0123456789!@$%&().,"

abcdefghijklmnopqrstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWYZ

0123456789!@$%&().,”

Mauris nisl urna, fringilla at aliquam eu, feu-

giat a turpis. Nam nunc ante, dignissim ac

volutpat eget, congue eget lorem. Nullam

quis turpis dolor. Proin quis augue nisl. Nam

ultrices suscipit elit, at sodales arcu semper

eget. Curabitur viverra tortor ut dui viverra eu

egestas dolor feugiat.

HEADLINE COPY

TYPOGRAPHY

Gotham features a wide range of weights and is a beautiful typeface. Widely used and very versitle. We will initially focus designing around this typeface in the beginning of design phases because if it’s diversity in weights rather than Patua One/Century Schoolbook as exampled for younger readers in

your brand guidelines.

PRIMARY FONT FAMILY EXAMPLE USAGE

VISUAL STYLES

PRESENTED BY VEXILLUM CONSULTINGDOE MOOD BOARD

9

Using subtle colors (if any) in the icons will keep the application clean and easy to navigate

Use of simple (nearly) flat icons.

Simple icons for easy association.

Icons should be slightly more detailed than traditional flat icons.

ICONOGRAPHY

PRESENTED BY VEXILLUM CONSULTINGDOE MOOD BOARD

10VISUAL STYLE: LAYOUT, IMAGERY & TEXTURE

Use of color and texture as background imagery where available and applicable.

Fun & relevant imagery

Relevant imagery and clear definition of story & section titles for easy readability.

Use of a mosaic wall for news & articles.

DESIGN INSPIRATION

PRESENTED BY VEXILLUM CONSULTINGDOE MOOD BOARD

12DESIGN INSPIRATION

ROOKIEMAG.COMThe use of vibrant color and clear division between page sections make rookiemag.com a leading inspiration for this site. Use of imagery along with illustration draw the eye to important elements as well as minimal copy keep the pages interesting and easy on the eyes.

PRESENTED BY VEXILLUM CONSULTINGDOE MOOD BOARD

13DESIGN INSPIRATION

SEVENTEEN MAGAZINEAnother example of crisp and interesting layout. Lots of imagery and minimal text keeps this page fun to look and and engaging for our demographic.

PRESENTED BY VEXILLUM CONSULTINGDOE MOOD BOARD

14DESIGN INSPIRATION

DISCOVERY GIRLSThe use of color is very evident on this site and draws the eye in for further engagement.

PRESENTED BY VEXILLUM CONSULTINGDOE MOOD BOARD

15DESIGN INSPIRATION

TWISTExtremely clean and clear section definition as well as bold color and typography to define points of interest as well as clickable regions.

DOE MOODBOARD

WWW.ENERGY.GOV

LAST UPDATED: SEPT 22, 2015

PRESENTED BY

VEXILLUM CONSULTING