Future States – A Web Design and Branding Project

The Problem…

Update the visual branding and site design for the digital agency Future States.

TOOLS

  • Adobe Illustrator – Visual Element Design/Page Layout
  • Figma – Wireframing
  • InVision App – Prototyping/User Stories

 

The Solution…

I began exploring a space theme based on the name of organization. I hoped to invoke upward or forward motion and a focus on the future.

Early Logo and Icon Sketches

sketches

 

 

Color Palette and Fonts

I decided on a pair of sans serif fonts differentiated by their weight. The pairing is recognizable, readable, and pleasing.

The color palette is bold and fun, with great options for light and dark iterations of visual marketing collateral.

ColorFont

 

Logo Design

The logo is bold and includes the triangle element that can be broken away for other uses across marketing collateral.

LogoDesign

 

Icons

Icons

 

Page Layout – Desktop, Tablet, and Mobile

After iterating on wireframes in the Figma design software, I mocked up different media sizes of the site using Adobe Illustrator.

WebTabMob

 

Print Collateral

Using Adobe Photoshop I created mocks of print collateral.

BusinessCards

 

Accessibility Testing

I conducted accessibility testing to ensure that site elements were visible and usable for individuals with various forms of color-blindness.

Access

 

Functional Prototype Created with InVision App

Finally, using InVision App I created an interactive prototype for client presentation. The prototype was created quickly and intended to elicit client feedback for further design iteration.

iPhone-6S-Front+Angled-PSD-MockUp-P-Px.com

PROTOTYPE

https://invis.io/JAEBCV8WQ

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s