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.

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?

@Media 2007: Jason Santa-Maria – Diabolical Design: The Devil is in the details

Jason is a well known and influential designer working for Happy Cog, the studio run by Jeffrey Zeldman.

Zeldman is the author of Designing with Web Standards, a book that has been pivotal in the conversion of many designers from structuring pages with tables, to using standards compliant CSS layouts.

Jason’s design has had a stylistic impact on the look and feel of Web 2.0 sites; his use of organic and illustrative background images, combined with uncluttered typography with characteristic Serif font headings is universally replicated.

In this presentation he began by covering a few basic pre-style workflow steps. I currently use wireframe layouts, Jason suggested using a 12 column grid system as a starting point. Important Text and images can span columns but always fit within the lines of the grid. This is something I find difficult, at Edge Hill we often use movable type and a fluid layout; therefore column widths are measured with percentages and expand according to the size of the users monitor.

Additionally he uses Monochrome Wireframes that grade important elements of the page with darker shades. Blocks of strong colour create a connection with the user and help communicate the page’s function.

I found his tips on colour theory interesting, especially creating a colour palette from photographs using the eye dropper in Photoshop. Also choosing an image with a dominant colour and working it into the rest of the design was interesting. I think it is important to have an idea of which colours you are going to use before you progress from a wireframe, however I also know from experience that a scientific approach doesn’t lead to a perfect design, often an element of chance can push the design in a better direction.

The next section of the presentation was concerned with white space, or negative space, that is so important in defining typography. Jason cited the influence of Saul Bass whose typography and collages are seen in the opening credits of Psycho, The Man with the Golden Arm and Walk on the Wild Side. I have been a fan of Saul Bass for a long time and was pleased to hear that he continues to influence people working in a modern medium.

He finished with tips on typography, and the use of appropriate and contextually meaningful fonts.

I took a lot of inspiration and reassurance from the presentation. I feel that many of the approaches and theories that I learnt at Art College are still important in web design, and Jason confirmed this.

Typography on the Web

I thought it was about time I posted on the Web Services blog. Michael has suggested that I write something about typography on the web so here goes.

First a few comments about typography as part of the Edge Hill University brand. The new logo uses FF DIN Medium in lowercase, an extremely smart and popular contemporary font. Linotype’s ITC Conduit font is used for uppercase headings in brochures and in the prospectus. Both of these fonts are lovely but unfortunately ubiquitous, this could mean that their longevity is limited and that we may end up with a dated logo quicker than we think.

These fonts can only be used as graphics on our website; we cannot use them for HTML text as this is reliant on the user having them installed on their PC, which isn’t likely. So we have a limited selection of common and unloved fonts to use, they are Arial, Georgia, Times, Verdana and Trebuchet.

Luckily with CSS we can imitate some of the typesetting techniques used in print design, for example Tracking is called Letter-Spacing and Leading is called Line-Height, not particularly inspiring names I know. Unfortunately we cannot structure lines of type in tidy pyramids that flow neatly down the page, the line ends when it ends, so the text rarely flows.

Internet Explorer 7 now uses anti-aliased text which means that letters are no longer pixelated and have smooth rounded edges. Unfortunately this means that Verdana, which looks neat and tidy on old browsers, now reveals its true form.

Anti-aliased text is here to stay on the web and luckily Microsoft have a new font package called The Microsoft ClearType Collection which is designed to look good on screen as well as in print.

Cleartype fonts

The new fonts all begin with C, which is helpful for designers like me who have too many fonts installed on their computer. Their names are Calibri, Cambria, Candara, Consolas, Constantia, and Corbel, which sound like models of Vauxhall cars from the eighties. My favourite is Constantia, a very nice serif font that could replace Georgia in the affections of American web designers, Americans love their serifs. Calibri is a nice sans-serif and will probably be favoured in Europe. The weakest is Candara which looks a little like Trebuchet.

Unfortunately these new typefaces are free with Windows Vista so will not be universally installed until that operating system takes off, or is forced on the public. In the meantime you can download the fonts to XP as part of the Microsoft Office Compatibility Pack for Word, Excel, and PowerPoint 2007 File Formats.

>