SlideShare ist ein Scribd-Unternehmen logo
1 von 14
Downloaden Sie, um offline zu lesen
Knocking down walls
LOLagileUCD




MobileDesign, 20th April 2009
Hello, MobileDesign
I’m going to show you everything
It’s more fun when they’re together
“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”
See also http://www.slideshare.net/theinfonaut/are-agile-projects-doomed-to-halfbaked-design




                                Sometimes it’s hard to tell them apart
Here’s how we have them play well at FP
We don’t keep people in boxes
We choose our tools carefully
quot;Everything is vague
 to a degree you do
 not realise till you
have tried to make it
       precise”
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.
right fidelity, right temperature
change isn’t frightening!
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

Weitere ähnliche Inhalte

Ähnlich wie Knocking Down Walls

How to make slide with LaTeX and Beamer
How to make slide with LaTeX and Beamer How to make slide with LaTeX and Beamer
How to make slide with LaTeX and Beamer 光风
 
Beamer guide By KiJoo Kim (a.k.a. Daisyweb)
Beamer guide By KiJoo Kim (a.k.a. Daisyweb)Beamer guide By KiJoo Kim (a.k.a. Daisyweb)
Beamer guide By KiJoo Kim (a.k.a. Daisyweb)mustainmtn
 
Introduction to JavaFX
Introduction to JavaFXIntroduction to JavaFX
Introduction to JavaFXFulvio Corno
 
Detection and Localization of Text Information in Video Frames
Detection and Localization of Text Information in Video FramesDetection and Localization of Text Information in Video Frames
Detection and Localization of Text Information in Video FramesIOSR Journals
 
InRoads V8i Templates Library Creation
InRoads V8i Templates Library CreationInRoads V8i Templates Library Creation
InRoads V8i Templates Library CreationJoe Lukovits
 
annotation_tutorial_2008
annotation_tutorial_2008annotation_tutorial_2008
annotation_tutorial_2008tutorialsruby
 
JavaFX fundamentals
JavaFX fundamentalsJavaFX fundamentals
JavaFX fundamentalsFulvio Corno
 
Gephi Tutorial Visualization
Gephi Tutorial VisualizationGephi Tutorial Visualization
Gephi Tutorial VisualizationGephi Consortium
 
dFontographer
dFontographerdFontographer
dFontographerInsforia
 
Corel photo paint object model diagram
Corel photo paint object model diagramCorel photo paint object model diagram
Corel photo paint object model diagramDavid Llulluy
 
Template Building Workshop
Template Building WorkshopTemplate Building Workshop
Template Building Workshopnorton07302
 

Ähnlich wie Knocking Down Walls (14)

How to make slide with LaTeX and Beamer
How to make slide with LaTeX and Beamer How to make slide with LaTeX and Beamer
How to make slide with LaTeX and Beamer
 
Beamer guide By KiJoo Kim (a.k.a. Daisyweb)
Beamer guide By KiJoo Kim (a.k.a. Daisyweb)Beamer guide By KiJoo Kim (a.k.a. Daisyweb)
Beamer guide By KiJoo Kim (a.k.a. Daisyweb)
 
Introduction to JavaFX
Introduction to JavaFXIntroduction to JavaFX
Introduction to JavaFX
 
Detection and Localization of Text Information in Video Frames
Detection and Localization of Text Information in Video FramesDetection and Localization of Text Information in Video Frames
Detection and Localization of Text Information in Video Frames
 
InRoads V8i Templates Library Creation
InRoads V8i Templates Library CreationInRoads V8i Templates Library Creation
InRoads V8i Templates Library Creation
 
PSD to HTML
PSD to HTMLPSD to HTML
PSD to HTML
 
Metro app design
Metro app designMetro app design
Metro app design
 
annotation_tutorial_2008
annotation_tutorial_2008annotation_tutorial_2008
annotation_tutorial_2008
 
JavaFX fundamentals
JavaFX fundamentalsJavaFX fundamentals
JavaFX fundamentals
 
Gephi Tutorial Visualization
Gephi Tutorial VisualizationGephi Tutorial Visualization
Gephi Tutorial Visualization
 
dFontographer
dFontographerdFontographer
dFontographer
 
Corel photo paint object model diagram
Corel photo paint object model diagramCorel photo paint object model diagram
Corel photo paint object model diagram
 
Template Building Workshop
Template Building WorkshopTemplate Building Workshop
Template Building Workshop
 
What's new in pscad v4.6.1
What's new in pscad v4.6.1What's new in pscad v4.6.1
What's new in pscad v4.6.1
 

Mehr von twh

X-Construction Lite: HCI Evaluation
X-Construction Lite: HCI EvaluationX-Construction Lite: HCI Evaluation
X-Construction Lite: HCI Evaluationtwh
 
Tips for mobile success
Tips for mobile successTips for mobile success
Tips for mobile successtwh
 
Making Sense of Sensors
Making Sense of SensorsMaking Sense of Sensors
Making Sense of Sensorstwh
 
Hacks & hackers
Hacks & hackersHacks & hackers
Hacks & hackerstwh
 
Why the web won't do
Why the web won't doWhy the web won't do
Why the web won't dotwh
 
Algorithmic art
Algorithmic artAlgorithmic art
Algorithmic arttwh
 
Mobile apps and live data
Mobile apps and live dataMobile apps and live data
Mobile apps and live datatwh
 
Eduserv 2010
Eduserv 2010Eduserv 2010
Eduserv 2010twh
 
MoMoLondon Demo Night: Guardian Anywhere
MoMoLondon Demo Night: Guardian AnywhereMoMoLondon Demo Night: Guardian Anywhere
MoMoLondon Demo Night: Guardian Anywheretwh
 
Capitalising on Popular Culture
Capitalising on Popular CultureCapitalising on Popular Culture
Capitalising on Popular Culturetwh
 
Mobile Mountains - OverTheAir 2009
Mobile Mountains - OverTheAir 2009Mobile Mountains - OverTheAir 2009
Mobile Mountains - OverTheAir 2009twh
 
Agile2009
Agile2009Agile2009
Agile2009twh
 
Many paths to the top of the (mobile) mountain - Skiff Warmup
Many paths to the top of the (mobile) mountain - Skiff WarmupMany paths to the top of the (mobile) mountain - Skiff Warmup
Many paths to the top of the (mobile) mountain - Skiff Warmuptwh
 
Revenue Opportunities in Mobile
Revenue Opportunities in MobileRevenue Opportunities in Mobile
Revenue Opportunities in Mobiletwh
 
Feel the FP-ness
Feel the FP-nessFeel the FP-ness
Feel the FP-nesstwh
 
Knitting Design & Development Together
Knitting Design & Development TogetherKnitting Design & Development Together
Knitting Design & Development Togethertwh
 
Strengths, Weakness and Trade-offs of Mobile Platforms
Strengths, Weakness and Trade-offs of Mobile PlatformsStrengths, Weakness and Trade-offs of Mobile Platforms
Strengths, Weakness and Trade-offs of Mobile Platformstwh
 
A Year of Scrum
A Year of ScrumA Year of Scrum
A Year of Scrumtwh
 
£5 Apps Sanitised
£5 Apps Sanitised£5 Apps Sanitised
£5 Apps Sanitisedtwh
 
Mo Mo Birthday
Mo Mo BirthdayMo Mo Birthday
Mo Mo Birthdaytwh
 

Mehr von twh (20)

X-Construction Lite: HCI Evaluation
X-Construction Lite: HCI EvaluationX-Construction Lite: HCI Evaluation
X-Construction Lite: HCI Evaluation
 
Tips for mobile success
Tips for mobile successTips for mobile success
Tips for mobile success
 
Making Sense of Sensors
Making Sense of SensorsMaking Sense of Sensors
Making Sense of Sensors
 
Hacks & hackers
Hacks & hackersHacks & hackers
Hacks & hackers
 
Why the web won't do
Why the web won't doWhy the web won't do
Why the web won't do
 
Algorithmic art
Algorithmic artAlgorithmic art
Algorithmic art
 
Mobile apps and live data
Mobile apps and live dataMobile apps and live data
Mobile apps and live data
 
Eduserv 2010
Eduserv 2010Eduserv 2010
Eduserv 2010
 
MoMoLondon Demo Night: Guardian Anywhere
MoMoLondon Demo Night: Guardian AnywhereMoMoLondon Demo Night: Guardian Anywhere
MoMoLondon Demo Night: Guardian Anywhere
 
Capitalising on Popular Culture
Capitalising on Popular CultureCapitalising on Popular Culture
Capitalising on Popular Culture
 
Mobile Mountains - OverTheAir 2009
Mobile Mountains - OverTheAir 2009Mobile Mountains - OverTheAir 2009
Mobile Mountains - OverTheAir 2009
 
Agile2009
Agile2009Agile2009
Agile2009
 
Many paths to the top of the (mobile) mountain - Skiff Warmup
Many paths to the top of the (mobile) mountain - Skiff WarmupMany paths to the top of the (mobile) mountain - Skiff Warmup
Many paths to the top of the (mobile) mountain - Skiff Warmup
 
Revenue Opportunities in Mobile
Revenue Opportunities in MobileRevenue Opportunities in Mobile
Revenue Opportunities in Mobile
 
Feel the FP-ness
Feel the FP-nessFeel the FP-ness
Feel the FP-ness
 
Knitting Design & Development Together
Knitting Design & Development TogetherKnitting Design & Development Together
Knitting Design & Development Together
 
Strengths, Weakness and Trade-offs of Mobile Platforms
Strengths, Weakness and Trade-offs of Mobile PlatformsStrengths, Weakness and Trade-offs of Mobile Platforms
Strengths, Weakness and Trade-offs of Mobile Platforms
 
A Year of Scrum
A Year of ScrumA Year of Scrum
A Year of Scrum
 
£5 Apps Sanitised
£5 Apps Sanitised£5 Apps Sanitised
£5 Apps Sanitised
 
Mo Mo Birthday
Mo Mo BirthdayMo Mo Birthday
Mo Mo Birthday
 

Kürzlich hochgeladen

Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 

Kürzlich hochgeladen (20)

Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 

Knocking Down Walls

  • 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”
  • 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
  • 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