All about developing user interfaces for Oxwall.

According to Oxwall design principles, user interfaces are implemented in plugins (not themes). These instructions in document serve more for plugin developers than for theme designers. We make it possible for you to build your functionality consistent with established Oxwall interface paradigms. This will be a result of integrated user experience which is our ultimate goal.

A standalone piece of content, including widgets and not only, placed in a box. Box as design element.

Box has optional parts such as:

Usually contains the title of widget and its icon which makes it easier to orientate.

Defines the variety of content.

Indicates an action can be made with the content.

Used for main form actions, standalone actions and is prominently displayed with unambiguous captions. A big size of standart buttons is inherent.

Used for group actions upon objects. Color coding may be applied for highlighting the meaning of an action. A modest size for button list is essential.

If it's used as a button, it has to appear on mouse over effect. It can be used in profile view, forum and below the avatar area. It characteristically has a small size.

A block of buttons with dropdown menu that allows some context actions upon it. We recommend to use if for the most important content. It is often placed on the top right corner of an object with a proper margin (in case your plugin logic requires it, you can change the position). Use it with mouse over effect. Context action as a design element.

Oxwall contains a number of forms. The forms vary from complicated ones to containing several buttons. There are two types of form submit: positive (including neutral) and negative.

Positive submit: Positive actions are the normal form actions like “Submit”, “Save”, “Register”, “Create”, “Add”, etc. These are considered to be those actions that forms are made for. Additional positive actions can be used as an alternative for the main action. For example, when creating a blog post you can let user choose either “Publish” it or “Save as draft”. When you have both main and alternative actions, it should be obvious which one is the main, so it should be marked with special CSS class. Positive actions should always be on the left side after the form.

Negative submit: Negative actions are form submits like “Cancel”, “Reset”, “Delete”, etc. These are actions that user should be warned about and prevented from doing accidentally. Negative actions should always be on the right side and marked with special CSS class.

Note: We use standard buttons for regular forms.

Imagine, we are developing the blog post creation form. We certainly need “Publish” button for that. Let it be on the left side, right behind the form:

But we also need to give users an option to save it for future edition without publishing right now. That would be an alternative action, “Save as draft”. Since we have an alternative action, we need to make clear which one is main. So we apply a special, “positive” CSS style for the main action, “Publish”. In this theme it makes button label orange:

What about editing a post? We need to let users cancel their ongoing changes. For that we will add “Cancel” button. Since it's a “negative” action, we locate it on the right side of the form to prevent user from accidentally clicking on it. We also need to give it a special, “negative” CSS style to emphasize its distinction from the regular buttons even more. In this theme it will be removing the button icon:

When the post is being edited we also need to enable the author to remove it completely. For that we will also add a negative button, “Delete post”:

If you see any type of confirmation in Oxwall it will be Facebox with confirmation text and one button. There shouldn't be “Cancel” button or link to prevent clicking accidental clicking. It should be enough to click “X” or hitting “Esc” to cancel the action.

Use this if you need to sort some content by several options. The first one should be default. You should make options labels as short as possible and preferrably not to have more than 4-5 options to prevent them from dividing into 2 strings. Sort control should take the whole content width and be placed right before the content it sorts.