Future States – A Web Design and Branding Project

The Problem…

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


  • 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




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.



Logo Design

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






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.



Print Collateral

Using Adobe Photoshop I created mocks of print collateral.



Accessibility Testing

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



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.





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