Centre For Design, eZ Publish Case Study - Interface Design

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.