{"id":1396,"date":"2013-06-11T12:00:52","date_gmt":"2013-06-11T12:00:52","guid":{"rendered":"https:\/\/blog.jetbrains.com\/?p=3462"},"modified":"2013-06-11T12:00:52","modified_gmt":"2013-06-11T12:00:52","slug":"inside-darcula-look-and-feel-an-interview-with-konstantin-bulenkov","status":"publish","type":"blog","link":"https:\/\/blog.jetbrains.com\/fr\/blog\/2013\/06\/11\/inside-darcula-look-and-feel-an-interview-with-konstantin-bulenkov","title":{"rendered":"Inside Darcula L&amp;F: An Interview with Konstantin Bulenkov"},"content":{"rendered":"<p><em><img decoding=\"async\" loading=\"lazy\" class=\"alignleft size-thumbnail wp-image-3464\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2013\/06\/Konstantin_Bulenkov-150x150.jpg\" alt=\"Konstantin Bulenkov\" width=\"150\" height=\"150\" \/>In this interview we speak with <a title=\"Follow Konstantin Bulenkov on Twitter\" href=\"https:\/\/twitter.com\/bulenkov\" target=\"_blank\" rel=\"noopener\">Konstantin Bulenkov<\/a> about Darcula, the new stylish dark look and feel that first appeared in the 2012 release of IntelliJ IDEA 12. Since that time, the popular look and feel has been rolled out to all products based on the IntelliJ Platform and will be in YouTrack 5.0. It is worth noting however, that ReSharper (7.0) and dotCover (2.1) officially introduced dark schemes prior to the release of Darcula.<\/em><\/p>\n<p><strong>Hello Konstantin and thank you for taking the time to speak with us. Can you please tell us a bit about yourself and your current role at JetBrains?<\/strong><\/p>\n<p>Hi Robert. I\u2019m one of the people leading the development of IntelliJ IDEA and IntelliJ Platform. Within the product, everything users see and interact with is my responsibility. I spend most of my time creating and tuning Swing UI components, improving performance and making our IDEs clean and intuitive. Another major part of my work is communicating with our users and understanding their preferences. There are absolutely no perfect UIs and thousands of users with different points of view that must be taken into account.<\/p>\n<p><strong>Darcula first appeared in IntelliJ IDEA 12 alongside a new user interface. Were these separate efforts or part of a combined usability strategy for the IntelliJ Platform that would be incorporated into JetBrains&#8217; other IDEs?<\/strong><\/p>\n<p>Darcula look and feel is a part of the IntelliJ Platform and as many other platform features, all our IDEs inherit it automatically. However, some work was required in every IDE to integrate Darcula properly. Mostly it\u2019s about painting and customization of the Darcula color scheme for different languages.<\/p>\n<p><strong>What benefits does Darcula provide? Was a dark look and feel your first choice, or did you pursue other options? Where did you draw inspiration?<\/strong><\/p>\n<p>A dark interface seems more &#8216;natural&#8217; for many developers. By natural I mean that a lot of software developers are used to text editors and *nix-based OS console look. I thought it would be great to do something to make them feel comfortable. As for inspiration&#8230; It usually comes at night, you know. When you\u2019re coding at night, a dark screen is always better.<\/p>\n<p>Also, Darcula looks great in code samples and demos on the big screen.\u00a0Google I\/O 2013 proved that with Android Studio (<a title=\"IntelliJ IDEA is the base for Android Studio, the new IDE for Android developers\" href=\"https:\/\/blog.jetbrains.com\/blog\/2013\/05\/15\/intellij-idea-is-the-base-for-android-studio-the-new-ide-for-android-developers\/\" target=\"_blank\">based on IntelliJ Platform<\/a>)!<\/p>\n<p><a href=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2013\/06\/Tor-New.png\" target=\"_blank\"><img decoding=\"async\" loading=\"lazy\" class=\"size-large wp-image-3470 alignnone\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2013\/06\/Tor-New-1024x553.png\" alt=\"Android Studio (based on IntelliJ IDEA CE) Announcement at Google I\/O 2013\" width=\"566\" height=\"306\" \/><\/a><\/p>\n<p><strong>How did you go about testing Darcula and the new UI from concept to implementation?<\/strong><\/p>\n<p>At JetBrains we use all of our products on a regular basis, so it would be fair enough to say that we do eat our own dog food. We\u2019ve got a sort of private forum where anyone from the team can request feedback about a new feature they\u2019re working on. Thanks to the team, I got hundreds of messages which helped me figure out what to do! Our early access users were also important to the process and instrumental in providing useful feedback.<\/p>\n<p>As for me personally, I just switched to Darcula when it became more or less stable and carefully fixed one bug after another that I found while working.<\/p>\n<p>To illustrate what steps we passed through with Darcula, let me show some &#8220;before and after&#8221; pictures:<\/p>\n<p><em>Combo boxes, search fields and borders:<\/em><\/p>\n<p style=\"text-align: left\"><em><a href=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2013\/06\/combo-boxes_search-fields_borders-before.png\"><\/a><a href=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2013\/06\/combo-boxes_search-fields_borders-before.png\" target=\"_blank\"><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-3493 alignnone\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2013\/06\/combo-boxes_search-fields_borders-before.png\" alt=\"Before: Combo boxes, search fields and borders\" width=\"566\" height=\"111\" \/><\/a><a href=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2013\/06\/combo-boxes_search-fields_borders-after.png\" target=\"_blank\"><img decoding=\"async\" loading=\"lazy\" class=\"size-large wp-image-3494 alignnone\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2013\/06\/combo-boxes_search-fields_borders-after-1024x207.png\" alt=\"After: Combo boxes, search fields and borders\" width=\"566\" height=\"115\" \/><\/a><\/em><\/p>\n<p style=\"text-align: left\"><em><a href=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2013\/06\/combo-boxes_search-fields_borders-after.png\" target=\"_blank\"><\/a>Buttons:<\/em><\/p>\n<p style=\"text-align: left\"><em><a href=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2013\/06\/buttons-before.png\" target=\"_blank\"><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-3495\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2013\/06\/buttons-before.png\" alt=\"Buttons: before\" width=\"566\" height=\"69\" \/><\/a><a href=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2013\/06\/buttons-after.png\" target=\"_blank\"><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-3496\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2013\/06\/buttons-after.png\" alt=\"Buttons: after\" width=\"566\" height=\"80\" \/><\/a><\/em><\/p>\n<p style=\"text-align: left\"><em><a href=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2013\/06\/buttons-after.png\" target=\"_blank\"><\/a>Progress Bars:<\/em><\/p>\n<p style=\"text-align: left\"><em><a href=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2013\/06\/progress-bars-before.png\" target=\"_blank\"><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-3497 alignnone\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2013\/06\/progress-bars-before.png\" alt=\"Progress bars: before\" width=\"566\" height=\"176\" \/><\/a><a href=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2013\/06\/progress-bars-after.png\" target=\"_blank\"><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-3498 alignnone\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2013\/06\/progress-bars-after.png\" alt=\"Progress bars: after\" width=\"566\" height=\"173\" \/><\/a><\/em><\/p>\n<p style=\"text-align: left\"><em><a href=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2013\/06\/progress-bars-after.png\" target=\"_blank\"><\/a><\/em>Icons were one of the most difficult problems. Images that look nice in light themes are hardly visible with dark backgrounds.<\/p>\n<p style=\"text-align: left\"><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-3500 alignnone\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2013\/06\/color-issues-rotated.jpg\" alt=\"color-issues-\" width=\"129\" height=\"55\" \/><\/p>\n<p>To solve this problem we added the ability to load special images and icons when under Darcula. Special thanks goes to our graphical designer <a title=\"Julia Repina.com\" href=\"http:\/\/juliarepina.com\/\" target=\"_blank\" rel=\"noopener\">Julia Repina<\/a> who made over 3,000 new icons (plus retina-ready ones)\u00a0in just a couple of months before a major release to support Darcula.<\/p>\n<p style=\"text-align: left\"><em><a href=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2013\/06\/icons.png\" target=\"_blank\"><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-3501 alignnone\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2013\/06\/icons.png\" alt=\"Icons\" width=\"566\" height=\"23\" \/><\/a><\/em><\/p>\n<p><strong>Do you have details on the success of Darcula? How has it been received and what are your plans for the near future?<\/strong><\/p>\n<p>To answer this question I\u2019d like to tell you a bit about the development process and culture in the IntelliJ team. Everything starts from an idea in someone\u2019s head and ends up with implementation. Almost every feature is the result of one person\u2019s work. There are hundreds of amazing features in IntelliJ IDEA and just about 30 developers. Darcula is one of these ideas. Originally it was an attempt to make a completely different user interface. Something we have never had before. Something that literally gives you a new look on everyday things.<\/p>\n<p>When Darcula became stable and sexy, our marketing team decided to go further with their &#8220;The Darker Side of Productive Coding&#8221; tagline. That was amazing.<\/p>\n<p>A lot of our employees came by after the release just to say &#8220;thank you.&#8221; Our feedback tracker was really quickly filled with good words about Darcula. We get positive feedback from Twitter and the developer community as well.<\/p>\n<p>As for plans, I&#8217;m trying to replace the old IDEA 4.5 look and feel with a new light one based on Darcula. It will fix many issues with the User Interface on Linux.\u00a0And who knows, maybe one day the dark UI will become the default one for our products :-)<\/p>\n<p><strong>Can users create their own look and feel? Are there any resources to help them get started and do you have any advice?<\/strong><\/p>\n<p>Yes, for sure. Ask me how to do it! However, it\u2019s not so easy. For example, there are about 20 existing look and feels available. Half of them are unstable, unsupported, or difficult to integrate with big projects such as IntelliJ IDEA. So, it seems it\u2019s not a popular area for new ideas.<\/p>\n<p>Resources about how to create your own look and feel can be found at official <a title=\"Trail: Creating a GUI With JFC\/Swing\" href=\"http:\/\/docs.oracle.com\/javase\/tutorial\/uiswing\/index.html\" target=\"_blank\" rel=\"noopener\">Oracle\u2019s official website<\/a>. There are not so many details, but this page is the best place to start.<\/p>\n<p><strong>Thank you for your time, it has been a pleasure. If you have questions that you would like to ask Konstantin, please use the comment section below. <\/strong><\/p>\n<div style=\"background-color: #f1f6fe;margin-bottom: 20px;padding: 15px;margin-right: 0%;font-size: 14px;line-height: 20px;text-align: left\">Konstantin is IntelliJ Platform Front-end Team Lead at JetBrains. He is a Java Swing enthusiast and author of Darcula L&amp;F. Follow Konstantin on <a title=\"Konstantin Bulenkov Blog\" href=\"http:\/\/bulenkov.com\/\" target=\"_blank\" rel=\"noopener\">his blog<\/a> and on Twitter <a title=\"Follow Konstantin Bulenkov on Twitter\" href=\"https:\/\/twitter.com\/bulenkov\" target=\"_blank\" rel=\"noopener\">@bulenkov<\/a>.<\/div>\n","protected":false},"author":78,"featured_media":0,"comment_status":"open","ping_status":"open","template":"","categories":[623,15],"tags":[248,256,246,247,249],"cross-post-tag":[],"acf":[],"_links":{"self":[{"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/blog\/1396"}],"collection":[{"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/users\/78"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/comments?post=1396"}],"version-history":[{"count":0,"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/blog\/1396\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/media?parent=1396"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/categories?post=1396"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/tags?post=1396"},{"taxonomy":"cross-post-tag","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/cross-post-tag?post=1396"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}