1. Software Application User Interface Graphics Design Project January 2010

2. Meshstro Application
Notes: Meshstro – formerly called Smarter Documents – is a Microsoft Outlook plug-in that connects the contents of your inbox with documents on the desktop and related information from social networks and internet public databases to provide an information web contextually binding together information within communications, stored documents and files, internet databases, news feeds and social networking.
Meshstro allows users to rapidly find the information they need wherever it is without having to switch between applications to find it. This solution brings together and desktop search, information discovery and contextual management.
This image shows an old version of the application ‘Look & Feel’ - later in this Powerpoint – the application designs shown reflect the look we are striving for.

3. Three Primary Application ‘Views’
SPINE
SIDEBAR VIEW
Notes: Meshstro comprises of three primary user ‘views’ of information:
Spine
Sidebar View
Preview
PREVIEW

4. Design Project General Requirements
Items Requiring Design: We are looking for designs for 5 main graphical elements to be used within a new software application called Meshstro:
Button Base – to be used across the application in different sizes according to location of use – the button needs to house different icons [see below] within it accordingly to it’s specific usage in any one single location.
A Set of Icons to be housed with the button – only one icon at any one time. These need to be designed to accommodate the various button base sizes. Additionally a number of these icons will be used standalone i.e. not housed within the button.
An Image Frame to house an image which optionally may be adorned with a set of smaller ‘badges’ reflecting information about an adjacent informational item portrayed alongside the frame.
Indexer Status Control - shows indexing activity status and the % of completion. Can be 'Pressed' to pause indexing or restart indexing from a paused state.
A Scroll Bar allowing users to scroll information lists vertically.
Currently the designs shown in this PowerPoint are temporary they are shown only as examples of what we are seeking. However the overall Design / ‘Look & Feel’ of the application is final so all designed elements need to fit with this application style including their use of color.
The following pages show provide further details for each graphical element.

5. Button Base Design Specifications
Notes:
Button Base comprises of a rounded square background with an icon centered within [See Icon Design Specifications]
Required in 3 sizes: 26x26 pixels, 20x20 pixels & 16x16 pixels.
The icons within them are: 20x20 pixels, 16x16 pixels & 12x12 pixels respectively.
Button together with the inset icon needs to reflect 4 states: Press, Hover, Not-selected [i.e. normal] & Disabled.
Button Base [3sizes: 26x26 pixels, 20x20 pixels & 16x16 pixels]
Example
Icon [3sizes: 20x20 pixels, 16x16 pixels & 12x12 pixels]
States [Press, Hover, Not-selected [i.e. normal] & Disabled]

6. Set of Icons Design Specifications
Notes:
We are looking for 26 different icons being designed. [see List of Icon Set]
All these icons will be used within the button base [See Button Base Design Specifications] and stand alone
The stand alone version of any icon is the same icon rotated counter-clockwise ~ 30%.
All icons need to be in 3 sizes: 20x20 pixels, 16x16 pixels & 12x12 pixels.
Icon in Button Example
Button Base[3sizes: 26x26 pixels, 20x20 pixels & 16x16 pixels]
Icon [3sizes: 20x20 pixels, 16x16 pixels & 12x12 pixels]
Stand Alone Icon Example
Icon [3sizes: 20x20 pixels, 16x16 pixels & 12x12 pixels] Rotated counter clockwise ~ 30 degrees

7. Locations of Buttons / Icons
SPINE
SIDEBAR VIEW
Send Message
Book Appointment
Search
Back Button
Open Address Book
Message
Search Google*
Conversation
Open LinkedIn*
Person
Open Facebook*
Organization
Open Twitter*
Document
Open WikiPedia*
Sort Listed Items
Search within
Minimize List / Restore
Maximize List / Restore
Channels
Dashboard
Actions
Favorites
Web Page
Settings
‘In the News’
Help
‘On the Way’
‘Tell a Friend’
* will insert company logo into button base
Feedback
Open/Close

8. Icon Set Search Message Conversation Person Document Organization
Channels
Dashboard
Tasks
Favorites
Settings
Help
‘Tell-a-Friend’
Feedback
Open/Close Sidebar
Back Button
Appointments
Location
Address Book
Search Within List
Show More Options
Minimize/Restore List
Maximize/Restore List
Web Page
‘On-the-Web’
‘In-the-News’
Notes: The specific location(s) for each of these icons is shown following this page on one page / icon

9. Search Button

10. Message Button

11. Conversation Button

12. Person Button

13. Document Button

14. Organization Button

15. Channels, Tasks, Favorites & Dashboard Buttons
Both these product features have not be implemented yet.
Channels : Folder to store & share inbox data with others
Dashboard: Larger composite view of information
Tasks: Aggregated view of pending tasks for a person or project
Favorites: Indicates item is a favorite – i.e. person, document or organization The usage, size & state model from an button design perspective is the same as for Person, Message, Conversation, Document or Organization icons with locations on the Spine, in several Sidebar & Preview locations.

16. Settings Button

17. Help Button

18. ‘Tell a Friend’ Button

19. Feedback Icon

20. Open/Close Sidebar Button

21. Back Button

22. Appointments Icon

23. Location Icon

24. Address Book Icon

25. Header Control Bar Buttons
Notes: We are looking for 4 Buttons as follows:
Search Within List
Show More Options
Minimize/Restore List
Maximize/Restore List

26. Web Page Icon

27. ‘In the News’ Icon

28. ‘On the Web’ Icon

29. Image Frame Design Specifications
Notes:
The Frame need to be in 2 sizes: 72x56 pixels & 36x28 pixels.
The Frame houses a square image [photo or graphic] which optionally has two additional ‘badge’ images attached on the right hand side
The image inside can be two sizes: 48x48 pixels & 24x24 pixels.
The attached badges have two sizes: 24x24 pixels & 12x12 pixels.
There are 6 badge designs required:
indicates text list is a Message
indicates Message [in text list] has an attachment
indicates Message [in text list] that has been forwarded
indicates Message [in text list] that has been replied to
indicates Message [in text list] is part of a conversation [i.e. message thread]
[The very right-hand side badge only] suggests that clicking this badge will lead user elsewhere example may be an icon like this ‘ > ’
The Frame needs to reflect 3 states which are triggered as follows:
The mouse is not inside the Frame or the boundary of the adjacent Text List > normal state
The mouse is not inside the Frame but is within the boundary of the Text List > Frame needs to change to encourage user to move and hover over it – [See the Yahoo Messenger ‘Friends Icon ‘ frame in the Friends list for the idea we are looking for.]
The mouse is hovered over the Frame > Frame needs to change to reflect it is now selected.
Text List List
Image
Badge [2 sizes: 24x24 pixels & 12x12 pixels]
Image [2 sizes: 48x48 pixels & 24x24 pixels]
Frame [2 sizes: 56x72 pixels & 28x36 pixels]

30. Image Frame Locations SIDEBAR VIEW PREVIEW Image Frame Appointments
‘Location/Map’
Message Sender Photo Frame

31. Indexer Status Control Design Specifications
Notes:
The Indexer Status Control show the indexing activity status and the % of completion [the application indexes the contents of the inbox].
The Control can be pressed to pause indexing & then pressed again to restart indexing from a paused state. We are looking for a symbols similar to these II & u within the design – a la DVD play / pause controls
The Control has 2 sizes: 64x64 pixels & 20x20 pixels.
The Control needs to reflect 4 states each for both indexing active & paused : Press, Hover, Not-selected [i.e. normal] & Disabled.

32. Scroll Bar Design Specifications
Notes:
Scroll bar has 4 components: Scroll Up, Scroll Down, Slider Bar & Background
The Scroll bar is 16 pixels wide and its height is proportional to the list length
Scroll Up, Scroll Down, Slider Bar all need to reflect 3 states: Press, Hover, Not-selected [i.e. normal].
SIDEBAR VIEW
Scroll Bar
Scroll Up/down [ 1size: 16x16 pixels]
Background [ width 16 pixels – height proportional to list length]
Slider Bar [ width 16 pixels – height proportional to list length]

33. END