What is a design specification?
A design specification is a tool used by design teams to ensure all members of the team are “singing from the same sheet”. It is particularly useful if the project involves members from different organisations, to make certain everyone agrees on the features of the project, aims and milestones/deadlines. It’s sole purpose is not to connect teams. No, it should be used in good practice to make sure you (the designer) understand the client’s needs and wants.
A robust initial design specification usually contains the aims and purpose of the website, target demographic, both technical (scripting languages used for features of website) and non-technical specifications (how the design should look, scalability, security, accessibility) and guidelines for content. From here we will be using one of our previous customers as a case study to discuss the design specs. Information will be given on each element and our design spec for this customer will be in bold.
1. Aims and Objectives
What does your design client want the website to be used for? How does your client want the website to be used?
These are typically the first two questions in a design project. Ones that your client should answer. If you asked these questions when understanding the design brief, this is where you fill in the information.
Websites for small businesses differ from information websites and social networks. A small business wants a website to give information to potential customers, a place to show off their most prized work and a way of contacting them.
Social networking sites aim to connect people and they often collect their users’ data to give recommendations based on their browsing history and what they like.
Target Users
Who will be using the website? Is it for retirees? Teenagers? Single parents? Designers? Home owners? People looking for your services? The list goes on but it is important to know who the website is intended for because this will influence your designs.
Many retirees have a basic idea of how to work a computer and get to the internet. They tend to not keep up with current trends as much as their younger generation do so it would be important for a website they are visiting to not use a picture of a briefcase as a menu element for a company’s portfolio page. Likewise, teenagers tend to skim content of websites and so little attention is paid to incorporating large bodies of text in a website they would normally visit.
It may be the case that the website you are designing will include a requirement for staff to login. Should they have permissions to edit and upload content?
Non-technical Specification
Accessibility is making your site accessible to users with disabilities. Larger text on the page, text equivalents to images and as few images as possible to make load times shorter on slower connections are all aspects of accessibility. The W3C has issued recommendations on accessibility in website design.
Security is making sure your website and information it gathers adheres to the Data Protection Act and other security protocols within an organisation (if say, your client was a public service like the police or hospital).
Design Specifications covers the layout of each page, how the website “feels” as a whole site (professional, creative, basic etc), what icons should be on every page to increase the site’s usability and navigation layouts.
The appearance of the design should also be detailed in this section. Options of displaying the company logo on every page and colour schemes should be explained here.
Technical Specifications
Here, you will list how the website is to be built, the languages that will be used, like HTML/CSS, PHP, JavaScript etc, not too much detail is needed here. Your expertise will come into building the site.
Content
About Us - This section is should normally be provided by your client however it isn’t rare to find that you are required to write content for their site as well as design/code it. This includes who they are, what they do etc. (I will be writing about well designed about us pages in a later post).
Details of Services - Again, this should ideally be writ by the customer as they know their services better than you do.
Tasks
Initial Tasks will be outlined here to aid project planning and deadlines for completion of elements to get the site live.
Long-Term Tasks refer to tasks which will be started after the website goes live. These tasks include (if appropriate) development of scalability, performance and security audits, maintenance and updates.
Milestones
In project planning, milestones are typically accompanied by meetings with the whole team involved in the development of the site to share information and ideas at each key stage of the development process. It is a good idea to have consultations after the design brief has been received, before and after sending proofs to the client, after each phase of testing and after the site goes live.
JMB Bookkeepers Design Specification
Website Objectives:
This website should:
- Inform customers;
- Sign-post to other useful websites;
- Allow for potential customers to contact via email.
Target Customers:
The ideal customer who will be using this website will be a self-employed person who is looking to outsource their accounts.
Non-technical Specification:
Accessibility
- Text will be large enough to conform to Disability Discrimination Act (accessibility)
- all images will include alt text
- All passwords for cPanel, admin section and email accounts will be sent to client securely
- Look professional;
- Be free of clutter;
- Have a white background and black text;
- Use colours – dark-grey, manilla, dark-blue, light-blue and light-grey
Technical Specifications
This site will be built using HTML/CSS for the main site and PHP for the contact form.
Content
About us and Details of Services have been provided by the client and are omitted from this post.
Initial Tasks
- Review design brief*
- Issue initial design specifications
- Research competitors
- Draft initial designs*
- Begin build
- Testing*
- Site launch*
Long-term Tasks
- Issue login details
- Site maintenance
- Security audits
Next Post
The next post will be Web Design Basics Part 3: Using Sketching to Influence the Design Process
















