Contact Join Newsletter

How I Created Ockham Design

Design Phase

Duration: 14-20 hours

Here's how I think as a designer:

• Where should the logo, menu and secondary menu be in relation to each other?
• How big should the logo be relative to the menu and the size of content?
• Will design in 1024px work better than 800px for the target audience?
• Where should the secondary menu be in relation to the content to make it easiest to navigation (dropdowns beneath the main navigation or on a column beside the content?
• What is it that I want the visitor to click on first when on the homepage?

As a designer, I ask myself a lot of questions before I put a single pixel on a page.

These questions help me formulate my design strategy. For example: how wide should the site be? I decided I would design for 1024 wide since most of my clients are other designers.

However, I design at 2 different widths for 1024 resolutions: 972px and 891px. I use a grid system of thirds when I design. I use those two widths because they can be divided into thirds 4 times.

This time I chose to use the 972px grid.

Also, I had a set of requirements beforehand that I wanted to incorporate into the design. These requirements were:

• I wanted the design to be a bit asymmetrical using curves or angles.
• I wanted to use a large footer.
• I wanted to focus on good typography.
• I wanted something artsy but clean and corporate at the same time.
• I wanted the design to be just a little bit different.

The other thing I do on a daily basis is the scan all the design on CSS Mania and a bunch of other web design aggregation sites. It let's me know what's out there. Design doesn't happen in a vacuum and sometimes my biggest inspiration is trying to do something a little bit different from what everyone else is doing.

When it finally, comes to the actually design work, I design with Photoshop. I use grid templates divided into thirds that I created a few years back.

I start design by figuring out my layout first.

During layout phase, I do everything in grayscale. Layout is where I figure out which elements needs to be where and their relative sizes to each other.

Next I work on color. Then I work on typography. Finally, I add the visual elements like the floral vines at the bottom of my content and figuring out which stock photos to use.

The design process doesn't happen in one sitting. The 14-20 hours get spread over a week or two as I try different things to combine all the visual elements to work together.

When I'm done, I have a layered Photoshop file which I then need to code into clickable HTML.

Next: Coding Phase