MindTouch Community Portal
Logged in: Logged in as: Log in
Register
Search:
Page last modified 16:06, 1 Nov 2010 by patriciaf
User:dev > Specs > UI Project Unicorn (Draft)
Page Notifications Off

UI Project Unicorn (Draft)

    Introduction

    This page and subpages stores ideas for a UI Refresh for MindTouch.

     

    Status

    Initial scoping by kalida, GuerricS

    Functional Specification

    Use Cases/Goals

    • Easily skinnable
    • Separate content area from tools
    • Flexibility for users to add new components with DekiScript/Javascript (no PHP required)
    • Encourage development/sharing of plugins/widgets
    • Enhanced editing experience / preview

    Non-goals

    Technical Specification

    UI requirements

     

    currentui-content.png Existing UI
    • Supplemental tools use too much real estate
    • Not easily extensible for user-made tools / UI components
    • Content area not primary focus
    • Heavy PHP
    existing-mozilla.png

    Mozilla Developer Center

    • Clean focus on content
    • Visually separated sidebar
    ui-brainstorming.JPG

    uiMeeting2.png
     

    Upcoming UI Ideas

    • Separate tools / meta information to sidebar
    • Pluggable dekiscript templates to populate
    • Primary rendering on API side, thin PHP glue layer
    • Create extensible
    designA.png

    Design A

    • Nav bar, sidebar, center content
    designB.png

    Design B

     
    UI-Refresh-open-panel.png

    Wireframe 1 (open side panel)

    • The panels need to be wider
    • Date format should be pretty and not the current in product formatting. i.e. Oct 27, 2010 6:55pm
    • We won't want to hide the side panel since it hides functionality
    • Need to display breadcrumbs
    • Can you put the page visibility at the top of the right side panel?
    • Can you include additional tools in the page footer? Like print, rss, page modified as well as page rating info
    UI-Refresh-closed-panel.png

    Wireframe 1 (collapsed side panel)

     
    UI-Refresh-open-navtree.png Wireframe 2 (open nav tree)
    UI-Refresh-closed-navtree.png Wireframe 2 (closed nav tree)

    API requirements

    Tag page
    What links here

    Files 11

    Attach file or image
    FileVersionSizeModified 
    Viewing 2 of 2 comments: view all
    #1
    patriciaf says:
    @guerrics , @kalida - I added 2 new wireframes to the bottom of this page that show the revisions guerric and I talked about. let me know what you guys think.
    Posted 16:08, 1 Nov 2010
    #2
    kalida says:
    @patriciaf, @guerrics: Nice! These are really coming along, I like the collapsible nav pane (I feel a lot of wikis may disable that / replace it with their own content... it seems it's mostly sites like MSDN that have that tree nav). With the nav collapsed, I like how the content takes the center stage.
    Posted 17:02, 1 Nov 2010
    Viewing 2 of 2 comments: view all
    You must login to post a comment.
    MindTouch Social Knowledge Base

    Copyright © 2011 MindTouch, Inc. Powered by