Portfolio & Identity V1

2012 - 2014

In 2012, I got to work on my personal branding, identity, and first major online portfolio. 

My goals were to encapsulate my aspects of my personality through the design and branding, as well as display my work in a highly digestible and visually pleasing format. 

I went through a process starting in pen and paper sketching and ending in front-end development. 

(site can be viewed here)

 

Design

I started off thinking about colors. At the time, I quite fancied bordeaux and other wine-like colors. I got to work on a color palette that reflected a harmony of #642A38, my bordeaux, but on a minimal contrast, high complimentary range.

#642A38 - bordeaux

#868686 - light bordeaux 

#F2F2F2  - grey

#E5E5E5 - light grey

#FFFFFF - white

Color Scheme

For my logo design, I was considering various adaptations for me, a monogram for small displays, a logotype for full name, etc. My inspiration came from chocolate bars, such as my favorite, the Nestlé Crunch. 

At the typographic level, I was focusing heavily on typefaces that I thought complimented the abstract design language that I was thinking of: minimal, but bold. I took cues from fashion logos, such as the Tom Ford brand, which kept the first name and last name in the same hierarchy of letter case and weight. I didn't want this logo to feel like just a name. I wanted it to feel like a brand. The typefaces that I considered were Futura, Andale Mono, Helvetica Neue, Avenir, and Avenir Next. Avenir Next caught my eye because it struck a balance of line weight and character spacing -- not too condensed, not too heavy. 

After having a color scheme and logo, I started to sketch out some ui and web design ideas. 

This allowed me to flush out anything in brain and consider features, such as changing backgrounds, as well as navigation and layout. After sketching I had a fair idea of the features I wanted and how they could exist in this system. Part of my inspiration came from Artsy's minimal, yet colorful design.

One idea I had was to create multi-colored logos paired with a variety of background cover photos to represent cities and places that I've been. I wanted the experience to vary with each loading of the site. 

Another idea was sectioning my works into a gallery format, split by category of company and works. The effect I wanted was to create an experience optimized for full screen viewing -- using imagery and colors to affect viewers and make them want to dive deeper into the works.

After pen and paper sketching, I dived into Illustrator to refine the concept further, focusing on layout, iconography, tags, and page types. I also had to consider readable and web friendly font stacks that complimented my logotype. For body text, I went with Myriad Pro and for my navigation links, I went with Proxima Nova.

Multi-colored logos and city-scape cover photos

Multi-colored logos and city-scape cover photos

Final Visual Design

 After hashing out my final design, I got into digital asset production and pre-engineering setup. 

Engineering (Code can be viewed via my repo on github. Live on heroku. )

When I hit the engineering phase, I already had my assets and design language, but I needed to refine my features, define the architecture, and scope. I decided that I wanted to code this and ship within a week long sprint. I decided that I didn't want to focus on platform integration (foursquare, twitter, github, instagram) for v1. The focus for v1 was presenting my brand and identity in a clear and pleasing format, as well as curating my works. 

My stack: 

AngularJS (mvc)

NodeJS  (server)

Express (routing)  

Twitter Bootstrap (bare skeleton and ui components)

Sass (css / sass)

Compass (precompiler)

FontCustom (webfont creation)

End Notes

This was a fun full stack project (branding -> website). It also gave me the chance to think about my portfolio from an MVP standpoint. I got to just about explore and think about what would be best for my first portfolio. If I were to revisit this project, I wouldn't change much. I would perhaps focus on creating a sophisticated CMS, but I honestly liked editing and contributing to new updates via textmate and git commits.