{"id":8821,"date":"2019-05-11T21:15:53","date_gmt":"2019-05-12T02:15:53","guid":{"rendered":"https:\/\/krisbunda.com\/blog\/?p=8821"},"modified":"2019-05-11T21:15:59","modified_gmt":"2019-05-12T02:15:59","slug":"ui-ux-design-energy-utility-controls-console-prototype-made-in-adobe-xd","status":"publish","type":"post","link":"https:\/\/krisbunda.com\/blog\/2019\/05\/11\/ui-ux-design-energy-utility-controls-console-prototype-made-in-adobe-xd\/","title":{"rendered":"UI\/UX Design: Energy Utility Controls Console, Prototype made in Adobe XD"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">This is a post about mocking up a controls <abbr title=\"Graphical User Interface\">GUI<\/abbr> for an imaginary energy utility (&#8220;Regional Utility Co.&#8221;) to see how a custom controls interface may look and feel for a <abbr title=\"Supervisory Control and Data Acquisition\">SCADA <\/abbr>system. The focus of the simulation is: controlling and monitoring feedback of a diesel power-generator installation.&nbsp; <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Video of the Controls Prototype Walkthrough<\/h2>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\" data-amp-layout=\"responsive\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"UI\/UX Design: Utility Company Controls Prototype made in Adobe XD\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/-r2guWD0o-Q?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h5 class=\"wp-block-heading\">The YouTube video above shows all the features of the prototype, including: <\/h5>\n\n\n\n<ul class=\"wp-block-list\"><li>Homepage with scrolling alerts feed <ul><li>(it doesn&#8217;t scroll because animated GIFs don&#8217;t work in XD yet)<\/li><\/ul><\/li><li>Flyout navigation menu<\/li><li>Equipment Sites parent pages <\/li><li>Specific Site (Diesel Generator) child page with: <ul><li>Manipulatable controls with feedback, including:<ul><li>Switch Movement, <\/li><li>Dashboard state change, <\/li><li>Indicator Light state change.<\/li><\/ul><\/li><li>Warning message with flashing aura to indicate machine-specific location<\/li><\/ul><\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"> Adobe XD Prototype Links <\/h2>\n\n\n\n<figure class=\"wp-block-image\" data-amp-lightbox=\"true\"><a href=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/ENERGY-UTILITY-CONTROLS-GUI-MOCKUP-IN-ADOBE-XD-LINKS-MAPPING-ANNOTATED.png\"><img decoding=\"async\" width=\"600\" height=\"320\" loading=\"lazy\" src=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/ENERGY-UTILITY-CONTROLS-GUI-MOCKUP-IN-ADOBE-XD-LINKS-MAPPING-ANNOTATED-600x320.png\" alt=\"ENERGY UTILITY CONTROLS GUI MOCKUP IN ADOBE XD - LINKS MAPPING, ANNOTATED\" class=\"wp-image-8919\" srcset=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/ENERGY-UTILITY-CONTROLS-GUI-MOCKUP-IN-ADOBE-XD-LINKS-MAPPING-ANNOTATED-600x320.png 600w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/ENERGY-UTILITY-CONTROLS-GUI-MOCKUP-IN-ADOBE-XD-LINKS-MAPPING-ANNOTATED-150x80.png 150w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/ENERGY-UTILITY-CONTROLS-GUI-MOCKUP-IN-ADOBE-XD-LINKS-MAPPING-ANNOTATED-1200x640.png 1200w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/ENERGY-UTILITY-CONTROLS-GUI-MOCKUP-IN-ADOBE-XD-LINKS-MAPPING-ANNOTATED-1120x596.png 1120w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/ENERGY-UTILITY-CONTROLS-GUI-MOCKUP-IN-ADOBE-XD-LINKS-MAPPING-ANNOTATED-560x298.png 560w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/ENERGY-UTILITY-CONTROLS-GUI-MOCKUP-IN-ADOBE-XD-LINKS-MAPPING-ANNOTATED-844x450.png 844w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/ENERGY-UTILITY-CONTROLS-GUI-MOCKUP-IN-ADOBE-XD-LINKS-MAPPING-ANNOTATED.png 1366w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><figcaption>ENERGY UTILITY CONTROLS GUI MOCKUP IN ADOBE XD &#8211; LINKS MAPPING, ANNOTATED<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Here&#8217;s what the prototype links look like. I could&#8217;ve done some of the switch layers more elegantly, but I was throwing this together to see if XD is a viable tool for the design process of making wireframes and prototypes of specialized, GUI-intensive software;  not just for web pages and web apps. <\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Controls Actors Affected by State Changes shown in Bold Type:<\/h4>\n\n\n\n<figure class=\"wp-block-image\" data-amp-lightbox=\"true\"><a href=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/ENERGY-UTILITY-CONTROLS-GUI-MOCKUP-IN-ADOBE-XD-LINKS-MAPPING2-ANNOTATED.png\" rel=\"\"><img decoding=\"async\" width=\"600\" height=\"320\" loading=\"lazy\" src=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/ENERGY-UTILITY-CONTROLS-GUI-MOCKUP-IN-ADOBE-XD-LINKS-MAPPING2-ANNOTATED-600x320.png\" alt=\"ENERGY UTILITY CONTROLS GUI MOCKUP IN ADOBE XD - LINKS MAPPING2, ANNOTATED\" class=\"wp-image-8920\" srcset=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/ENERGY-UTILITY-CONTROLS-GUI-MOCKUP-IN-ADOBE-XD-LINKS-MAPPING2-ANNOTATED-600x320.png 600w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/ENERGY-UTILITY-CONTROLS-GUI-MOCKUP-IN-ADOBE-XD-LINKS-MAPPING2-ANNOTATED-150x80.png 150w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/ENERGY-UTILITY-CONTROLS-GUI-MOCKUP-IN-ADOBE-XD-LINKS-MAPPING2-ANNOTATED-1200x640.png 1200w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/ENERGY-UTILITY-CONTROLS-GUI-MOCKUP-IN-ADOBE-XD-LINKS-MAPPING2-ANNOTATED.png 1366w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><figcaption>ENERGY UTILITY CONTROLS GUI MOCKUP IN ADOBE XD &#8211; LINKS MAPPING2, ANNOTATED<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">To get something like the 3-way selector switch to provide feedback, I used a series of &#8220;Overlay&#8221;&nbsp; transitions of artboards demonstrating different states of the <strong>3-way switch <\/strong>and <strong>start <\/strong>or <strong>stop buttons<\/strong>, including the <strong>Dashboard feature<\/strong> that would zero-out all readings if the machine were set to OFF or STOP. <\/p>\n\n\n\n<ul class=\"wp-block-gallery columns-1 wp-block-gallery-2 is-layout-flex wp-block-gallery-is-layout-flex\" data-amp-lightbox=\"true\"><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/Controls-UI-3-way-Selector-Switch-Knob.png\"><img decoding=\"async\" width=\"174\" height=\"149\" loading=\"lazy\" src=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/Controls-UI-3-way-Selector-Switch-Knob.png\" alt=\"Controls UI - 3-way Selector Switch Knob\" data-id=\"8914\" data-link=\"https:\/\/krisbunda.com\/blog\/?attachment_id=8914\" class=\"wp-image-8914\" srcset=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/Controls-UI-3-way-Selector-Switch-Knob.png 174w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/Controls-UI-3-way-Selector-Switch-Knob-150x128.png 150w\" sizes=\"auto, (max-width: 174px) 100vw, 174px\" \/><\/a><figcaption>Controls UI &#8211; 3-way Selector Switch Knob<\/figcaption><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/Controls-UI-Cluster-Selector-Switch-Buttons-Status-Light.png\"><img decoding=\"async\" width=\"761\" height=\"253\" loading=\"lazy\" src=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/Controls-UI-Cluster-Selector-Switch-Buttons-Status-Light.png\" alt=\"Controls UI - Cluster - Selector Switch, Buttons, Status Light\" data-id=\"8915\" data-link=\"https:\/\/krisbunda.com\/blog\/?attachment_id=8915\" class=\"wp-image-8915\" srcset=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/Controls-UI-Cluster-Selector-Switch-Buttons-Status-Light.png 761w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/Controls-UI-Cluster-Selector-Switch-Buttons-Status-Light-150x50.png 150w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/Controls-UI-Cluster-Selector-Switch-Buttons-Status-Light-600x199.png 600w\" sizes=\"auto, (max-width: 761px) 100vw, 761px\" \/><\/a><figcaption>Controls UI &#8211; Cluster &#8211; Selector Switch, Buttons, Status Light<\/figcaption><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/Controls-UI-Cluster-OFF-STATE-Selector-Switch-Buttons-Status-Light-1.png\"><img decoding=\"async\" width=\"761\" height=\"253\" loading=\"lazy\" src=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/Controls-UI-Cluster-OFF-STATE-Selector-Switch-Buttons-Status-Light-1.png\" alt=\"\" data-id=\"8946\" data-link=\"https:\/\/krisbunda.com\/blog\/?attachment_id=8946\" class=\"wp-image-8946\" srcset=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/Controls-UI-Cluster-OFF-STATE-Selector-Switch-Buttons-Status-Light-1.png 761w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/Controls-UI-Cluster-OFF-STATE-Selector-Switch-Buttons-Status-Light-1-150x50.png 150w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/Controls-UI-Cluster-OFF-STATE-Selector-Switch-Buttons-Status-Light-1-600x199.png 600w\" sizes=\"auto, (max-width: 761px) 100vw, 761px\" \/><\/a><\/figure><\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Another state is if the machine is set to AUTO (or) MANUAL <em>and <\/em>the START button is clicked, the green <strong>indicator light<\/strong> will glow and the Dashboard will indicate engine activity. <\/p>\n\n\n\n<ul class=\"wp-block-gallery columns-1 wp-block-gallery-3 is-layout-flex wp-block-gallery-is-layout-flex\" data-amp-lightbox=\"true\"><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/Controls-UI-DASHBOARD-Diesel-Generator-GUI-gauges-feedback-cluster-incl.-fuel-tanks-oil-engine-temp-etc..png\"><img decoding=\"async\" width=\"564\" height=\"903\" loading=\"lazy\" src=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/Controls-UI-DASHBOARD-Diesel-Generator-GUI-gauges-feedback-cluster-incl.-fuel-tanks-oil-engine-temp-etc..png\" alt=\"Controls UI - DASHBOARD - Diesel Generator GUI gauges feedback cluster, incl. fuel tanks, oil &amp; engine temp, etc.\" data-id=\"8916\" data-link=\"https:\/\/krisbunda.com\/blog\/?attachment_id=8916\" class=\"wp-image-8916\" srcset=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/Controls-UI-DASHBOARD-Diesel-Generator-GUI-gauges-feedback-cluster-incl.-fuel-tanks-oil-engine-temp-etc..png 564w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/Controls-UI-DASHBOARD-Diesel-Generator-GUI-gauges-feedback-cluster-incl.-fuel-tanks-oil-engine-temp-etc.-94x150.png 94w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/Controls-UI-DASHBOARD-Diesel-Generator-GUI-gauges-feedback-cluster-incl.-fuel-tanks-oil-engine-temp-etc.-560x897.png 560w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/Controls-UI-DASHBOARD-Diesel-Generator-GUI-gauges-feedback-cluster-incl.-fuel-tanks-oil-engine-temp-etc.-562x900.png 562w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/Controls-UI-DASHBOARD-Diesel-Generator-GUI-gauges-feedback-cluster-incl.-fuel-tanks-oil-engine-temp-etc.-281x450.png 281w\" sizes=\"auto, (max-width: 564px) 100vw, 564px\" \/><\/a><figcaption>Controls UI &#8211; DASHBOARD &#8211; Diesel Generator GUI gauges feedback cluster, incl. fuel tanks, oil &amp; engine temp, etc.<\/figcaption><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/Controls-UI-DASHBOARD-OFF-STATE-Diesel-Generator-GUI-gauges-feedback-cluster.png\"><img decoding=\"async\" width=\"564\" height=\"903\" loading=\"lazy\" src=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/Controls-UI-DASHBOARD-OFF-STATE-Diesel-Generator-GUI-gauges-feedback-cluster.png\" alt=\"Controls-UI-DASHBOARD-OFF-STATE-Diesel-Generator-GUI-gauges-feedback-cluster\" data-id=\"8917\" data-link=\"https:\/\/krisbunda.com\/blog\/?attachment_id=8917\" class=\"wp-image-8917\" srcset=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/Controls-UI-DASHBOARD-OFF-STATE-Diesel-Generator-GUI-gauges-feedback-cluster.png 564w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/Controls-UI-DASHBOARD-OFF-STATE-Diesel-Generator-GUI-gauges-feedback-cluster-94x150.png 94w\" sizes=\"auto, (max-width: 564px) 100vw, 564px\" \/><\/a><figcaption>Controls-UI-DASHBOARD-OFF-STATE-Diesel-Generator-GUI-gauges-feedback-cluster<\/figcaption><\/figure><\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image\" data-amp-lightbox=\"true\"><a href=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/ENERGY-UTILITY-CONTROLS-GUI-MOCKUP-IN-ADOBE-XD-LINKS-MAPPING3-ANNOTATED.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" width=\"600\" height=\"320\" loading=\"lazy\" src=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/ENERGY-UTILITY-CONTROLS-GUI-MOCKUP-IN-ADOBE-XD-LINKS-MAPPING3-ANNOTATED-600x320.png\" alt=\"ENERGY UTILITY CONTROLS GUI MOCKUP IN ADOBE XD - LINKS MAPPING3, ANNOTATED\" class=\"wp-image-8922\" srcset=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/ENERGY-UTILITY-CONTROLS-GUI-MOCKUP-IN-ADOBE-XD-LINKS-MAPPING3-ANNOTATED-600x320.png 600w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/ENERGY-UTILITY-CONTROLS-GUI-MOCKUP-IN-ADOBE-XD-LINKS-MAPPING3-ANNOTATED-150x80.png 150w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/ENERGY-UTILITY-CONTROLS-GUI-MOCKUP-IN-ADOBE-XD-LINKS-MAPPING3-ANNOTATED-1200x640.png 1200w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/ENERGY-UTILITY-CONTROLS-GUI-MOCKUP-IN-ADOBE-XD-LINKS-MAPPING3-ANNOTATED.png 1366w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><figcaption>ENERGY UTILITY CONTROLS GUI MOCKUP IN ADOBE XD &#8211; LINKS MAPPING3, ANNOTATED<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Here&#8217;s some Artboards from the Mockup: <\/h2>\n\n\n\n<ul class=\"wp-block-gallery columns-1 is-cropped wp-block-gallery-4 is-layout-flex wp-block-gallery-is-layout-flex\" data-amp-lightbox=\"true\"><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/CONTROLS-HOME-1200x675.png\"><img decoding=\"async\" width=\"1200\" height=\"675\" loading=\"lazy\" src=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/CONTROLS-HOME-1200x675.png\" alt=\"Energy Utility Diesel Generator Graphical Controls Interface GUI Adobe XD Prototype - CONTROLS HOME\" data-id=\"8896\" data-link=\"https:\/\/krisbunda.com\/blog\/?attachment_id=8896\" class=\"wp-image-8896\" srcset=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/CONTROLS-HOME-1200x675.png 1200w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/CONTROLS-HOME-150x84.png 150w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/CONTROLS-HOME-600x338.png 600w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/CONTROLS-HOME-1120x630.png 1120w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/CONTROLS-HOME-560x315.png 560w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/CONTROLS-HOME-1600x900.png 1600w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/CONTROLS-HOME-800x450.png 800w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/CONTROLS-HOME.png 1920w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/a><figcaption>Energy Utility Diesel Generator Graphical Controls Interface GUI Adobe XD Prototype &#8211; CONTROLS HOME<\/figcaption><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/FLYOUT-MENU-1200x675.png\"><img decoding=\"async\" width=\"1200\" height=\"675\" loading=\"lazy\" src=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/FLYOUT-MENU-1200x675.png\" alt=\"Energy Utility Diesel Generator Graphical Controls Interface GUI Adobe XD Prototype - FLYOUT MENU\" data-id=\"8894\" data-link=\"https:\/\/krisbunda.com\/blog\/?attachment_id=8894\" class=\"wp-image-8894\" srcset=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/FLYOUT-MENU-1200x675.png 1200w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/FLYOUT-MENU-150x84.png 150w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/FLYOUT-MENU-600x338.png 600w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/FLYOUT-MENU-1120x630.png 1120w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/FLYOUT-MENU-560x315.png 560w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/FLYOUT-MENU.png 1920w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/a><figcaption>Energy Utility Diesel Generator Graphical Controls Interface GUI Adobe XD Prototype &#8211; FLYOUT MENU<\/figcaption><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/SITES-GENERATORS-1200x675.png\"><img decoding=\"async\" width=\"1200\" height=\"675\" loading=\"lazy\" src=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/SITES-GENERATORS-1200x675.png\" alt=\"Energy Utility Diesel Generator Graphical Controls Interface GUI Adobe XD Prototype - SITES-GENERATORS\" data-id=\"8897\" data-link=\"https:\/\/krisbunda.com\/blog\/?attachment_id=8897\" class=\"wp-image-8897\" srcset=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/SITES-GENERATORS-1200x675.png 1200w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/SITES-GENERATORS-150x84.png 150w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/SITES-GENERATORS-600x338.png 600w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/SITES-GENERATORS-1120x630.png 1120w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/SITES-GENERATORS-560x315.png 560w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/SITES-GENERATORS.png 1920w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/a><figcaption>Energy Utility Diesel Generator Graphical Controls Interface GUI Adobe XD Prototype &#8211; SITES-GENERATORS<\/figcaption><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/GENERATORS-1200x675.png\"><img decoding=\"async\" width=\"1200\" height=\"675\" loading=\"lazy\" src=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/GENERATORS-1200x675.png\" alt=\"Energy Utility Diesel Generator Graphical Controls Interface GUI Adobe XD Prototype - GENERATORS\" data-id=\"8895\" data-link=\"https:\/\/krisbunda.com\/blog\/?attachment_id=8895\" class=\"wp-image-8895\" srcset=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/GENERATORS-1200x675.png 1200w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/GENERATORS-150x84.png 150w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/GENERATORS-600x338.png 600w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/GENERATORS-1120x630.png 1120w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/GENERATORS-560x315.png 560w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/GENERATORS-1600x900.png 1600w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/GENERATORS-800x450.png 800w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/GENERATORS.png 1920w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/a><figcaption>Energy Utility Diesel Generator Graphical Controls Interface GUI Adobe XD Prototype &#8211; GENERATORS<\/figcaption><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/CONTROLS-GEN2-1200x675.png\"><img decoding=\"async\" width=\"1200\" height=\"675\" loading=\"lazy\" src=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/CONTROLS-GEN2-1200x675.png\" alt=\"Energy Utility Diesel Generator Graphical Controls Interface GUI Adobe XD Prototype - CONTROLS-GEN2\" data-id=\"8898\" data-link=\"https:\/\/krisbunda.com\/blog\/?attachment_id=8898\" class=\"wp-image-8898\" srcset=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/CONTROLS-GEN2-1200x675.png 1200w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/CONTROLS-GEN2-150x84.png 150w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/CONTROLS-GEN2-600x338.png 600w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/CONTROLS-GEN2-1120x630.png 1120w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/CONTROLS-GEN2-560x315.png 560w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/CONTROLS-GEN2.png 1920w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/a><figcaption>Energy Utility Diesel Generator Graphical Controls Interface GUI Adobe XD Prototype &#8211; CONTROLS-GEN2<\/figcaption><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/SITES-SOLAR-ARRAYS-1-1200x675.png\"><img decoding=\"async\" width=\"1200\" height=\"675\" loading=\"lazy\" src=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/SITES-SOLAR-ARRAYS-1-1200x675.png\" alt=\"Energy Utility Diesel Generator Graphical Controls Interface GUI Adobe XD Prototype - SITES-SOLAR ARRAYS\" data-id=\"8927\" data-link=\"https:\/\/krisbunda.com\/blog\/?attachment_id=8927\" class=\"wp-image-8927\" srcset=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/SITES-SOLAR-ARRAYS-1-1200x675.png 1200w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/SITES-SOLAR-ARRAYS-1-150x84.png 150w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/SITES-SOLAR-ARRAYS-1-600x338.png 600w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/SITES-SOLAR-ARRAYS-1.png 1920w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/a><figcaption>Energy Utility Diesel Generator Graphical Controls Interface GUI Adobe XD Prototype &#8211; SITES-SOLAR ARRAYS<\/figcaption><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/SITES-WIND-FARMS-1-1200x675.png\"><img decoding=\"async\" width=\"1200\" height=\"675\" loading=\"lazy\" src=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/SITES-WIND-FARMS-1-1200x675.png\" alt=\"Energy Utility Diesel Generator Graphical Controls Interface GUI Adobe XD Prototype - SITES-WIND FARMS\" data-id=\"8928\" data-link=\"https:\/\/krisbunda.com\/blog\/?attachment_id=8928\" class=\"wp-image-8928\" srcset=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/SITES-WIND-FARMS-1-1200x675.png 1200w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/SITES-WIND-FARMS-1-150x84.png 150w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/SITES-WIND-FARMS-1-600x338.png 600w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/SITES-WIND-FARMS-1.png 1920w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/a><figcaption>Energy Utility Diesel Generator Graphical Controls Interface GUI Adobe XD Prototype &#8211; SITES-WIND FARMS<\/figcaption><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/SITES-DAMS-1-1200x675.png\"><img decoding=\"async\" width=\"1200\" height=\"675\" loading=\"lazy\" src=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/SITES-DAMS-1-1200x675.png\" alt=\"Energy Utility Diesel Generator Graphical Controls Interface GUI Adobe XD Prototype - SITES-DAMS\" data-id=\"8926\" data-link=\"https:\/\/krisbunda.com\/blog\/?attachment_id=8926\" class=\"wp-image-8926\" srcset=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/SITES-DAMS-1-1200x675.png 1200w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/SITES-DAMS-1-150x84.png 150w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/SITES-DAMS-1-600x338.png 600w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/SITES-DAMS-1.png 1920w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/a><figcaption>Energy Utility Diesel Generator Graphical Controls Interface GUI Adobe XD Prototype &#8211; SITES-DAMS<\/figcaption><\/figure><\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Adobe XD Doesn&#8217;t do GIF:<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">I thought this little info scroller would be a nice touch, so I made a motion graphic and exported it as a looping GIF image, but Adobe doesn&#8217;t display animated GIF, sooo&#8230; here it is:<\/p>\n\n\n\n<figure class=\"wp-block-image\" data-amp-layout=\"responsive\" data-amp-lightbox=\"true\"><a href=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/ALERTS-SCROLL-GIF.gif\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"960\" height=\"373\" loading=\"lazy\" src=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/ALERTS-SCROLL-GIF.gif\" alt=\"Energy Utility Diesel Generator Graphical Controls Interface GUI Adobe XD Prototype - ALERTS SCROLL GIF\" class=\"wp-image-8905\"\/><\/a><figcaption>Energy Utility Diesel Generator Graphical Controls Interface GUI Adobe XD Prototype &#8211; ALERTS SCROLL GIF<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Check out the Prototype Online (click for yourself)<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">See the online prototype here unless I replace it:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/xd.adobe.com\/view\/4a0a1c5e-bf0e-4d1e-6178-b1d100142687-3c3b\/?fullscreen\">https:\/\/xd.adobe.com\/view\/4a0a1c5e-bf0e-4d1e-6178-b1d100142687-3c3b\/?fullscreen<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>GUI design prototype of equipment controls for an imaginary utility company. Made in Adobe XD with artboard and links discussion.<\/p>\n","protected":false},"author":1,"featured_media":8825,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","_editorskit_title_hidden":false,"_editorskit_reading_time":0,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","om_disable_all_campaigns":false,"inline_featured_image":false,"kt_blocks_editor_width":"","_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_monsterinsights_skip_tracking":false,"footnotes":""},"categories":[4],"tags":[647,645,644,547,259,76,216,36],"class_list":["post-8821","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-designer","tag-adobe-xd","tag-ui","tag-ux","tag-controls","tag-equipment","tag-graphic-design","tag-prototype","tag-tutorial"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 4.9.10 - aioseo.com -->\n\t<meta name=\"description\" content=\"GUI design prototype of equipment controls for an imaginary utility company. Made in Adobe XD with artboard and links discussion.\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Kris Bunda\"\/>\n\t<meta name=\"google-site-verification\" content=\"nClePLp4QbLXXv7FON_y2QT65NP7LibU8DWgB3TaPyY\" \/>\n\t<meta name=\"msvalidate.01\" content=\"D9A2CA8C318137423BE8EC5CD4C5DBBE\" \/>\n\t<meta name=\"p:domain_verify\" content=\"6096666fee42f7673dae5027429ae8fd\" \/>\n\t<meta name=\"keywords\" content=\"adobe xd,ui,ux,controls,equipment,graphic design,prototype,tutorial\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/krisbunda.com\/blog\/2019\/05\/11\/ui-ux-design-energy-utility-controls-console-prototype-made-in-adobe-xd\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 4.9.10\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"Kris Bunda Design\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"UI\/UX Design: Energy Utility Controls Console, Prototype made in Adobe XD | Kris Bunda Design\" \/>\n\t\t<meta property=\"og:description\" content=\"GUI design prototype of equipment controls for imaginary utility company. Made in Adobe XD with artboard and links discussion.\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/krisbunda.com\/blog\/2019\/05\/11\/ui-ux-design-energy-utility-controls-console-prototype-made-in-adobe-xd\/\" \/>\n\t\t<meta property=\"og:image\" content=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2021\/07\/BG-1920X1080C.png\" \/>\n\t\t<meta property=\"og:image:secure_url\" content=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2021\/07\/BG-1920X1080C.png\" \/>\n\t\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t\t<meta property=\"article:tag\" content=\"adobe xd\" \/>\n\t\t<meta property=\"article:tag\" content=\"ui\" \/>\n\t\t<meta property=\"article:tag\" content=\"ux\" \/>\n\t\t<meta property=\"article:tag\" content=\"controls\" \/>\n\t\t<meta property=\"article:tag\" content=\"equipment\" \/>\n\t\t<meta property=\"article:tag\" content=\"graphic design\" \/>\n\t\t<meta property=\"article:tag\" content=\"prototype\" \/>\n\t\t<meta property=\"article:tag\" content=\"tutorial\" \/>\n\t\t<meta property=\"article:tag\" content=\"designer\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2019-05-12T02:15:53+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2019-05-12T02:15:59+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n\t\t<meta name=\"twitter:site\" content=\"@KrisBunda3D\" \/>\n\t\t<meta name=\"twitter:title\" content=\"UI\/UX Design: Energy Utility Controls Console, Prototype made in Adobe XD | Kris Bunda Design\" \/>\n\t\t<meta name=\"twitter:description\" content=\"GUI design prototype of equipment controls for imaginary utility company. Made in Adobe XD with artboard and links discussion.\" \/>\n\t\t<meta name=\"twitter:creator\" content=\"@KrisBunda3D\" \/>\n\t\t<meta name=\"twitter:image\" content=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2021\/07\/BG-1920X1080C.png\" \/>\n\t\t<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t\t<meta name=\"twitter:data1\" content=\"Kris Bunda\" \/>\n\t\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/2019\\\/05\\\/11\\\/ui-ux-design-energy-utility-controls-console-prototype-made-in-adobe-xd\\\/#article\",\"name\":\"UI\\\/UX Design: Energy Utility Controls Console, Prototype made in Adobe XD | Kris Bunda Design\",\"headline\":\"UI\\\/UX Design: Energy Utility Controls Console, Prototype made in Adobe XD\",\"author\":{\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/author\\\/kris-bunda\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/#person\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/04\\\/GENERATORS.png\",\"width\":1920,\"height\":1080,\"caption\":\"GENERATORS GUI Screen from imaginary utility company's diesel generator controls and feedback UI Design prototype, made in Adobe XD by Kris Bunda\"},\"datePublished\":\"2019-05-11T21:15:53-05:00\",\"dateModified\":\"2019-05-11T21:15:59-05:00\",\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/2019\\\/05\\\/11\\\/ui-ux-design-energy-utility-controls-console-prototype-made-in-adobe-xd\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/2019\\\/05\\\/11\\\/ui-ux-design-energy-utility-controls-console-prototype-made-in-adobe-xd\\\/#webpage\"},\"articleSection\":\"Designer, Adobe XD, UI, UX, controls, equipment, graphic design, prototype, tutorial\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/2019\\\/05\\\/11\\\/ui-ux-design-energy-utility-controls-console-prototype-made-in-adobe-xd\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/krisbunda.com\\\/blog\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/category\\\/designer\\\/#listItem\",\"name\":\"Designer\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/category\\\/designer\\\/#listItem\",\"position\":2,\"name\":\"Designer\",\"item\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/category\\\/designer\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/2019\\\/05\\\/11\\\/ui-ux-design-energy-utility-controls-console-prototype-made-in-adobe-xd\\\/#listItem\",\"name\":\"UI\\\/UX Design: Energy Utility Controls Console, Prototype made in Adobe XD\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/2019\\\/05\\\/11\\\/ui-ux-design-energy-utility-controls-console-prototype-made-in-adobe-xd\\\/#listItem\",\"position\":3,\"name\":\"UI\\\/UX Design: Energy Utility Controls Console, Prototype made in Adobe XD\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/category\\\/designer\\\/#listItem\",\"name\":\"Designer\"}}]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/#person\",\"name\":\"Kris Bunda\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/2019\\\/05\\\/11\\\/ui-ux-design-energy-utility-controls-console-prototype-made-in-adobe-xd\\\/#personImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/0dea2176fcad4070f74ce4ee1a63460edd0cc3017656f3a98fa152e791f87b55?s=96&d=mm&r=r\",\"width\":96,\"height\":96,\"caption\":\"Kris Bunda\"},\"sameAs\":[\"@KrisBunda3D\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/author\\\/kris-bunda\\\/#author\",\"url\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/author\\\/kris-bunda\\\/\",\"name\":\"Kris Bunda\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/2019\\\/05\\\/11\\\/ui-ux-design-energy-utility-controls-console-prototype-made-in-adobe-xd\\\/#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/0dea2176fcad4070f74ce4ee1a63460edd0cc3017656f3a98fa152e791f87b55?s=96&d=mm&r=r\",\"width\":96,\"height\":96,\"caption\":\"Kris Bunda\"},\"sameAs\":[\"@KrisBunda3D\"]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/2019\\\/05\\\/11\\\/ui-ux-design-energy-utility-controls-console-prototype-made-in-adobe-xd\\\/#webpage\",\"url\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/2019\\\/05\\\/11\\\/ui-ux-design-energy-utility-controls-console-prototype-made-in-adobe-xd\\\/\",\"name\":\"UI\\\/UX Design: Energy Utility Controls Console, Prototype made in Adobe XD | Kris Bunda Design\",\"description\":\"GUI design prototype of equipment controls for an imaginary utility company. Made in Adobe XD with artboard and links discussion.\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/2019\\\/05\\\/11\\\/ui-ux-design-energy-utility-controls-console-prototype-made-in-adobe-xd\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/author\\\/kris-bunda\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/author\\\/kris-bunda\\\/#author\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/04\\\/GENERATORS.png\",\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/2019\\\/05\\\/11\\\/ui-ux-design-energy-utility-controls-console-prototype-made-in-adobe-xd\\\/#mainImage\",\"width\":1920,\"height\":1080,\"caption\":\"GENERATORS GUI Screen from imaginary utility company's diesel generator controls and feedback UI Design prototype, made in Adobe XD by Kris Bunda\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/2019\\\/05\\\/11\\\/ui-ux-design-energy-utility-controls-console-prototype-made-in-adobe-xd\\\/#mainImage\"},\"datePublished\":\"2019-05-11T21:15:53-05:00\",\"dateModified\":\"2019-05-11T21:15:59-05:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/\",\"name\":\"Kris Bunda Design\",\"description\":\"Creative Development & Technical How-Tos\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/krisbunda.com\\\/blog\\\/#person\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"UI\/UX Design: Energy Utility Controls Console, Prototype made in Adobe XD | Kris Bunda Design","description":"GUI design prototype of equipment controls for an imaginary utility company. Made in Adobe XD with artboard and links discussion.","canonical_url":"https:\/\/krisbunda.com\/blog\/2019\/05\/11\/ui-ux-design-energy-utility-controls-console-prototype-made-in-adobe-xd\/","robots":"max-image-preview:large","keywords":"adobe xd,ui,ux,controls,equipment,graphic design,prototype,tutorial","webmasterTools":{"google-site-verification":"nClePLp4QbLXXv7FON_y2QT65NP7LibU8DWgB3TaPyY","msvalidate.01":"D9A2CA8C318137423BE8EC5CD4C5DBBE","p:domain_verify":"6096666fee42f7673dae5027429ae8fd","miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/krisbunda.com\/blog\/2019\/05\/11\/ui-ux-design-energy-utility-controls-console-prototype-made-in-adobe-xd\/#article","name":"UI\/UX Design: Energy Utility Controls Console, Prototype made in Adobe XD | Kris Bunda Design","headline":"UI\/UX Design: Energy Utility Controls Console, Prototype made in Adobe XD","author":{"@id":"https:\/\/krisbunda.com\/blog\/author\/kris-bunda\/#author"},"publisher":{"@id":"https:\/\/krisbunda.com\/blog\/#person"},"image":{"@type":"ImageObject","url":"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/04\/GENERATORS.png","width":1920,"height":1080,"caption":"GENERATORS GUI Screen from imaginary utility company's diesel generator controls and feedback UI Design prototype, made in Adobe XD by Kris Bunda"},"datePublished":"2019-05-11T21:15:53-05:00","dateModified":"2019-05-11T21:15:59-05:00","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/krisbunda.com\/blog\/2019\/05\/11\/ui-ux-design-energy-utility-controls-console-prototype-made-in-adobe-xd\/#webpage"},"isPartOf":{"@id":"https:\/\/krisbunda.com\/blog\/2019\/05\/11\/ui-ux-design-energy-utility-controls-console-prototype-made-in-adobe-xd\/#webpage"},"articleSection":"Designer, Adobe XD, UI, UX, controls, equipment, graphic design, prototype, tutorial"},{"@type":"BreadcrumbList","@id":"https:\/\/krisbunda.com\/blog\/2019\/05\/11\/ui-ux-design-energy-utility-controls-console-prototype-made-in-adobe-xd\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/krisbunda.com\/blog#listItem","position":1,"name":"Home","item":"https:\/\/krisbunda.com\/blog","nextItem":{"@type":"ListItem","@id":"https:\/\/krisbunda.com\/blog\/category\/designer\/#listItem","name":"Designer"}},{"@type":"ListItem","@id":"https:\/\/krisbunda.com\/blog\/category\/designer\/#listItem","position":2,"name":"Designer","item":"https:\/\/krisbunda.com\/blog\/category\/designer\/","nextItem":{"@type":"ListItem","@id":"https:\/\/krisbunda.com\/blog\/2019\/05\/11\/ui-ux-design-energy-utility-controls-console-prototype-made-in-adobe-xd\/#listItem","name":"UI\/UX Design: Energy Utility Controls Console, Prototype made in Adobe XD"},"previousItem":{"@type":"ListItem","@id":"https:\/\/krisbunda.com\/blog#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/krisbunda.com\/blog\/2019\/05\/11\/ui-ux-design-energy-utility-controls-console-prototype-made-in-adobe-xd\/#listItem","position":3,"name":"UI\/UX Design: Energy Utility Controls Console, Prototype made in Adobe XD","previousItem":{"@type":"ListItem","@id":"https:\/\/krisbunda.com\/blog\/category\/designer\/#listItem","name":"Designer"}}]},{"@type":"Person","@id":"https:\/\/krisbunda.com\/blog\/#person","name":"Kris Bunda","image":{"@type":"ImageObject","@id":"https:\/\/krisbunda.com\/blog\/2019\/05\/11\/ui-ux-design-energy-utility-controls-console-prototype-made-in-adobe-xd\/#personImage","url":"https:\/\/secure.gravatar.com\/avatar\/0dea2176fcad4070f74ce4ee1a63460edd0cc3017656f3a98fa152e791f87b55?s=96&d=mm&r=r","width":96,"height":96,"caption":"Kris Bunda"},"sameAs":["@KrisBunda3D"]},{"@type":"Person","@id":"https:\/\/krisbunda.com\/blog\/author\/kris-bunda\/#author","url":"https:\/\/krisbunda.com\/blog\/author\/kris-bunda\/","name":"Kris Bunda","image":{"@type":"ImageObject","@id":"https:\/\/krisbunda.com\/blog\/2019\/05\/11\/ui-ux-design-energy-utility-controls-console-prototype-made-in-adobe-xd\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/0dea2176fcad4070f74ce4ee1a63460edd0cc3017656f3a98fa152e791f87b55?s=96&d=mm&r=r","width":96,"height":96,"caption":"Kris Bunda"},"sameAs":["@KrisBunda3D"]},{"@type":"WebPage","@id":"https:\/\/krisbunda.com\/blog\/2019\/05\/11\/ui-ux-design-energy-utility-controls-console-prototype-made-in-adobe-xd\/#webpage","url":"https:\/\/krisbunda.com\/blog\/2019\/05\/11\/ui-ux-design-energy-utility-controls-console-prototype-made-in-adobe-xd\/","name":"UI\/UX Design: Energy Utility Controls Console, Prototype made in Adobe XD | Kris Bunda Design","description":"GUI design prototype of equipment controls for an imaginary utility company. Made in Adobe XD with artboard and links discussion.","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/krisbunda.com\/blog\/#website"},"breadcrumb":{"@id":"https:\/\/krisbunda.com\/blog\/2019\/05\/11\/ui-ux-design-energy-utility-controls-console-prototype-made-in-adobe-xd\/#breadcrumblist"},"author":{"@id":"https:\/\/krisbunda.com\/blog\/author\/kris-bunda\/#author"},"creator":{"@id":"https:\/\/krisbunda.com\/blog\/author\/kris-bunda\/#author"},"image":{"@type":"ImageObject","url":"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/04\/GENERATORS.png","@id":"https:\/\/krisbunda.com\/blog\/2019\/05\/11\/ui-ux-design-energy-utility-controls-console-prototype-made-in-adobe-xd\/#mainImage","width":1920,"height":1080,"caption":"GENERATORS GUI Screen from imaginary utility company's diesel generator controls and feedback UI Design prototype, made in Adobe XD by Kris Bunda"},"primaryImageOfPage":{"@id":"https:\/\/krisbunda.com\/blog\/2019\/05\/11\/ui-ux-design-energy-utility-controls-console-prototype-made-in-adobe-xd\/#mainImage"},"datePublished":"2019-05-11T21:15:53-05:00","dateModified":"2019-05-11T21:15:59-05:00"},{"@type":"WebSite","@id":"https:\/\/krisbunda.com\/blog\/#website","url":"https:\/\/krisbunda.com\/blog\/","name":"Kris Bunda Design","description":"Creative Development & Technical How-Tos","inLanguage":"en-US","publisher":{"@id":"https:\/\/krisbunda.com\/blog\/#person"}}]},"og:locale":"en_US","og:site_name":"Kris Bunda Design","og:type":"article","og:title":"UI\/UX Design: Energy Utility Controls Console, Prototype made in Adobe XD | Kris Bunda Design","og:description":"GUI design prototype of equipment controls for imaginary utility company. Made in Adobe XD with artboard and links discussion.","og:url":"https:\/\/krisbunda.com\/blog\/2019\/05\/11\/ui-ux-design-energy-utility-controls-console-prototype-made-in-adobe-xd\/","og:image":"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2021\/07\/BG-1920X1080C.png","og:image:secure_url":"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2021\/07\/BG-1920X1080C.png","og:image:width":1920,"og:image:height":1080,"article:tag":["adobe xd","ui","ux","controls","equipment","graphic design","prototype","tutorial","designer"],"article:published_time":"2019-05-12T02:15:53+00:00","article:modified_time":"2019-05-12T02:15:59+00:00","twitter:card":"summary_large_image","twitter:site":"@KrisBunda3D","twitter:title":"UI\/UX Design: Energy Utility Controls Console, Prototype made in Adobe XD | Kris Bunda Design","twitter:description":"GUI design prototype of equipment controls for imaginary utility company. Made in Adobe XD with artboard and links discussion.","twitter:creator":"@KrisBunda3D","twitter:image":"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2021\/07\/BG-1920X1080C.png","twitter:label1":"Written by","twitter:data1":"Kris Bunda","twitter:label2":"Est. reading time","twitter:data2":"3 minutes"},"aioseo_meta_data":{"post_id":"8821","title":null,"description":"GUI design prototype of equipment controls for an imaginary utility company. Made in Adobe XD with artboard and links discussion.","keywords":null,"keyphrases":null,"primary_term":null,"canonical_url":null,"og_title":"","og_description":"GUI design prototype of equipment controls for imaginary utility company. Made in Adobe XD with artboard and links discussion.","og_object_type":"article","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":"","og_custom_url":null,"og_article_section":"","og_article_tags":"","twitter_use_og":false,"twitter_card":"summary_large_image","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"Article","isEnabled":true},"graphs":[]},"schema_type":null,"schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"local_seo":null,"breadcrumb_settings":null,"limit_modified_date":false,"ai":null,"created":"2021-07-16 06:51:44","updated":"2026-01-28 23:39:48","seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/krisbunda.com\/blog\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/krisbunda.com\/blog\/category\/designer\/\" title=\"Designer\">Designer<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tUI\/UX Design: Energy Utility Controls Console, Prototype made in Adobe XD\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/krisbunda.com\/blog"},{"label":"Designer","link":"https:\/\/krisbunda.com\/blog\/category\/designer\/"},{"label":"UI\/UX Design: Energy Utility Controls Console, Prototype made in Adobe XD","link":"https:\/\/krisbunda.com\/blog\/2019\/05\/11\/ui-ux-design-energy-utility-controls-console-prototype-made-in-adobe-xd\/"}],"taxonomy_info":{"category":[{"value":4,"label":"Designer"}],"post_tag":[{"value":647,"label":"Adobe XD"},{"value":645,"label":"UI"},{"value":644,"label":"UX"},{"value":547,"label":"controls"},{"value":259,"label":"equipment"},{"value":76,"label":"graphic design"},{"value":216,"label":"prototype"},{"value":36,"label":"tutorial"}]},"featured_image_src_large":["https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/04\/GENERATORS-1200x675.png",1200,675,true],"author_info":{"display_name":"Kris Bunda","author_link":"https:\/\/krisbunda.com\/blog\/author\/kris-bunda\/"},"comment_info":0,"category_info":[{"term_id":4,"name":"Designer","slug":"designer","term_group":0,"term_taxonomy_id":4,"taxonomy":"category","description":"Posts focusing on web, graphic, CAD, and other design.","parent":0,"count":91,"filter":"raw","cat_ID":4,"category_count":91,"category_description":"Posts focusing on web, graphic, CAD, and other design.","cat_name":"Designer","category_nicename":"designer","category_parent":0}],"tag_info":[{"term_id":647,"name":"Adobe XD","slug":"adobe-xd","term_group":0,"term_taxonomy_id":651,"taxonomy":"post_tag","description":"","parent":0,"count":0,"filter":"raw"},{"term_id":645,"name":"UI","slug":"ui","term_group":0,"term_taxonomy_id":649,"taxonomy":"post_tag","description":"","parent":0,"count":0,"filter":"raw"},{"term_id":644,"name":"UX","slug":"ux","term_group":0,"term_taxonomy_id":648,"taxonomy":"post_tag","description":"","parent":0,"count":0,"filter":"raw"},{"term_id":547,"name":"controls","slug":"controls","term_group":0,"term_taxonomy_id":555,"taxonomy":"post_tag","description":"","parent":0,"count":4,"filter":"raw"},{"term_id":259,"name":"equipment","slug":"equipment","term_group":0,"term_taxonomy_id":259,"taxonomy":"post_tag","description":"","parent":0,"count":3,"filter":"raw"},{"term_id":76,"name":"graphic design","slug":"graphic-design","term_group":0,"term_taxonomy_id":76,"taxonomy":"post_tag","description":"","parent":0,"count":36,"filter":"raw"},{"term_id":216,"name":"prototype","slug":"prototype","term_group":0,"term_taxonomy_id":216,"taxonomy":"post_tag","description":"","parent":0,"count":3,"filter":"raw"},{"term_id":36,"name":"tutorial","slug":"tutorial","term_group":0,"term_taxonomy_id":36,"taxonomy":"post_tag","description":"","parent":0,"count":33,"filter":"raw"}],"jetpack_featured_media_url":"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/04\/GENERATORS.png","amp_enabled":true,"_links":{"self":[{"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/posts\/8821","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/comments?post=8821"}],"version-history":[{"count":5,"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/posts\/8821\/revisions"}],"predecessor-version":[{"id":8947,"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/posts\/8821\/revisions\/8947"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/media\/8825"}],"wp:attachment":[{"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/media?parent=8821"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/categories?post=8821"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/tags?post=8821"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}