Website Homepage Mock

A sleek, professional design that looks more modern than the current site (http://www.instituteofroofing.co.uk) and reflects and attracts the professional, senior executives who are members and potential members.

Whilst many of their members are senior execs they will often not have had an office-based career and may well be quite impatient with computers. Ease of navigation is critical.

Design needs to read/view well on mobile devices.

Coming with this document is the new logo which they have had designed. As you can see it projects a solid, reliable, serious image but is also quite stylish. These are the only colours it will be used in and so the site design should take that into account.

http://www.votivemedia.co.uk/IORlogo.pdf

Institute of Roofing

Company Name
Institute of Roofing
Type of business
Professional Association
Area of business
Providing continuing professional development and high-level networking opportunities and other services to directors, chairpersons, senior executives etc in the roofing industry.
Market
Senior executives etc in the roofing industry wishing to increase their marketability and networking opportunities through membership of a professional body. Covers whole roofing trade including companies working on domestic roofing, public sector contracts and major corporate contracts. Covers different types of roofing from slate to metal etc.
Competitors
No other organisation targets its services directly at the senior exec of a roofing company but there are other more general organisations which target the trade as one of many trades within the construction industry. Here are some examples:
* http://www.ciob.org.uk (Chartered Institute of Builders)
* http://www.fmb.org.uk/join/index.asp (Federation of Master Builders)
* http://www.cibse.org/ (Chartered Institute of Building Services Engineers)
How site will be used
To inform members of changes in regulation, to set up email communication with members, to recruit new members by signposting them to the site via stationery and other paper and electronic communications. To maintain a diary of events and information about regional activities. It will be updated by the Manager of the IOR and perhaps also a secretary, in conjunction with members of the Board of Directors.
It will mainly be viewed from desk or laptop computers. However, with a very mobile workforce that is often out on site, there will be considerable use of mobile / hand held devices and the site will need to be easily viewed and navigated on these.
Design

Overview
A sleek, professional design that looks more modern than the current site (http://www.instituteofroofing.co.uk) and reflects and attracts the professional, senior executives who are members and potential members.
Whilst many of their members are senior execs they will often not have had an office-based career and may well be quite impatient with computers. Ease of navigation is critical.
Design needs to read/view well on mobile devices.
Coming with this document is the new logo which they have had designed. As you can see it projects a solid, reliable, serious image but is also quite stylish. These are the only colours it will be used in and so the site design should take that into account.
Graphics
No really great graphics owned by IoR so suggest that the designer uses something like Istock to source graphics. Please bear in mind that they want more the executive type image – people in suits with plans laid out in front of them, rather than people with hard hats and hammers – but should still have a construction feel/theme. Also, please consider a good ethnic/gender mix as it’s important to them that they show they welcome people from all backgrounds to play a role in the organisation. I will ask IoR to have a look at Istock and pick out some pics and will send you comps when they have had a chance, but please don’t let this hold up the designer from getting started as it may take some time and the designer may be able to source better and more appropriate pics anyway.
Site Layout
Horizontal navigation bar along top or near top of page (and repeated right at the bottom a la http://www.peacemakers.org.uk site) of all pages, with a space under the left hand end of this for sub links, depending on which of the top level links in the main horizontal nav bar has been clicked on. This would be as per the http://www.dowchemicals.com navigation system, with ‘sub- sub- menus’ as an option as well (click on ‘investor relations’ on the Dow site, then on ‘presentations’ for example of what I mean).
At the bottom of the page, or somewhere else visible but discreet, there should be space for links to basic legal disclaimers.
Top level/main nav bar links:

* Home
* News & events
* Membership
* Education
* Resources
* Regions
* Links
* Contact
Sublinks for each of the pages:

Home:
* About us
* Frequently asked questions (with list of questions at top and links down to the answers below)
* Constitution and rules
* Articles of the Constitution
* Contact us
News & events:
* Events Calendar
* AGM (and .pdf of invitation to AGM)
* Bulletin
* Archive (for previous .pdf editions of newsletter)
* Sign up form for e-bulletin and management system to include ability to manage emails and write e-newsletters
* Contact us
Membership:
* Why you should join
* Benefits of membership (inc link to/pdf of CSCS App form)
* Membership grades
* Routes to membership (IOR App form as .pdf or Word)
* Upgrading your membership (IOR Updgrade form - .pdf or Word)
* Continuing Professional Development (Downloadable CPD log – Excel?)
* Fees (Payment form .pdf)
* Contact us
Education:
* Training courses
* Exam requirements (sample questions in a .pdf)
* Distance learning
* NVQ (National Vocational Qualifications)
* Contact us
Resources:
* Legislation
o option to insert lists of laws in sub-sub- menu
* Regulation
o option to insert lists of regulations in sub-sub- menu
* Codes of Practice
o option to insert lists of Codes in sub-sub- menu
* Useful links (link to ‘links’ page here)
* Acronym glossary (with links from elsewhere in the site where acronyms are used and need explanation)
* Contact us
Regions:
* Regional events (link to ‘News & Events – Events Calendar’)
* Regional contacts:
* Scotland
* North East
* North West
* Eastern
* Southern
* South West
* Midlands
* Northern Ireland
* Contact us
Links:
* Sponsors
* Trade Associations
* Training Providers
* Government Organisations
* Contact us
Contact:
* IOR national contacts (list of names, phone and email in main body area)
* IOR regional contacts (link to ‘regions – regional contacts’ page)
* Sponsors (link to ‘links – sponsors’ page)
* Trade Associations (link to ‘links – trade associations’ page)
* Training Providers (link to ‘links – training providers’ page)
* Government Organisations (links to ‘links – government organisations’ page)
* Contact us
NB Client will need to be able to create new sub- and sub- sub- links for the menus, but the main nav bar should be locked and fixed.

Sites liked (and why) (NOT in choice order)

1. http://www.ciob.org.uk
The client likes the sleekness of this design and the ‘serious’ feel of it. However, it is also perceived as ‘dull and grey’ so any design that used this one as a jumping off point would need to inject some colour and excitement whilst retaining the sleek feel of it.
2. http://www.architecture.com
The client likes the professional and ‘design conscious’ look of this site, but finds it hard to navigate as the picture dominates so much of the first page. Other pages can look very dull with no graphics.
3. http://www.intute.ac.uk
The client likes the ease of navigation here which is achieved by use of colour and having different parts of the site for different types of links. It copes with a huge amount of information/options. The client likes the use of colour to make it lively and also to signal which part of the site you are in (by use of different colours for different educational themes). ‘Even though it’s complicated you always seem to know where you are on this site’. This site is more complex than IOR are looking for overall.
4. http://www.dowchemicals.com
Very popular – combines simple and clear navigation system with attractive and ‘classy’ overall look. Businesslike - not full of wiggling and moving bits. Use of images is great – positive and prominent on the page but still leaving lots of space for information (unlike the RIBA site).

Sites not liked (and why)

1. http://www.instituteofroofing.co.uk (!!)
‘ugly’ ‘old-fashioned’ ‘embarrassing’. The client doesn’t like the navigation system, the colours or much about it at all.
2. http://www.bconstructive.co.uk/intro.asp
Too bright and young looking a site for the IOR – also a bit too busy. Aiming for something that looks simpler and more mature.