Awaken

Theme Prototype

2016 NationBuilder Theme Design

Being apart of the NationBuilder Design team, i was tasked with creating the latest 2016 public theme. We needed a full design built for every page type including a version with and without a sidebar.

The designs were created from scratch by me using a combination of Sketch and Photoshop. I did however receive feedback from the rest of the design team that influenced many design changes.

The Client

The targeted clients were users of the NationBuilder software, which are primarily political leaders and non profits.

The Challenge

Being new to the NationBuilder team, I needed to create a modern pixel perfect theme that looks good visually but at the same time will integrate seamlessly into the NationBuilder CMS.

Art Direction

By default, I needed to come up with a political theme. From there I was able to expand the design into different color combinations and typography.

Typography

typography

Libre Baskerville and Lato typography was chosen to develop strong and reliable communication.

Colors

colors

Theme needed to have default red, white and blue political colors.

Icons

icons

Used responsive svg icons from IcoMoon for ease to customize and extendabiity.

Home Page

Nationbuilder's allows snippets of code on pages. For the homepage template my team and I decided a large hero banner was nessesary as it was very popular and highly requested by customers. Originally we were going to make the default theme a political theme with the red, white, and blue colors. However after plating around with images, I decided to change the theme direction to a political theme.

I wanted to start out with intro text at the top of the page that can easily be changed through a WYSIWYG. Next I wanted to pull in the latest 3 blog posts. NationBuilder themes allows people to donate so I wanted to design a way to credit those who do donate. Finally, I wanted to give a call out to signing up for newsletters that can be managed through NationBuilder.



Awaken Home Page

Color Schemes

Unlike WordPress CMS, Nationbuilder doesn't have any options for users to tweak colors and other styling from the backend. So I created 10 different home page variations with different hero images.



Awaken alternative home pages Awaken alternative home pages Awaken alternative home pages Awaken alternative home pages

Mobile Design

Awaken mobile template Awaken mobile menu template


Voter Pledge

Awaken vote template


FAQ

NationBuilder also allows for full screen background images. This is an example of a webpage that utilizes the full screen background. image.


Awaken faq template


Suggestion Box

Awaken suggestion template


Sign In

Facebook and Twiiter login is build natively into NationBuilder.


Awaken sign in template


Contact

Awaken contact template

Vona Wordpress Theme

Awaken Template

clinCORE Website

Elysian Yoga Concept

Maya

Carlyle Financial

CFM Dashboard

HeadsUp