Ramblings about Design, UX, Process, Code... basically where my thoughts go when nobody else is listening. Est. 2009.

Designing in Reverse

When I started working on the latest version of my portfolio (v16 since 2007 !!!), I started to slip into the same process I generally do. Sit down with a pencil and graph paper, start to map what content I'm keeping, what's being cut, and what needs to be created. After 10 minutes (or less) I'm into sketching wireframes and mapping general layouts in desktop / mobile views side by side. Probably sounds similar to your process, right?

What happened is I ended up feeling good about the session and filed the drawings away for when I had time to start building... but when I pulled the drawings out to begin I became unsatisfied and started wireframing again. And again. And again... bitten by the bug of overplanning.

Coming back to my home office a few days later, I felt like making something. An illustration. An icon... instead I started building a subpage of the site. Not only did I skip the Photoshop phase, I didn't even start with the mountain of drawings I had collected, letting the content shape what the page looked like.

About three hours in, I realized that the page was starting to look halfway respectible but I wasn't sure how it would interact with the other pages I had mapped out. Instead of digging the rabbit hole deeper, I started another page. The next day I coded over my lunch break and was able to repurpose a page I had on my site previously, but with the new grid / styles. Before I knew it, I was 1/3 of the way completed with the redesign, almost by accident!

Biggest takeaways

Designing Websites in Photoshop is No Longer Effective

For v16, I only used Photoshop for creating icons / pngs, specific content images, and hex/rgb color selection. Previously, Photoshop had been the "intermediate" step that somehow always ended up being the roadblock between idea and shipping a product. Now I am using PS as the Swiss-Army-Knife that it is instead of using it to 100% mock up every kind of page and work out every detail.

Designing With Real Content Yields Better Page Layouts

If I hadn't been using my actual content for designing the initial pages, I would have never settled on the layout that works best - what some people chalk up to "happy accidents" are really just the results of micro-iterations or guessing and testing. No amount of wireframing can account for length of names or common form factors of images. Instead of square pegs in a round hole, create round pegs to begin with!

Nobody Cares About Your Drop-shadow or Gradient

When you design around actual content, I've found that super-specific details that make PSD files stellar don't really matter. Does that button really need a 5-step gradient and a double-border and bevel? Make a simple button that contrasts well with its environment. It need a bit more jazz? You can put the lipstick on it later with CSS. Designing with code makes sure you aren't designing in hypotheticals, but more importantly you don't end up spending 4 hours making the perfect button for one specific layout. Make a button in code that fits the whole system instead!

Hey There!
What Is This?