Differences

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

--- design:interface [2014/01/08 10:02]
emillyriverz [Drop Down menu in Console]
+++ design:interface [2015/09/15 09:31] (current)
Den Approved
@@ Line 134: / Line 134: @@
 ===== Console =====
+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:
@@ Line 139: / Line 141: @@
 {{:design:sign-in-sign-up.png|}}
-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:
 {{:design:consoleaftersignin.png|}}
-Console buttons after signing in.
+All console buttons have //hover// state. All the console buttons have //clicked// state, except the buttons linked to other pages or popup windows.
-{{:design:dropdownen.png|}}
+==== Console dropdown menus ====
-some contain just a //drop down// menu,
+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:dropdownmenuandarrow.png|}}
+{{:design:dropdownen.png|}}
-some contain a //drop down// menu with an //arrow//,
+{{:design:dropdownmenuandarrow.png|}}
 {{:design:clickkon.png|}}
-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.
+==== Console counters ====
-{{:design:counters111.png|}}
+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).
-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,
+{{:design:counters111.png|}}
 {{:design:countersdark.png|}}
-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.
 {{:design:maiboxinvitnocounter.png|}}
-If all the messages, invitations, notifications are read, the counter simply disappears.
+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 ====
-===== Drop Down menu in Console =====
+Console items may have lists inside, and the items of those lists may have the //new// and //seen// states:
-The example of "new" and "seen" notifications in console:
 {{:design:notifici.png|}}
-Notifications contain not only text, but also a user photo and links.
+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|}}
-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.
 ===== Feedback messages =====
 {{:design:feedbackmessages.png|}}
-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.
+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|}}
-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 .
+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