How do you write a clear design specification?

December 19, 2007 2:43 PM

I run a small, clunky UK political blog. It needs a New Year spruce up. I love blogging but am as near as you get to being technically illiterate. Fellow Brit bloggers are going to help me with the techie stuff but I need to give them a design specification. I don't really know where to begin. What goes into a good design spec and can you point me to examples of other well designed blogs?
posted by baggymp to media & arts (9 comments total)

Are they asking you to provide a stylesheet yourself, or just a design?
posted by sonic meat machine at 3:04 PM on December 19, 2007

They're just asking what kind of design I want. Working on the principle that you should be careful what you wish for, I want to give them a clear steer.
posted by baggymp at 3:11 PM on December 19, 2007

Wireframes, click-paths (what you want in a menu, and underneath), drawings. Crayon. A spec is just formalized design ideas that you want to be implemented, to whatever level of detail you can muster. Typically you can go back and forth with implementers and designers to get some photoshop mockups as the (eventual) final design.
posted by rhizome at 3:25 PM on December 19, 2007

Well, there are a few things to consider. First is color scheme. There are a thousand good sites about color theory, but basically consider picking one color and using white/black and shades of gray along with three shades of that color. That's usually a good, "safe" style.

Consider font. Most of the time, sans-serif fonts are best for screen display, but you might be writing about 17th century politics or something and want that serifed font "look." Remember that you can't choose a font in the way that you would in a word processor; you can just make a suggestion to the user's browser.

Consider screen elements, like menus and headers. Do you want them to float on the right side of the browser window, always present no matter how far you scroll down? Do you want little pop-out menus? (These can be a pain.) How big do you want your titles to be? Would you like a line under them? Basically, just mock up what you'd like for your page to look at and hand someone an image with notes.

As for examples, well, Metafilter isn't badly designed, though it's a bit plain. Slashdot is too busy for my tastes. The Wordpress site is pretty good-looking, though many of the users' themes are terrible.

This article on the principles of design is fun, but doesn't deal with many of the technicalities of CSS, HTML, and so on. Sit down with one of your techie buddies and have a nice, forthright discussion about how Internet Explorer is the embodiment of Satan. This might allow you to nix some of your crazier ideas, too.

IE is terrible because it doesn't adhere to standards, breaks the standard CSS box model, and doesn't respect such fundamental elements as the "z-index" property. This means that many designs which conceptually should be simple to implement are actually quite difficult.
posted by sonic meat machine at 3:28 PM on December 19, 2007 [1 favorite]

Assuming your blog is the one you link to in your profile, it's a Wordpress blog. There are thousands of canned Wordpress themes out there, and even if they're building from scratch, the diversity of WP themes should give you some idea as to your range of options.

Here's a list of 83 themes that some guy likes. Here's a more or less complete list of WP themes. You can slice and dice that in various ways, including by popularity. It would be useful to browse themes that you like, take notes, copy some screenshots.

Your designers are going to want to know things like:
- Color scheme
- Typography
- Page and line metrics (fixed or floating page width? column width? line leading?)
- Number and placement of sidebars
- Amount of metadata and other frills to display together with each blog post
- Placement of navigation links, what links get top-level placement
- Content of sidebar widgets
- Navigation options (will you have a monthly archive? category archive? tag archive? what will these archive pages look like, and how will you reach them)
posted by adamrice at 3:49 PM on December 19, 2007 [2 favorites]

Pretty much what adamrice says. Shaping design by examples and explaining exactly what you like about a certain (aspect of a) design is the way to go if you're not knowledable on the topic. Additionally, you might want to check out these sources for more inspiration:

stylegala

smashingmagazine

webdesignerwall

cssimport
posted by Foci for Analysis at 4:06 PM on December 19, 2007

So, I looked at your site and I was like, oh my God, it's Tom Watson! I really liked your blog while I was covering the Birmingham and West Brom council elections in 2004. But of course, I'm a Villa man myself. I really recommend SmashingMagazine's stuff, which I am using to build a business blog right now.
posted by parmanparman at 6:19 PM on December 19, 2007

When I get design briefs from clients, they have to include at least five websites you're like yours to be like, and maybe a couple you'd hate to have it be like.

Tell them why.

This is after way too many people saying "we want something, you know, funky!" Or "it should look kinda modern!". That means one thing to you and another thing to me. "It should look modern, like engadget does", is worth 1,000 words*.

* technically, 1,024
posted by AmbroseChapel at 7:03 PM on December 19, 2007

The most important thing is to find a way to convey the bits you're the expert in (how the blog should 'feel', your audience, what the site needs to focus on, etc.) well enough for others to do the bits they know about (design, coding, etc.).

Don't get too caught up in thinking about colours, or fonts, or even web sites you like the look of. Take it to a higher level than that, and try to get across the desired tone of the site, the impression you want to make. You don't have to use any design terms or try to sound arty, use whatever you can, refer to well-known brands, or a magazine, or a TV show, or a person who embodies part of what you're trying to do. It might seem a bit silly or pretentious, but a good designer will appreciate it as a starting point (a bad designer will just want a few sites to rip off).

You should also try to list the pages (site map), and what needs to go on each page. Highlight any new features, and if you're unsure about something then say so. Both the designer and developer need this information, and hopefully will point out mistakes/omissions and make useful suggestions. If the site's overall architecture needs a lot of work then you'll want to exchange ideas with someone experienced in planning web projects beforehand; it's not rocket surgery, but there are lots of 'common sense' things that are easy to miss if you don't do it for a living.
posted by malevolent at 2:43 AM on December 20, 2007