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

XHTML/CSS prototype model

Testing code, images, and checking usability issues

Site Structure

Front-End Production

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

Final Images

Final images (…and other media files)

Final Coding

Final XHTML/CSS (…and other coding)

Overview of the User Interface design and front-end development workflow.

Back-End Integration

Final database integration(and any programming required)

Wireframing (Mockups)

Layout and Navigation models showing interaction of page components across

and within multiple views, including usability considerations (UX)

“Information Architecture”(focus on content) “Interaction Design”

(focus on tasks)

(…existing website?)

Visual Design

User Interface Front-End Design/Development Workflow

Reports

LeftNav MenuDashboard

Log Out

(default opening screen)

Login

Gateways (list)

Show Gateway DetailsShow Gateway LogsShow Gateway RoutesShow Gateway NeighborsEdit Gateway DetailsDelete GatewayConnectDisconnectCollect Gateway DataSet Data Collection ScheduleDelete Data CollectionShow Network TreeAdd to Group

Gateways

Gateway Groups

Nodes

Node Groups

Report Schedules

Gateway Groups (list)

Show Gateway ListEdit Gateway GroupDelete Gateway Group

Nodes (list)

Node Groups (list)

Show Node DetailsShow Node LogsShow Node RoutesShow Node NeighborsShow Node Data PointsShow Node Status PointsSet Channel ConfigurationGet Channel ConfigurationGet Current Meter ReadingGet Node InformationGet Communication StatusAdd to GroupGenerate Report

Show Node ListEdit Node GroupDelete Node GroupGenerate Report

Report Schedules (list)

View/Edit ScheduleDelete Schedule

Generate Report: PDF, HTML, CSV

NM details

Dashboard

NM Info

Search box

Taskbar: # Items Selected, Messages, Notifications

Report Dialog box

Show Report TreeBilling ReadData CompletenessInterval Data SummaryNode OutageNode StatusSystem Health

Node Group Data CompletenessNode Data Completeness

Meter ErrorsNode ResetsTime Syncs

User Interface Flow Chart

Sample Interface top-level flow chart to an online application (“site mapping”)

Primary Content

fixed width

(retractable)

“fluid”

Generic User Interface mockup (“wire framing”)

Primary Navigation

(“Left Nav”

plus pull-out Menus)

Tab Tab Tab

Supplemental Navigation (“Top Nav” Tabs)

User Name | Logout

Secondary Navigation ( adjustable/editable Column Headers)

logoSearch Bar