1 / 3

Requirements Information and data which need to be displayed or accessible to the user

User Interface Front-End Design/Development Workflow. Site Structure. Requirements Information and data which need to be displayed or accessible to the user. Sitemapping (Site Map) Flow Chart models of site structure displaying usable and accessible information/data/actions.

caldwell-porter
Download Presentation

Requirements Information and data which need to be displayed or accessible to the user

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. User Interface Front-End Design/Development Workflow Site Structure Requirements Information and data which need to be displayed or accessible to the user Sitemapping (Site Map) Flow Chart models of site structure displaying usable and accessible information/data/actions Wireframing (Mockups) Layout and Navigation models showing interaction of page components across and within multiple views, including usability considerations (UX) (…existing website?) “Information Architecture” (focus on content) “Interaction Design” (focus on tasks) Visual Design XHTML/CSS prototype model Testing code, images, and checking usability issues Graphics/Visual “themes” Creating templates and visual models for graphics/images Style Guide Outline of XHTML/CSS details, plus specs/samples of images and other media Front-End Production Final Images Final images (…and other media files) Back-End Integration Final database integration (and any programming required) Final Coding Final XHTML/CSS (…and other coding) Overview of the User Interface design and front-end development workflow.

  2. User Interface Flow Chart Log Out Login Search box (default opening screen) LeftNav Menu Dashboard Dashboard NM Info NM details Gateways Gateway Groups Nodes Node Groups Gateways (list) Gateway Groups (list) Nodes (list) Node Groups (list) Show Node Details Show Node Logs Show Node Routes Show Node Neighbors Show Node Data Points Show Node Status Points Set Channel Configuration Get Channel Configuration Get Current Meter Reading Get Node Information Get Communication Status Add to Group Generate Report Show Node List Edit Node Group Delete Node Group Generate Report Show Gateway Details Show Gateway Logs Show Gateway Routes Show Gateway Neighbors Edit Gateway Details Delete Gateway Connect Disconnect Collect Gateway Data Set Data Collection Schedule Delete Data Collection Show Network Tree Add to Group Show Gateway List Edit Gateway Group Delete Gateway Group Report Schedules (list) Report Schedules Show Report Tree Billing Read Data Completeness Interval Data Summary Node Outage Node Status System Health Node Group Data Completeness Node Data Completeness View/Edit Schedule Delete Schedule Report Dialog box Generate Report: PDF, HTML, CSV Reports Meter Errors Node Resets Time Syncs Taskbar: # Items Selected, Messages, Notifications Sample Interface top-level flow chart to an online application (“site mapping”)

  3. User Name | Logout logo Search Bar Supplemental Navigation (“Top Nav” Tabs) Tab Tab Tab Primary Navigation (“Left Nav” plus pull-out Menus) Secondary Navigation ( adjustable/editable Column Headers) Primary Content fixed width (retractable) “fluid” Generic User Interface mockup (“wire framing”)

More Related