About a year ago, I created this portfolio site for myself.
It was kind of a BFD to me, because it was the first time I coded anything, and retrospectively, it was the first time outside of Myspace that I really contemplated web design.
But it was awful. It was just a rough, scratch-pad type website that I let live for too long.
A few weeks ago, I completely redid my website using everything I learned at Vox Media, the company I currently work part time for.
Here's a look at what I did and why.
1) Nix the branding
The massive, circular head drowning in a sea of yellow had to go.
When I designed my "logo" a year ago, I wanted to create something visual instead of relying on my initials to get my identity across. What did I want my logo to accomplish back then?
• I wanted it to say I'm playful.
• I wanted people to see it and instinctively think "Adam."
• I wanted it to be different from what I saw my peers doing ... though shortly after I created it, it seems a lot of people had been going through a similar thought process.
• I was stuck on this slogan, "Consider me well-rounded." So a visual pun seemed necessary ...
I think the design accomplished those things. But it was very juvenile. And I think I outgrew it.
So, I redesigned. Now, it's raining glasses.
What did I want this visual identity to accomplish?
• I wanted to convey thoughtfulness, and I believe glasses carry studious connotations with them.
• I wanted something that sets a tone instead of acting as a lead image. On the Twitter app, for instance, the frosted glass look of the hero obscures the glasses so only the colors – and hopefully the mood – remain.
• I wanted my new design to connect somehow to my old, so it could be a sort of evolution. Though loose, I think the glasses accomplish this by referencing the glasses on my featureless Kirby face.
• Connect across platforms. Because this is a pattern, it is something I can easily replicate across platforms. I use it as the hero on my website, the cover on my Twitter and even the back of my business card. The tone and message of my website are carried throughout my branding.
2) Focus on the experience
One of the critiques one of my bosses gave me at Vox is that I need to focus on user experience consistently throughout the design process. What happens on hover? How does it happen? Will users want to click or interact with a piece of content in another way? What are the design cues saying ... or what aren't they saying?
So. I tried to conquer that.
• First of all, I try to make the site engaging from the get go, using JS to change the hero's greeting based on the time of day.
• Small cues help users understand what's happening. For instance, the menu changes states based on where a user is on the page. Subtle, done often, but an improvement from my last site.
When hovering over my portfolio tiles, my glasses appear. This connects to my branding, but also says, "Hey, there is more to see if you click." Get it? ;)
• One critique I got often was that I had no descriptions giving context to my work. So, I added modals that help keep the home page clean, but allow me to dive into my content more than before. This also allows me to explain multi-piece projects more clearly.
• There's a surprise hiding on my site ... (Hint: Do the Konami Code.)
3) Clean the code
OK, so it's actually still pretty sloppy. But before, coding was to me more a game of guess and check. Now, the code is much more navigable, making better use of classes, IDs, children and otherwise. I made better use of GitHub, too, and embraced JS and JQuery with more open arms.
Check me out on GitHub.
4) Consider different devices and screen sizes from the start
This goal allowed me to nix the Pinterest-esque tiles of my old site and pursue something a bit cleaner but allowing me to crop my images and decrease their sizes.
The images on the main screen are all relatively small, so they won't eat data. The images in the modals are much larger, but only load when the modals are called. At least ... that's what I imagined would happen. i think my code for lazy loading is broken, so I'll dive into that soon. (Open to hints.)
My old site was like "LOL TABLETS" but this one accommodates those corresponding screen sizes much more nicely.
Before:
After:
Anyway, thats the website rundown. See the "finished" thing here.
A few quick notes:
• I'm in Frankfurt for SND. Check out the photos and tweets of my misadventures.
• Interning for Vox Media this summer was great, so I'm stoked that I still part time for them from Indiana. Right now, I'm working with a few others on the Racked redesign. So much to blog about, I don't know where to start.
• I am looking for jobs starting in May ... so ... hire me?
Gute Nacht.
Comments