Designing Forge UI: A Story of Designing an App UI System

2. Secure 1000+ components Buildable blocks Metrics Analytics Who When How Why Where Useable Accessible Lightning fast Super performant Limitless configuration Mobile VR optimised Future proofAIMachine learning Writes itself Does work for you

3. Secure 1000+ components Buildable blocks Metrics Analytics Who When How Why Where Useable Accessible Lightning fast Super performant Limitless configuration Mobile VR optimised Future proofAIMachine learning Writes itself Does work for you EASY TO USE

4. Kicking off Forge UI Doing the  Research Bringing it to life Learnings  and what’s next Agenda

6. Forge Goals Atlassian Hosting Remove all complexities in setting up a Cloud environment

7. Security Ensure built in app security with hosted infrastructure Forge Goals Atlassian Hosting Remove all complexities in setting up a Cloud environment

8. Security Ensure built in app security with hosted infrastructure Forge Goals Simple Experience Provide a simple app creation experience Atlassian Hosting Remove all complexities in setting up a Cloud environment

9. WHAT IS FORGE UI? (EVENT, STATE) UI VIEWFAAS (<APP />, STATE) MARK UP

10. Zero effort UX Get best-practices and accessibility built in Forge UI Goals Rapid DevX Build and iterate fast and with ease Cross Platform Unlock extensibility on web and mobile native

11. In-house developer Software engineer by day. Forge app developer by night.

12. In-house developer Software engineer by day. Forge app developer by night. 🦄

13. In-house developer Software engineer by day. Forge app developer by night. Likes popcorn. 🌽

14. In-house developer Software engineer by day. Forge app developer by night. Likes popcorn. And horses, too. 🦄 🌽

15. DeclarativeImperative <Cell> <Button text="Attend" /> </Cell> const container = document .getElementById(‘my-cell’); const btn = document .createElement(‘button’); btn.className = ‘btn’; btn.value = ‘Attend’; container.appendChild(btn);

16. Editor

20. FORGE UI RESEARCH JOURNEY Define research plan Research into Editor macros Component validation workshop DIVERSE MACRO LIST Component brainstorming workshop VALIDATED COMPONENT LIST PROJECT START MACRO LEVELS + REFERENCE MACROS DELIVERY ORDER

21. FORGE UI RESEARCH JOURNEY Define research plan PROJECT START Define research plan Research into Editor macros Component validation workshop DIVERSE MACRO LIST Component brainstorming workshop VALIDATED COMPONENT LIST MACRO LEVELS + REFERENCE MACROS DELIVERY ORDER

22. RESEARCH PLAN In-house developer Deep dive and understand our in- house dev persona Top Editor Extensions What types of editor apps do in- house devs want to build? Top Components What components do we need to provide for these apps? Please remember You don’t always need the line or text at all.

23. RESEARCH PLAN In-house developer Deep dive and understand our in- house dev persona Top Editor Extensions What types of editor apps do in- house devs want to build? Top Components What components do we need to provide for these apps? Please remember You don’t always need the line or text at all.

24. Define research plan Research into Editor macros Component validation workshop DIVERSE MACRO LIST Component brainstorming workshop VALIDATED COMPONENT LIST MACRO LEVELS + REFERENCE MACROS DELIVERY ORDER Define research plan Research into Editor macros PROJECT START FORGE UI RESEARCH JOURNEY

25. What Editor Macros? Confluence Question Community post Marketplace audit

26. Targeting external developersWhat Editor Macros? Confluence Question Community post Marketplace audit

27. What Editor Macros? Confluence Question Community post Marketplace audit

28. Define research plan Research into Editor macros Component validation workshop DIVERSE MACRO LIST Component brainstorming workshop VALIDATED COMPONENT LIST MACRO LEVELS + REFERENCE MACROS DELIVERY ORDER Define research plan Component brainstorming workshop PROJECT START FORGE UI RESEARCH JOURNEY Research into Editor macros DIVERSE MACRO LIST

29. Component Brainstorming Workshop

30. Crazy 8s

31. Crazy 8s

32. Top Components List

33. Define research plan Research into Editor macros Component validation workshop DIVERSE MACRO LIST Component brainstorming workshop VALIDATED COMPONENT LIST MACRO LEVELS + REFERENCE MACROS DELIVERY ORDER Define research plan Component validation workshop Component brainstorming workshop PROJECT START FORGE UI RESEARCH JOURNEY Research into Editor macros DIVERSE MACRO LIST

34. Component Validation Workshop

35. Shareback session

36. Shareback session Question: How to define a layout model?

37. Define research plan Research into Editor macros Component validation workshop DIVERSE MACRO LIST Component brainstorming workshop VALIDATED COMPONENT LIST MACRO LEVELS + REFERENCE MACROS DELIVERY ORDER Define research plan Component validation workshop Component brainstorming workshop VALIDATED COMPONENT LIST PROJECT START FORGE UI RESEARCH JOURNEY Research into Editor macros DIVERSE MACRO LIST

38. RENDER ONLY MACROS

39. RENDER ONLY MACROS

40. ACTIONABLE MACROS RENDER ONLY MACROS

41. CONFIGURABLE MACROS ACTIONABLE MACROS RENDER ONLY MACROS GIFs about: GIF me! The metal age

42. CONFIGURABLE MACROS ACTIONABLE MACROS RENDER ONLY MACROS Conﬁgurable GIFs!

43. FORGE

44. CONFIGURABLE MACROS ACTIONABLE MACROS RENDER ONLY MACROS Conﬁgurable GIFs!

45. CONFIGURABLE MACROS ACTIONABLE MACROS RENDER ONLY MACROS Macro richness levels

46. Define research plan Research into Editor macros Component validation workshop DIVERSE MACRO LIST Component brainstorming workshop VALIDATED COMPONENT LIST MACRO LEVELS + REFERENCE MACROS DELIVERY ORDER Define research plan Component validation workshop Component brainstorming workshop VALIDATED COMPONENT LIST PROJECT START MACRO LEVELS + REFERENCE MACROS DELIVERY ORDER FORGE UI RESEARCH JOURNEY Research into Editor macros DIVERSE MACRO LIST

47. Kicking off Forge UI Bringing it to life Learnings  and what’s next Agenda Doing the  Research

50. Good principles force clarity and reduce ambiguity. DESIGN PRINCIPLES

51. Atlassian Design Principles http://www.atlassian.design

52. Ease and speed over flexibility Minimise options to stay lightning fast. Provide direction Components are molecular and composed and avoid minutiae. Forge UI design principles

53. Layout

54. Layout: Blocks

55. Blocks and the vertical stack IMAGE TEXT TEXT IMAGE TEXT

56. IMAGE TEXT TEXT IMAGE TEXT BENEFITS Reflow of layout Responsiveness managed inside of block Cross-platform Blocks can have alternate renderings per platform

57. Layout: Containers

58. Containers and blocks INPUT SUBMIT INPUT

59. Containers and blocks INPUT SUBMIT INPUT SUBMIT INPUT

62. The result https://unsplash.com/photos/zP7X_B86xOg

63. Button Text Image Text field Text area Radio / Checkbox group Select Date-picker Button set Table Form CONTAINERS BLOCKS

64. Nic’s DJ app Bust out the beats.

65. You can’t beat my high-score. Peter’s 2048 game

69. Start the basics Users, personas, goals, and principles were key to getting clarity Research is iterative Keep it lo-fi and be comfortable with unknowns and learning as you go TEAM Collaboration for the win! Key Learnings

70. TODAY HANDS-ON FORGE LABS Upstairs in Schubert 3

71. THIS YEAR FORGE BETA PROGRAM

Designing Forge UI: A Story of Designing an App UI System

Esté a ler uma amostra.

Confira estes a seguir

Designing Forge UI: A Story of Designing an App UI System

Mais Conteúdo rRelacionado

Diapositivos para si (20)

Semelhante a Designing Forge UI: A Story of Designing an App UI System (20)

Mais de Atlassian (20)

Mais recentes (20)