“Design is in the details.”  - We hear it every day and it is absolutely true.  However, details without a blueprint to tie things together can lead to problems.   We are passionate about details, perfect grid alignment, perfect color combinations, gradients, reflections and textures.   These visual details have a major aesthetic impact on the website, but they can’t replace the content - The reason the website exists in the first place.

When working on the visual concept for a web design or application I always start with the epicenter.  

Epicenter design focuses on the true essence of the page — the epicenter — and then builds outward. This means that, at the start, you ignore the extremities: the navigation/tabs, footer, colors, sidebar, logo, etc. Instead, you start at the epicenter and design the most important piece of content first.37 Signals - Getting Real

I work in grayscale.  I use varying shades of grey and font size to denote emphasis and priority.  I work in sans-serif fonts and follow basic typography rules.  I let the content speak for itself.

Garrett Dimon gave me a great little tip: blur your design.

I often find it useful to zoom out and use a Gaussian blur on visual designs to ensure that they have a clear visual hierarchy and appropriate use of whitespace.Garrett Dimon

When I follow this procedure my designs start to crave their own details.  It becomes obvious what visual embellishments to use.  You can see the impact that a certain color or font has on your overall design blueprint.

As a left brained designer, I can get pretty close to a finished design with just this procedure.  Then I hand off the concept to a graphic artist to make prettier.

When it comes to design, I’m a firm believer in simplicity. Occasionally I’m criticized for being overly simple, but I take that as a compliment. In my design, typography, grids, color, imagery and especially whitespace all stand for themselves. They don’t need any fancy treatment or “web 2.0″ effects. They work because they are simple and beautiful in their natural state.

Grids are foundational to all my designs. I always sketch out ideas on a Behance Dot-Grid Book, (thanks to Garrett Dimon for sharing this a few months ago). While these square grids are perfect for sketching idea’s and concepts, they don’t work for fine-tuning your design.

Khoi Vinh and Mark Boulton both advocate grids which are divided into even vertical columns separated by gutter columns (usually smaller in width).

I’ve found that working from a base grid of 16 columns works really well in a variety of 2, 4 and 8 column layouts. I created a Photoshop grid template which meets my needs well. I share this with other designers occasionally and thought it could be put to wider use if I shared it here.

I hope you find it useful.

Edit: By popular request, I have also included my dot-grid printable page which I use for hand drawing UI concepts. The Behance Grid-Book above is great for formal ideas, but sometimes you just need a piece of scrap paper to scribble down some ideas. You can even make your own on-the-cheap dot-grid book with the PDF.

Disclosure: The dot-grid page was generated by an old resource on the net at imcompetech.com, but they seem to have disappeared.

• Baseline Grid (PSD)
• Baseline Grid (gif)
• Dot Grid Printable Page (pdf)

Download Files

Over the past 2.5 years we have become active in a niche market that I never dreamed we would become a part of… Machine Embroidery. I am not by any means a “macho” guy. I always thought these sewing projects were done by conservative grandmothers in-between servings of prunes. I was naive and judgemental, but captivated by the charm and sincerity of these people. In fact, it’s been one of the most rewarding experiences of my career.

Our most recent project in the industry, Embroidery-Academy.com has perfectly proven the values of iterative development.

Read the rest of this post »

Embedding fonts in your website through CSS has been a widely anticipated feature. A recent post at A List Apart has brought more light to this issue recently. The excitement behind this revolves mostly around removing creative limitations and improving readability through better typography.

However, I anticipate the use of embedded fonts will make things much worse, before they get better. Stephen Coles and I are in much agreement on the issue.

Read the rest of this post »

When a user clicks a link on your (or any, for that matter) website, they expect the new web page to appear in its place. To navigate back to places they have come from, they click a ‘Back’ button on their browser. This has become normal for all internet users and is the experience they expect to have. Breaking the expectations of your users can lead to confusion and disappointment: two words usability experts despise.

It’s amazing to me that this is still a controversial topic.

Read the rest of this post »