Download - From Design to UML to Working Wireframe
![Page 1: From Design to UML to Working Wireframe](https://reader031.vdocuments.net/reader031/viewer/2022013013/58ec81761a28abf6188b46c7/html5/thumbnails/1.jpg)
STEVEN VERHOESTui/ux designer
![Page 2: From Design to UML to Working Wireframe](https://reader031.vdocuments.net/reader031/viewer/2022013013/58ec81761a28abf6188b46c7/html5/thumbnails/2.jpg)
Since 1993
![Page 3: From Design to UML to Working Wireframe](https://reader031.vdocuments.net/reader031/viewer/2022013013/58ec81761a28abf6188b46c7/html5/thumbnails/3.jpg)
FROM DESIGN TO UML TO WORKING WIREFRAMES
Ux beers
![Page 4: From Design to UML to Working Wireframe](https://reader031.vdocuments.net/reader031/viewer/2022013013/58ec81761a28abf6188b46c7/html5/thumbnails/4.jpg)
PRODATA MOBILITY SYSTEMSclient
![Page 5: From Design to UML to Working Wireframe](https://reader031.vdocuments.net/reader031/viewer/2022013013/58ec81761a28abf6188b46c7/html5/thumbnails/5.jpg)
PROJECT: MOBIGUIDER
Complete solution for Intelligent Transportation Systems and Automatic Fare Collection
![Page 6: From Design to UML to Working Wireframe](https://reader031.vdocuments.net/reader031/viewer/2022013013/58ec81761a28abf6188b46c7/html5/thumbnails/6.jpg)
PROJECT: MOBIGUIDERMy design brief
![Page 7: From Design to UML to Working Wireframe](https://reader031.vdocuments.net/reader031/viewer/2022013013/58ec81761a28abf6188b46c7/html5/thumbnails/7.jpg)
![Page 8: From Design to UML to Working Wireframe](https://reader031.vdocuments.net/reader031/viewer/2022013013/58ec81761a28abf6188b46c7/html5/thumbnails/8.jpg)
WHAT MAKES A BUSINESS APPLICATION
question
![Page 9: From Design to UML to Working Wireframe](https://reader031.vdocuments.net/reader031/viewer/2022013013/58ec81761a28abf6188b46c7/html5/thumbnails/9.jpg)
WHAT ARE THE CORE ELEMENTSquestion
![Page 10: From Design to UML to Working Wireframe](https://reader031.vdocuments.net/reader031/viewer/2022013013/58ec81761a28abf6188b46c7/html5/thumbnails/10.jpg)
FORMS - LISTS - NAVIGATION
![Page 11: From Design to UML to Working Wireframe](https://reader031.vdocuments.net/reader031/viewer/2022013013/58ec81761a28abf6188b46c7/html5/thumbnails/11.jpg)
![Page 12: From Design to UML to Working Wireframe](https://reader031.vdocuments.net/reader031/viewer/2022013013/58ec81761a28abf6188b46c7/html5/thumbnails/12.jpg)
style
the
![Page 13: From Design to UML to Working Wireframe](https://reader031.vdocuments.net/reader031/viewer/2022013013/58ec81761a28abf6188b46c7/html5/thumbnails/13.jpg)
version 01.03
navigationwindow typesThe mobiguider navigation pattern organize the content so your users can navigate easily, intuitively and focus on the content.Every window, spilt- or edge-panel can be the starting point to open an other window, spilt- or edge-panel. Every window, spilt- or edge-panel can add content to the current content
[a][b] windowA window represents a functional part of the app. Each window can call or create other windows. Windows are logical containers of content and related functionalities. A window can contain 0, 1 or more split and/or edge-panels.
[c] edge-panelAn edge-panel is part of a window and extends the
functionality of that window. Typical use is for lookups,
search-result-details, parent-child relations, etc. An
edge-panel is by default modal.
recommendation: try to restrict overlapping edge-
panels (edge-panels opening edge-panels)
[d] split-panelUse split-panel when related content needs to be
shown but not fully depending and the content can live
by itself.
recommendation: try to avoid having more than 3 split-
panels in a window
[e] flip-viewThe flip-view control lets people flip through a collection
of items, one at a time. It offers people a way to look at
each individual item while navigating through the
collection.
ab
cd
e
![Page 14: From Design to UML to Working Wireframe](https://reader031.vdocuments.net/reader031/viewer/2022013013/58ec81761a28abf6188b46c7/html5/thumbnails/14.jpg)
version 01.03
landing pagethe landing page is the starting point of mobiguider.the landing page shows the available modules to the user.
Every module is organized as a pivot.
[a] modulesA module is a major part of the mobiguider suite. SSM
(service support manager), POI (Point Of Interest) are
modules. Every module groups functionalities into tiles.
[b] tilesTiles appear on the landing page and replace the application
shortcuts that would have appeared in a menu. People tap a
tile to launch a module functionality, search, create, … Every
tile opens a page.
[c] tile feedbacka tile can contain user feedback, so the landing page can act
as a dashboard
[d] tile colorThe color of a tile has in general no semantic meaning
(except red). Use color to group similar functions or
functionalities that have a logical connection.
important: the color of the tile must correspond with the color
of the page header [e]
[f] reduse red only for high level warnings, for business critical
warnings, things that have to be done by the user before
anything else
[g] screen sizeA pivot on the landing page has no vertical scrollbar, so the
max height of the tiles may not exceed 430px. This results in
a min screen size of 675px wide by 480px height.
b
a
c
d
f
eg
![Page 15: From Design to UML to Working Wireframe](https://reader031.vdocuments.net/reader031/viewer/2022013013/58ec81761a28abf6188b46c7/html5/thumbnails/15.jpg)
version 01.03
pivotEach pivot is a kind of a tab, and the tabs are listed across the top.
Pivot pages are focused and efficient. Their primary focus is task-based action such as filtering, sorting, and showing related items. They’re used to promote and show relevant content. Try to limit the number of pivot pages to six or fewer.
a pivot is the combination of
[a] pivot title[b] pivot content[c] pivot commands
[d] navigationClicking on either the pivot title, the pivot content or the scrollbar [c] will focus the pivot. The active pivot will move to the left side and show it’s pivot buttons if buttons are present.
[!] shortcutsYou can switch from pivot to pivot by using the ALT-key plus the number of the nth pivot on the page. In the example ALT+4 will bring you to the last pivot.
d
a
b
c
![Page 16: From Design to UML to Working Wireframe](https://reader031.vdocuments.net/reader031/viewer/2022013013/58ec81761a28abf6188b46c7/html5/thumbnails/16.jpg)
version 01.03
pivot content:formA form is a representation of data items.
[a] A data item is a combination of a label and a value also known as a “value-pair”.
A data item can have one of the following states:[a] read[b] disabled[c] edit
Every state can have a different view.
a
b
c
![Page 17: From Design to UML to Working Wireframe](https://reader031.vdocuments.net/reader031/viewer/2022013013/58ec81761a28abf6188b46c7/html5/thumbnails/17.jpg)
version 01.03
a
b
form errorValidation rules will be checked the first time the user triggers the save or submit command. All validation errors will be shown on the form. Error indication disappears from the moment the user corrects the error and leaves the field.
[a][b] exclamationErrors are indicated by the exclamation mark.
[c] pivot titleHovering over the active pivot title will show all error messages. The exclamation mark will stay as long one filed in the pivot contains an error.
[d] hover areaMouse over the icon shows the error information in a tooltip.
c
a
b
cd
![Page 18: From Design to UML to Working Wireframe](https://reader031.vdocuments.net/reader031/viewer/2022013013/58ec81761a28abf6188b46c7/html5/thumbnails/18.jpg)
version 01.03
pivot content:listsLists represent a dataset. Every item in a list represents a data object.
[a] list no selectThe list is for information only. The user is not able to
select an item from the list.
[b] list single selectThe user can select one and only one item at a time.
[c] list multi selectThe user can select 0, 1 or more items from the list. He
can also deselect items.
a b c
![Page 19: From Design to UML to Working Wireframe](https://reader031.vdocuments.net/reader031/viewer/2022013013/58ec81761a28abf6188b46c7/html5/thumbnails/19.jpg)
version 01.03
command placementThe first step is to identify all the app commands and
organize them by functionality.
[a] command sets Group commands into command sets. The app bar displays
command sets as a unit, with a [b] divider between the sets.
[c] menus Consider whether your command sets would work better in a
command menu. Menus let you present more options in
less space and include interactive controls. A menu is a fly
out and follows the rules for fly outs.
placement rulesThere are a few ways to position commands within the app bar, and variations may occur depending upon certain circumstances. Below are command placement rules that should be followed whenever possible.
predictability To the extent possible, use consistent interaction and
command placement across all views of your app.
ergonomics Consider how the placement of specific commands can
improve the speed or ease with which a command can be
acted upon.
aesthetics Limit the number of commands to avoid the app bar from
looking complicated. Choose icons that are easy to
understand or predict. Keep text labels short.
a c
b
![Page 20: From Design to UML to Working Wireframe](https://reader031.vdocuments.net/reader031/viewer/2022013013/58ec81761a28abf6188b46c7/html5/thumbnails/20.jpg)
version 01.03
buttonsA button is not a command but a command is a button. Buttons are used when user interaction is required outside the appbar. Buttons are used in fly outs, dialog messages and in some cases in pivots.
There can only be one primary button on a screen.
[a] primary button[b] secondary button
[] button groups[c] allowed[d] allowed[e] not allowed
a secondary button
a primary button
a button a buttona button
a buttona button
a buttona buttona button
b
a
c
d
e
![Page 21: From Design to UML to Working Wireframe](https://reader031.vdocuments.net/reader031/viewer/2022013013/58ec81761a28abf6188b46c7/html5/thumbnails/21.jpg)
80 page document
![Page 22: From Design to UML to Working Wireframe](https://reader031.vdocuments.net/reader031/viewer/2022013013/58ec81761a28abf6188b46c7/html5/thumbnails/22.jpg)
style
the
one philosophyone framework
from analysisto developmentand testing
![Page 23: From Design to UML to Working Wireframe](https://reader031.vdocuments.net/reader031/viewer/2022013013/58ec81761a28abf6188b46c7/html5/thumbnails/23.jpg)
I’ll repeat it once
![Page 24: From Design to UML to Working Wireframe](https://reader031.vdocuments.net/reader031/viewer/2022013013/58ec81761a28abf6188b46c7/html5/thumbnails/24.jpg)
Style guide
80 page document
![Page 25: From Design to UML to Working Wireframe](https://reader031.vdocuments.net/reader031/viewer/2022013013/58ec81761a28abf6188b46c7/html5/thumbnails/25.jpg)
![Page 26: From Design to UML to Working Wireframe](https://reader031.vdocuments.net/reader031/viewer/2022013013/58ec81761a28abf6188b46c7/html5/thumbnails/26.jpg)
![Page 27: From Design to UML to Working Wireframe](https://reader031.vdocuments.net/reader031/viewer/2022013013/58ec81761a28abf6188b46c7/html5/thumbnails/27.jpg)
![Page 28: From Design to UML to Working Wireframe](https://reader031.vdocuments.net/reader031/viewer/2022013013/58ec81761a28abf6188b46c7/html5/thumbnails/28.jpg)
![Page 29: From Design to UML to Working Wireframe](https://reader031.vdocuments.net/reader031/viewer/2022013013/58ec81761a28abf6188b46c7/html5/thumbnails/29.jpg)
![Page 30: From Design to UML to Working Wireframe](https://reader031.vdocuments.net/reader031/viewer/2022013013/58ec81761a28abf6188b46c7/html5/thumbnails/30.jpg)
![Page 31: From Design to UML to Working Wireframe](https://reader031.vdocuments.net/reader031/viewer/2022013013/58ec81761a28abf6188b46c7/html5/thumbnails/31.jpg)
![Page 32: From Design to UML to Working Wireframe](https://reader031.vdocuments.net/reader031/viewer/2022013013/58ec81761a28abf6188b46c7/html5/thumbnails/32.jpg)
![Page 33: From Design to UML to Working Wireframe](https://reader031.vdocuments.net/reader031/viewer/2022013013/58ec81761a28abf6188b46c7/html5/thumbnails/33.jpg)
![Page 34: From Design to UML to Working Wireframe](https://reader031.vdocuments.net/reader031/viewer/2022013013/58ec81761a28abf6188b46c7/html5/thumbnails/34.jpg)
The Unified Modeling Language™ - UML - is OMG's most-used specification, and the way the world models not only application structure, behavior, and architecture, but also business process and data structure.
![Page 35: From Design to UML to Working Wireframe](https://reader031.vdocuments.net/reader031/viewer/2022013013/58ec81761a28abf6188b46c7/html5/thumbnails/35.jpg)
Use Case diagramsClass diagramsBPMN diagrams
![Page 36: From Design to UML to Working Wireframe](https://reader031.vdocuments.net/reader031/viewer/2022013013/58ec81761a28abf6188b46c7/html5/thumbnails/36.jpg)
State diagrams
![Page 37: From Design to UML to Working Wireframe](https://reader031.vdocuments.net/reader031/viewer/2022013013/58ec81761a28abf6188b46c7/html5/thumbnails/37.jpg)
A state diagram in the Unified Modeling Language is a is a diagram, representing the behavior of a system, which is composed of a finite number of states.
![Page 38: From Design to UML to Working Wireframe](https://reader031.vdocuments.net/reader031/viewer/2022013013/58ec81761a28abf6188b46c7/html5/thumbnails/38.jpg)
![Page 39: From Design to UML to Working Wireframe](https://reader031.vdocuments.net/reader031/viewer/2022013013/58ec81761a28abf6188b46c7/html5/thumbnails/39.jpg)
It’s getting worse
![Page 40: From Design to UML to Working Wireframe](https://reader031.vdocuments.net/reader031/viewer/2022013013/58ec81761a28abf6188b46c7/html5/thumbnails/40.jpg)
state diagram1state = screen
![Page 41: From Design to UML to Working Wireframe](https://reader031.vdocuments.net/reader031/viewer/2022013013/58ec81761a28abf6188b46c7/html5/thumbnails/41.jpg)
state diagram1substate = form
![Page 42: From Design to UML to Working Wireframe](https://reader031.vdocuments.net/reader031/viewer/2022013013/58ec81761a28abf6188b46c7/html5/thumbnails/42.jpg)
state diagram1substate = list
![Page 43: From Design to UML to Working Wireframe](https://reader031.vdocuments.net/reader031/viewer/2022013013/58ec81761a28abf6188b46c7/html5/thumbnails/43.jpg)
state diagram1transition = button
![Page 44: From Design to UML to Working Wireframe](https://reader031.vdocuments.net/reader031/viewer/2022013013/58ec81761a28abf6188b46c7/html5/thumbnails/44.jpg)
![Page 45: From Design to UML to Working Wireframe](https://reader031.vdocuments.net/reader031/viewer/2022013013/58ec81761a28abf6188b46c7/html5/thumbnails/45.jpg)
The model
![Page 46: From Design to UML to Working Wireframe](https://reader031.vdocuments.net/reader031/viewer/2022013013/58ec81761a28abf6188b46c7/html5/thumbnails/46.jpg)
becomes the wireframe
![Page 47: From Design to UML to Working Wireframe](https://reader031.vdocuments.net/reader031/viewer/2022013013/58ec81761a28abf6188b46c7/html5/thumbnails/47.jpg)
states
States are screensor sub screens
![Page 48: From Design to UML to Working Wireframe](https://reader031.vdocuments.net/reader031/viewer/2022013013/58ec81761a28abf6188b46c7/html5/thumbnails/48.jpg)
Transitions are buttons
![Page 49: From Design to UML to Working Wireframe](https://reader031.vdocuments.net/reader031/viewer/2022013013/58ec81761a28abf6188b46c7/html5/thumbnails/49.jpg)
Stereotypes are behavior or presentation
![Page 50: From Design to UML to Working Wireframe](https://reader031.vdocuments.net/reader031/viewer/2022013013/58ec81761a28abf6188b46c7/html5/thumbnails/50.jpg)
VP state model
XML
BMML FILES
prototype
My little black box
![Page 51: From Design to UML to Working Wireframe](https://reader031.vdocuments.net/reader031/viewer/2022013013/58ec81761a28abf6188b46c7/html5/thumbnails/51.jpg)
![Page 52: From Design to UML to Working Wireframe](https://reader031.vdocuments.net/reader031/viewer/2022013013/58ec81761a28abf6188b46c7/html5/thumbnails/52.jpg)
demo
![Page 53: From Design to UML to Working Wireframe](https://reader031.vdocuments.net/reader031/viewer/2022013013/58ec81761a28abf6188b46c7/html5/thumbnails/53.jpg)
next steps
![Page 54: From Design to UML to Working Wireframe](https://reader031.vdocuments.net/reader031/viewer/2022013013/58ec81761a28abf6188b46c7/html5/thumbnails/54.jpg)
?
![Page 55: From Design to UML to Working Wireframe](https://reader031.vdocuments.net/reader031/viewer/2022013013/58ec81761a28abf6188b46c7/html5/thumbnails/55.jpg)
thanksquestions?