Skinning Delicious in Firefox

8 July 07

I’ll admit, I am quite slow when it comes to joining new services such as Del.icio.us, or Twitter, partly because I rarely find them of use, but mostly because I do not want to spend my time once again entering details into a new service (then later finding I rarely use it).

Following my bookmarks section in Firefox growing to an uncontrollable size however, I eventually decided to join Del.icio.us, as a more manageable way of organizing my links. Despite my reluctance to join such a service, I find del.icio.us to be simple and intuitive to use, and is of increasing use with the addition of a Del.icio.us icon in Firefox. However, one aspect of del.icio.us that I find less appealing is the design.

You can understand the reluctance (and difficulty) of designing a service such as Del.icio.us; not only will it be used by numerous audiences and demographics, but it will also be used for a varying number of task (dependant on the user). But whenever I look at my Del.icio.us account, I get the overwhelming sense of an application designed by a programmer, with less thought design. I am by no means against this design, it just appears to me that the user experience of del.icio.us could have been further enhanced if more thought was given to design.

Happy Cog has shown how to make a social bookmarking application an attractive design in its design of Ma.gnolia, but I personally preferred the way the information was structured in Del.icio.us, hence my reason for joining this, opposed to Ma.gnolia. As an avid Firefox user, I recently decided to create a new skin for my Del.icio.us account that could be implemented using the “Edit CSS” function found in the Web Developer Toolbar and, after an hour or so, I had created my new theme for Del.icio.us, which can now be used on anyone’s account page.

I am not trying to belittle the design of Del.icio.us in any way, as it serves its purpose very well, but I personally wished to try something new and so quickly put together a new design using only CSS (and one faux background image). The design can be used by any Firefox user who wishes to, and the CSS is available at the end of this article. Whilst this skin is by no means complete, it is a dark and simplified version of Del.icious that I am personally using at present.

This is a personal project made in my spare time, and so has not been tested as rigorously as my professional projects. Being away from the office, I am currently operating on a Windows based system and so have not tested the skin on a Mac, so if anyone finds any issues with this skin then feel free to contact me.

The CSS for the skin is in the below document and can simply be used in Firefox, by editing the CSS in the Web Developer Toolbar (or the Edit CSS addon). The one image used in this skin is linked to in the CSS so no editing should be needed:

CSS Document for Delicious Skin

This was just my personal take on playing around with Del.icio.us; a quick web search found no other experiments, so I thought I would document this here, in the hope that others may develop this experiment, or might point me in the direction of similar projects.

If anyone does decide to use this skin, then please let me know how you find it.

Branding: It’s not just the typeface

23 May 07

With it being Helvetica’s 50th birthday this year, there has been a larger than normal amount of discussion regarding the most versatile of typefaces. Most of discussion and commentary has been positive, and in admiration of Helvetica’s versatility, but there has also been some criticisms. One of the more common criticisms being that Helvetica is so versatile and so ubiquitous; that in many ways it fails to make an impression. Whilst I personally do not support this line of argument, it becomes increasingly more valid in the area of branding and identity, where the goal is often to distinguish a brand from others. This area alone could easily produce a series of articles, but for the purpose of this article I wish to highlight the importance of colour (along with the choice of typeface) in corporate branding.

Let’s start with a practical example as shown in image on the left. I would like you to simply look at the image and tell me what brand you think this is? I am willing to bet that most UK readers (and a handful of non-UK readers) can instantly recognise this identity as that of the telecommunications company Orange. The reason I am highlighting the branding used by Orange, is because, for all intensive purposes, in terms of the typeface used the branding does not stand out in any way. Numerous corporate identities have used the Helvetica family, and many of them have faded into oblivion; but Orange manages to make its use of Helvetica into a brand, simply by the colour scheme applied.

In many ways branding orange seems inherently simple, I can imagine the pitch right now; “right guys and girls, our company is called Orange, how should we brand it? “Maybe we should make everything orange!” brilliant! But orange has taken this further than many other companies. Orange utilises only two different weights of Helvetica, which it applies to most of its marketing: For branding purposes (as shown above) Orange uses Helvetica 75 Bold, with white type set on an orange background (ff6600 to be exact). For its other marketing (mainly for the body copy of a promotion) Orange uses Helvetica 35 Thin, which, due to the orange used; can be applied on both white and black backgrounds with equal success (shown below).

The relative success of the use of colour in branding Orange is more apparent when you compare it to similar identities. For example the English retailer Marks & Spencer’s currently uses Helvetica on a black background to much less effect (noted: M&S does use Helvetica 25 Ultra Light however ) showing just how important colour is when creating a brand.

(I feel it worth noting at this point that I am not in any way against the Marks & Spencer’s branding, I am just using it to highlight what I believe is a more effective use of colour by Orange)

Well that’s it for now! Just a short article that is by no means been a “how to” guide, it simply aims to show that whilst the choice of typeface and logo seem to make up the largest part of branding, colour is also of great significance, and one that should be taken very seriously.

Back by popular demand

23 April 07

Somewhat of a redesign has taken place. I apologise for any abnormalities at the moment (e.g. the error pages), this will all be sorted soon, I promise.

Any comments on the redesign? Then feel free to comment below.