#designfail

Sometimes you have to fail to succeed

One of the most dreaded projects in a designers life is putting together a portfolio. I’ve boiled it down to the fact that we don’t have any concrete requirements or style directions to work from (a true blue ocean) and that we are our own worst critics.

#theBeginning

I decided a few months ago that my portfolio needed a refresh. My old model wasn’t very mobile friendly, it didn’t have a structure that supported writing case studies about my designs, and it didn’t “feel like me” anymore. I put the last item in quotes because I like to think I’m a multi-faceted human being with multiple “sides” or “layers”, which is one of the reasons it’s so hard to pick a design that I feel represents me well.

The logo redesign is where I started on this project. My old logo was an owl that I illustrated, but decided it didn’t say much about who I am as a person or a designer (owls just happen to be my favorite animal). I used to tell people I liked owls because they were cute, but were actually very fierce. Ultimately I don’t think I want potential clients or employers imagining me ripping apart their product with razor sharp talons.

So I decided to go the more traditional route of working with my initials and I came up with something I loved! I took the letter A and wrapped it in a “shield” design to mirror the HTML5 logo and give my potential viewers a sense that I was not only a designer, but also a developer. I even had my friends vote on a color scheme on Facebook to make sure that my brand reflected how others saw me as well.

I ended up combining two of the most popular options (the purple and the gray) to make one awesome logo.

BUT WAIT! THERE’S MORE! I even created an awesome animation for the loading screen of my soon-to-be website:

And everything was wonderful… right? Wrong!

#theFail

I started HTML and CSSing up the website, and after an hour or two of rapid prototyping, I realized, while I loved everything about the design, I hated everything about the design. Once again, like the owl, it said nothing about me, but instead of being cute and cuddly, it was hard and sharp. My site design ended up looking like a design for a high-end fashion line (also not me at all).

#theRebound

The good news is that as soon as I realized it was completely wrong, I knew what I needed to do to make it right. I decided to focus on my interests and the fact that my self-taught foire into design was a journey that took me to where I am now. Funny how that theme also conveniently mirrored my love of travel, adventure, and the outdoors. It seemed to fit me so much better. The logo came easily as a compass that is made up of two html “tag” brackets. This nicely fit into the adventure theme while at the same time nodding to my coding skills and not looking like the shield a young child carries around at a renaissance festival. Next, I created a style tile to inform the general design direction for the site.

Taking this theme and these elements, I came up with a design that I’m very happy with. It brings out my playful, fun, quirky side, and focuses on the types of designs that I like to create (colorful, clean, delightful).

I noticed that icons are used quite a bit on park maps, so I designed a playful icon set to pull together the theme. For the icons, I have 3 main icons for each of the pages on my site, and 4 smaller icons for the navigation.

#codingdeets

One of my goals for this project was to work on my CSS animation and jQuery skills. I was unable to find a jQuery slider that worked for the content on my homepage, so I wrote my own. It was a little tricky with some bugs coming out to play, but I was able to fix it to work (and also be responsive).

I wanted my CSS animations to be subtle enough to bring delight to the users and not scream at them (like a teen girl’s 90’s blog). I animated the icons in the navigation just slightly on hover, and I also added a CSS transition to the slider on the homepage to make the larger icons look more clickable.

#theEnd

It was a very long process to complete this project. I’m still not 100% on board (afterall, I am my own worst critic), but I do feel much better about how my portfolio represents me and my current skillset. If you want to adventure to my site, I’d love your feedback!