Differences

This shows you the differences between two versions of the page.

--- design:interface [2014/01/06 11:30]
emillyriverz [Console]
+++ design:interface [2015/09/15 09:31] (current)
Den Approved
@@ Line 103: / Line 103: @@
 ==== Form sections ====
-Usually are placed in //Profile view// or //Join// forms. Here are the examples of sections as information,
+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:
-{{:design:basic-info.png|}}
+Profile edit form:
-and sections in edit:
+{{:design:2sections.png|}}
-{{:design:basicinfoedit.png|}}
+Profile view form:
+{{:design:2sectionsinfo.png|}}
+Form sections are useful to make a huge form readable and to help users find related info easier.
 ===== Popup confirmation =====
@@ Line 126: / Line 128: @@
 ===== Content menu =====
-{{:design:tabshover.png|}}:
+{{:design:tabshover.png|}}
-Consists of //Tabs// that indicate the type of existing content. See the example of active //Tab// and hover above.
+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 =====
-A set of special buttons placed in a right top corner. Console buttons differ from each other, as some of buttons link to a popup confirmation, some link to other web-page (Join page for example), some contain just a //drop down// menu, some contain a drop down menu with an arrow, and some buttons should be clicked before they show up the drop down menu and turn to hover state.
+Console is a persistent collection of interactive controls that help users receive real-time information and perform actions related to their account from every part of the site. The console is typically placed in the top right corner. Console button behavior may differ, as some link to a popup window (ex. Sign in), others link to other pages (ex. Sign up button links to Join page), etc.
+Console buttons before signing in:
+{{:design:sign-in-sign-up.png|}}
+Console buttons after signing in:
+{{:design:consoleaftersignin.png|}}
+All console buttons have //hover// state. All the console buttons have //clicked// state, except the buttons linked to other pages or popup windows.
+==== Console dropdown menus ====
+Some buttons may contain dropdown menus. Dropdown menu presence may or may not be hinted with an arrow-shaped graphic. Dropdowns may be activated on //hover// and/or //click// events.
+{{:design:dropdownen.png|}}
+{{:design:dropdownmenuandarrow.png|}}
+{{:design:clickkon.png|}}
+==== Console counters ====
+Console buttons may contain //counters// (Mailbox, Notifications and Invitations). Counters are displayed as highlighted indicators and numbers. They have two states, //new// (e.g., a new message, new invitation, new notification) and //seen// (seen, but not read yet).
+{{:design:counters111.png|}}
+{{:design:countersdark.png|}}
+{{:design:maiboxinvitnocounter.png|}}
+The //New// indicator only lasts until the first click, and then it can change to the //seen// state (I've received a new invitation but I haven't acted upon it yet). If there's no reason for the //seen// stage, counter disappears completely.
+==== Console list items ====
+Console items may have lists inside, and the items of those lists may have the //new// and //seen// states:
+{{:design:notifici.png|}}
+Some list items may not only contain text, but also pictures and links. In cases like the invitation list, there may also be additional buttons (like //accept// and //ignore// in this example).
+{{:design:invitationacceptignore.png|}}
+===== Feedback messages =====
+{{:design:feedbackmessages.png|}}
+Feedback messages are bright-colored messages that appear for a few seconds to give user site feedback about a just completed action.
+Feedback messages contain error, warning, or confirmation text information; each type of these has its own color. The "x" (close) button closes a feedback message instantly.
+===== Annotation message =====
+{{:design:anno_warning.png|}}
+Annotation messages are similar to feedback messages but are displayed persistently in the webpage flow. An annotation message has a warning icon and can't be closed.
+You can use an annotation message to make an important warning before some action, or to inform about the result of the action, if it deserves to stay persistenly on the page (e.g. //no results for your search//).
+===== Lists =====
+List is a table that contains various items your plugin may have. Usually lists contain thumbnail photos, links and a text, with table rows differentiated by alternating colors. You can find examples of lists in //Members//, //Photos//, and //Videos// pages.
+User list (with small avatars):
+{{:design:userlist1.png|}}
+Photo list (with mid-size picture thumbnails):
+{{:design:photolist1.1.png|}}
+Video list (with mid-size picture thumbnails and info):
+{{:design:videolist1.1.png|}}
+===== Paging =====
+{{:design:paging.png|}}
+Used for navigating and display the current location in the paged data. Previous/next icons are present if there are more than 2 pages of data.
+===== Icons =====
+When developing your plugins, you may need various icons for boxes, buttons, etc. Here's what Oxwall offers:
+Standard icon set:
+{{:design:iconset.png|}}
+Tiny icon set:
+{{:design:tinyiconset.png|}}
+Please note that every theme may have its own icons, although the sets should be identical to the ones in the [[design:psd-style-guides|Theme StyleGuide]].

Oxwall Software Documentation

User Tools

Site Tools

Differences

Page Tools