Harbor Branding
Stellar Magazine
Leonard’s Web
Groovin’ Logo
AIC Poster
Handsfree
About
Visual Branding and Identity System
Harbor Is a running apparel brand based in Baltimore Maryland.
The brand focuses on City based running (concrete, streets, grids) so therefore the identity system accomplishes 3 main goals. Bricks, Motion, and City Streets. I love to run in the city and this is a bit of a passion project for me!
This is why Harbor focuses on Bricks, Motion, and City Street Grids. These decisions reflect the brands community that is Baltimore itself, the motion of athletics and streets of a complicated city full of intersecting paths.
To the left is an early iteration of the brands logo in motion. The evolution the logo takes for its final form is small to the average viewer but large to the designer. The early draft has issues with awkward negative space, too many shape types rangong from rounded to sharp corners. The worst problem is the inconsistency in line weight and spacing.
These are advertisements using the visual systems made for the brand. The system calls for the brand shapes to always interact with the photo. The left is a patterned small usage of the same few brick like shapes. The right is a more free form usage of the enlarged shapes.
On the left is an Instagram post. In this graphic the shapes make a crosswalk connecting back to the idea of city grids and paths.
Product Design
Brand being applied into clothing for better picture of how the product design can look. Here I use both large and patterned style of brand visuals.
On the right in the shorts the secondary logo is being used in a tag like format. Great for tagging clothes or letter heads.
In this billboard promotion the brands shapes are being used in large format as a cookie cut out.
On the left I have prototyped the brands desktop UI. This ui was desige=ned with color and visual element in mind. Comes complete with hover buttons, navigation, animations, and multiple pages.
This Video is an introduction to how the UX and UI interact with a user. Here you can view the layout of the pages, the scroll and the button animation
Logo Process
Initial logo iterations only focused on the idea of bricks and morphing. However once I started focusing on the city grids and intersections I was able to produce a system and logo that matched the brands
story perfectly. The Final primary and secondary logo find ways to represent bricks, motion and city grids/streets.
Brand Tools
The me-asured and specifically developed grid system to arrange brand shapes into particular patterns. This system must be used when addressing the small patterned shapes but not when enlarging singular shapes.
Visual System
Here is the visual system and usage of the brands shapes and identity figures. These are the shapes used to create a connected systematic look across the brand. These shapes are derived from the logo mark.