layout sketches with bender

Okay, I admit it. I am definitely wasting time here. But robots are cool and Bender is the coolest of all robots.

Then Comes the Look

With the brief and goals established and the tools selected, it’s time to start making some decisions about how it will all work and because this is a design portfolio site, how it will look. Where to start? With sketches of course! Lots and lots of sketches.

Before I returned to school to brush up on my web design skills, I didn’t really have confidence in my drawing abilities. Because I approached my Graphic Design career completely backwards, I was never really forced to do much sketching. That all changed when I returned to school. At first I was resistant about having to do so much sketching when I had a perfectly acceptable design already formed in my head. But after three semesters of classes that were heavy on preliminary work, I came to realize that I arrived at better solutions when I explored potential designs on paper first. There’s plenty of research and information about why sketching is a beneficial practice for Graphic Designers, but the best reason I can think of is that I arrive at more creative solutions and that makes me a better designer.

I spent more hours than I care to count drawing page layouts for this site before I ever moved to the wireframes. Here’s just a sample.

preliminary website sketches

Some preliminary website sketches based on my original portfolio book design

project gallery sketches

Working out the look of my project gallery

more project gallery sketches

More project gallery sketches

mobile first design sketches in color

Mobile first… Sketching out how the site will look on a small screen.

blog post detail sketches

Color blocking sketches is a great way to see how your color choices will play off of one another.

more layout sketches in color

With my layout finally nailed down, I like to continue to explore how different areas will be treated.

It may seem a little excessive, and for this project, I definitely went further than simple sketches, but these drawings became invaluable when it came time to rough out the pages of this website. They were also extremely helpful in keeping my branding consistent when it came time to update the layout of my portfolio book.

NOTE: This is the third installment in a series covering the creation of this site.