Tag Archives: Design

Designing for information

Lately I’ve been thinking about how we design information. We spend a lot of time thinking about the design of the homepage, top level areas and Faculty and Department sites but when it comes to content, all too often it’s a copy-and-paste job from a Word document.

The move to WordPress for many parts of the site will mean that the people who know about the information will have more control over how it’s presented on the web but there is still a risk that it will remain dry blocks of text because that’s the easiest way to get it online.

I want us to take a new approach to much of the content we have. We need to address each area of the site and look at what is important and the best way to display it.

One site I believe does this really well is the new beta Government website www.gov.uk. They’ve taken what can be quite detailed information and extracted the important points, structured it and presented it clearly.

Take for example times that the clocks change. The current Government website Directgov has the information on a page titled Bank holidays and British Summer Time but when the clocks go forward is only shown towards the bottom and requires the user to think:

Compare this to the new GovUK site where clock changes are shown on a page on their own titled When do the clocks change?:

Front and centre on the page is the information that probably 99% of people want – the next date that clocks change.

This is basic information but making it easy to find and consume is invaluable and it’s the type of information that universities have in bucket loads!

These pages get thousands of views per month and that’s just the start. Unstructured content can be redesigned too by breaking it down into stages and identifying the goal of publishing it online.

Changing how we design information is a big task and will involve us working closely with content owners but the benefits to our users, and the university, are enormous. Work starts now.

Go Success

Go was launched roughly three years ago and the overall aim was to make everything more accessible and easier for students. Specifically access to their Mail, File Storage, Discussion, Community, Library and Blackboard.

I would say over all Go has been a fabulous success, we have developed it a great deal over the past three years, improving it in ways more specific to certain groups of students. For example Health, Business School and Performing Arts students can all log into Go and see a taylor made area that allows them to submit assignments, get module updates and notifications about their course. Who’d of thought from this very first version we’d end up with something so dynamic.

The ‘news‘ area is split into four sections: general, support, learning and social. It serves to inform both staff and students of up and coming events; serious and fun alike and health and safety issues. It’s regulary updated to keep interest and to get out as much information as possible, too as many users as possible.

There are ‘panels‘ that can be moved around the page or removed completley, it’s up to you! In particular the ‘student learning‘ panel and the ‘student support‘ panel, they provide important information such as Term Dates and Exam Timetables.

Learning Services have created a video called ‘Learning Services 2010: Introduction to the Go Portal‘, it takes you through Go step by step: http://www.edgehill.ac.uk/study/accommodation/video/learning-services-2010-introduction-to-the-go-portal. It’s a very useful way to introduce you to Go, so if you are a student or a member of staff and you haven’t used Go, what are you waiting for!

A Brief Look at Tomorrow

the number 4

Over the next year we will be looking at ways to improve the corporate website; including a hard look at the design and structure.

We are currently focussing on our top-end homepages, and approaching them independently; rather than applying a uniform concept to all of them – like with our current grid. This is so we can focus on the client, and identify their narrative as a user. In plain English this means: look at what you want; send you to where you want to go; and show you some interesting stuff on the way.

About Interesting Stuff

It’s been long established that online users don’t sit and studiously read long pages of text; they intuitively fix upon interesting content, and ignore the peripherals.

The key is to have enough types of content to engage each user at whatever point in the story they’re at: for example it could be someone seeking a virtual tour of the campus, or a committed applicant making a decision on a course combination.

We intend to mix authoritative writing and strong imagery with relevant news and events, videos, student profiles, blog posts, and galleries. We want to combine formal and informal voices with contrasting media, to appeal to different needs and tastes.

What I’m doing as part of the process

Following on from initial conversations, I’ve been putting together a series of monochrome wireframes, so we have something visual to refer to in forthcoming meetings. We hope these will lead to healthy debate, and help decision making.

We will continue with a group approach when addressing navigation and design concepts. I’m expecting a lot of creative input from our team and corporate marketing, and I’m feeling very positive about the project.

New Homepages for 2010

We’ve recently used heatmap software to get an impression of the way people use our homepage; disappointingly, the central area, which we use to promote university achievements, major news and events, is often bypassed. This indifference is largely down to everyday visitors using the homepage as an entry point to the GO portal, but we are concerned that major announcements are going unnoticed.

We’ve had some strong homepages over the past year, as yesterday’s blog post attests; but we seemed to have got stuck in a rut by using the same three story template time and time again. It is clear that the single story homepages with the dedicated background images have far more visual impact, and are harder to ignore as a consequence.

compare

The obvious step was to add some interaction, so that we can navigate between stories, therefore individual stories can fill the whole area making a greater impression. Also by adding a random element we can ensure some freshness for each visit.

newGraduation

Typography

We’ve been using uppercase Futura Bold for our homepage headlines since the 2008 redesign; the justification for this was simple, that I felt it had more impact. Over time I’ve noticed that the blocks of text have a solidity, that consumes too much of the negative space around the letters; as a consequence the headlines are less readable.

futuraBold

So I’ve opted for lowercase Futura Book instead, as it seems to create more breathing space, but still has enough oomph for a headline.

futuraBook

Navigation

The coloured bar on the right will be used to flip between screens, there will be a colour association based on tints in the image itself, or as a direct contrast to the background colour; and this will also be used as the highlight colour in the headlines.

There will be sub navigation across the bottom where applicable: the links will have titles if the sections are different, or can be generic circles if you are flipping through a gallery.

125prev

The new homepage style will make its debut for Edge Hill’s 125th anniversary celebrations, which begin in January 2010.

125prev2

New Departmental Sites

We have been redesigning and reorganising our faculty and departmental websites over the last two months, and we are pleased to announce that the majority have gone live this morning:

Why Do This?

Firstly we wanted to put the sites into our corporate-site design template; because we felt it was important to have consistent branding, navigation, search facility, and page-layout across all outward facing pages
Secondly we have a system to extract news, events, staff profiles and multimedia from our database; we can now employ this across our new sites.
Thirdly, we wanted to formalise the top level navigation, then utilise tabs on lower level pages to cater for the individual needs of the department. For example, the Performing Arts department has a greater need for visual media, than say Law and Criminology

Homepages

The sites have a main homepage modelled on the established grid, with boxes linking directly to: About the Faculty, Courses, Research, and News and Events. There is space for specific promotional needs if a new courses or publication are launched for example. For departments with a number of internal departments, like The Department of English and History; these are clearly listed on the homepage.

Sub-Homepages

The sites have five basic sections About the Faculty, Courses, Research, News and Events, and Contact us; I wanted the About The Faculty and Courses areas to have a befitting sub-homepage with a marketing focus.

About the Faculty

I wanted to use a strong representative image, which either emphasised the attraction of the subject, or highlighted the exceptional facilities that Edge Hill has in that subject area; I also wanted a friendly welcome message from the head of department, along side their portrait and v-card details.

Courses

The courses homepages differ according to the volume and complexity of the department’s portfolio: For example the faculties of Education and Health identify the client according to their professional level, whether they are entering study for the first time or pursuing professional development or extra qualifications.

Sites within The faculty of Arts and Sciences, the portfolio of courses can be divided into Foundation, Undergraduate, and Postgraduate courses, or into subject areas:

Courses themselves can have homepages, with tabs for subject specific content. These complement the online prospectus pages – where the focus is on providing information – with the capacity to display more visual content such as videos, photo galleries or other multimedia. They will also serve as landing pages when courses are promoted on social networking sites.

Staff Profiles

The profiles are pulled from the database: they can be displayed as a thumbnail grid with contact details in tooltip boxes; or as lists with details displayed vertically, with large or small thumbnails. You can toggle between theses states using buttons.

News and Events

Departmental news pages now use the same system as E42 our university magazine

How To Skin A Wiki

Lay the Wiki on its back on a flat surface, and pinch the skin at the loose part in the lower belly………

Only joking, as we know a wiki isn’t a furry woodland critter that makes a durable Davy Crockett style hat. A Wiki is a website, with pages that can be easily updated via an interface, using simplified mark-up language. We are using Confluence, a “simple, powerful wiki that lets you create and share pages, documents and rich content with your team.”

What is the Difference between Designing and Skinning?

I’d define skinning as styling pages that already exist, a bit like redecorating a hall with outdated floral borders along the skirting boards. Whereas design is a process, where every stage is considered, from conception to sign-off.

I have already written about when you should and shouldn’t re-skin a site, it is generally frowned upon unless fresh functionality is being added. Skinning a wiki is different; it is a way of creating a bespoke skin that is true to the branding of your company or institution.

Aims

I wanted to approach the project as if I were designing for the corporate site. Even though I knew I would be working with pre existing code and structure, I still wanted to work from a finished design developed in Photoshop.
I wanted to work with the same web fonts as the corporate site: Arial for headings and Verdana for regular text. Also to use consistent spacing, line-heights, link-colours etc
I wanted to create a look and feel consistent with the GO portal, to contrive the semblance of a single application when navigating between the two.

Photoshop Designs

As noted in my previous post about GO, I’ve been determined to dispense with any conspicuous decoration, especially repeated background images and drop-shadows, I wanted the design to have a clear, utilitarian quality.

standard layout

The wiki breadcrumb and dropdown menus match the tabs in GO. The background images are white PNGs with their alpha transparency set to 30%; the background colour of the header can be altered, and consequently the tab’s transparent background image appears as a tint of that colour.

An example of this colour effect with the skin applied to the mail system:

Web Mail

The wiki will include intranet sites for University departments; they will be accessed via customised GO panels. We intend these sub-sites to have visually interesting and instantly navigable homepages.

Applying the design to Confluence

I soon realised that my idealistic intentions were a little impractical, when I noted the amount of page layouts, and methods of displaying data that Confluence offered. To try to design up front for every consequence was naïve, so I decided to stick to the most basic layouts only, and then play it by ear.

Confluence has a whole heap of style sheets with many generations of classes. Without Firebug and the Web Developer toolbar for Firefox, it would have been like deciphering the riddle of the sphinx.

As designers tend to do, I started from the top. Getting the breadcrumb, search-bar and drop-down menus to look indistinguishable from GO, this seemed fairly straightforward; then I cross checked it in IE7 and Opera and I quickly remembered how much easier it is to style your own code.

After this I concentrated on the basics: headings, paragraphs, lists, links, tables and forms, really trying not to be drawn toward the more idiosyncratic elements. When I approached elements that were unconsidered in the preparatory stage, I tried to apply principles that were consistent with what I already had. I removed borders, margins and text indents that busied the page composition, defining spatial consistency and alignment.

Was I Successful?

Well I’m still trying to iron out some cross browser quirks, especially where elements are floated, and CSS attributes have been inherited in varying orders, so this question is slightly premature. This will be an ongoing project that will throw up conflicts as different departments evaluate how they want their content to be displayed.

Evaluating things from how it looks in Firefox, I’m fairly pleased with the results; the pages look less like Confluence pages, and more like Edge Hill web pages, but there are still many echoes of the default look and feel. I think I have been successful in spacing the layout so that the pages flow better, and are easier to speed-read and analyse at a glance.

Where Now?

Internal faculty and departmental sites will gradually be moved into Confluence over the coming months replacing the current intranet.
The skin will be adapted appropriately for other systems like online mail and Blackboard.

Go Go Gadget GO Redesign

Just a quick post, really to explain the re-skinning of the GO navigation bar. We are currently developing a wiki that will eventually replace the intranet. The wiki will have the same look and feel as GO, so that we have a consistent style and user experience across applications. We also hope eventually to adapt other systems in the same way, online mail and Blackboard for example.

GO screenshot

My main aims regarding the GO redesign were really to add contrast and economy to the interface, and update the typography so that it reflects the current Edge Hill branding. I was also conscious that the old version was overloaded with unnecessary background images, which slowed down the application and caused the CSS to mushroom.

I will write a more comprehensive overview of the wiki design soon.

Changes to the Design of our Corporate Site

Over the last 5 months the :choice brand has evolved, and we felt that the current design didn’t relate enough visually to the developing brand.

The original concept of integrating the 2008 prospectus design and the corporate website design was sound. The prospectus has a visually bold magazine style; we hoped to develop a strong set of sub -homepages that mirrored this, the final pages however, lacked the impact of the printed ones.

New Functionality

New Sub-homepage layouts

We have worked with Creative Services to develop a grid-based layout that plays to the strengths of the web rather than print, which can be applied to our homepages. One of the primary :choice brand values emphasises the use of excellent imagery, we now have a measured, spatially uncluttered environment to fulfill this.

The grid works as a design pattern that can be applied to faculty and departmental websites, and can be easily adapted by other members of the Web Services.

example: Study Homepage

My:Choice Panel

Video and audio, image galleries, and staff and student profiles will feature in a panel with the My:Choice branding, which was established throughout the prospectus. This emphasises the experience of the individual at Edge Hill University, and also brings together multimedia content into a standardised interface.

example: Biology Course Page

Typography

The Futura font family is integral to the :choice brand. We have decided to use Futura Book Uppercase and Futura Bold Uppercase for headings. They are perfect for the web as they are clear at 72dpi and at smaller sizes.

example: Corporate Homepage

We hope that you like the improvements, feel free to leave a comment.

Choice Part 3: Design Objectives

Overview

The main objective of the redesign was to include the :choice branding, and to create a consistent visual association with the printed prospectus. We hope to establish a look and feel that will continue in forthcoming marketing campaigns.

For this project we have collaborated with Splinter, a Liverpool based design agency. We now hopefully have a style guide that works online and in print, playing to the strengths of both mediums.

Structural Changes

We have redeveloped the Study area of the site, News and Events, and the online prospectus:

www.edgehill.ac.uk/study
www.edgehill.ac.uk/news
www.edgehill.ac.uk/study/courses

Each area has a homepage with a relevant interface. Study for example is aimed at prospective students; it is for marketing the university and is very visual, highlighting the campus, facilities and student life. The Courses area only includes course specific search options, and information.

We would like every area of the site to have a strong and relevant homepage, this will be part of the next phase of the project.

Interactive Pages

Splinter have provided an interactive means of promoting Edge Hill’s facilities and quality of provision:

www.edgehill.ac.uk/study/life
www.edgehill.ac.uk/study/campus

We are hoping to increase the amount of video, audio, and interactive media on the site. Again, this will be part of the ongoing project.

I’d Like to Teach the World to Sing (In Perfect Harmony)

Andy Clarkeâ€™s presentation at @media 2007 was concerned with international styles in web design, some interesting questions arose.

I was interested in why designers felt that they needed to conform to an international design style rather than adapting regional traditions in design to the web.

For example would an Italian designer look to adapt Giovanni Pintoriâ€™s classic typography for Olivetti to the web, or would they regard themselves as a world citizen designing in a universal medium where local traditions and innovations were insignificant?

Is there really an international style?

One thing I noticed when I started looking at CSS Gallery websites was that there appeared to be a specific look and feel to a design that wanted to say:

â€œI am a Standards Compliant CSS Websiteâ€

I feel that a lot of European designers began using American design styles because the first wave of Standards Compliant CSS Websites were American, and this trend has stuck.

The main difference would be in Typography, Europe gave us Sans Serif fonts like Helvetica and Eurostile. Whereas Americansâ€™ prefer serif fonts like Georgia and Palatino. Serif fonts are now much more common in Europe.

Another striking thing about American design is a sense of history, a lot of contemporary design has a retro look, a certain early 60â€™s American Graffiti influence. The continuing vogue for logos with a flowing hand written feel like Coca Cola is evidence of this. Coca Cola incidentally have gone retro, and their new cans have simple flat colour and clean traditional type, rather than the recent fad for gradients and drop shadows, an interesting diversion.

Coca Cola Redesign

Americans also like to use a lot of texture and bring organic elements into web design, whereas European designers were always quite evangelical about white space. Nowadays Europeansâ€™ have gone crazy about colour gradients.

One of the biggest American influences has been Apple Computers. Appletastic black and grey gradient backdrops are ubiquitous, as is typography with a faded reflection or shadow. Itâ€™s neat and tasteful, but itâ€™s becoming homogenised. Websites donâ€™t need look like an Apple product in order to appear more Web 2.0.

So I think there has been a move towards a universal style in web design. This could subconsciously reflect a medium without old rules and boundaries, but where is the variety?