Tag: css

protonet design hacks

Posted on · Leave a comment

If your only tool is a CSS hammer, the entire world wide web looks like a nail.

This time I’ve implemented a couple of CSS design improvements for protonet’s user interface. The average user experience of the sample user group went up from sort-of-ok to relieved and delighted.

The motivation of all the changes is pure usability design: better layout, contrast, color scheme, legibility, control element recognition, focus on notifications, less noise, less scrolling, semantic colours for the calendar, and much more. The page protonet design hacks summarises and explains the changes. I’ve also played a bit with JuxtaposeJS to provide before&after comparison.

before and after comparison at protonet design hacks

There is more in the pipeline regarding protonet – other enhancements of my design lab apply to the twitter stream and google’s search experience. Let me know if you are interested in the comments below.

sweet microblogging

Posted on · Leave a comment

When Peter approached me a few weeks ago to work on the UI design for the next release of Sweet, I had just started on twitter in order to understand what all the fuzz is about. Well, I cannot say I get it, but at least I got some interesting links that I had missed otherwise.

Now Sweet is our internal microblogging service, based on open source laconi.ca. You can try out laconica at identi.ca or take a look at the before state_

sweet user interface /before

It is not possible to significantly change a project in mid air – but this is exactly what I did by tweaking the CSS and a few images to create a pleasant and inviting design for Sweet. Note the logo (done with creatr.cc), the color scheme, the layout, the text counter, the tabs, the font changes, and the tag cloud in the after image. BTW_ the bird in the tree indicates that a tweet is also visible to the public on twitter.

sweet user interface /after

Paying attention to the ‘design details’ can even improve the usability of such a project. A professional design increases the perceived quality and therewith the user experience. Since the relaunch we have more users and we even figured out that there was another installation of laconica running inside Sun — they are now planing the migration to Sweet.

All this took me less than a week. I learned a lot about dirty CSS hacks, and got in touch with 2 nice colleagues at Sun whom I never met in person. Peter was a kind of project lead, and Olof the engineer behind the curtain. And guess what, our main communication tool was… Sweet!