Feel free to download any of the following resolutions:
iPad 1024 x 1024
2560 x 1600
2560 x 1400
1920 x 1080
1440 x 900

@font-face usage has been fortified by services like Typekit & Fontdeck, CSS3 & HTML5 are popping up everywhere, and with the release of the iPad, multi-touch technology is drastically changing web design.  My goal has been to cut out the extra divs, widgets and doodads so browsing is more fun for you and posting is less work for me.

There’s nothing on that plate but gristle & fat!

I wanted to start by clearing out all the non-essentials.  Any elements that weighed down the markup, design or user experience from the previous version had to go.  I scaled back the footer by removing the black content box, list of posts and tweets.  The Comments section was updated by trading the author comments in the margin and indented threads for a good ol’ fashioned list with @replies.  I 86-ed the 1px horizontal lines filling the page margins.  Though they did frame the page nicely, they cramped art-directed posts’ style,  and the same effect can be achieved with well-placed text and line-height.

Inspired by Multi-Touch

This site wasn’t intended solely for the iPad, though it is inspired by my experience browsing the web sans mouse.  Many of the assertions I made before getting an iPad have been strengthened each time I slide, swipe and tap my way across the inter-web.  Each change I’ve made (larger font size, less content/page, fewer columns) has been shaped by my belief that the future of web design lies in making browsing all play and no work.  Hunching over a keyboard at a desk and squinting at an overstuffed page with 12px font is work you don’t get paid to do, so why do it?

A New Mark

I knew I wanted to move away from Helvetica as the typeface for the body copy as well as for my logo.  I thought the mark needed a hand-drawn look to offset all the obsessive pixel pushing I was bound to do while designing. Fortunately, Reagan Ray was willing to bring custom lettering talent to the process.  After trading a few ideas, Reagan took to sketching and then ran a few lettering options through Illustrator.  I immediately gravitated towards this script version, dropped it in a black circle and let it set the tone for the rest of the site design.  More than anything, my favorite thing about the new mark is that Reagan did it.  I dig his style... always have and always will.

The Design Process

Once I had the new mark & simplified content list I set out to experiment with design, mainly consisting of 30 minute design sessions where I’d try different combinations of fonts, font sizes, page widths and line heights which were checked with fresh eyes at regular intervals during the day, using both a point-and-click interface and the iPad.  After a couple of weeks, I settled on a 1000px wide site with a 23px baseline grid for the text.

Updated Typography Served Up Via Typekit

For the body copy, I went back and forth between a 14, 16 and 18px font size.  14 seemed small when zoomed out on a touch device, but 18 seemed excessive on my laptop, especially when you consider how large heading fonts would need to be to maintain visual hierarchy.  So, 16px Georgia it was until I found FF Meta Serif via Typekit.  I love this typeface and think it interacts well with the new mark.  I also enjoy using Typekit & believe that they’re doing important work for both the web and type communities.

The Code-out

The markup & WordPressing process was aided by Nathan Staines’ HTML5 adaptation of Elliot Jay Stocks’ Starkers theme.  In addition, CSS3 came in handy in quite a few cases.  Whenever possible, I gladly trade larger javascript files or semi-transparent pngs for a single line of progressively enriched CSS code.  The search page uses -column-count and column-gap to set the tags into columns, and I use rgba color to set the 1px lines on the header and footer.  I also threw in 0.2 second ease-out transitions for the link hovers. With the help and council of Paravel’s Development Sensei, Dave Rupert, I was able to minimize file size and load times by running images through ImageOptim, making icon sprites and installing WP Super Cache.

Content Navigation

I had 3 times the content to work with this round and saw a real need for a good search page and tags system, which were added to the main navigation.  While I enjoyed displaying those billboard style banners on the Articles page, it became progressively harder to find older posts.  Now the layout mimics the notes page, but with post-style referencing thumbnails.  I also added a more prominent Previous & Next navigation for easy browsing. I sure hope you enjoy the updated site.  Let me know what you think.

Be sure to follow Kyle’s work at kylesteed.com

At Paravel, we love movies. We talk about them, quote them, and gather design inspiration from them. We’ve named our web servers Gozer & Zuul. One of our home page banners has us illustrated as the Three Amigos. We’re friends on Netflix and get into heated debates on which Cusack movie is the best. Recently, I had an idea to write a post on this blog about one of my favorite actors, Alan Rickman. He is the king of multi-dimensional bad guys. Shrewd, narcissistic and foul with a dash of adolescent whining to set it off. I wanted to draw comparisons between some of his best roles, dissecting recurring traits and highlighting the brilliant quirks.

When I approached Reagan to commission one of his stellar illustrations, all hell broke loose. All three of us started musing on other actors we could write about & what topics we could cover. It was immediately apparent that we didn’t have a blog post on our hands. We had an entire blog. Without further ado, I humbly and enthusiastically present: TheManyFacesOf.com

The D.P.D.Z. is issuing this public notice to all designers in regards to a recent outbreak of designer zombieism. While exact causes have yet to be determined, all are advised to exercise caution when spending extensive amounts of time in front of the computer. Contributing factors may include, but are not limited to a rushed work schedule, extensive work hours, and a lack of (or too much) inspiration. The official departmental guidelines delineated below will help you protect yourself and spot the warning signs early if you are at risk. Be aware that no one is immune and outbreaks can strike at any time.

Warning Signs

1. Incoherent moaning about bevels, gradients and drop shadows
2. Unresponsiveness to concepts like project planning or wire framing
3. Insatiable appetite for design tutorials, round-up posts, and brains
4. Threatening to eat coworkers who provide opinions or feedback
5. Insomniatic tendencies toward 100+ hour work weeks
6. Inability to focus on one task at a time due to declining brain function
7. Self-loathing and feelings of inadequacy brought on by extensive design gallery browsing

Preventative Measures

1. Seek inspiration everywhere, especially away from the computer.
2. Prevent roadblocks by planning, sketching, and brainstorming.
3. Focus. Shut down twitter, email, RSS feeds, and your cellphone.
4. Ask for help and feedback if you’re on a deadline or stuck.
5. Change your environment by tidying up or making a design playlist.
6. Take a break. Dig in the garden, go out to lunch or walk the dog.
7. Encourage others - Paying respect and offering kind words to other designers can change your mood and (re)humanize the design process.

Working with clients can be incredibly rewarding. Their unique perceptions, expectations and idiosyncratic quirks are the variables that keep projects interesting. At times, when on the phone or sitting at a meeting with some of my employers, I can’t help but unfairly compare them to some of the caricatures I’ve seen in my favorite movie. Let this post serve as a tongue-in-cheek roast of endearment.

The Walter Sobchak

I’m talking about drawing a line in the sand, Dude.
This type tends to charge in with an arsenal of partially thought out ideas. While they really do care, their zeal and inability to retain overall perspective requires constant refocusing and redirection. The best & worst part of it all is that they incite that rare brand of rage that only someone you’ve come to care a lot about is capable of. Dios mio man, you’ve got a friend for life.

The Maude

This is Maude Lebowski. I need to see you. I’m the one who took your rug.
A company hires a PR firm, who hires an ad agency, who hires a marketing team who hires you. While it’s possible to sort out who’s really calling the shots, be ready to sift through all the Jackie Treehorns, Brandts, and Big Lebowskis to get to Maude. Determine who the point person really is and you’ll be able to handle all the extra ins, outs and what-have-yous.

The Nihilists

We don’t care, we still want the money.
Details are unimportant; they’re just after the final product. They’ll come to you with what (in their minds) is a million dollar idea for a website without doing any market research or even looking into how it will be accomplished. Most likely their strategy is less than sound so beware; no one wants to have to cut off a toe.

The Brandt

Her life is in your hands, Dude.
Clients that step out of the way and let you do what you do best can be ideal. Just be sure they aren’t trying to drop too much in your lap. Sure, helping out and providing work that positions clients for success is important, but that doesn’t mean that you are to be held responsible for how the business performs overall. If they need you as a partner, suggest they hire you on a recurring basis. This is their concern, Dude, not yours.

The Theodore ‘Donny’ Kerabatsos

You’re like a child who wanders into the middle of a movie.
They’re out of their element. They need you to explain what’s going on and how to get things done. Sure, they may be nice people, but you’re going to have to strike a balance. After domains have been registered, DNS has been configured, and email has been set up on their computer it might be time to say, “good night, sweet prince”.

The ‘Big’ Lebowski

The bums lost!
It’s painfully obvious by the grandiose facade that they’re full of it. Every few months I hear, “You’re going to have to hire some more people because this idea is huge,” and I run for the hills. Usually, the people with big ideas and big opportunity won’t have to go out of their way to prove it to you. Unless you really trust them or believe in what they’re doing, tell them no. Tattoo it on your forehead, it’s your answer to everything!

The Dude

The Dude Abides
Whether they just want their rug back or a rebranding for their company they are great to work with. Clients that trust you, challenge you, and expect your best help create an ideal partnership. Sometimes there’s a man who, well, he’s the man for his time ‘n place, he fits right in there--and that’s the Dude.