Designing in the open – a moodboard for chipcullen.com

I’ve been working on a new design for this site (I’m sick of using a tweaked version of Twenty Ten).

As part of that process, I tried mood boarding. Sad to say, I’ve never really done a mood board before. Better late than never, eh?

So, here is what I’ve got going so far:

A mood board for chipcullen.com
A collection of pieces of design that I like, that I'm trying to use as a departure point for my design.

I know it’s very eclectic, but all of these pieces resonate with me on some level. My question is – do they coexist well? It’s a mishmash of fonts, colors, and styles, but there is a thread there.

What do you think? Does this mood board “work”? I’d love to hear it!

Read More7 Comments

Book Review: Ordering Disorder – Grid Principles for Web Design

I pre-ordered Ordering Disorder: Grid Principles for Web Design by Khoi Vinh as soon as I heard about it being published. Vinh is a designer that I admire a great deal, and knew he was as good of an expert on web layout as anyone out there.

Overall, it is a great book on a subject that, while popular in the web design blogosphere, has not had much physically published about it. There are a plethora of books on grids in what Vinh refers to ‘analog design’, but none on grids in web design.

(It should be noted that Mark Bouton, author of a seminal set of blog posts on grid based web design, will be publishing a book on this subject through his own imprint, Five Simple Steps.)

I like that there is an entire book devoted to the concept – it gives Vinh the space to articulate thought than is sustainable in blog posts.

The book is broken down like this:

  1. Introduction
  2. Concept
  3. Process
  4. Execution – this is the meat of the book, and what you’re paying admission for
  5. Conclusion

I’m afraid that many readers might skip chapter 2, “Concept”, and it’s a pity. Vinh deals with what grids are, they’re history, and the difference when it comes to the internet.

The history of grids won’t necessarily help you when you’re on deadline, but it helps to know why and how grids were developed. They were developed to deal with a particular set of graphic problems, especially in the 20th century. While web design has similar problems to deal with, there are some fundamental differences – what Vinh calls the need for “conversational” solutions. A conversational solution takes into account what the designer is trying to accomplish, what the technological context of the solution is, and how the user is receiving it.

Chapter 3, “Process” is a short but vital chapter. Vinh (briefly) goes into researching solutions, figuring out what restraints one must deal with, sketching, and grid terminology. You could almost write a whole book on what he goes through in nine pages.

Example Page from Ordering Disorder
Khoi Vinh shows you how you can develop layouts
The main attraction is chapter 4, “Execution”, where Vinh takes an theoretical project and shows you how to develop a grid system for it. The example website has four ‘kinds’ of pages, and Vinh develops layouts for those four page types. For this sample site, he starts with the restraint of having to accommodate a large ad space, and works the rest of the system out from there.

Some highlights for me were:

  • Don’t start with the homepage when developing a grid system – start with content pages. I usually work this way anyway, but Vinh articulates the point well.
  • Grids on the web should account for the behavior of content – text should rarely but right up against the edges of columns in a grid
  • Baseline grids, while helpful, cannot be adhered to by every element on the page. It’s just not practical, so let it go!

Vinh has proven himself to be a clear, articulate author on his blog, and that is also the case in his first book. One thing that I really appreciate is that in the development of these layouts, he takes the time to go back and change things, to show you how a grid can evolve in the course of a project.

He does NOT delve into the technical how-to’s of how to execute a layout in HTML & CSS. You won’t find a tutorial on the 960 grid system. This is by design, and I think it’s a good decision. This book is about the thinking that goes into developing a grid, not trying to clear floats.

The one criticism that I can offer is that I wish that there was a greater range of example projects/problems. The example site has one restraint (an ad) that dictates how the rest of the layout is formulated. That same restraint is used over and over. I would have appreciated at least one example of a layout designed for a different restraint altogether – maybe a different example site.

I wholeheartedly recommend the book, though, for both beginning designers and seasoned pro’s. If you’ve also read it, or have questions, I would love to know in the comments below!

Read MoreLeave a comment

LINK: 4 Predictions for Web Design in 2011

4 Predictions for Web Design in 2011 by Jacob Gube.

This is the second great article I’ve read on Mashable this week. Good jorb, guys!

Anyway, these are four predictions about what will happen to web designers. The first two – mobile going mainstream, and specialization of skills, are pretty safe bets. They’ve been the same predictions people have been making for a while now.

The third one intrigued me, though:

Simpler Aesthetics for Websites

I will say that I am hopeful that this is true. Jacob’s argument is that designers are starting to forgo visual complexity in favor of simplicity, and that this has been greatly aided by the emergence of true web typography.

Maybe with real typographic resources at our disposal, we will be able to express site’s tone with just a font choice, and not have to introduce a lot of other visual elements.

That hopefully will mean simpler, more thought out solutions that work better.

Here’s hoping for the best, 2011!

Read MoreLeave a comment