Slides for a presentation I gave around bringing design and development together in an Agile/UCD environment. Ran out of time to gather stock photography, so substituted kitten hpotos.

1. Knocking down walls
LOLagileUCD
MobileDesign, 20th April 2009

2. Hello, MobileDesign

3. I’m going to show you everything

4. It’s more fun when they’re together

5. “When a technical wife and a design
husband love each other very much, they
have a special meeting and nine months
later a web site is born”

6. See also http://www.slideshare.net/theinfonaut/are-agile-projects-doomed-to-halfbaked-design
Sometimes it’s hard to tell them apart

7. Here’s how we have them play well at FP

8. We don’t keep people in boxes

9. We choose our tools carefully

10. quot;Everything is vague
to a degree you do
not realise till you
have tried to make it
precise”

11. Component Component Name Title Bar
Detailed Specification
Specification Specification Reference CanvasTitleBar
Client Client Summary
BBC BBC A general title bar to name the canvas currently active.This bar may include pagination to the right hand side when needed.
may also include prompts for the user, such as arrows to indicate next/previous canvas.
Project Project Usage
BBC Bitesize BBC Bitesize This is used throughout the application on all screen sizes. It will not be used on the splash screen.
States
It may display a pagination state depending on where it is in the application.
Design Specification
Below is an example of the CanvasTitleBar at 240x320.
Background blue has a 4px curvature. The width of the menu should be 100% width on the actual screen area (defined in
BaseScreenDescription of this document). If possible, the menu items/options should have a padding 2px smaller than the
very outermost edge.
Ideally the text (CanvasTitleBar_text) should have equal margins at the top, bottom, left. The text should also be aligned
Inactive Menu Items
centrally along the vertical axis . The color of the text is #333333, the weight of the text is bold. It may be necessary to trunc
Background and highlights, as detailed above. They have an outline color of (#D7F2FF). The two blue colours should be of
this text on smaller screens, or define text on a per screen basis. Refer to screen documents for language assets. On some
equal height. Font colour is #05303E.
screens, where additional assets are displayed on the right hand side, it will be necessary to limit the width of
Active Menu Items CanvasTitleBar_text.
Background and highlights, as detailed above. They have an outline color of (#FFFFFF). The two orange colours should be of
equal height.Font colour is #FFFFFF.
Selection of options
Items can be selected via up or down on the D-PAD. There are no transitions when selecting menu items.
The menu items have 2px padding between each other vertically
Component Component
Name Soft Keys Bar Name Base Screen Description
Specification Specification
Reference CanvasSoftKeysBar Reference BaseScreenDescription
Client Client
Summary Summary
BBC BBC
The softkey menu bar, to be displayed at the bottom of the canvas. This will display labels associated with the left soft key The base screen used throughout the application. This includes all components and their positioning on screen.
(LSK) and the right soft key (RSK). Directional prompts in the form of arrows may also be displayed in the center of this bar by
Usage
Project Project
means of graphical assets, although dynamically drawn arrows may be an option.
This is used throughout the application - there are different descriptions for 176px wide screens and 240px and above
BBC Bitesize BBC Bitesize
Usage screens.
This is used throughout the application on all screen sizes. It will not be used on the splash screen.
Design Example
States Examples of 240x320 screen, and 176x200 screen.
This component has active and inactive states. Active states may include menus and feedback in the form of modal popups.
Active states are described in detail in SoftKeyMenu component and ModalFeedback component.This component is
activated via LSK, RSK, FIRE, and D-PAD.
Design Specification
Below are examples of the CanvasSoftKeysBar.
The text for the LSK (CanvasSoftkeysBar_LSK_text) should be left aligned with the CanvasTitleBar_text item for consistency.
It should have equal margins at the top, bottom, left. The text for the RSK (CanvasSoftkeysBar_LSK_text) should have equal
margins at the top, bottom, right.
Left and right margins should be the same for both LSK and RSK text items.
The color of the text of both soft key labels is #FFFFFF, the weight of the text is normal.
Refer to screen documents for language assets.

12. right fidelity, right temperature

13. change isn’t frightening!

14. Thanks for listening
I’m Tom.Hume@futureplatforms.com,
http://twitter.com/twhume,
and http://tomhume.org/
No animals were harmed in the making of this presentation