Interface Design
As the client had such an outstanding reputation with world thinkers in the environment
design sector, it was imperative that the site looked and felt like it was a unique
individual with best-practice design sensibilities and an inspirational interface.
Visual Design
Earlier, the Centre for Design had a terrible logo – very 90's, hard, and academic. The
first job was to talk the Centre into getting a good visual device, i.e. a logo, to associate
their name with. We recommended a logo designer and with the brief he came up with a
logo the Centre is very happy with. We then moved on to navigation.
Once we sorted the exact number, type, and informational priority of navigation items, it
became easy to display them in an innovative, yet clear and logical manner.
The home page design needed to have a real personality and the secondary pages needed
to draw on that personality to surround the internal content without intrusion:
• The site had to say: we are modern, eco-sensitive, unique, dramatic, and 'we
are where design is at'
• It had to be: non-threatening, classic, timeless, and easy to navigate
• It had to have: the Centre's purpose clearly displayed, and the navigation near
that area
Our initial concepts are shown in the following screenshots:
The winner (shown below) was only selected after it was repeatedly put forward by us as
we felt it had all the answers. The Centre grew to love it too.
All the Centre's print background material of graduated blue was incorporated, but
without dominating the site. This way all the Centre's presentation material design was
aligned with the site being the pinnacle of their offering.
We proposed that the secondary page should look like the following, reflecting elements
from the home page:
HTML Prototype
For every template defined in the information architecture, we created an HTML page
that combined the information design with the interface design. These pages were then
linked together to create an HTML prototype of how the site would work once
implemented.
The HTML prototype is like a static hand-built version of what the end site look like.
Every path and navigation option is displayed, and style issues, such as how and where
headers and images are displayed are addressed. The HTML prototype becomes the style
guide for the site. The actual HTML is then used as the basis for the templates created in
the CMS.
This step is important for two reasons:
• Client review: After many months of meetings to gather requirements and
work out specifications, the HTML prototype is the first tangible result that
the client gets that is not a document. They can look and interact with the
HTML prototype. They can comment on how it works, how it looks, whether
it meets their expectations, and so on. It's much easier to comment on
something that you can interact with, rather than a document you just read.
• Testing: The HTML prototype also provides an excellent opportunity to test
the information and interface design as well as the actual HTML in various
browser/OS combinations. Once applied to the CMS, it takes a lot more work
to make changes, which may also flow on effects. As the implementation has
only started, this gives us the chance to fine tune and update without having
to rewrite code, which is easier and far more cost effective.
In the case of the CFD site, the HTML prototype raised a number of issues.
The Home Page
The home page looked fine as a design presented in .jpg format, but when constructed,
we encountered problems with browser compatibility and scalability. The design was
optimized for 800 x 600 resolution, so for screens with greater resolution we needed to
ensure the background extended gracefully. This was easy to fix in the more popular
browsers but was a bit trickier in older browsers such as Netscape 4.
Section Pages
Most of the section pages were straightforward, with the main navigation on the left of
the screen, sub-navigation down the right, and content in the center column, i.e. the
classic three-column layout. This was easy to scale for different resolutions on the
common browsers. The only issue we found on most section pages was making sure the
sub-navigation allowed for long link names, for example, "Process of delivering
Sustainable Buildings and CM education". Our previous experience taught us that clients
have a habit of having very long titles, which the CMS uses as the link to that content.
The section page that proved more difficult was Publications. On this section page, the
content was split into three columns and there was no right-hand sub-navigation.
It took us several iterations to balance getting the code to work, making the page look
good, and keeping it flexible enough for the content.
Publications Section
Research Section
Sustainable Buildings Section
Content Pages
For every content type, we had to create an HTML page that displayed every element
within each content type. Browser compatibility was not a problem as these pages reused
the structure of the three-column sections pages. The challenge was in setting the styles
for the different elements for each content type as well as accommodating the formatting
that the client would add through the online editor. We started by applying a standard
style for the headings and content for the description of each element. Then we reviewed
the examples of each content type to see if the style worked well or if there were certain
elements within a content type that should be presented differently, for example,
Introduction, Abstract, and Credits.
Project Content Page (Introduction shaded differently)
As an approach to test and refine our websites, we have found building HTML
prototypes to be extremely valuable.