O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Ditto – Design Life Cycle Management Concept for DesOps (2016-17)

118 visualizações

Publicada em

You can read a related article Translating Value at Different Stages of Design with Minimal Waste here:

http://desops.io/2018/05/12/translating-value-at-different-stages-of-design-with-minimal-waste/


Also associated video here :
http://desops.io/2018/05/12/video-ditto-design-life-cycle-management-concept-for-desops-2016-17/

Publicada em: Design
  • Seja o primeiro a comentar

Ditto – Design Life Cycle Management Concept for DesOps (2016-17)

  1. 1. Samir Dash Ditto DesOps.io
  2. 2. The goal of this deck is to illustrate the typical user pain points in a user-centered design process in any software development life cycle and provide a scalable solution named Ditto that can provide the end to end design life cycle management.
  3. 3. Typical design process components in a User Centered Design (UCD) Wire-framing Visual Design Design Review/ Usability Tes>ng HTML-CSS Prototyping UI Development Idea>on DEV PLAN DEPLOY 1 3 4 2 5 TEST
  4. 4. UX + UI ( Design + Review ) Development + Deployment + TesAng Planning / Requirement IDEATION/ COLLABORATION WIRE-FRAMING / INFORMATION ARCHITECTURE VISUAL DESIGN / BRANDING REVIEW / USABILITY - TESTING HTML-CSS PROTOTYPING UI DEVELOPMENT Design is essential to any SDLC…
  5. 5. In typical design process there are user pain-points. INTERACTION DESIGNER VISUAL DESIGNER UX/TECH REVIEWER UI DEVELOPER UX + UI ( Design + Review ) Development + Deployment + TesAng Planning / Requirement Some last moment changes made directly into the UI implementaAon made my design source file unusable without the sanity check with the UI implementaAon! I wish there would be a single place that reflects the edits!
  6. 6. INTERACTION DESIGNER VISUAL DESIGNER UX/TECH REVIEWER UI DEVELOPER In typical design process multiple source-files at different stages makes it complex to manage the project. UX + UI ( Design + Review ) Development + Deployment + TesAng Planning / Requirement
  7. 7. In typical design process there are user pain-points. INTERACTION DESIGNER VISUAL DESIGNER UX/TECH REVIEWER UI DEVELOPER Some last moment changes made directly into the UI implementaAon made my design source file unusable without the sanity check with the UI implementaAon! I wish there would be a single place that reflects the edits! I referred UI PaQerns Library documenta>on and created the GUI mockup with Specs, but due to Agile nature of the project the changes keep coming and I had to re-work on the same screen and update the Specs and CSS names. Also I am fed up of finding the right CSS class from the UI Pa[erns Library code as a reference and design backwards to Visual Mockups! UX + UI ( Design + Review ) Development + Deployment + TesAng Planning / Requirement
  8. 8. In typical design process there are user pain-points. INTERACTION DESIGNER VISUAL DESIGNER UX/TECH REVIEWER UI DEVELOPER Some last moment changes made directly into the UI implementaAon made my design source file unusable without the sanity check with the UI implementaAon! I wish there would be a single place that reflects the edits! I referred UI PaQerns Library documenta>on and created the GUI mockup with Specs, but due to Agile nature of the project the changes keep coming and I had to re-work on the same screen and update the Specs and CSS names. Also I am fed up of finding the right CSS class from the UI Pa[erns Library code as a reference and design backwards to Visual Mockups! There are so many gaps between the mock-up and the implemented UI even if Pa[ern Library reference has been followed. I wish there is an easy way to help the team avoiding such issues. UX + UI ( Design + Review ) Development + Deployment + TesAng Planning / Requirement
  9. 9. INTERACTION DESIGNER VISUAL DESIGNER UX/TECH REVIEWER UI DEVELOPER UI Pa[erns Guidelines / SpecificaAons SAMPLE CODE In typical design process references made to designSystem documentation (e.g. Bootstrap or PatternFly) does not help to quickly address the customization based on unique design needs. UX + UI ( Design + Review ) Development + Deployment + TesAng Planning / Requirement
  10. 10. In typical design process there are user pain-points. INTERACTION DESIGNER VISUAL DESIGNER UX/TECH REVIEWER UI DEVELOPER Some last moment changes made directly into the UI implementaAon made my design source file unusable without the sanity check with the UI implementaAon! I wish there would be a single place that reflects the edits! I referred UI PaQerns Library documenta>on and created the GUI mockup with Specs, but due to Agile nature of the project the changes keep coming and I had to re-work on the same screen and update the Specs and CSS names. Also I am fed up of finding the right CSS class from the UI Pa[erns Library code as a reference and design backwards to Visual Mockups! There are so many gaps between the mock-up and the implemented UI even if Pa[ern Library reference has been followed. I wish there is an easy way to help the team avoiding such issues. It eats up some >me before the Visual Designer comes back with CSS name and Specs. Which we need to know to ensure a more complete UI implementaAon of the design. Also it is difficult to track where the right CSS class is located for the specific design suggesAon – it’s a mess! UX + UI ( Design + Review ) Development + Deployment + TesAng Planning / Requirement
  11. 11. Ditto The answer to all these - “End-to-End Design Life Cycle Management” module based on any exisAng Pa$ern Library/Design System
  12. 12. Ditto And how … can help bridging the gaps and solving the problems?
  13. 13. INTERACTION DESIGNER VISUAL DESIGNER UX/TECH REVIEWER UI DEVELOPER GUIDE/SPECS SAMPLE CODE In typical design process multiple source-files at different stages makes it complex to manage the project. UX + UI ( Design + Review ) Development + Deployment + TesAng Planning / Requirement
  14. 14. INTERACTION DESIGNER VISUAL DESIGNER UX/TECH REVIEWER UI DEVELOPER Ditto helps in making Design projects maintainable by using Single Source for all outputs at any stage of design. DITTO Source File UX + UI ( Design + Review ) Development + Deployment + TesAng Planning / Requirement Thereby it will provide a Seamless work-flow for Design – Developer collaboraAon
  15. 15. Version - 1x Version - 2x Version - 3x UI PaQern Library DITTO Di[o Obj (SOURCE FILE) User Inputs Wireframe Visual Design HTML/CSS/JS ‘Single-Source’ based process used for exporting different artifacts at different stages. Also this makes all out-puts aligned to design standards.
  16. 16. And this solves many challenges: •  Seamless work-flow for Design – Developer collaboraAon •  Saving on license cost as no longer it is required to use mulAple third-party design tools •  Single source makes it maintainable. •  Omini-change process ensures that any changes happening at any stage of design stage will automaAcally take effect on other stage deliverables. (i.e. assuming at if UI html code is tweaked, it will also reflect in wireframe and visual design stages without any extra manual work!)
  17. 17. What Ditto offers at different stages of User Centered Design (UCD). Wire-framing Visual Design Design Review/ Usability Tes>ng 2 3 4 5 HTML-CSS Prototyping UI Development Idea>on 1 PLAN Create Wireframes Directly using Pa[ern-Fly Objects Add InteracAon Notes for Reference (OPTIONAL) Create Modify custom theme based on Pa[ern-Fly Objs. To suit specific branding/ business needs. (OPTIONAL) If needed high quality mock ups as images can be exported. (OPTIONAL) If needed the style guide/specs. Can be exported as PDFs or other formats. (OPTIONAL) The Project team (Designers + Developers) can work on the same screens (TEAM) The reviewers can play the screens to review and provide feedback and share it with the team (OPTIONAL) The screens can be sequenced using hot- spots and click events, that can be easily played in target devices (OPTION) Without much effort the UI implementaAon ready package containing HTML5/CSS3/JS etc. can be exported immediately. TEST DEV DEPLOY
  18. 18. Ditto allows to start the design from any of the stage and immediately export the implementable UI code to be used … Wire-framing Visual Design Design Review/ Usability Tes>ng 2 3 4 5 HTML-CSS Prototyping UI Development Idea>on 1 PLAN TEST DEV DEPLOY +1 +1 …and there by help in reducing the time to implementation and quick testing.
  19. 19. And this brings some value additions: •  Zero learning-curve •  Single user – Single Tool : makes it easy for any of the role can login and generate implementaAon ready UI output. •  Significantly reduces Cosme>c / UI compliance issues •  Significantly reduces the >me to implementa>on of the design concepts. •  Boon for Agile projects where the changes are common.
  20. 20. Also … This promotes UI Pa[erns as a main- stream standard design process element.
  21. 21. Let’s re-imagine the User Centered Design (UCD) process using Ditto Wire-framing Visual Design Design Review/ Usability Tes>ng 2 3 4 5 HTML-CSS Prototyping UI Development Idea>on 1 PLAN Create Wireframes Directly using Pa[ern-Fly Objects Add InteracAon Notes for Reference (OPTIONAL) Create Modify custom theme based on Pa[ern-Fly Objs. To suit specific branding/ business needs. (OPTIONAL) If needed high quality mock ups as images can be exported. (OPTIONAL) If needed the style guide/specs. Can be exported as PDFs or other formats. (OPTIONAL) The Project team (Designers + Developers) can work on the same screens (TEAM) The reviewers can play the screens to review and provide feedback and share it with the team (OPTIONAL) The screens can be sequenced using hot- spots and click events, that can be easily played in target devices (OPTION) Without much effort the UI implementaAon ready package containing HTML5/CSS3/JS etc. can be exported immediately. TEST DEV DEPLOY
  22. 22. Analyze Design Create TestSpace Mary Selly Plan Wire-framing Customizing Theme Add InteracAon Preview / Review Export UI IdeaAon Session 1 IdeaAon Session 2 Card SorAng Board 1 Card SorAng Board 2 Mind Map Board 1 VoAng Session 1 Idea>on Sessions + Ar>facts Add 3 Screens 48 Views 3 Screens 48 Views :: Collaborators IdeaAon Hub Mary Selly ChrisAna Roseg Rosie Sharma Daniel Rock Darren Ball Card Sor>ng Board 2 Add cards to the quadrant based on the a[ributes defined. AS IS SCENARIO Template Associated User Story: #865 - CreaAon of Data VisualizaAon widget screens. Target Persona: Individual Contributor to Development Associated User Story: #865 - CreaAon of Data VisualizaAon widget screens. Target Persona: Individual Contributor to Development I have added the card for Think and Feel. @Daren do you think you agree to this ? I know you are a falling into the persona :P Nah! I think thos persona is more about a freelancer. OK. I think a UI prototyper would also feel the same.. :: Chat Individual Contributor to Development JAMES INFORMATION ARCHITECT
  23. 23. Analyze Design Create TestSpace Mary Selly Plan Wire-framing Customizing Theme Add InteracAon Preview / Review Export UI IdeaAon Session 1 IdeaAon Session 2 Card SorAng Board 1 Card SorAng Board 2 Mind Map Board 1 VoAng Session 1 Idea>on Sessions + Ar>facts Add 3 Screens 48 Views 3 Screens 48 Views :: Collaborators IdeaAon Hub Mary Selly ChrisAna Roseg Rosie Sharma Daniel Rock Darren Ball Card Sor>ng Board 2 Add cards to the quadrant based on the a[ributes defined. AS IS SCENARIO Template Associated User Story: #865 - CreaAon of Data VisualizaAon widget screens. Target Persona: Individual Contributor to Development Associated User Story: #865 - CreaAon of Data VisualizaAon widget screens. Target Persona: Individual Contributor to Development I have added the card for Think and Feel. @Daren do you think you agree to this ? I know you are a falling into the persona :P Nah! I think thos persona is more about a freelancer. OK. I think a UI prototyper would also feel the same.. :: Chat Individual Contributor to Development JAMES INFORMATION ARCHITECT Different stages of Design Process is reflected which allows the user to easily select the stage he wants to move in. The user is in Ideation Hub Any of the board can be selected In real time the users can do the card sorting and other similar ideation activities based on the template used. List of participants is available along with the live messaging/ chat system.
  24. 24. Analyze Design Create TestSpace Mary Selly Plan Wire-framing Customizing Theme Add InteracAon Preview / Review Export UI IdeaAon Session 1 IdeaAon Session 2 Card SorAng Board 1 Card SorAng Board 2 Mind Map Board 1 VoAng Session 1 Idea>on Sessions + Ar>facts Add 3 Screens 48 Views 3 Screens 48 Views :: Collaborators IdeaAon Hub Mary Selly ChrisAna Roseg Rosie Sharma Daniel Rock Darren Ball Card Sor>ng Board 2 Add cards to the quadrant based on the a[ributes defined. AS IS SCENARIO Template Associated User Story: #865 - CreaAon of Data VisualizaAon widget screens. Target Persona: Individual Contributor to Development Associated User Story: #865 - CreaAon of Data VisualizaAon widget screens. Target Persona: Individual Contributor to Development I have added the card for Think and Feel. @Daren do you think you agree to this ? I know you are a falling into the persona :P Nah! I think thos persona is more about a freelancer. OK. I think a UI prototyper would also feel the same.. :: Chat Individual Contributor to Development JAMES INFORMATION ARCHITECT
  25. 25. Analyze Design Create TestSpace Plan Wire-framing Customizing Theme Add InteracAon Preview / Review Export UI IA Maps 0.1 IA Maps 0.2 Master IA Informa>on Architecture Add 3 Screens 48 Views 3 Screens 48 Views :: Shapes IdeaAon Hub Mary Selly Wireframes INFORMATION ARCHITECT
  26. 26. Analyze Design Create TestSpace Plan Wire-framing Customizing Theme Add InteracAon Preview / Review Export UI IA Maps 0.1 IA Maps 0.2 Master IA Informa>on Architecture Add 3 Screens 48 Views 3 Screens 48 Views :: Shapes IdeaAon Hub Mary Selly Wireframes LOGIN First Run Subsequent Login First Am e? Welcome Msg. for first Amer. Home / Dashboard Home / Dashboard Y Let’s Get Started WIZARD CREATE SPACE 1.  Create Blank? 2.  Import a Code? Success Msg. for Codebase creaAon. Add Code base? Y SKIP wizar d? Y NAV Codebas es Pipeline s Reports Backlog COMMON NAV LOGOUT PROFILE ACCOUNT SETTINGS PREFERENCE Spaces Areas Home MODA L MODA L MODA L Canban Teams IteraAo ns INFORMATION ARCHITECT
  27. 27. Analyze Design Create TestSpace Plan Wire-framing Customizing Theme Add InteracAon Preview / Review Export UI IA Maps 0.1 IA Maps 0.2 Master IA Informa>on Architecture Add 3 Screens 48 Views 3 Screens 48 Views :: Shapes IdeaAon Hub Mary Selly Wireframes LOGIN First Run Subsequent Login First Am e? Welcome Msg. for first Amer. Home / Dashboard Home / Dashboard Y Let’s Get Started WIZARD CREATE SPACE 1.  Create Blank? 2.  Import a Code? Success Msg. for Codebase creaAon. Add Code base? Y SKIP wizar d? Y NAV Codebas es Pipeline s Reports Backlog COMMON NAV LOGOUT PROFILE ACCOUNT SETTINGS PREFERENCE Spaces Areas Home MODA L MODA L MODA L Canban Teams IteraAo ns The user has opened the Master IA template under “Information Architecture” The canvas that allows to create and manage the IA map and other types of similar documents like Mindmaps, workflows etc. INFORMATION ARCHITECT
  28. 28. Analyze Design Create TestSpace Plan Wire-framing Customizing Theme Add InteracAon Preview / Review Export UI :: Layers :: Property Inspector Selected Object No Object Selected ! <HTML> <HEAD> <BODY> FAVICON IdeaAon Hub ChrisAna Roseg Informa>on Architecture Wireframes Design 0.1 Design 0.2 View 1 View 2 Screen 3 – View 1 Page 3 – View 2 Add 3 Screens 48 Views 3 Screens 48 Views :: PaQerns Layouts Basic Shapes Content Views Cards Form Controls Data Visualiza>on Naviga>on Widgets Icons Misc. Grid 16 8 6 10 0 12 16 Col. Bootstrap 12 Col. Bootstrap 10 Col. Bootstrap 8 Col. Bootstrap 6 Col. Bootstrap No Grid Grid: 16 Columns Using Bootstrap?: YES Minimum ResoluAon 800 x 600 Break Points: 320 x 480 800x600 1024 x 768 800x600 Columns Reference Visible? NO Document INTERACTION DESIGNER
  29. 29. Analyze Design Create TestSpace Plan Wire-framing Customizing Theme Add InteracAon Preview / Review Export UI :: Layers :: Property Inspector Selected Object No Object Selected ! <HTML> <HEAD> <BODY> FAVICON IdeaAon Hub ChrisAna Roseg Informa>on Architecture Wireframes Design 0.1 Design 0.2 View 1 View 2 Screen 3 – View 1 Page 3 – View 2 Add 3 Screens 48 Views 3 Screens 48 Views :: PaQerns Layouts Basic Shapes Content Views Cards Form Controls Data Visualiza>on Naviga>on Widgets Icons Misc. Grid 16 8 6 10 0 12 16 Col. Bootstrap 12 Col. Bootstrap 10 Col. Bootstrap 8 Col. Bootstrap 6 Col. Bootstrap No Grid Grid: 16 Columns Using Bootstrap?: YES Minimum ResoluAon 800 x 600 Break Points: 320 x 480 800x600 1024 x 768 800x600 Columns Reference Visible? NO Document When the user selects the Wireframe option this layout appears. Designs appear with version control. UI Patterns are available in the bottom pane. Mostly the user can select the version of PatternFly and based on this the UI patterns appear. As the user will drag the UI patterns to canvas area to build the design here the layers appear with each element name and hierarchy. The property of the selected object can be viewed/Modified here. INTERACTION DESIGNER
  30. 30. Analyze Design Create TestSpace Plan Wire-framing Customizing Theme Add InteracAon Preview / Review Export UI :: Layers :: Property Inspector Selected Object No Object Selected ! <HTML> <HEAD> <BODY> FAVICON IdeaAon Hub ChrisAna Roseg Info. Arc… Wireframes Design 0.1 Design 0.2 View 1 View 2 Screen 3 – View 1 Page 3 – View 2 Add 3/48 3/48 :: PaQerns Layouts Basic Shapes Content Views Cards Form Controls Data Visualiza>on Naviga>on Widgets Icons Misc. Grid 16 8 6 10 0 12 16 Col. Bootstrap 12 Col. Bootstrap 10 Col. Bootstrap 8 Col. Bootstrap 6 Col. Bootstrap No Grid Grid: 16 Columns Using Bootstrap?: YES Minimum ResoluAon 800 x 600 Break Points: 320 x 480 800x600 1024 x 768 800x600 Columns Reference Visible? NO Document Default 12 column-grid selected. The user can change based on the need. INTERACTION DESIGNER 1 2 3 4 5 6 7 8 9 10 11 12
  31. 31. Analyze Design Create TestSpace Plan Wire-framing Customizing Theme Add InteracAon Preview / Review Export UI :: Layers :: Property Inspector Selected Object Document Grid: 16 Columns Using Bootstrap?: YES Minimum ResoluAon 800 x 600 Break Points: 320 x 480 800x600 1024 x 768 800x600 <HTML> <HEAD> FAVICON IdeaAon Hub ChrisAna Roseg Info. Arc… Wireframes Design 0.1 Design 0.2 View 1 View 2 Screen 3 – View 1 Page 3 – View 2 Add 3/48 3/48 LEFT BORDER: RIGHT BORDER: TOP BORDER: BOTTOM BORDER: 0 0 0 0 TYPE: TYPE: TYPE: TYPE: COLOR: COLOR: COLOR: COLOR: 5 5 5 0 0 0 0 LEFT MARGIN: RIGHT MARGIN: TOP MARGIN: BOTTOM MARGIN: LEFT PADDING: RIGHT PADDING: TOP PADDING: BOTTOM PADDING: 5 5 5 0 0 0 0 PATTERN FLY STYLE: 5 5 HEADER-DIV <BODY> WRAPPER CONTA… :: PaQerns Layouts Basic Shapes Content Views Cards Form Controls Data Visualiza>on Naviga>on Widgets Icons Misc. Grid Aggregate Status Card Trend Card UAlizaAon Bar Card UAlizaAon Trend Card Empty State Inline NoAficaAon Card View Header-Bar (2-Rows) BODY-DIV Aggregrate Status Card HEADER-DIV Aggregrate Status Card Aggregrate Status Card Aggregrate Status Card Aggregrate Status Card The user keeps on modifying the design by adding the required UI pattern objects and customizing them. INTERACTION DESIGNER
  32. 32. Analyze Design Create TestSpace Plan Wire-framing Customizing Theme Add InteracAon Preview / Review Export UI :: Layers :: Property Inspector Selected Object Document Grid: 16 Columns Using Bootstrap?: YES Minimum ResoluAon 800 x 600 Break Points: 320 x 480 800x600 1024 x 768 800x600 <HTML> <HEAD> FAVICON IdeaAon Hub ChrisAna Roseg Info. Arc… Wireframes Design 0.1 Design 0.2 View 1 View 2 Screen 3 – View 1 Page 3 – View 2 Add 3/48 3/48 LEFT BORDER: RIGHT BORDER: TOP BORDER: BOTTOM BORDER: 0 0 0 0 TYPE: TYPE: TYPE: TYPE: COLOR: COLOR: COLOR: COLOR: 5 5 5 0 0 0 0 LEFT MARGIN: RIGHT MARGIN: TOP MARGIN: BOTTOM MARGIN: LEFT PADDING: RIGHT PADDING: TOP PADDING: BOTTOM PADDING: 5 5 5 0 0 0 0 PATTERN FLY STYLE: 5 5 HEADER-DIV <BODY> WRAPPER CONTA… HEADER-DIV BODY-DIV FOOTER-DIV :: PaQerns Layouts Basic Shapes Content Views Cards Form Controls Data Visualiza>on Naviga>on Widgets Icons Misc. Grid Aggregate Status Card Trend Card UAlizaAon Bar Card UAlizaAon Trend Card Empty State Inline NoAficaAon Card View The user keeps on modifying the design by adding the required UI pattern objects and customizing them. INTERACTION DESIGNER
  33. 33. Analyze Design Create TestSpace Plan Wire-framing Customizing Theme Add InteracAon Preview / Review Export UI :: Layers :: Property Inspector Selected Object Document Grid: 16 Columns Using Bootstrap?: YES Minimum ResoluAon 800 x 600 Break Points: 320 x 480 800x600 1024 x 768 800x600 <HTML> <HEAD> FAVICON IdeaAon Hub ChrisAna Roseg Info. Arc… Wireframes Design 0.1 Design 0.2 View 1 View 2 Screen 3 – View 1 Page 3 – View 2 Add 3/48 3/48 LEFT BORDER: RIGHT BORDER: TOP BORDER: BOTTOM BORDER: 0 0 0 0 TYPE: TYPE: TYPE: TYPE: COLOR: COLOR: COLOR: COLOR: 5 5 5 0 0 0 0 LEFT MARGIN: RIGHT MARGIN: TOP MARGIN: BOTTOM MARGIN: LEFT PADDING: RIGHT PADDING: TOP PADDING: BOTTOM PADDING: 5 5 5 0 0 0 0 PATTERN FLY STYLE: 5 5 HEADER-DIV <BODY> WRAPPER CONTA… HEADER-DIV BODY-DIV FOOTER-DIV :: PaQerns Layouts Basic Shapes Content Views Cards Form Controls Data Visualiza>on Naviga>on Widgets Icons Misc. Grid Aggregate Status Card Trend Card UAlizaAon Bar Card UAlizaAon Trend Card Empty State Inline NoAficaAon Card View The user keeps on modifying the design by adding the required UI pattern objects and customizing them. INTERACTION DESIGNER
  34. 34. Analyze Design Create TestSpace Plan Wire-framing Customizing Theme Add InteracAon Preview / Review Export UI :: Layers :: Property Inspector Selected Object Document Grid: 16 Columns Using Bootstrap?: YES Minimum ResoluAon 800 x 600 Break Points: 320 x 480 800x600 1024 x 768 800x600 <HTML> <HEAD> FAVICON IdeaAon Hub ChrisAna Roseg Info. Arc… Wireframes Design 0.1 Design 0.2 View 1 View 2 Screen 3 – View 1 Page 3 – View 2 Add 3/48 3/48 LEFT BORDER: RIGHT BORDER: TOP BORDER: BOTTOM BORDER: 0 0 0 0 TYPE: TYPE: TYPE: TYPE: COLOR: COLOR: COLOR: COLOR: 5 5 5 0 0 0 0 LEFT MARGIN: RIGHT MARGIN: TOP MARGIN: BOTTOM MARGIN: LEFT PADDING: RIGHT PADDING: TOP PADDING: BOTTOM PADDING: 5 5 5 0 0 0 0 PATTERN FLY STYLE: 5 5 HEADER-DIV <BODY> WRAPPER CONTA… HEADER-DIV BODY-DIV FOOTER-DIV :: PaQerns Layouts Basic Shapes Content Views Cards Form Controls Data Visualiza>on Naviga>on Widgets Icons Misc. Grid Aggregate Status Card Trend Card UAlizaAon Bar Card UAlizaAon Trend Card Empty State Inline NoAficaAon Card View The user keeps on modifying the design by adding the required UI pattern objects and customizing them. INTERACTION DESIGNER
  35. 35. Analyze Design Create TestSpace Plan Wire-framing Customizing Theme Add InteracAon Preview / Review Export UI :: Layers :: Property Inspector Selected Object Document Grid: 16 Columns Using Bootstrap?: YES Minimum ResoluAon 800 x 600 Break Points: 320 x 480 800x600 1024 x 768 800x600 <HTML> <HEAD> FAVICON IdeaAon Hub ChrisAna Roseg Info. Arc… Wireframes Design 0.1 Design 0.2 View 1 View 2 Screen 3 – View 1 Page 3 – View 2 Add 3/48 3/48 LEFT BORDER: RIGHT BORDER: TOP BORDER: BOTTOM BORDER: 0 0 0 0 TYPE: TYPE: TYPE: TYPE: COLOR: COLOR: COLOR: COLOR: 5 5 5 0 0 0 0 LEFT MARGIN: RIGHT MARGIN: TOP MARGIN: BOTTOM MARGIN: LEFT PADDING: RIGHT PADDING: TOP PADDING: BOTTOM PADDING: 5 5 5 0 0 0 0 PATTERN FLY STYLE: 5 5 HEADER-DIV <BODY> WRAPPER CONTA… HEADER-DIV BODY-DIV FOOTER-DIV :: PaQerns Layouts Basic Shapes Content Views Cards Form Controls Data Visualiza>on Naviga>on Widgets Icons Misc. Grid Aggregate Status Card Trend Card UAlizaAon Bar Card UAlizaAon Trend Card Empty State Inline NoAficaAon Card View The user keeps on modifying the design by adding the required UI pattern objects and customizing them. INTERACTION DESIGNER
  36. 36. Analyze Design Create TestSpace Plan Wire-framing Customizing Theme Add InteracAon Preview / Review Export UI :: Layers :: Property Inspector Selected Object Document Grid: 16 Columns Using Bootstrap?: YES Minimum ResoluAon 800 x 600 Break Points: 320 x 480 800x600 1024 x 768 800x600 <HTML> <HEAD> FAVICON IdeaAon Hub ChrisAna Roseg Info. Arc… Wireframes Design 0.1 Design 0.2 View 1 View 2 Screen 3 – View 1 Page 3 – View 2 Add 3/48 3/48 LEFT BORDER: RIGHT BORDER: TOP BORDER: BOTTOM BORDER: 0 0 0 0 TYPE: TYPE: TYPE: TYPE: COLOR: COLOR: COLOR: COLOR: 5 5 5 0 0 0 0 LEFT MARGIN: RIGHT MARGIN: TOP MARGIN: BOTTOM MARGIN: LEFT PADDING: RIGHT PADDING: TOP PADDING: BOTTOM PADDING: 5 5 5 0 0 0 0 PATTERN FLY STYLE: 5 5 HEADER-DIV <BODY> WRAPPER CONTA… HEADER-DIV BODY-DIV FOOTER-DIV :: PaQerns Layouts Basic Shapes Content Views Cards Form Controls Data Visualiza>on Naviga>on Widgets Icons Misc. Grid Aggregate Status Card Trend Card UAlizaAon Bar Card UAlizaAon Trend Card Empty State Inline NoAficaAon Card View The user keeps on modifying the design by adding the required UI pattern objects and customizing them. INTERACTION DESIGNER
  37. 37. Analyze Design Create TestSpace Plan Wire-framing Customizing Theme Add InteracAon Preview / Review Export UI :: Layers :: Property Inspector Selected Object Document Grid: 16 Columns Using Bootstrap?: YES Minimum ResoluAon 800 x 600 Break Points: 320 x 480 800x600 1024 x 768 800x600 <HTML> <HEAD> FAVICON IdeaAon Hub ChrisAna Roseg Info. Arc… Wireframes Design 0.1 Design 0.2 View 1 View 2 Screen 3 – View 1 Page 3 – View 2 Add 3/48 3/48 LEFT BORDER: RIGHT BORDER: TOP BORDER: BOTTOM BORDER: 0 0 0 0 TYPE: TYPE: TYPE: TYPE: COLOR: COLOR: COLOR: COLOR: 5 5 5 0 0 0 0 LEFT MARGIN: RIGHT MARGIN: TOP MARGIN: BOTTOM MARGIN: LEFT PADDING: RIGHT PADDING: TOP PADDING: BOTTOM PADDING: 5 5 5 0 0 0 0 PATTERN FLY STYLE: 5 5 HEADER-DIV <BODY> WRAPPER CONTA… HEADER-DIV BODY-DIV FOOTER-DIV :: PaQerns Layouts Basic Shapes Content Views Cards Form Controls Data Visualiza>on Naviga>on Widgets Icons Misc. Grid Aggregate Status Card Trend Card UAlizaAon Bar Card UAlizaAon Trend Card Empty State Inline NoAficaAon Card View The user keeps on modifying the design by adding the required UI pattern objects and customizing them. INTERACTION DESIGNER
  38. 38. Analyze Design Create TestSpace Plan Wire-framing Customizing Theme Add InteracAon Preview / Review Export UI :: Layers :: Property Inspector Selected Object Document Grid: 16 Columns Using Bootstrap?: YES Minimum ResoluAon 800 x 600 Break Points: 320 x 480 800x600 1024 x 768 800x600 <HTML> <HEAD> FAVICON IdeaAon Hub ChrisAna Roseg Info. Arc… Wireframes Design 0.1 Design 0.2 View 1 View 2 Screen 3 – View 1 Page 3 – View 2 Add 3/48 3/48 LEFT BORDER: RIGHT BORDER: TOP BORDER: BOTTOM BORDER: 0 0 0 0 TYPE: TYPE: TYPE: TYPE: COLOR: COLOR: COLOR: COLOR: 5 5 5 0 0 0 0 LEFT MARGIN: RIGHT MARGIN: TOP MARGIN: BOTTOM MARGIN: LEFT PADDING: RIGHT PADDING: TOP PADDING: BOTTOM PADDING: 5 5 5 0 0 0 0 PATTERN FLY STYLE: 5 5 HEADER-DIV <BODY> WRAPPER CONTA… HEADER-DIV BODY-DIV FOOTER-DIV :: PaQerns Layouts Basic Shapes Content Views Cards Form Controls Data Visualiza>on Naviga>on Widgets Icons Misc. Grid Aggregate Status Card Trend Card UAlizaAon Bar Card UAlizaAon Trend Card Empty State Inline NoAficaAon Card View The user keeps on modifying the design by adding the required UI pattern objects and customizing them. INTERACTION DESIGNER
  39. 39. Analyze Design Create TestSpace Plan Wire-framing Customizing Theme Add InteracAon Preview / Review Export UI :: Layers :: Property Inspector Selected Object Document Grid: 16 Columns Using Bootstrap?: YES Minimum ResoluAon 800 x 600 Break Points: 320 x 480 800x600 1024 x 768 800x600 <HTML> <HEAD> FAVICON IdeaAon Hub ChrisAna Roseg Info. Arc… Wireframes Design 0.1 Design 0.2 View 1 View 2 Screen 3 – View 1 Page 3 – View 2 Add 3/48 3/48 LEFT BORDER: RIGHT BORDER: TOP BORDER: BOTTOM BORDER: 0 0 0 0 TYPE: TYPE: TYPE: TYPE: COLOR: COLOR: COLOR: COLOR: 5 5 5 0 0 0 0 LEFT MARGIN: RIGHT MARGIN: TOP MARGIN: BOTTOM MARGIN: LEFT PADDING: RIGHT PADDING: TOP PADDING: BOTTOM PADDING: 5 5 5 0 0 0 0 PATTERN FLY STYLE: 5 5 HEADER-DIV <BODY> WRAPPER CONTA… HEADER-DIV BODY-DIV FOOTER-DIV :: PaQerns Layouts Basic Shapes Content Views Cards Form Controls Data Visualiza>on Naviga>on Widgets Icons Misc. Grid Aggregate Status Card Trend Card UAlizaAon Bar Card UAlizaAon Trend Card Empty State Inline NoAficaAon Card View The user keeps on modifying the design by adding the required UI pattern objects and customizing them. INTERACTION DESIGNER
  40. 40. Analyze Design Create TestSpace Plan Wire-framing Customizing Theme Add InteracAon Preview / Review Export UI :: Layers :: Property Inspector Selected Object Document Grid: 16 Columns Using Bootstrap?: YES Minimum ResoluAon 800 x 600 Break Points: 320 x 480 800x600 1024 x 768 800x600 <HTML> <HEAD> FAVICON IdeaAon Hub ChrisAna Roseg Info. Arc… Wireframes Design 0.1 Design 0.2 View 1 View 2 Screen 3 – View 1 Page 3 – View 2 Add 3/48 3/48 LEFT BORDER: RIGHT BORDER: TOP BORDER: BOTTOM BORDER: 0 0 0 0 TYPE: TYPE: TYPE: TYPE: COLOR: COLOR: COLOR: COLOR: 5 5 5 0 0 0 0 LEFT MARGIN: RIGHT MARGIN: TOP MARGIN: BOTTOM MARGIN: LEFT PADDING: RIGHT PADDING: TOP PADDING: BOTTOM PADDING: 5 5 5 0 0 0 0 PATTERN FLY STYLE: 5 5 HEADER-DIV <BODY> WRAPPER CONTA… HEADER-DIV BODY-DIV FOOTER-DIV :: PaQerns Layouts Basic Shapes Content Views Cards Form Controls Data Visualiza>on Naviga>on Widgets Icons Misc. Grid Aggregate Status Card Trend Card UAlizaAon Bar Card UAlizaAon Trend Card Empty State Inline NoAficaAon Card View The user keeps on modifying the design by adding the required UI pattern objects and customizing them. INTERACTION DESIGNER
  41. 41. Analyze Design Create TestSpace Plan Wire-framing Customizing Theme Add InteracAon Preview / Review Export UI :: Layers :: Property Inspector Selected Object Document Grid: 16 Columns Using Bootstrap?: YES Minimum ResoluAon 800 x 600 Break Points: 320 x 480 800x600 1024 x 768 800x600 <HTML> <HEAD> FAVICON IdeaAon Hub Rosie Sharma Info. Arc… Wireframes Design 0.1 Design 0.2 View 1 View 2 Screen 3 – View 1 Page 3 – View 2 Add 3/48 3/48 LEFT BORDER: RIGHT BORDER: TOP BORDER: BOTTOM BORDER: 0 0 0 0 TYPE: TYPE: TYPE: TYPE: COLOR: COLOR: COLOR: COLOR: 5 5 5 0 0 0 0 LEFT MARGIN: RIGHT MARGIN: TOP MARGIN: BOTTOM MARGIN: LEFT PADDING: RIGHT PADDING: TOP PADDING: BOTTOM PADDING: 5 5 5 0 0 0 0 PATTERN FLY STYLE: 5 5 HEADER-DIV <BODY> WRAPPER CONTA… HEADER-DIV BODY-DIV FOOTER-DIV :: PaQerns Layouts Basic Shapes Content Views Cards Form Controls Data Visualiza>on Naviga>on Widgets Icons Misc. Grid Aggregate Status Card Trend Card UAlizaAon Bar Card UAlizaAon Trend Card Empty State Inline NoAficaAon Card View VISUAL DESIGNER
  42. 42. Analyze Design Create TestSpace Plan Wire-framing Add InteracAon Preview / Review Export UI :: Layers :: Property Inspector Selected Object Document Grid: 16 Columns Using Bootstrap?: YES Minimum ResoluAon 800 x 600 Break Points: 320 x 480 800x600 1024 x 768 800x600 <HTML> <HEAD> FAVICON IdeaAon Hub LEFT BORDER: RIGHT BORDER: TOP BORDER: BOTTOM BORDER: 0 0 0 0 TYPE: TYPE: TYPE: TYPE: COLOR: COLOR: COLOR: COLOR: 5 5 5 0 0 0 0 LEFT MARGIN: RIGHT MARGIN: TOP MARGIN: BOTTOM MARGIN: LEFT PADDING: RIGHT PADDING: TOP PADDING: BOTTOM PADDING: 5 5 5 0 0 0 0 PATTERN FLY STYLE: 5 5 HEADER-DIV <BODY> WRAPPER CONTA… HEADER-DIV BODY-DIV FOOTER-DIV Break Points: 320 x 480 800x600 1024 x 768 800x600 :: Visual PaleQe Customizing Theme Themes Design 0.1 View 1 View 2 Page 3 – View 2 Add 3/48 3/48 Design 0.2 Screen 3 – View 1 Rosie Sharma VISUAL DESIGNER
  43. 43. Analyze Design Create TestSpace Plan Add InteracAon Preview / Review Export UI :: Layers :: Property Inspector Selected Object Document Grid: 16 Columns Using Bootstrap?: YES Minimum ResoluAon 800 x 600 Break Points: 320 x 480 800x600 1024 x 768 800x600 <HTML> <HEAD> FAVICON LEFT BORDER: RIGHT BORDER: TOP BORDER: BOTTOM BORDER: 0 0 0 0 TYPE: TYPE: TYPE: TYPE: COLOR: COLOR: COLOR: COLOR: 5 5 5 0 0 0 0 LEFT MARGIN: RIGHT MARGIN: TOP MARGIN: BOTTOM MARGIN: LEFT PADDING: RIGHT PADDING: TOP PADDING: BOTTOM PADDING: 5 5 5 0 0 0 0 PATTERN FLY STYLE: 5 5 HEADER-DIV <BODY> WRAPPER CONTA… HEADER-DIV BODY-DIV FOOTER-DIV Break Points: 320 x 480 800x600 1024 x 768 800x600 :: Visual PaleQe Wire-framing IdeaAon Hub Customizing Theme Themes Design 0.1 View 1 View 2 Page 3 – View 2 Add 3/48 3/48 Design 0.2 Screen 3 – View 1 Rosie Sharma VISUAL DESIGNER
  44. 44. Analyze Design Create TestSpace Plan Add InteracAon Preview / Review Export UI :: Layers :: Property Inspector Selected Object Document Grid: 16 Columns Using Bootstrap?: YES Minimum ResoluAon 800 x 600 Break Points: 320 x 480 800x600 1024 x 768 800x600 <BODY> <HEAD> FAVICON LEFT BORDER: RIGHT BORDER: TOP BORDER: BOTTOM BORDER: 0 0 0 0 TYPE: TYPE: TYPE: TYPE: COLOR: COLOR: COLOR: COLOR: 5 5 5 0 0 0 0 LEFT MARGIN: RIGHT MARGIN: TOP MARGIN: BOTTOM MARGIN: LEFT PADDING: RIGHT PADDING: TOP PADDING: BOTTOM PADDING: 5 5 5 0 0 0 0 PATTERN FLY STYLE: 5 5 HEADER-DIV <BODY> WRAPPER CONTA… HEADER-DIV BODY-DIV FOOTER-DIV :: PaQerns Break Points: 320 x 480 800x600 1024 x 768 800x600 :: Visual PaleQe Wire-framing IdeaAon Hub Customizing Theme Themes Design 0.1 View 1 View 2 Page 3 – View 2 Add 3/48 3/48 Design 0.2 Screen 3 – View 1 The user can pin-point any element in the user interface and select it for customization Rosie Sharma VISUAL DESIGNER
  45. 45. Analyze Design Create TestSpace Plan Add InteracAon Preview / Review Export UI :: Layers :: Property Inspector Selected Object Document Grid: 16 Columns Using Bootstrap?: YES Minimum ResoluAon 800 x 600 Break Points: 320 x 480 800x600 1024 x 768 800x600 <HTML> <HEAD> FAVICON LEFT BORDER: RIGHT BORDER: TOP BORDER: BOTTOM BORDER: 0 0 0 0 TYPE: TYPE: TYPE: TYPE: COLOR: COLOR: COLOR: COLOR: 5 5 5 0 0 0 0 LEFT MARGIN: RIGHT MARGIN: TOP MARGIN: BOTTOM MARGIN: LEFT PADDING: RIGHT PADDING: TOP PADDING: BOTTOM PADDING: 5 5 5 0 0 0 0 PATTERN FLY STYLE: 5 5 HEADER-DIV <BODY> WRAPPER CONTA… HEADER-DIV BODY-DIV FOOTER-DIV :: CSS :: Visual PaleQe Wire-framing IdeaAon Hub Customizing Theme Themes Design 0.1 View 1 View 2 Page 3 – View 2 Add 3/48 3/48 Design 0.2 Screen 3 – View 1 He can modify the associated CSS and/or extend the PatternFly classes to change the visual . Alternatively he can change the visual properties using the color-pallets and similar tools in the bottom panel. This will automatically customize the PatternFly widgets by creating a new theme. Rosie Sharma VISUAL DESIGNER
  46. 46. Analyze Design Create TestSpace Plan Add InteracAon Preview / Review Export UI :: Layers :: Property Inspector Selected Object Document Grid: 16 Columns Using Bootstrap?: YES Minimum ResoluAon 800 x 600 Break Points: 320 x 480 800x600 1024 x 768 800x600 <HTML> <HEAD> FAVICON LEFT BORDER: RIGHT BORDER: TOP BORDER: BOTTOM BORDER: 0 0 0 0 TYPE: TYPE: TYPE: TYPE: COLOR: COLOR: COLOR: COLOR: 5 5 5 0 0 0 0 LEFT MARGIN: RIGHT MARGIN: TOP MARGIN: BOTTOM MARGIN: LEFT PADDING: RIGHT PADDING: TOP PADDING: BOTTOM PADDING: 5 5 5 0 0 0 0 PATTERN FLY STYLE: 5 5 HEADER-DIV <BODY> WRAPPER CONTA… HEADER-DIV BODY-DIV FOOTER-DIV :: CSS Break Points: 320 x 480 800x600 1024 x 768 800x600 :: Visual PaleQe Wire-framing IdeaAon Hub Customizing Theme Themes Design 0.1 View 1 View 2 Page 3 – View 2 Add 3/48 3/48 Design 0.2 Screen 3 – View 1 The customizations are saved as a new theme in the project that can be reused across screens and projects. Rosie Sharma VISUAL DESIGNER
  47. 47. Analyze Design Create TestSpace Plan Preview / Review Export UI Wire-framing IdeaAon Hub Add InteracAon Customizing Theme :: Hotspot Targets View 1 View 2 (Self Screen 3 – View 1 Page 3 – View 2 h[p://redhat.com Enter text to filter Page 1 Page 2 h[p://redhat.com h[p://redhat.com h[p://redhat.com Design 0.1 Design 22 Prototypes Design 0.1 View 1 View 2 Page 3 – View 2 Add 3/48 3/48 Design 0.2 Screen 3 – View 1 Add Interaction section helps in creating an interactive flow by using hot-spots. Rosie Sharma VISUAL DESIGNER
  48. 48. Analyze Design Create TestSpace Plan Preview / Review Export UI Wire-framing IdeaAon Hub Add InteracAon Customizing Theme :: Hotspot Targets View 1 View 2 (Self Screen 3 – View 1 Page 3 – View 2 h[p://redhat.com Enter text to filter Page 1 Page 2 h[p://redhat.com h[p://redhat.com h[p://redhat.com Design 0.1 Design 22 Prototypes Design 0.1 View 1 View 2 Page 3 – View 2 Add 3/48 3/48 Design 0.2 Screen 3 – View 1 Rosie Sharma VISUAL DESIGNER
  49. 49. Analyze Design Create TestSpace Plan Preview / Review Export UI Wire-framing IdeaAon Hub Add InteracAon Customizing Theme :: Hotspot Targets View 1 View 2 (Self Screen 3 – View 1 Page 3 – View 2 h[p://redhat.com Enter text to filter Page 1 Page 2 h[p://redhat.com h[p://redhat.com h[p://redhat.com Design 0.1 Design 22 Prototypes Design 0.1 View 1 View 2 Page 3 – View 2 Add 3/48 3/48 Design 0.2 Screen 3 – View 1 Rosie Sharma VISUAL DESIGNER
  50. 50. Analyze Design Create TestSpace Plan Preview / Review Export UI Daniel Rock Wire-framing IdeaAon Hub Add InteracAon Customizing Theme Prototypes Design 0.1 View 1 View 2 Page 3 – View 2 Add 3/48 3/48 Design 0.2 Screen 3 – View 1 :: Collaborators Mary Selly ChrisAna Roseg Rosie Sharma Daniel Rock Darren Ball I have added the card for Think and Feel. @Daren do you think you agree to this ? I know you are a falling into the persona :P OK. I think a UI prototyper would also feel the same.. :: COMMENTS 2 1 4I think the shadow can be reduced a li[le as it looks odd comparing the other data visualizaAon elements. #3 Respond I think the shadow can be reduced a li[le as it looks odd comparing the other data visualizaAon elements. In Preview/Review sections the reviewers can view , interact with the prototype and comment/give feedback. DESIGN REVIEWER
  51. 51. Analyze Design Create TestSpace Plan Preview / Review Export UI Darren Ball Wire-framing IdeaAon Hub Add InteracAon Customizing Theme Prototypes Design 0.1 View 1 View 2 Page 3 – View 2 Add 3/48 3/48 Design 0.2 Screen 3 – View 1 Design 0.2 Export as HTML5, CSS3, JS Package. Export to: TestSpace/My_codebase EXPORT UI DEVELOPER
  52. 52. Analyze Design Create TestSpace Plan Preview / Review Export UI ChrisAna Roseg Wire-framing IdeaAon Hub Add InteracAon Customizing Theme Prototypes Design 0.1 View 1 View 2 Page 3 – View 2 Add 3/48 3/48 Design 0.2 Screen 3 – View 1 Design 0.2 Export as HTML5, CSS3, JS Package. Export to: TestSpace/Design Repo EXPORT Please wait. Design 0.2 UI is being exported to My_codebase. Expor>ng UI Code from the selected design UI DEVELOPER
  53. 53. Analyze Design Create TestSpace Plan Preview / Review Export UI ChrisAna Roseg Wire-framing IdeaAon Hub Add InteracAon Customizing Theme Prototypes Design 0.1 View 1 View 2 Page 3 – View 2 Add 3/48 3/48 Design 0.2 Screen 3 – View 1 Design 0.2 Export as HTML5, CSS3, JS Package. Export to: TestSpace/Design Repo EXPORT Export Successful! Export Successful! Design 0.2 is converted to HTML/CSS code and is saved in your repository My_codebase. UI DEVELOPER
  54. 54. •  Seamless work-flow for Design – Developer collaboraAon •  Saving on license cost as no longer it is required to use mulAple third-party design tools •  Single source makes it maintainable. •  Omini-change process ensures that any changes happening at any stage of design stage will automaAcally take effect on other stage deliverables. •  Zero learning-curve •  Single user – Single Tool : makes it easy for any of the role can login and generate implementaAon ready UI output. •  Significantly reduces Cosme>c / UI compliance issues •  Significantly reduces the >me to implementa>on of the design concepts. •  Boon for Agile projects where the changes are common. •  Promotes PaQern libraries as a main stream standard design process element. ROI / Benefits List…
  55. 55. •  hQp://desops.io/2018/05/12/transla>ng-value-at-different-stages-of-design-with-minimal-waste/ •  hQp://desops.io/2018/05/12/video-diQo-design-life-cycle-management-concept-for-desops-2016-17/ Read more at:

×