View
6
Download
0
Category
Preview:
Citation preview
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
Recommended