{"id":279081,"date":"2018-11-29T15:40:58","date_gmt":"2018-11-29T22:40:58","guid":{"rendered":"http:\/\/css-tricks.com\/?p=279081"},"modified":"2018-11-29T15:40:58","modified_gmt":"2018-11-29T22:40:58","slug":"devtools-for-designers","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/devtools-for-designers\/","title":{"rendered":"DevTools for Designers"},"content":{"rendered":"<p>This is such an interesting conversation thread that keeps popping up year after year. The idea is that there could (and perhaps should) be in-browser tooling that helps web designers do their job. This tooling already exists to some degree. Let&#8217;s check in on perspectives from a wide array of people and companies who have shared thoughts on this topic.<\/p>\n<p><!--more--><\/p>\n<p>Ahmad Shadeed <a href=\"https:\/\/css-tricks.com\/using-devtools-tweak-designs-browser\/\">wrote for us last year<\/a> about how DevTools can be useful to designers in a number of ways, like changing state, content, colors, variables, etc.:<\/p>\n<blockquote><p>Editing things visually like that will give [designers] more control over some design details, they can tweak things in the browser and show the result to the developer to be implemented.<\/p><\/blockquote>\n<p><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/207830826\" width=\"640\" height=\"431\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n<hr>\n<p>In a post titled, <a href=\"https:\/\/uxdesign.cc\/a-devtools-for-designers-2342aab88c06\" rel=\"noopener\">&#8220;A DevTools for Designers&#8221;<\/a>, A.J. Kandy wrote that, just because you&#8217;re a designer, it doesn&#8217;t mean you don&#8217;t know how to code &mdash; but you might not be production-level and might be faster elsewhere:<\/p>\n<blockquote><p>I can edit front-end markup; I\u2019m just way <em>faster<\/em> at drawing rectangles and arranging them into user interfaces. I\u2019m technical, but not a coder.<\/p><\/blockquote>\n<figure id=\"post-279084\" class=\"align-none media-279084\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/1_VyhZqIuhHJGCIR14HOZtNw.png?ssl=1\" alt=\"\" data-recalc-dims=\"1\" \/><\/figure>\n<p>It sparked a lot of responses and thoughts back when we originally shared the post:<\/p>\n<blockquote>\n<ul>\n<li>Jason Santa Maria: <a href=\"http:\/\/v4.jasonsantamaria.com\/articles\/a-real-web-design-application\/\" rel=\"noopener\">A Real Web Design Application<\/a><\/li>\n<li>Jeffrey Zeldman: <a href=\"http:\/\/www.zeldman.com\/2010\/07\/05\/an-indesign-for-html-and-css\/\" rel=\"noopener\">An Indesign for HTML and CSS?<\/a><\/li>\n<li>Jon Gold: <a href=\"https:\/\/airbnb.design\/the-evolution-of-tools\/\" rel=\"noopener\">The Evolution of Tools<\/a><\/li>\n<\/ul>\n<\/blockquote>\n<p>It&#8217;s one thing to augment the existing DevTools to be better for designers. Firefox has done great work in that area with stuff like their <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Tools\/Page_Inspector\/How_to\/Work_with_animations\" rel=\"noopener\">animation tooling<\/a>, flexbox and grid inspectors. At the same time, it&#8217;s also nice to see entirely fresh takes on how we can approach it! For example, Google dropped <a href=\"https:\/\/chrome.google.com\/webstore\/detail\/visbug\/cdockenadnadldjbbgcallicgledbeoc?hl=en\" rel=\"noopener\">VisBug<\/a>, an extension with designers squarely in mind. The video is only 30 seconds:<\/p>\n<p><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/Z9V6B-tOIkc\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<p>There have been a lot of opinions about browser extensions that allow design editing over the years. Check out options <a href=\"https:\/\/mediatemple.net\/blog\/tips\/bend-websites-css-will-stylish-stylebot\/\" rel=\"noopener\">like Stylebot<\/a> (<a href=\"https:\/\/chrome.google.com\/webstore\/detail\/stylebot\/oiaejidbmkiecgbjeifoejpgmdaleoha?hl=en\" rel=\"noopener\">Chrome store link<\/a>). <\/p>\n<figure id=\"post-279085\" class=\"align-none media-279085\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/s_7F1E0A8B8381ECF9169B3F0E33D7096E6312DAF9B60B0006B1FCA7AEB8AF6C53_1516022954225_ScreenShot2018-01-15at5.29.10AM.png?ssl=1\" alt=\"\" data-recalc-dims=\"1\" \/><\/figure>\n<hr>\n<p>There is another visual design browser plugin called <a href=\"https:\/\/chrome.google.com\/webstore\/detail\/visual-inspector-by-canva\/efaejpgmekdkcngpbghnpcmbpbngoclc?hl=en\" rel=\"noopener\">Visual Inspector<\/a>:<\/p>\n<p><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/Ib_hnhXTC20\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<hr>\n<p>Don&#8217;t forget this classic trick:<\/p>\n<blockquote class=\"twitter-tweet\" data-lang=\"en\">\n<p lang=\"en\" dir=\"ltr\">My favourite trick to do in devTools is probably `document.designMode = &quot;on&quot;`. Turn it on and start editing text on any element on a website. Super cool! <a href=\"https:\/\/t.co\/bdV9yONayT\">https:\/\/t.co\/bdV9yONayT<\/a> <a href=\"https:\/\/t.co\/rkC0ZsTCcD\">pic.twitter.com\/rkC0ZsTCcD<\/a><\/p>\n<p>&mdash; Simon Vrachliotis  (@simonswiss) <a href=\"https:\/\/twitter.com\/simonswiss\/status\/1062809496932634624?ref_src=twsrc%5Etfw\" rel=\"noopener\">November 14, 2018<\/a><\/p><\/blockquote>\n<hr>\n<p>Oliver Williams wrote the following in <a href=\"https:\/\/logrocket.com\/blog\/ultimate-web-design-tool\/\" rel=\"noopener\">&#8220;The ultimate web design tool: a browser&#8221;<\/a>:<\/p>\n<blockquote><p>Browser dev tools were traditionally useful for debugging JavaScript and inspecting network requests. More recently, we\u2019ve seen browsers add graphical interfaces for manipulating CSS. Most browsers offer a color picker and eyedropper tool for selecting colors. In Chrome, this tool will helpfully display a color-contrast ratio. Chrome also offers a GUI for adding or tweaking text-shadow and box-shadow.<\/p><\/blockquote>\n<hr>\n<p>Perhaps design tooling will lead us in this direction in a big way?<\/p>\n<blockquote class=\"twitter-tweet\" data-lang=\"en\">\n<p lang=\"en\" dir=\"ltr\">&#x2728;isual<br \/>   &#x2728; evelopment<br \/>      &#x2728; nvironments<\/p>\n<p>&#x261d;&#xfe0f;Just like most code-based developers use IDEs to develop software today, we&#39;re going to start seeing multiple new VDEs emerge that enable a primarily-visual way of designing and shipping software.<\/p>\n<p>&mdash; Vlad Magdalin (@callmevlad) <a href=\"https:\/\/twitter.com\/callmevlad\/status\/1063503844162686976?ref_src=twsrc%5Etfw\" rel=\"noopener\">November 16, 2018<\/a><\/p><\/blockquote>\n<p><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n<p>Vlad works with <a href=\"https:\/\/webflow.com\/\" rel=\"noopener\">Webflow<\/a>, so you can see where he&#8217;s coming from with that.<\/p>\n<hr>\n<p>Jye SR chimed in with his post, <a href=\"https:\/\/medium.com\/swlh\/5-ways-chrome-devtools-made-my-life-easier-d1b4a49a3826\" rel=\"noopener\">&#8220;5 Ways DevTools Made My Life Easier&#8221;<\/a>:<\/p>\n<blockquote><p>&#8230; it\u2019s possible to use Chrome DevTools to investigate competitors, see what\u2019s not working with add-ons, change your viewport, understand page load timings and edit the web; all of which can help digital marketers, product managers or anyone working with a website to do their job more efficiently. It\u2019s a tool which I use every day and I hope that you will too!<\/p><\/blockquote>\n<figure id=\"post-279086\" class=\"align-none media-279086\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/Screen-Shot-2018-11-19-at-9.54.53-AM.png?ssl=1\" alt=\"\" data-recalc-dims=\"1\" \/><\/figure>\n<hr>\n<p>Hard to look at all that and not see this is where tooling is headed.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This is such an interesting conversation thread that keeps popping up year after year. The idea is that there could (and perhaps should) be in-browser tooling that helps web designers do their job. This tooling already exists to some degree. Let&#8217;s check in on perspectives from a wide array of people and companies who have [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":279431,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"It's hard not to see where the direction of dev tooling is heading as far as integrating design.","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[692,1144],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/devtools-paintbrush.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":269125,"url":"https:\/\/css-tricks.com\/a-devtools-for-designers\/","url_meta":{"origin":279081,"position":0},"title":"A DevTools for Designers","date":"March 31, 2018","format":false,"excerpt":"There has long been an unfortunate disconnect between visual design for the web and web design and development. We're over here designing pictures of websites, not websites - so the sentiment goes. A.J. Kandy puts a point on all this. We're seeing a proliferation of design tools these days, all\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/03\/devtoolsfordesigners.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":284244,"url":"https:\/\/css-tricks.com\/using-devtools-to-improve-the-ux-design-to-development-process\/","url_meta":{"origin":279081,"position":1},"title":"Using DevTools to Improve the UX Design to Development Process","date":"June 7, 2019","format":false,"excerpt":"I\u2019d like to tell you how I see code and design intersect and support one another. Specifically, I want to cover how designers can use code in their everyday work. I suggest this not because it\u2019s a required skill, but because even a baseline understanding of coding can make designs\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/devtools-paintbrush.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":253132,"url":"https:\/\/css-tricks.com\/using-devtools-tweak-designs-browser\/","url_meta":{"origin":279081,"position":2},"title":"Using DevTools to Tweak Designs in the Browser","date":"March 28, 2017","format":false,"excerpt":"Let's look at some ways we can use the browsers DevTools to do design work. There are a few somewhat hidden tricks you mind find handy! Toggling Classes With Checkboxes This is useful when trying to pick a design from different options or to toggle the active state of an\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/03\/firefox-screenshot.jpg?fit=1200%2C950&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":244032,"url":"https:\/\/css-tricks.com\/quick-look-react-redux-devtools\/","url_meta":{"origin":279081,"position":3},"title":"A Quick Look at the React and Redux DevTools","date":"July 29, 2016","format":false,"excerpt":"I'm still quite a newbie at this stuff, but I think the development tooling around React and Redux is pretty dang impressive.","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":315753,"url":"https:\/\/css-tricks.com\/new-in-chrome-css-overview\/","url_meta":{"origin":279081,"position":4},"title":"New in Chrome: CSS Overview","date":"June 30, 2020","format":false,"excerpt":"Here\u2019s a fancy new experimental feature in Chrome! Now, we can get an overview of the CSS used on a site, from how many colors there are to the number of unused declarations... even down to the total number of defined media queries. Again, this is an experimental feature. Not\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/06\/chrom-devtools-css-overview.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":182502,"url":"https:\/\/css-tricks.com\/give-designers-tools-get-need\/","url_meta":{"origin":279081,"position":5},"title":"Give Designers Tools To Get You What You Need","date":"September 10, 2014","format":false,"excerpt":"Let's say you're having a healthy back-and-forth between you (a front end developer) and a designer. All the best work comes through collaboration and iteration, right? I believe that. But I also believe there are time traps in there. If you feel you're wasting time by getting peppered with tiny\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/devtools-paintbrush.jpg?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/279081"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=279081"}],"version-history":[{"count":8,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/279081\/revisions"}],"predecessor-version":[{"id":279132,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/279081\/revisions\/279132"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/279431"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=279081"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=279081"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=279081"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}