Clear Space
The clear space around the combination mark at any scale is relative to the height and width of the ‘o’ in Noda.
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
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.