call:0141 881 8915
email: info@moreclickmarketing.co.uk

Our Work

  • click to learn more about MCM-Hotels project
  • click to learn more about Ocean-Village-Reviews project
  • click to learn more about Find-that-Hotel project
  • click to learn more about Thomson-Ships project
  • click to learn more about Ninja-Battle project
  • click to learn more about Jolly-Soft-Toys project
  • click to learn more about J-%26-S-Painters project
  • click to learn more about MIG-Contracts project

Web Design Basics Part 2: Drafting Your Initial Design Specifications

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.

 

JMB Bookkeeping site
One of our previous design clients

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
Security
  • All passwords for cPanel, admin section and email accounts will be sent to client securely
Website Design
The website should:
  • 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
A dual-navigation will be used throughout this site. The top navigation will cycle between services. The main navigation will link to other pages.

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

  1. Review design brief*
  2. Issue initial design specifications
  3. Research competitors
  4. Draft initial designs*
  5. Begin build
  6. Testing*
  7. Site launch*
* denotes a project milestone

Long-term Tasks

  1. Issue login details
  2. Site maintenance
  3. Security audits

Next Post

The next post will be Web Design Basics Part 3: Using Sketching to Influence the Design Process

September 28th, 2011 by | Leave a comment

Leave a Reply

 

Testimonials testimonials icon

More Click Marketing provided a really professional service and I was kept up to date with the progress of my design.

J&S Painters

Fast service. I was using my website in two weeks and a week after that I received my first order for work. Websites look very clean, fresh and professional. I recommend MoreClick Marketing to everyone.

MIG Contracts

Twitter Updates twitter icon