Saturday, 17 July 2010

Gwibber Concept - Part 1

I was going through one of my old computer's hard-drives recently and found lots of mockups from a couple of years back of GNOME applications I had done in my spare time. I was inspired and opened up Inkscape to see if I could still come up with anything interesting. Gwibber was my victim of choice as I had spoken to Ryan and Ken at UDS recently about it's UI and the difficulties Gtk was providing them (and of course, someone saying something is hard to do in Gtk is always a challenge I can't resist ;).

Gwibber was an interesting problem user-interface wise as, although there are many Twitter applications with great UIs out there, there aren't many that have to:

1. Support multiple accounts from different services, presenting the information in one stream to the user
2. Be able to filter the main view to one account (i.e. choosing to only see Twitter-related material in the views)
3. Integrate into many different desktops, but still try and have it's own identity

So, after thinking about these points and also looking at/using the best microblogging applications on Windows and Mac (Seesmic, Tweetie, TweetDeck), I've stolen a lot of ideas and come up with:




Theme-wise, they are obviously using Ubuntu's Ambiance theme as the palate, but I think the look would work fine on Fedora/SuSe as long as your taking the right colours from the Gtk theme. There is controlled use of gradients to work better with Gtk themeing (so you get something good looking without having to write tons of custom widgets which do lot's of drawing). There is use of some DX-team tech (Windicators, CSD), but nothing that couldn't have a simple fallback on other desktops.

I have highlighted some of my favourite things in the next image:

There are lots of nice ideas (I think) missing, hence this is "part 1". Hopefully I'll have time to finish off the other views soon, as well as apply some more polish to these ones (and apply feedback you give :).

Okay, time to pack bags for flight tomorrow to Prague for the Platform Sprint. I've got more ideas for other applications that could fit into this style (Rhythmbox and Evolution are on my radar), if you guys like it.

28 comments:

Gavin said...

I like it a lot! Sleek, and it doesn't look as cluttered as the current gwibber does.

Anonymous said...

Looks amazing! It certainly fits in with Ubuntu. I find Gwibber somewhat hard to understand, and this certainly is an improvement.

Shane said...

Compact & great!

Anonymous said...

I like it

Claude Picot said...

Very nice

Anonymous said...

too like twetie for mac

Bob Hazard said...

I like the rounded corners

deech said...

SWEEEETTT, I might leave tweetdeck for this :)

nekr0z said...

What Gwibber needs right now is not further UI beautification, but code cleanup. If they keep improving UI, the next version will take more time than the OS itself to start, and will consume more memory than the OS itself (right now, the startup times and memory footprint for Gwibber and OS are nearly equal).

Anonymous said...

@nekroz. heh, do you really think gwibber devs would overlook that in favor of this beautiful concept? For sure there will be other devs/designers that will offer their help to get this realised.

Anyway, this thing looks like something from a distant future! :-)

Oli Warner said...

While I like this there are a few points to make about it, gwibber and gtk:

- The rounded pane looks great but AFAIK, the GTK theme engines don't support it. If they did, I would like to see it in all Windows, not just gwibber!

- Before something like this is implemented, devs should focus on making gwibber work. That includes fixing the huge CPU issue on multi-core 64bit installs. The code is getting messy and it's growing faster than it should.

- The left sidebar should scale like the current implementation. I have the slimmest version and it would be nice if the breaks/tabs you've mocked could scale in the real version. That would rely on them being dynamically drawn and, again, I'm not sure how readily GTK will handle that.

That aside, I really like the design... I'm just not sure if it's possible.

silvio1964 said...

Fantastico;)

Jay said...

What font are you using for the titlebars in those mock-ups?

Luís Reis said...

Cool. I didn't know you could put stuff on the title bar on Linux. How do you do that?(or do you intend to cheat and draw your own title bar?)

feathertail said...

That is amazing. o.o I love the tabs, and how neat and shiny it looks. The monochrome tabs go much better with Ubuntu's elegant look than do today's colored ones.

Do Rhythmbox and Evolution next, please!

Neil J. Patel said...

Thanks guys!

@nekr0z: I think the Gwibber devs are well aware of the current issues and have been working in their spare time to fix them. Hopefully you should see this work soon.

@Oli: Thanks for the comments! Your right Gtk containers don't support rounded corners (has to come from theme engine), but we can easily draw this as a background to a custom container using Cairo (it won't effect performance as it's just solid colours from the gtk-theme).

Again, Gwibber devs are aware of these issues and hopefully you should see the fruits of their labour soon.

And yes, I definitely imagined this working like the current implementation with a minimal-mode (my favourite mode too :).

@Jay: I used "Coconut" initially for this mockup. Ideally it would have been with the UbuntuBeta font, but the hinting on bold isn't right yet and I wanted the different font styles in the application to come out.

@Luis: You can't....yet :) The widget in the titlebar would hopefully be the "Windicator" idea that Mark blogged about a few months ago.

@feathertail: Thanks, these comments have convinced me to do just that :)

Izo said...

Superb UI design, Neil. I actually can't fault it.

Baco said...

Excellent, I can not wait to see that look in the next Gwibber version. I also will wait for the changes in both, Rhythmbox and Evolution ;-)

Raseel said...

Great UI concept. I presume these are just Nichols. But if Gwinnett looked anything even close to these, it would be my microblogging app of choice.
Keep up the awesome work.
Hope my Retweets help

Hal Wilke said...

Beautiful work. Hopefully this gets some consideration in the future versions of Gwibber.

votvete said...
This comment has been removed by the author.
almozavr said...

This could be a breakthrough!

Don't forget to point that by default keyboard pointer should be at the post message inputbox when activating Gwibber window. Now it's still a problem, 'cause user must not only switch to Gwibber but alse make a click to post a message.

Anonymous said...

"Stolen a lot of ideas" = "Just copied Tweetie without doing any user research into what Ubuntu users might want or need that Mac users don't". Way to go.

Neil J. Patel said...

@anon: 'tis true, hence I didn't hide it, though I think Seesmic deserves some credit too.

Regarding doing user testing, if I get to comment on what you do in your spare time, you can comment on what I do in mine :)

Michael M-S said...

@Neil: Well played with that last comment -- imo you had every right to be less level-headed than that. :)

I absolutely love your mockup. It looks like it would integrate tightly with gtk themes (especially Ambiance), but it also looks very modern and interesting. Kudos!

As others have said, I look forward to seeing some mockups for other Gnome apps.

Ari T. said...

I hope the monochrome icons are not becoming the latest craze and fill the whole desktop. They are kind of OK on the notification area (or whatever it's called today), but having them all over the desktop would make it too dull in my eyes. They just are not visually consistent with the rest of the desktop. There apparently has to be a new visual fad every now and then, but let's not base the look of the default desktop on one. This kind of extremely simplified monochrome icons are better offered as an alternative icon set.

Otherwise the mock-up looks very nice to me.

kalon33 said...

It's awesome, I need it now !! :D Really want to try it ;))

Manon said...

i think it looks AWESOME! :-O good job mate.. matches perfectly with my newly installed theme "A-New-Hope", has the same "tab" look with the same color on the window decorator.. AWESOME!