Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Wiki Markup
\\

Below are super simple starting patterns and mockups that can be used to start new mockups. These are not optimized, but provide starting points for notation and scribing UI requirements.

(+)  There are many active spec teams working on user interfaces, and will have additional mockups available. Can contact kgerdink@kuali.org to learn more, or request additional examples.


{section}
{column:width=40%}
{panel:title=Contents|borderStyle=dashed|borderColor=#A40000|titleBGColor=#E8E8E8|bgColor=#F8F8F8}
{toc:outline=false|minLevel=1}
{panel}Learn about Rice and KFS UI Features and Functions: [OLE-Rice-KFS 101|OLE:OLE-Rice-KFS 101]
{column}
{column}
{column}
{section}

h2. Balsamiq Free Templates

* Sample Design Patterns:
** {link-window:http://www.mockupstogo.net|scrollbars=true|menubar=true|location=true|statusbar=true|resizable=true|width=800|height=600|icon=false}[http://www.mockupstogo.net]{link-window}
* Below require [Balsamiq |UI Mockup Tools for Design]for use in prototyping mockups.

h2. Online Design Patterns: Common UI Features

* [http://www.welie.com/patterns/|http://www.welie.com/patterns/]

h2. OLE Wireframes to download

[OLE-FS Maintenance e-doc UI template|OLE:OLE-FS Maintenance e-doc UI template]
[OLE-FS Transactional e-doc UI template|OLE:OLE-FS Transactional e-doc UI template]

| !Blank_LeftMenu-OLE.png|align=center,thumbnail,border=1!\\
\\
[BlankLeftMenu-OLE.bmml|^Blank_LeftMenu-OLE.bmml] | !Blank-OLE.png|align=center,thumbnail,border=1!\\
\\
[BlankOLE.bmml|^Blank-OLE.bmml] | !KNS_Search-OLE.png|align=center,thumbnail,border=1!\\
\\
[^KNS_Search-OLE.bmml] | !FederatedSearch-OLE.png|align=center,thumbnail,border=1!\\
\\
[^FederatedSearch-OLE.bmml]\\ |
| | !FederatedSearch_Results-OLE.png|align=center,thumbnail,border=1!\\
\\
[^FederatedSearch_Results-OLE.bmml]\\ | !eDoc-OLE.png|align=center,thumbnail,border=1!\\
\\
[^eDoc-OLE.bmml]\\ | !Maintenance Doc-OLE.png|align=center,thumbnail,border=1!\\
\\
  [^Maintenance Doc-OLE.bmml] |
*Optional:* Download all of above examples in single zip file of [OLE Wireframes|OLE Wireframe Templates^OLE-wireframes.zip].

h2. OLE SAMPLES - using Balsamiq

h6. Example: OLE Ingest/Load Records

!uploadFileForNovember.png|border=1!
!processingRepor2t.png|border=1!

h6. Example: OLE Bib Editor 

!wireframe-sample-Editor550.jpg|border=1!

h6. Example: Receiving Search Queue

!MockupOLEReceiveSearch-500.png|border=1!

h6. Additional Examples

 [Download OLE Mockups-Balsamiq/zip file|OLE Wireframe Templates^OLE_samples_balsamiq.zip] on above OLE past examples that can be used as additional templates for UX design and annotation.