Inspiration Series #1: BHoff, Dribble and Website Design

I've been meaning to create a portfolio website for years now. Every summer and winter break during grad school, I would think, yeah, I'll finally get my site done! And sure enough weeks would go by, and it just wouldn't happen. But during the final semester of my grad program--on top of all the other work I had to do to finish--I thought, okay I am going to do it. And after a night's worth of work, I designed my site.

And it was hideous! It was boring, it had obnoxious web 2.0 trends, it was disjointed, and more importantly, it didn't reflect me or my aesthetic. And the only way I came to this realization was through a little inspiration from Brian Hoff's redesign of his blog, The Design Cubicle.

Mr. Hoff (I don't know him, so I just can't call him Brian) posted some of his Dribbble snapshots of his site redesign on Twitter.

[NOTE:Dribbble is an invite-only showcase website for designers to show off their current works in 400x300 px squares. I've yet to receive my invite, ahem, so I've been hanging out and sharing my design snapshots at Forrst instead.]



And I loved them. The color palette was unique and fantastic. The fine details along the content margin.The textures and layers. Every detail was clearly a conscious choice. And I felt like I got a sense of this guy from this design. These tiny snippets made me excited not only for rest of his site, but also about design in general. Here's a guy who thought about the design and the usability, and not once or twice, but so many times until every piece fell into place. And you can see the finished result here: The Design Cubicle And yes, this site looks so good, I want to have sex with it. It is just so spot on.

As a writer, I'm used to rewriting a single sentence ten times to find the perfect word, the perfect rhythm. But I haven't quite taken that same editing mentality to my designs - especially my own branding, and I know I need to.

So I tossed out my old design and started again. I had to address the real crux of my problem: What is my design aesthetic? What do I want my website to say about me? What do I like about design?

Here are some of the things I wrote down:
1. I like type solutions (but need to learn more about typography)
2. I like taking photos (but don't have a voice yet)
3. I like clean, minimal and modern
4. I like fancy, complicated prints (but haven't done any myself)
5. I like writing and editing and critiquing
6. I like things to be thoughtful

And after contemplating what I had written for a while, it started to come together. I wanted something authoritative (#1, #2, #4). I don't know everything yet (and I'm still learning), but I want people to feel confident that I do. I wanted people to land on my website, and think oh, this is put together (#6). And I realized that perhaps a photo solution would be a good solution for me (#2).

I don't want to give away all the surprise about my new site (which should be up soon!), but here's a brief idea of what went into it: Taking photos, editing photos, working them into the site, type choices, type changes, layout choices, layout changes, choosing color palette, reworking the photos, choosing portfolio pieces, finding stock photos, editing stock photos, figuring out hovers, making social media icons, redoing the footer, etc. etc. (Then repeat for the blog design.)

And I know some of you might be rolling your eyes going, sheesh this is what you should be doing for every design concept Heather. And yeah, I know, thanks. But "should" doen't mean I always do, and I doubt you do all the time either. Especially, when it comes to our own work. When it comes to our own branding and identities, some of us get blinded by our own egos, and others throw themselves into client work just to avoid it. Either way, designing for ourselves gets treated differently. And differently shouldn't mean poorly.

For those of you who prefer a visual representation, here's a few Dribbble-esque 400 x 300 px snapshots of my own:

Brought to You by the Letter

Brought to you by the Letter: K

Josefin, Regular, lowercase k

As you may or may not know, web sites are in some ways limited in what sorts of typefaces they can use/display. This handful of fonts are called "web safe fonts." However, with more and more print designers moving to web, a limited number of fonts has just become unacceptable, and there are a few ways to get around using just the web safe fonts and instead using some wicked cool fonts (without saving them as an image).

Google recently got into the game with the Google Font Directory. It currently includes 18 open-source fonts that Google actually gives you the code to embed the font into the site. That way, no matter the browser or computer platform, the font is available through the site and thus loads and displays correctly. Over the next few weeks, I'll be plucking some of the letters from the Google Font Directory.

This week is Josefin's regular, lowercase 'k,' which I am seriously loving as a letter and a typeface. Although, I would make a desperate plea to @sannorozco to please make/finish the bold and italic weights. It's just such a lovely, lovely typeface that additional weights would make it quite versatile.

What I like about Josefin the typeface is how "delicate, yet assertive" it is and "geometric, yet decorative." (the maker's own description.) It's a dressed up sans-serif. Josefin is Futura's date on a Friday night, wearing a little black dress and drinking dirty martinis.

What struck me about this k is it's hard, razor-like angles, and legs going everywhere. It looks the way a 'k' sounds, which to me makes me think of Korean characters, which were designed to look the way the mouth is shaped when pronouncing the letter. (So I can't help but feel like the shape has some Asian influence.) And while the 'k' doesn't look like the tongue's movement or anything, it does look like the sound k-k-k-k-k-k-k. Hard and awkward (and not boring looking). And Josefin's 'k' still manages to be so clean and concise and modern. Is it an abstract house or tree or some ancient hieroglyphic? The 'k' looks like it's from another time. The white space is perplexing and it should be because 'k's are.

Courtesy of Typemade.mx

(You can download the font there at the bottom of the page)

Design Foundry: Typemade

Designer: Santiago Orozco

Date: 2010

Classification: Geometric, Decorative Sans-Serif

"The idea for create this typeface was to make it geometric, elegant and kind of vintage, special for titling. It is based on 1927 Rudolf Koch's Kabel, 1930 Rudolf Wolf's Memphis, 1927(?) Paul Renner's Futura.

"My idea was to draw something with good style, specifically that reflects the swedish design and their passion for good lifestyle, and by default all other scandinavian styles."

Inspiration Series

I've noticed that there are a lot of "Inspiration" posts on the web. They're usually just image after image of "inspiration." (Half the times the links are broken and I can't even see the whole image or original site, and it's actually incredibly frustrating - but that's another post.) And while, I like to browse these images, and while I appreciate them, am excited by them, am moved by them, I don't necessarily think of them as inspiring.

Granted, this might just be a case of semantics, but for me, deriving inspiration from something means to A. use one of my five senses to register something into my brain, B. be moved by that something, and most importantly, C. create something new intentionally based off of that original something. This to me is what inspiration is all about. Because we all get 500 ideas a day that are spurred by the things we see and interact with daily, but it's not enough to call it inspiring if it doesn't move you to actual make your idea a reality. I don't think a poet would call the sun an inspiration if they weren't also writing poetry about the sun.

Now you can argue that you could see a flurry of images on one of those design inspiration posts (or even in an art museum) and that they'll subconsciously influence your work from then on. And that's totally true, I agree, but that's more influence than inspiration... ? But there's also something wonderful about creating something that you can pinpoint to a moment of inspiration, a moment of a-ha. I think being influenced by 20th century art is different than being inspired by painting XYZ by author ABC.

Again, I might be running in circles and you might not see the difference, and that's no big deal. To an extent, I'm just rambling here. I'm also introducing a new series to The Gray Suite: The Inspiration Series (great name right?). So be on the look out for these, they won't be weekly, but hopefully at least monthly. I'll create something and discuss my process on how I went from the thing of inspiration to my creation and why.