Building Design Bricks

A common style of designers starting out is to build with what I call “design bricks”. A design brick is a Web page design that is a only an image or set of images exported from Photoshop, Illustrator or any digital imaging software.

You can see an example of a design brick at the web site for Cellar Grille. From what I’ve been told by my friend, they have some great food.

Also, I know just by not even going to the place myself (which is about two hours from where I live), that their menu is looks good, too. How do I know that? Well, their designer exported both sides of the menu from their design program and placed both sides as one image each on one web page.

There are several reasons not to design bricks, but I’m only going to touch on a few. (If you are familiar with building sites with CSS, you know these reasons since they are pretty much the same ones.)

For starters, spitting out large images as Web pages is not designing to the medium’s strength. The Web is an imperfect place to design. Where rigid control over the design found in print design is the understood norm, the Web is the wild west. Users have final say in how they view your content and the design that forms that content. 

Fonts can grow to be large to help visitors with poor eyesight read your blog. Images might be turned off since they take to long to download. And people might not even want to install Flash because, well, in the wrong hands Flash can be poorly done.

How can you design for this frontier? You can shore up your fonts and presentation through a system that’s come to be called “bulletproofing”. For more information, check out Dan Cederholm’s book called Bulletproof Web Design.

Another reason is maintenance. When you are in charge of several web sites, being able to update the content needs to be a painless process.

I’ve had design students who will promise me that exporting a large design brick is easier than editing a text file. I don’t believe them since some HTML editing software I use has FTP capabilities built right in. In theory, I could open the file directly from the server, edit the content and hit save before the end of television commercial break or before Photoshop has finished loading its menus.

The third reason is copy and paste. I’m reliant on the web for making my life easier. If I need to tell someone about a great product, service or company, I want to be able to shoot over the link in an email, but I also send a snippet from the site’s content to entice my friend to check out the site. 

More importantly, there are going to be times when I want to place contact information into my address book. Copy and paste makes that a mindless exercise. If that contact information is trapped into a large image, how long is it going to take me to copy that text into my address book?

The quicker you allow your content to be distributed, the farther your site’s reach will be. Getting a web site design together and putting it on the web is just the start. Making sure people can make efficient use of that content is one more step you can make.

The last reason I’ll touch on is search engine optimization (SEO). By having your content in an image, a search engine like Google won’t be able to know what’s in your site. If it doesn’t know your content, it won’t know how to place it correctly in the search engine rankings. The way to circumvent that is to have the Best Web Site Ever to make sure people all over the world are talking about your design brick. But that’s going to cost money and the last I checked, a 30 second spot for a Superbowl ad is a bit over two million dollars.

So, when you are designing for the web there are challenges, but don’t try to circumvent them by making a web design one large image. Face the wilderness of the web head on. It may feel like you are hitting a brick wall the first few or several times, but you will get the hang of it punching through in no time and become a better designer for it.

4 thoughts on “Building Design Bricks

  1. This article is very practical and right on target. Of course, I shouldn’t be talking, my landing page is entirely designed in Flash…oops — SEO nightmare #1.

  2. Christopher, really enjoy your blog here and want to say love the read on your Designing CSS…! just getting into it with a redesign starting with biz website. Another question, in your book you mention on page 24 “page navigation” which is hidden. From your explanation, I am still not sure what this is for? Can you or someone reading this help me out? 

    A novice hopefully to become proficient,


Leave a Reply

Your email address will not be published. Required fields are marked *