New Design: Desktop like ui

Last night I thought about a new frontend design for metalcon. I personally want to go away from this diaspora/google+/facebook like design. So I did some brainstorming about how you can have a lightweight clear design that fits with our ideas of what should be the functionality of metalcon. The result is a desktop like frontend that has a nice search function as the main interface between user and application.

So let’s say a new user enters www.metalcon.de the first time. What he will see is mainly just a textfield:

Typing anything in the textfield will trigger a nice autocompletion. Hitting enter we will open everything important associated to the request text in separated “windows”. So let’s say you are searching for “Metallica”. Than we will open a “gallery”, “forum”, “fans”, “albums”… window. Each window can be closed, moved and minimized.

As soon as you type in another string the windows will be closed and an item in the request history will appear (bottom left hand corner in the example image). Klicking on a history item these windows will get opened again.

 

If you don’t want a windows to disapear after entering a new search string you can right-click on that one to see at least following functions:

  • Always on current desktop
  • Show on all desktops

So here you see, that I also want to have a multi desktop functionality: At the bottom right hand cornor you have four buttons that you can use to toggle between the available desktops. So if you search metallica at desktop 1 and search for a friend at desktop 2 the metallica windows will stay opened at desktop 1.

This entry was posted in Design and tagged , . Bookmark the permalink.

4 Responses to New Design: Desktop like ui

  1. Vitalij says:

    I have been looking for tools that could help to implement this interface. I think that Ext GWT could be a good choice, because it is an open source library that gives the possibility to create desktop-like pages and drag and drops, but no right-click context menus. :(

    For drag and drop there is the more standard library.

    For context menus there is this post.

    What do you thin about that?

  2. Jonas says:

    Okay… Ext looks really nice! It’s a pity that the designer program is commercial…

    I really like the ext windows classes like here. I would say we can use it and I would say that we dont need any other d’n'd library! Ext drag mechanism looks good for me too!

    Concerning the right-click: It’s as I thought. We can add it later as soon as we want without a lot of work. Actually I’m not sure if we really need it. Or so to say: what would you like to see in a right-click window?

    • Vitalij says:

      I didn’t even know that there was a designer for GWT!!! Now I have installed it and it looks really like programming a desktop application!
      Can’t figure out how to insert Ext stuff into a GWT web application… I will try a little bit longer.
      Maybe the right click can be useful for things like “Save to favorites” and “Watch that later”. What do you think?

      • Rene says:

        I am totally amazed by those tools and after seeing them I am more than before convinced that this is the way to go for us.

        But I also just want to point out that with everything we do we should first consider the user experience.

        I totally agree that right click ==> save as or watch later makes sense from a user experience point of view.

        But I already want to point out that at some point in time we have to take in mind that we are a web application and that people might not expect certain things in a web context…

        anyway I am happy about our new insights and excited about what is coming!

        btw: looking forward to christmas break where I will finnaly find some coding time to do data integration and some coding (-:

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>