it
& communication services
In Summer 2003, following positive feedback for the IT
Centre website work, I was asked to redesign the ITCS website
in totality.
 |
- I went through the old site to define the information
that appeared most useful.
- I visited different sections of ITCS to assess their requirements
for information to be available on the ITCS website, to
ensure that the information would be relevant and up-to-date,
which would mean that students would use it, and thus stuff
would feel it worthwhile posting information.
- I designed the design/structure as illustrated here, in
PhotoShop, for someone else to build (using XML). I was
concerned to provide various entry points to the information,
whilst making categories clear, and a useful search function.
- Large sections of the site were intended to be relatively
static, with notes to be made of sections that would need
constant revision and updating.
|
 |
Internal pages were intended to maintain the main 'look-and-feel'
of the front page.
- The central area was provided for content, with pages
intended to be short/subdivided where possible in accordance
with the fact that web content is harder to read than print
content. The width of the page was set so that all information
appearing in the content area printed on A4 paper.
- The top bar contains static links to the main sections
of the site, as they appear on the front page.
- The 'How do I...?' bars on the left hand side were designed
to change according to which section staff/students were
in, with some questions applicable to all areas.
- The right hand side bars contain a search function (desired
by approximately 50% of visitors), a system status bar which
was intended to run on a 'traffic light' colour code, a
monthly article ('Focus On...'), and information on current
viruses.
|
 |
The end product, as designed by one of the College web developers,
is as on this screendump, with the basic structure largely
remaining as planned, although some constraints were imposed
for various reasons.
- Management decreed that grey was too 'dull', and wanted
a more 'cheery' blue.
- A fixed-width site structure was used, for small screens,
rather than the usual fluid structure that I prefer from
table layouts.
- The system has been used for extensive testing, and was
eventually designed to form the basis of the College internal
portal.
|
 |
Due to developments within the ITCS department, a new portal
design is being used, but the content and structure already
provided on this site will be re-used for the ITCS section
of the new portal, which encomasses the whole College.
- The top bar maintains the same number of fields, but has
the flexibility that these fields can be changed. A warning
exists that it is not a good idea to change this once the
site has 'gone live'.
- In the 'How do I...' section, an extra field was added
at the base to ensure that all entries for that section
could be seen, as every time refresh is pressed, the choices
change.
- The 'System Status' became too complex a project, and
has never been developed.
- Each content area has the capability to have links added
at the base of the main text (links are still possible within
the text), leading to sub-information for that section,
or related areas..
|
 |
The front page of the custom built web content management
system.
- Links are provided to each main content area, which then
offers sub-menus.
- Optional sections are provided for overall areas of the
site, including the main content structure, home page, the
'Focus On...' page, virus alerts, and the ability to upload
images and documents.
|
 |
An example of the internal pages for the web content management
system.
- The content areas are subdivided to provide a consistent
'look-and-feel' for the content areas of the website. A
title area, a summary area, and a main content area are
provided (which can also be worked on it HTML - a method
I use is to write the content in Dreamweaver, tweak any
errors, and then transfer the HTML to this area).
- At the base of the page, an field option is offered to
provide keywords (providing the same function as meta tags).
|
| Only available internally |
|
|