Design

New Brosix GUI design

Brosix Instant Messenger is looking for professional GUI designers. We want to create several eye catching and easy to use Brosix themes. The product web site is: brosix.com

Requirements:

  1. You should be a professional GUI designer who already created designs for software applications.
  2. You should be familiar with Internet, especially with Instant Messengers. You should frequently use at least one IM.

Please provide details about your design and technical (IM and Internet) skills and specify your rate. Contact us via e-mail:
printAddress( “design” );

If you download and use Brosix for a day or two you will get a clear idea what the work is. Download the free version from bg.brosix.com/download/

What to design for Brosix?

We want a new design of:

  • All windows
  • All buttons
  • All emoticons and also add more emoticons. Emoticons should be animated in .mng format
  • All icons and images like: online, away and busy states, “no photo” image etc.

We want a design that covers all aspects of the application and that makes the application look good in all of its parts.

How to design Brosix GUI?

We have several GUI design tasks. The first one is to create a new Brosix theme. We expect the work to be broken up in two steps:

  1. Create a design mock-up
  2. Create the theme

Once you create the design mock-up, you will send it to us. Our team will review and will send you back our comments. If your design mock-up is approved we go to the next step – “Create the theme”

Design mock-up

Before to create the Brosix theme we would like to see your idea about it.

You should download Brosix install it on your computer and try it. You can install two portable copies on your computer and by creating two accounts you can experiment. You can also try it with a friend or colleague of yours.

Important: Brosix currently comes with 6 themes. You should try each of them. This will give you an idea what the product is about and what you could do with the themes.

Important: If you have an idea, but you don’t see how it could be implemented with current Brosix themes engine, please contact us and ask. We might change Brosix to support what you need.

You should also read all this document to learn how the Brosix themes are created.

Brosix is a business Instant Messenger. It is used inside companies and organizations. Its design should follow these guidelines:

  • Business style – should inspire business trust and confidence
  • Light – the look and feel should be light. Brosix is used everyday, all the day, by thousands of people.
    They should focus on their tasks, not on Brosix bells and whistles.

The design mock-up is not required to contain all images of all windows we have in Brosix_screenshots.zip.
But it should contain at east one image for each of:

  • Main application (Contact List)
  • Chat
  • File Transfer
  • Notification window
  • Request window
  • … You choose one of the windows of Whiteboard, Screenshot, Screensharing, Co-Browse

Create the theme

Brosix supports several themes. The user can select which theme to be used at run-time from the menu Brosix-Settings-Themes.

First of all you should name your theme – for example “Sunshine”.

All themes are located in the Brosix application folder, sub-folder “themes”. Each theme folder is named after the theme. The example theme folder will be “Sunshine”.

There is one special folder called “_default”. This contains shared images for all themes. If several themes use the same image, it is placed in this folder.

Now, let’s look inside the theme folder:

style.css – Brosix GUI is customized by Qt Stylesheets defined in this file. Read more about Qt Stylesheets here http://doc.qt.nokia.com/4.6/stylesheet-syntax.html

template.html – A template that defines the look of the Extended contact list. Extended contact list can be turned on from the menu Brosix-Settings-Contacts-Contact List-Type

theme.xml – A configuration file of the theme.

images – An optional folder that contains all images required by this theme

Plugin buttons – Brosix plugins install icons on the main window on the right of the contact list. These buttons have 4 states: Normal, Hover, Pressed, Disabled. The design of the buttons in each of these states is described in theme.xml

These buttons are processed in a special way:

  1. Each plugin defines its icon as a black image
  2. The plugin icon black image is converted to the color defined in theme.xml – symbol_color
  3. There is a background image shared among all plugin buttons. The plugin black image is placed over the background image
  4. There is a foreground image shared among all plugin buttons. The foreground image is placed over the image generated in the previous step.

The background image gives the shape of the button – circle, rectangle or no shape. The foreground image gives the light of the button.

The same technique is applied to plugin buttons in the text chat and to the buttons during a Screen-Sharing session – the presenter panel and the viewer tool-bar.

An important note: Please, make sure you preserve the structure of style.css file. Each style in the file is meaningful. If you delete it, a GUI component will miss it and will not display properly. You should also avoid placing unused styles in the file. If you have questions about Brosix themes, please contact us.

An important note: We provide many screenshots. This is to allow you to understand how Brosix is used and how your design will be used. You don’t have to design so many windows. Your work is to create buttons, background images and the stylesheet that will automatically be used by all Brosix GUI components.

Download the screenshots