homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
Forum Library, Charter, Moderators: not2easy

Site Graphics and Multimedia Design Forum

What makes a good web design specification?
Writing a spec that get the most from a designer.

 3:17 pm on Dec 15, 2008 (gmt 0)

I am writing specs for differet areas of site development and the most challenging is the development of graphics, photography, template, design etc.

It seems to take much longer to specify design elements that write detailed functional spocs for php / .net - is this normal ?

I wondered if designers here would say what makes a good spec from your perspective ?

How it should be written, what info to include, how much upfront work should the client do?

Is original logo and icon development a separate project from PSD template development and iStock sourcing or can all 3 be done by the same skillset, at the same time ?




 5:09 pm on Dec 15, 2008 (gmt 0)

Hi Aspdaddy.

When you say specs are you referring to those given to the client before a contract is signed - at the proposal stage. Or those given to a designer after the deal has been brokered? Or both?


 7:43 pm on Dec 15, 2008 (gmt 0)

I think the second one is more accurate although its done prior to selecting a designer. It is the contractual document that describes what needs to be done, what the deliverables are, what the milestones and payment schedule is etc.

If you had to create PSD mock-ups of all the UI & presentation elements for a CMS project, what info would you need ? How would it be communicated ?

The problem is that if its specified like the functional elements that involves me making all the design decisions, those which I want the designer to make.


 12:04 pm on Dec 17, 2008 (gmt 0)

OK, you're effectively writing a design brief. They consist of many parts, both factual and interpretive.

From my experience the secret to a good brief is enough detail to lead, but not influence too much. If the designer is good at their job, they should be able to envisage what you need from what you've written, then run with it.

Typical brief elements are:

Project Overview

» General project information - summary/background.
» Contact details & liaison points.
» Goals of the project.
» Deliverables Required (website, logo, company stationery...)


» Primary target audience - location/niche/cultural/historic links...
» Audience profile.
» How will your audiences use the collateral?
» What, if anything, should be avoided?

Project Message - Features, Benefits and Values

» Features and facts about the project, service or organisation + its value to target audiences.
» How do these compare against the competition?
» Main competitors?
» Try as best as you can to describe the project/service/organisation in one sentence.


» 'Modern but casual', 'formal and vintage', 'corporate and technical'...
» What do the audiences believe or think, before you start communicating with them?
» What kind of voice and imagery should we use to engage them?
» Examples of of imagery/copy that they like - the designer has the right to reject their love of Comic Sans ;) - so long as they can rationalise the decision.

Budget, Timing and Resources

» Has a budget been approved? - at the very least a ball park figure should be supplied.
» Are there any target dates for project release - e.g. conference or radio ad..?
» What is deadline for delivery/launch?
» Any specific/exisiting collateral to be included (stock photos, logo, straplines...)?
» Is the client supplying copy?


» Who is the point of contact (client side)?
» Date for client to supply project relative documents.
» Internal review and approval process?
» Who signs off the final artwork?
» Payment schedule.


... Anyone got any more?

In short, a good brief can be the difference between an OK design and a really good one. Well that, a bit of luck and lot's of creative effort :)

Useful link - [designcouncil.org.uk...]


 12:18 pm on Dec 17, 2008 (gmt 0)

Specifically for website design I'd also require a site map - this shapes the navigation, gives an ideas of size and page type.

To help gauge this, in tandem with the site map - a wireframe with site-wide navigation/sub navigation/and content regions should be approved as early on as possible.

It is also worth mentioning that most projects of any substance require a series of page types to be designed - so specify the number of page types you need to be designed too.


 3:23 pm on Dec 18, 2008 (gmt 0)

Thanks limo, I am going to try this template out in a brieft tonight.

Deliverables Required (website, logo, company stationery...)

For a CMS mock-ups how would define deliverables needed?

There are various pieces of artwork, iStock , icons, which are used in pages. They may be custom created or sourced from iStock or photographed , or just be HTML/CSS code - I dont really mind as long as it looks good,

You are right about:

enough detail to lead, but not influence too much.

But some designers compeltely miss the point if its not explicit with examples, iStock etc, and then will just copy the examples if provided.


 5:11 pm on Dec 20, 2008 (gmt 0)

One more question.

Is it a good idea to allow the deliverables to be HTML pages or PSD and ask the contractor to specify which when giving the price, or should it always be PSD and then plan /budget for a 2nd project to convert from PSD to HTML.

How likely is it that designers who understand
concept, Features, Benefits and Values , UX and branding, also understand the nuts and bolts of good construction of x-browser HTML/CSS and Organic SEO ?


 5:50 pm on Jan 9, 2009 (gmt 0)

For a CMS mock-ups how would define deliverables needed?

Only really makes a difference if the back-end needs skinning, and that'd be a requirement laid out in the proposal.

If you expect the designer to code up the HTML/CSS - making them aware of the CMS's back-end tech + and its strengths and limitations is very useful. Same goes for E-commerce, or any tool that's not in the design layer.

The deliverables for just about any web design project are usually contain most of the following (sorry if some this seems really obvious - but I know a lot of people who don't seem to use process led design):

1. Sitemapping
Either the designer/IA does this, or one is provided by the client and is refined by designer/IA. This should be detailed, explaining user processes AND structure.

2. Wireframing
A rough mock-up, usually just the home page + 1 sub page - used to show the placement of page elements. Doesn't show style, brand, images, photos, icons etc. A design grid should be employed at this stage.

3. Concept design
Usually a couple of design options will be provided - 1 homepage + 1 sub page for each. Develops overall look and feel of the site. Colours, icon style, branding, photogrpahy, tone. Likely the design will use lipsum and low res stock 'comps'.

4. Design Development
Refines chosen page style and adds remaining page types and graphic elements - e.g. Home, sub-sections, lists, callouts, content, forms, galleries, icons, product pages, shopping carts etc, etc...

After the developed 'flats' have been signed off by the client, then coding can begin.

5. Technical Design
Usually just HTML & CSS - I personally think a web designer must be able to create decent markup and top notch CSS even if they may not be tasked with the technical design phase. A good design has these fundamentals at it's heart. Technical design is usually run in conjunction with the beginning of development - Flash, ActionsScript, Javascript, PHP, ASP, etc...

These 5 stages are the key components - variations usually lay within each part depending on the project type.


 6:12 pm on Jan 9, 2009 (gmt 0)

Is it a good idea to allow the deliverables to be HTML pages or PSD and ask the contractor to specify which when giving the price, or should it always be PSD and then plan /budget for a 2nd project to convert from PSD to HTML.

A professional designer or deign studio will be able to quote for both - if you wanted to do the the technical design, then they will provide 'flats' in the format your require. Or a working and tested front end—should you need it.

I usually break quotes up into the 5 sections listed above, deleting/expanding as appropriate.

How likely is it that designers who understand concept, features, benefits and values, UX and branding, also understand the nuts and bolts of good construction of x-browser HTML/CSS and Organic SEO?

Most webdesigners sway either more toward the creative or more toward the technical. I suppose it's genetic :) - rare to find minds who excel in both the technical and the creative...

That said any self respecting professional web designer should have a working knowledge of both. The knowledge may not run as deep as a pro SEM, for example, but the fundamentals need to be understood.

So I'd say, either hire a good team, or find people with a good overall knowledge and expertise and experience in the most relevant aspect of the project.


 6:41 pm on Jan 9, 2009 (gmt 0)

Don't overlook the stuff about 'URL format' for all your various types of pages.

Most people with a database driven site start by designing the database and then cobble something together to access those records.

They usually end up with multiple Duplicate Content issues, and ugly URLs.


Design it starting from the URL format for each type of page, and use that to decide what sort of data will need to be stored in the database, and what sort of rewrite rules will be needed to connect the two.


 3:22 pm on Jan 15, 2009 (gmt 0)

Re. Choosing a Designer: Check their previous work.
The brief for the Designer should request costs for each step, making it clear that the first draft of the first page is the first step. If his work is crap you can pay for that stage and find a better Designer. If you don't check the above first, and you have to pay him off, he will say 'My work so far is 90% of my quote".

Visual identity is a Design job in itself. If the client can provide their visual identity (logo, colours, fonts etc) then your Designer's job is easier. If the client needs a logo and visual ID - then you should agree a cost to create the visual id for their company. THEN agree a cost for the website design (which is based on the visual id).

budget for a 2nd project to convert from PSD to HTML.
The designer is not the html-coder. Choose a Designer because they are creative, choose a coder because they can do clean efficient code. Two very different people (with working knowledge of both skills).


 5:27 pm on Jan 16, 2009 (gmt 0)

You can also consider using a special software to make a prototype.

IMO its much better approach than preparing mock-ups. Its easier, its clear how product should look like and it will help you to check if product is designed properly.

As g1smd said, don't forget to prepare URL structure because good URL's should never change.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved