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.

Box is used to display a standalone piece of content. Box as a design element.

Has optional parts such as:

Usually contains the title of widget and its icon.

Usually used for various selections and/or modes of content display.

Usually used for summary info and/or further actions with content.

Used for main form actions, standalone actions and is prominently displayed with unambiguous captions. Big size is recommended.

Used for group actions upon objects. Color coding may be applied for highlighting the meaning of an action. Modest size is recommended.

If it's used as a button, appears with mouse over effect. It can be used in profile view, forum and around the avatar area; small size is recommended.

A button or a block of buttons with optional dropdown menu. Usually more important content is in a block of buttons and less important is placed in the dropdown menu. It is often placed in the top right corner of a container. In case your plugin logic requires it, you can change the position. Use the dropdown menu with mouse over effect. Context action as a design element.

Oxwall forms may contain more than one action button. There are two types of form submit actions: positive (including neutral) and negative.

Positive submit action:

Example: Submit, Save, Register, Create, Add etc. Additional positive actions can be used as an alternative for a main action. For example, creating a blog post you can let user choose either to Publish or to Save as draft. When there are both main and alternative actions are together, it's recommended to highlight the predominating action by a CSS class, to indicate which is obviously the main.

Negative submit action:

Example: Cancel, Reset, Delete etc. Negative actions used to be before positive submit actions and are usually highlighted with special CSS class in order to prevent user from pressing it unintentionally.

Note: We use standard buttons for regular forms.

In order, to develop a form for creating the blog post. We would need a Publish button, below the form:

We have to give users an option to save it for future as well; let them edit the content later, till the time they would like to publish it. An alternative action is to Save as draft. The presence of the alternative action, requires the choosing of a main action. So we apply a special “positive” CSS style for the main action, which in this case would be Publish. In this theme we highlighted the button label with orange colour:

Forms sections are groups of table entries united by one topic. Examples of form sections can be found in Profile view or Join forms. Look at Basic and Appearance sections in this example:

Profile edit form:

Profile view form:

Form sections are useful to make a huge form readable and to help users find related info easier.

A floatbox with a confirmation text and a button offering a referential action. The Cancel button is absent, to prevent the undesired accidental clicking. We've put an X-close for canceling the action option. (Esc button cancels it as well)

The buttons to sort the content by several options. The first option is always default. The options label names have to be as short as possible and contain preferably less than 4-5 options to avoid the blocks of buttons grow out of the space.

Content menu is a tabbed selection of content and is used for displaying alternative or additional content for this page. Often content menu is used as an extension of site navigation, providing content hierarchy beyond main site menu.

Console buttons before signing in:

A set of special buttons placed in a top right corner. Console buttons differ from each other, as some of buttons link to popup confirmation (ex. Sign in), some link to other web-page (ex. Sign up button links to Join page),

Console buttons after signing in.

some contain just a drop down menu,

some contain a drop down menu with an arrow,

and some buttons show the drop down menu if only you click the button. All the console buttons turn to hover state if to navigate the mouse over them or click it, except the buttons that link to other pages or popup confirmations.

Also there are buttons that contain counters (Mailbox, Notifications and Invitations), counters usually consist of indicators highlighted with bright color, numbers and have two states: the state when it's “new” for example new message,new invitation or new notification,

and the state when it has been “seen, but not read” yet, the bright color of indicator only lasts till the first click, after the click it turns into more darker color.

If all the messages, invitations, notifications are read, the counter simply disappears.

The example of “new” and “seen” notifications in console:

Notifications contain not only text, but also a user photo and links.

In case it will be an invitation notification, additionally to user photos and links, buttons like accept/ignore on the example above can be used as well.

Bright colored messages appear for few seconds, have an “x-close” button if user would like to proceed before the message disappears itself, usually contain error, warning or confirmation text information; each type of information has it's own color, red for errors, yellow for warnings and green for confirmations.

There's also Anno messages, that differ from Feedback messages with not containing an “x-close” button, but having a warning icon. Anno appears usually when the user is searching for something that does not exist in the web area .