1. A New Look for e4 Susan McCourt & Bogdan Gheorghe IBM Rational

2. What are we* doing?

Revisit and update the visual design for Eclipse

3. Design the default style sheet for the Eclipse SDK 4.0 (e4) workbench 4. Implement what's needed in the styling engine to do so

*we includes Linda Watson, IBM visual designer

5. e4 0.9:Proof of Concept 6. CSS Example ETabFolder { background-color: rgb(246, 246, 251); simple: true; maximize-visible: false; minimize-visible: false; webby-style: true; margin: 2px; tab-margin-offset: 4px; border-color: rgb(201, 200, 204) } #PerspectiveStack > ETabItem { background-color: rgb(246, 246, 251); padding-top: 4px; padding-bottom: 2px; margin-top: 0px; } #PerspectiveStack > ETabItem.active:selected { background-color: rgb(255, 255, 255) rgb(246, 245, 250); } ETabFolder.active { background-color: rgb(224, 226, 235); } 7. Goal: modern visual style 8. Goal: breathing room 9. Goal: push the styling engine

Not everyone will agree with our design goals

10. Goodbye preferences, hello CSS 11. Tweak the workbench visual style to your heart's content 12. Rich catalogs of alternate styles will become available 13. What aren't we doing?

We aren't replacing the toolbar (yet)

Time constraints

14. Need to consider alternatives

Expectations are platform dependent

15. Ribbon and licensing issues We aren't rethinking the perspective model (yet) 16. We may not relax the single editor area constraint 17. Influences: Web Design http://get.adobe.com/flashplayer/ 18. Influences: Web Design http://www.officemax.com/ 19. Above all else, show the data

Data ink (pixel) ratio

The Visual Design of Quantitative Information, Edward R. Tufte

Data vs. computer administrative debris 20. Every bit of ink (every pixel) requires a reason 21. Design the content, not the container 22. Clutter and overload aren't a characteristic of information quantity, but of design failure 23. Example: Data Pixels 24. Influences: Products & Platforms http://blogs.msdn.com/jasonz/archive/2009/02/20/a-new-look-for-visual-studio-2010.aspx 25. Flexibility:Screen Size http://www.w3schools.com/browsers/browsers_display.asp 26. Flexibility:User Expectations 27. e4 1.0: More flexibility

More design time

28. User expectations are more flexible 29. Revisit old assumptions aboutimplementation constraints 30. Users can change it if they don't like it 31. Balancing Concerns

Incorporate the new flexibility

32. Platform hue respecting 33. Pick signature places to be different 34. Respect for accessibility/high contrast 35. Classic look should be available 36. Elements at Play

Space

37. Borders 38. Toolbar 39. Tab shapes 40. Typography 41. Color 42. Iteration:Playful typography 43. Iteration: Minimal containment 44. An a-ha moment 45. Iteration: Creative Separation 46. Iteration: Respond to Feedback 47. Iteration: Add Design Elements 48. Current iteration: WinXP Olive 49. Current iteration: Mac 50. Current iteration: Linux 51. Design stew (or house of cards?)

Must balance ingredients as a whole

52. Changing an element affects integrity of the whole

Icons on tabs influences tab visuals and shapes

53. Selected stack color influences text colors on tabs and background colors 54. Perspective switching changes toolbar shadowing 55. Consider transitions between states 56. What's implemented? 57. What's next?

Blueprint the design

58. Implement the mockups 59. Deal with surprises 60. Tooling and user customization

CSS editing with dynamic apply

61. CSS editing without realizing it 62. Questions?

http://wiki.eclipse.org/index.php?title=E4/CSS/Visual_Design

63. https://bugs.eclipse.org/bugs/show_bug.cgi?id=293481 64. e4-dev mailing list 65. e4 builds Susan McCourt,[email_address] Bogdan Gheorghe,[email_address] Linda Watson,[email_address]