Web Design

Bill Moggridge 1943-2012

Posted by PH on September 12, 2012
Visual Culture, Web Design / No Comments



Readability of Google Maps

Posted by PH on December 09, 2010
Visual Culture, Web Design / No Comments
St Louis: Google Maps/41Latitude

St Louis: Google Maps/41Latitude

A fascinating article comparing the readability of Google Maps with the equivalent offerings on Bing and Yahoo! can be found here on the 41Latitude blog. Google in good design shock!


Tags: ,

Quote of the Month

Posted by PH on October 03, 2010
Quote of the Month, Web Design / 2 Comments

I wanted better to understand why some visual ideas work and some don’t. I wanted to learn more about the juxtaposition of shapes and colours, and investigate the science behind structures and layouts. I believe that perception and meaning cut through disciplines, so something learned decades ago by an architect or furniture designer could help me understand elements of my work on the web. I’d rather we investigate experiences and ideas than simply leverage everything from print design, as some suggest.

I was presenting a ‘finished’ version of a site to another designer I trust to be honest. He loved the ideas and layouts, but suggested that I was “cheapening” the concept by overplaying too many textures and extraneous ideas. So rather than launch, I sat with the design for ages, assessing, simplifying, sieving it down and reducing it until I only had left what I really needed. I now consider that contemplation and simplification period as one of the most vital aspects of my process.

Make do with only what you need in your designs. Focus on reducing clutter, tricks, unnecessary CSS3 bells and whistles. When a design is finished, look again—for ages—and see what you can improve, tighten, or throw away. Think beyond the “enablers”: HTML, CSS, JavaScript, Photoshop, etc. Good design solves problems regardless of the tools and frameworks, so try where possible to forget how we build stuff, and think long and hard about why we build.

Simon Collison


Tags: ,

Usability Week 2009

Posted by PH on May 23, 2009
Web Design / 1 Comment

This year I finally made it to one of the Nielsen/Norman Group‘s Usability Weeks and did the Usability In Practice 3-day seminar.

Opening Slide

Opening Slide

Very good it was, too. The content was bang up-to-date and the expertise of the presenters was clear for all to see. Although there were a few moments of tedium as one or another of them droned on a bit, on the whole it was all kept interesting by judicious changes of speaker, plenty of Socratic dialogue, effective use of multimedia, and a fair bit of practical work and demonstrations. They even gave us homework!

Jakob Nielsen

Jakob Nielsen

It was interesting that the seminar confirmed my impression (gained from teaching usability) that writing the tasks is really one of the most difficult aspects of the process: if they’re not right for any reason, almost any results you get from the testing will be of dubious value. It probably won’t be difficult to identify what the most common task will be in any given situation, but wording and structuring them correctly for the test is absolutely crucial.

Testing Mobile Devices

Testing Mobile Devices

The best bit of course was the Paper Prototyping on day 3. The day before Janelle Estes had shown us some video of a user test on this page at inMod (modern furniture and lighting). We were then given the task of redesigning this Flash-based wizard and to build a paper prototype of the design. The team that I was a part of came up with an excellent solution and a really cool prototype. Very satisfying and hugely enjoyable.

Our Prototype Under Test

Our Prototype Under Test

Of course one of the best things about attending such events is meeting new people and the possibility of networking. There were people from all over Europe in attendance: Latvia, Denmark, France, Switzerland, you name it. Fascinating to see what people were up to.

And, AND, I came away with a great idea

Tags: , ,

Hello World

Posted by PH on March 22, 2009
Web Design / 5 Comments

Welcome to the newly revamped paulhazel.com. Boy, did it need it, sitting here virtually untouched for six years: all I’d really done in the interim is remove pages. I hang my head in shame…

The Problem
To be fair, I had attempted two redesigns in the last couple of years, the first an all-css design, the second a full-on Flash showcase. Neither got anywhere near completion, and for two reasons. The first and obvious one: the lack of time. A full-on job, a PhD on the go, two young children. You get the picture. Secondly, and not so obviously, is the question of what format should the new site take? The big problem with paulhazel.com was that there was no pressing need to update it daily, even weekly—it had no raison d’être.

In the meantime I’d been keeping a blog called 3282 on blogger.com. An excellent service, and very easy to use, but having a very limited range of visual options. Also, because I had a lot of multimedia content on it, I found I also needed to maintain my own server space to keep it all on (which kind of defeated the purpose of having this so-called one-stop solution).

The Solution
To cut a long story short, then, the obvious way forward was to combine them in some way. I’d been mulling over my options for this when I got into a conversation with one of my third-year students, Rob Chalmers. Somehow finding time to do commercial web design work alongside his Major Project, he was waxing lyrical about the possibilities offered by WordPress.

Perfect: open source, powerful, and it would allow me to import the contents of 3282 more-or-less at the click of a button. I could keep my existing personal webspace and self-publish. Sure, I would totally lose the contents of the existing paulhazel.com site, but a) most of that was well past its sell-by date and b) I’d already started to put the good stuff onto 3282 anyway.


Doing It
Wordpress promises a “5-minute install.” Well, yes, it does only take about that long to download the .zip file, extract the contents and get it onto your server, but actually getting the thing up and running takes a good deal longer. You have to set up a database, get your WordPress install talking to the database, and, crucially, reset file access permissions to folders on your server (you’ll need to consult your web provider to get the correct UNIX codes). Thanks to Gaynor Thomas at SMU and Nick Byng at BPWEB for their help on this issue.

The documentation is certainly extensive, but I found it far from useful.  You find yourself getting sent from one page to another to another to another, without always finding exactly what you want. The best one-stop tutorial I found is Gav’s Guide.

Importing the content from 3282 was a doddle. I then went through every one of the 665 themes in the WordPress library and eventually settled on the one you see here, Big City by AOE media GmbH (which I’ve personalized a little). Compare this with Blogger’s 16 templates…

That’s when the work really began: changing the addresses of all the internal links, adding category definitions (which Blogger doesn’t use at all), and a whole slew of other minor formatting issues that had to be resolved for every single post. Of course I did it all wrong the first time—and the second time—and I had to trawl through every post at least three times.

It all took a lot longer than I thought but here we are, about six weeks later, live. I’m thrilled to be back in action—I’ve really missed blogging—and I’m delighted to have resolved the issues with my online presence. I feel I’ve hardly scratched the surface of what is possible with WordPress (which, despite my earlier comments about the documentation, I am very impressed with) and I’m looking forward to developing the site further. Hope you like it.


Tags: ,

Web 2.0

Posted by PH on February 11, 2007
Web Design / 1 Comment

Let’s start with a question: what is Web 2.0?

We could do worse than begin with Wikipedia’s definition.

Done that? Then let’s watch a video:

This second video was posted as a “response” to the first:

Enough? In that case let’s end with an answer: that process you’ve just been through, this blog, is Web 2.0.


Gypsy Jazz Website

Posted by PH on January 12, 2007
Web Design / No Comments

As I mentioned earlier (Fun With CSS2) I’ve spent the last couple of weeks building a website for paying customers. It went live today here. Lots of goodies on it: 15 audio tracks and three YouTube hosted videos.

The excellent photographs were by Gareth Jones at Eden Digital. The audio player was originally built by Elliot Lemberger aka Asiabackpacker and I got it from FlashKit. I only changed it minimally, although I did come up with the idea of stacking them, which I love: very flexible and updateable.

It’s been a challenge, but I’ve learnt a lot. I’m pleased with it. The customer is pleased with it. We’re all happy. Hooray!

Tags: ,

Fun With CSS2

Posted by PH on January 05, 2007
Web Design / No Comments

I’ve been very busy this week: back at work and building a website for a paying client at the same time. This is the first time I’ve properly attempted a full-on web standards-compliant CSS2 site and it’s been, er, fun. Designing and building slick pages certainly seems a lot easier than it used to be: thankfully the days of hacking huge tables when formatting is over. However, up to a point all we’ve done is swap one set of problems for another, the main cause of which remains browser incompatibilities. And, yes, we’re talking about Microsoft as the obligatory bad guys. Why can they not just join in with everyone else? I’m not going to go into the gory details, but a tiresome evening spent scouring the Internet was rewarded when a very nice Norwegian chap from one of the CSS mailing lists provided a suitable fix. Cheers Georg…

My constant companions this week have been:

  1. Jeffrey Zeldman’s Designing With Web Standards. An excellent book, containing a nice mixture of historical context and useful real-world examples. Zeldman is clearly a bit of a trainspotter when it comes to (X)HTML and browsers: it’s a tough job, but someone’s got to do it! A Top Geezer.
  2. Dan Cederholm’s Web Standards Solutions. Lots of down-to-earth practical help with the minimum of verbiage getting in the way.

Useful links:

That’s it for today. Thanks for coming…

Tags: , , ,