Blue Noda Website

Date

July 2020–

February 2021

Roles

Logo Design

Web Design

Art Direction

Collaborator

Marta Dezio

Overview

Blue Noda is a digital agency built on transparency and customization. I was tasked with refreshing the agency’s logo and developing a clear set of usage guidelines.


For the website, I was given the task of restructuring written content to reduce the cognitive load for users.

Wordmark Design

The wordmark uses nodes to represent the agency’s name, and emphasis on connection. It utilizes gridded precision to showcase Blue Noda’s technical proficiency.

Color Palette

Clear Space

The clear space around the combination mark at any scale is relative to the height and width of the ‘o’ in Noda.

The Node

The node mark speaks to strength found in connections. It represents the agency as a central point of contact for all digital needs.

Clear space around the node is equal to half the node’s radius on all sides.

Web Design

Blue Noda’s goal was to continue optimizing the site for search engines by adding content over time. This called for a flexible design system of modules with varying column structures and asset applications that Blue Noda could apply when adding future content.
Previous
Next

Wireframes

The wireframing process determined clear headers and distinct, interchangeable modules that allow for reduced cognitive load, as a move away from Blue Noda’s initial full-width content areas.

I created replicable module templates for design consistency across the site.

Arrows, checkmarks, and icons

The UI is marked by a set of arrows and checkmarks, as well as flat icons to be used in lists.

The Illustration System

I collaborated with illustrator Marta Dezio to design a set of characters that portray Blue Noda’s values of collaboration, drive, community, and diversity. The system is upbeat, and displays the agency’s technical proficiency and wide variety of services offered. Characters are paired with environments and relevant icons to create complete illustrations.

Color Palette

The illustration color palette is derived from the logo palette, bringing in brighter, more playful complementary hues.

Illustration Components

We created a set of  illustrative icons that speak broadly to the agency’s services, while a second set of flat icons is used within illustrations.

Results

The work resulted in a complete brand presence for Blue Noda, with clear guidelines and flexible assets to help the agency maintain brand consistency across the website and branded materials when the site grows.

Share this:

Like this:

Like Loading...
%d bloggers like this: