Top Navigation

The Abduweedget: creating a dashboard widget

January 11, 2007 from

After a busy week, with a lot of things happening, Apple and their iPhone, the tons of gadgets and hi-def stuff at CES, see, it was almost impossible to be up to date with all of that.

Anyway, as usual, while surfing on the web, I found a really cool article. It was a tutorial explaining how to create a dashboard widget with a tool called Dashcode Beta, which can be downloaded for free. Then I thought to myself, that is a cool thing to do here for my blog, I had 2 feeds, and why not?

Following the article and using the dashcode makes the process really smooth. Basically you choose what sort of widget you want (RSS, Podcast, Gauge...), and then you start editing. The interface is pretty simple, I don't want to explain in details how to do everything because the tutorial already does that. The only think that I want is to show what I did.

Choosing what widget you want

Choosing what widget you want

Essentially what I did was change the basic model with images and CSS. My idea was a widget with a cool header, like the forecast one, where the images of the sun and clouds extrapolate the borders of the widget. Looking for inspiration I searched the word "abduction" at google images and got some images to fresh my mind.

Searching images for inspiration
Searching images for inspiration

With the subject of abduction in mind and tons of images seen, I started doing the image of the header.

The header's design, with alpha transparency
The header's design, with alpha transparency

The basic idea of the widget is show my blog's content, so it must follow the design of the site. To achieve that it uses the same background and shares the same color palette and typography.

Abduzeedo's design
Abduzeedo's design

Another thing that I was willing to do was to create an option where the user would be able to choose the feed that he would like to read, in my case the Blog and the Sideblog's feed. Messing around with some "js" files I came up with a solution, if you are a ninja, probably, you will feel far more comfortable than I doing that.

Clicking on that button and it will show the blog feed, instead of the sideblog's
Clicking on that button and it will show the blog's feed, instead of the sideblog's

After a couple of hours the result was pretty satisfactory, below you can see the abduweedget among the others in my dashboard, you can even download it as an example and, perhaps, sometime do yours.

The Abduweedget in my dashboard
The Abduweedget in my dashboard

Below a list of links related to this article:

http://abduzeedo.com/files/imagecache/img690x320/originals/abduweedget.jpg

About the author

Abduzeedo is a blog about design. There are all sorts of articles for those who want to look for inspiration. Also you will find very useful tutorials for the most used applications out there, with a special selection of Photoshop Tutorials and Illustrator Tutorials. You can get in follow us via Twitter at @abduzeedo

Sponsored Links:

More articles about:

Comments and Reactions

Featured Tutorial

Swirl Mania in Illustrator & Photoshop
Swirl Mania in Illustrator & Photoshop
There are lots of ways to create swirls in Illustrator, you can even download vectors from sites such as bittbox and dezignus, and if you are using Photoshop you can download brushes with those sorts of symbols. However in this tutorial I will show 4 ways to create swirls, and by mixing them you will learn some very powerful techniques that will allow you to easily make tons of different styles of swirls and crazy sperm vectors.

Try this Wallpaper

Wallpaper of the Week #96 - Chris Haines
Wallpaper of the Week #96 - Chris Haines
The wallpaper of this week is a beautiful illustration created by Chris Haines, a designer and illustrator from Perth, Western Australia. We have already featured Chris a few times on Abduzeedo, but he has just updated his portfolio with some new and really cool works and sent us this wallpaper :) For more information and to check out the new portfolio of Chris Haines visit his webesite Neon Dreams - http://www.neondreams.com.au/

Book Suggestion

Book Suggestion Illusive 2: Contemporary Illustration and Its Context
Book Suggestion Illusive 2: Contemporary Illustration and Its Context
The book suggestion of this week is Illusive 2: Contemporary Illustration and Its Context. This book is really inspiring, there were some amazing illustrations and you can spend ours checking them out. Another amazing thing about this book is that you can always go back and there will always be something new.