3by9

Going Lo-Fi With Your Design Process

I have formal art/design training if you count high school classes. I never took any design courses in college which doesn’t mean I didn’t want to, but they weren’t associated with my major. I was always a good sketcher — two of my favorite things to draw while growing up were baseball cards and sneakers, both on graph paper, and now that I look back on the the designs I produced I can see how they relate directly to what I do now which is designing for the web.

Start With The Nuclei

Designing a new site or a new feature for a site is fun, it’s exciting, and when you have an idea in your head you want to get it “together” as quickly as possible. When I get new ideas for a design, it’s normally not the entire thing all in my head, it’s little pieces and little UI widgets, never a full layout.

The ideas I have are normally how 1 or 2 pieces of the design fit together, for example a box around some content and how the heading of the box looks. Once that’s together, I’ll design the other pieces in the box making sure that their style follows the style I laid out for the container. For me it’s all about designing the small pieces on the page, the nuclei, and then fitting them together with other small pieces to make a cohesive whole.

I design small elements then add to other elements, and pretty soon I have entire areas completed. This is a quick process with a pen and paper because you don’t have to mess with the details of what you’re working on, just get the alignment and general proportions of the elements together and see if they work.

Small Box Information Architecture

My favorite thing to do when laying out a whole new page is to draw boxes on my notebook paper that represent content areas, but make them so small I can’t fit more than a word or two inside of them, so a wireframe layout of a new page takes up only a few square inches of paper real estate. What’s good about this is it lets me see the design from a mile-high standpoint and pick out any flaws before I go ahead with drawing. This small wireframe view lets me experiment with different placements and proportions, and once I get set I pick a box and start in drawing the nuclei.

Photoshop is obviously the workhorse as far as actually putting pixels together, but by starting with a pen and paper and working the design from a top-down view and a tiny bottom-up view, meeting in the middle helps me get going once I jump to a computer.