{"id":8827,"date":"2019-05-17T21:09:13","date_gmt":"2019-05-18T02:09:13","guid":{"rendered":"https:\/\/krisbunda.com\/blog\/?post_type=portfolio&#038;p=8827"},"modified":"2021-06-09T01:22:04","modified_gmt":"2021-06-09T06:22:04","slug":"ui-ux-app-design","status":"publish","type":"portfolio","link":"https:\/\/krisbunda.com\/blog\/portfolio\/ui-ux-app-design\/","title":{"rendered":"UI\/UX &#038; App Design"},"content":{"rendered":"<style>#kt-layout-id_28e211-70 > .kt-row-column-wrap{align-content:center;}:where(#kt-layout-id_28e211-70 > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:center;}#kt-layout-id_28e211-70 > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);max-width:70%;margin-left:auto;margin-right:auto;padding-top:var( --global-kb-row-default-top, 25px );padding-bottom:var( --global-kb-row-default-bottom, 25px );padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);grid-template-columns:minmax(0, 1fr);}#kt-layout-id_28e211-70{background-color:#ff9a51;}#kt-layout-id_28e211-70 > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){#kt-layout-id_28e211-70 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}@media all and (max-width: 767px){#kt-layout-id_28e211-70 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style>\n<div class=\"wp-block-kadence-rowlayout alignfull\"><div id=\"kt-layout-id_28e211-70\" class=\"kt-row-layout-inner kt-row-has-bg kt-layout-id_28e211-70\"><div class=\"kt-row-column-wrap kt-has-1-columns kt-gutter-default kt-v-gutter-default kt-row-valign-middle kt-row-layout-equal kt-tab-layout-inherit kt-m-colapse-left-to-right kt-mobile-layout-row kt-inner-column-height-full\"><style>.kadence-column_5c2eec-ed > .kt-inside-inner-col{border-top-width:0px;border-right-width:0px;border-bottom-width:0px;border-left-width:0px;}.kadence-column_5c2eec-ed > .kt-inside-inner-col,.kadence-column_5c2eec-ed > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column_5c2eec-ed > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column_5c2eec-ed > .kt-inside-inner-col{flex-direction:column;}.kadence-column_5c2eec-ed > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column_5c2eec-ed > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column_5c2eec-ed{position:relative;}@media all and (max-width: 1024px){.kadence-column_5c2eec-ed > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column_5c2eec-ed > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column inner-column-1 kadence-column_5c2eec-ed\"><div class=\"kt-inside-inner-col\">\n<h2 class=\"has-text-align-center wp-block-heading\"><span style=\"text-decoration: underline;\">Work-In-Progress<\/span><\/h2>\n\n\n\n<h4 class=\"wp-block-heading\"><span style=\"text-decoration: underline;\">I&#8217;ll be back to flesh out this UI\/UX portfolio page in the future as time allows. &#8212; Stay Tuned, Kris<\/span><\/h4>\n\n\n\n<p><\/p>\n<\/div><\/div>\n<\/div><\/div><\/div>\n\n\n<style>#kt-layout-id_06a22e-90 > .kt-row-column-wrap{align-content:center;}:where(#kt-layout-id_06a22e-90 > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:center;}#kt-layout-id_06a22e-90 > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);max-width:70%;margin-left:auto;margin-right:auto;padding-top:var( --global-kb-row-default-top, 25px );padding-bottom:var( --global-kb-row-default-bottom, 25px );padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);grid-template-columns:minmax(0, 1fr);}#kt-layout-id_06a22e-90{background-color:#bbd9e5;}#kt-layout-id_06a22e-90 > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){#kt-layout-id_06a22e-90 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}@media all and (max-width: 767px){#kt-layout-id_06a22e-90 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style>\n<div class=\"wp-block-kadence-rowlayout alignfull\"><div id=\"kt-layout-id_06a22e-90\" class=\"kt-row-layout-inner kt-row-has-bg kt-layout-id_06a22e-90\"><div class=\"kt-row-column-wrap kt-has-1-columns kt-gutter-default kt-v-gutter-default kt-row-valign-middle kt-row-layout-equal kt-tab-layout-inherit kt-m-colapse-left-to-right kt-mobile-layout-row kt-inner-column-height-full\"><style>.kadence-column_603c1c-4a > .kt-inside-inner-col{border-top-width:0px;border-right-width:0px;border-bottom-width:0px;border-left-width:0px;}.kadence-column_603c1c-4a > .kt-inside-inner-col,.kadence-column_603c1c-4a > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column_603c1c-4a > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column_603c1c-4a > .kt-inside-inner-col{flex-direction:column;}.kadence-column_603c1c-4a > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column_603c1c-4a > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column_603c1c-4a{position:relative;}@media all and (max-width: 1024px){.kadence-column_603c1c-4a > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column_603c1c-4a > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column inner-column-1 kadence-column_603c1c-4a\"><div class=\"kt-inside-inner-col\">\n<h2 class=\"has-text-align-center wp-block-heading\">Why the drawings and CAD renderings? How is that UI\/UX?<\/h2>\n\n\n\n<p><\/p>\n<\/div><\/div>\n<\/div><\/div><\/div>\n\n\n<style>#kt-layout-id_e74877-a2 > .kt-row-column-wrap{align-content:center;}:where(#kt-layout-id_e74877-a2 > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:center;}#kt-layout-id_e74877-a2 > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);max-width:70%;margin-left:auto;margin-right:auto;padding-top:var( --global-kb-row-default-top, 25px );padding-bottom:var( --global-kb-row-default-bottom, 25px );padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);grid-template-columns:repeat(2, minmax(0, 1fr));}#kt-layout-id_e74877-a2{background-color:#bbd9e5;}#kt-layout-id_e74877-a2 > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){#kt-layout-id_e74877-a2 > .kt-row-column-wrap{grid-template-columns:repeat(2, minmax(0, 1fr));}}@media all and (max-width: 767px){#kt-layout-id_e74877-a2 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style>\n<div class=\"wp-block-kadence-rowlayout alignfull\"><div id=\"kt-layout-id_e74877-a2\" class=\"kt-row-layout-inner kt-row-has-bg kt-layout-id_e74877-a2\"><div class=\"kt-row-column-wrap kt-has-2-columns kt-gutter-default kt-v-gutter-default kt-row-valign-middle kt-row-layout-equal kt-tab-layout-inherit kt-m-colapse-left-to-right kt-mobile-layout-row kt-inner-column-height-full\"><style>.kadence-column_362d9e-d3 > .kt-inside-inner-col{border-top-width:0px;border-right-width:0px;border-bottom-width:0px;border-left-width:0px;}.kadence-column_362d9e-d3 > .kt-inside-inner-col,.kadence-column_362d9e-d3 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column_362d9e-d3 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column_362d9e-d3 > .kt-inside-inner-col{flex-direction:column;}.kadence-column_362d9e-d3 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column_362d9e-d3 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column_362d9e-d3{position:relative;}@media all and (max-width: 1024px){.kadence-column_362d9e-d3 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column_362d9e-d3 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column inner-column-1 kadence-column_362d9e-d3\"><div class=\"kt-inside-inner-col\">\n<p>You may be wondering why I&#8217;ve included examples on this page of UI\/UX work that include <em>landscape architecture instructions<\/em> and <em>controls panel<\/em> machine models.  <\/p>\n\n\n\n<p>The reason I posted a diverse sampling of UI\/UX projects I&#8217;ve worked on is because UI\/UX goes beyond a device screen. I have experience crafting a range of interfaces and experiences. I&#8217;ve learned how to put myself in many users&#8217; shoes, ask questions that a first time user will wonder, and then make products and communications as self-evident, clear, and succinct as possible. <\/p>\n<\/div><\/div>\n\n\n<style>.kadence-column_8c6985-62 > .kt-inside-inner-col{border-top-width:0px;border-right-width:0px;border-bottom-width:0px;border-left-width:0px;}.kadence-column_8c6985-62 > .kt-inside-inner-col,.kadence-column_8c6985-62 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column_8c6985-62 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column_8c6985-62 > .kt-inside-inner-col{flex-direction:column;}.kadence-column_8c6985-62 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column_8c6985-62 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column_8c6985-62{position:relative;}@media all and (max-width: 1024px){.kadence-column_8c6985-62 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column_8c6985-62 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column inner-column-2 kadence-column_8c6985-62\"><div class=\"kt-inside-inner-col\">\n<p>A page of instructions on how to install a sign post in the ground is a <em>User Interface<\/em> to a <em>sign post installation project<\/em>. <\/p>\n\n\n\n<p>A warning decal on an emergency stop button is a <em>User Interface<\/em> to <em>pushing a button to stop a machine in an emergency<\/em>.<\/p>\n\n\n\n<p>So if you&#8217;re wondering why it&#8217;s not just websites and screen grabs here, it&#8217;s because User Interface and User Experience is more than just <em>screen <\/em>interaction. A UI\/UX designer should be able to think of it in diverse terms and viewpoints to address a diversity of use cases satisfactorily.<\/p>\n<\/div><\/div>\n<\/div><\/div><\/div>\n\n\n<style>#kt-layout-id_611ecf-87 > .kt-row-column-wrap{align-content:center;}:where(#kt-layout-id_611ecf-87 > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:center;}#kt-layout-id_611ecf-87 > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);max-width:84%;margin-left:auto;margin-right:auto;padding-top:var( --global-kb-row-default-top, 25px );padding-bottom:var( --global-kb-row-default-bottom, 25px );padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);}#kt-layout-id_611ecf-87 > .kt-row-column-wrap > div:not(.added-for-specificity){grid-column:initial;}#kt-layout-id_611ecf-87 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr) minmax(0, 6fr) minmax(0, 1fr);}#kt-layout-id_611ecf-87{background-color:#eee;background-image:url('https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/WIREFRAME-MOBILE-DEVICE-3D.png');background-size:cover;background-position:center center;background-attachment:fixed;background-repeat:no-repeat;}#kt-layout-id_611ecf-87 > .kt-row-layout-overlay{opacity:0.78;background-color:#dc32cb;}#kt-layout-id_611ecf-87 ,#kt-layout-id_611ecf-87 h1,#kt-layout-id_611ecf-87 h2,#kt-layout-id_611ecf-87 h3,#kt-layout-id_611ecf-87 h4,#kt-layout-id_611ecf-87 h5,#kt-layout-id_611ecf-87 h6{color:#fff;}@media all and (max-width: 1024px), only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (hover: none){#kt-layout-id_611ecf-87{background-attachment:scroll;}}@media all and (max-width: 1024px){#kt-layout-id_611ecf-87 > .kt-row-column-wrap > div:not(.added-for-specificity){grid-column:initial;}}@media all and (max-width: 1024px){#kt-layout-id_611ecf-87 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr) minmax(0, 6fr) minmax(0, 1fr);}}@media all and (max-width: 767px){#kt-layout-id_611ecf-87 > .kt-row-column-wrap > div:not(.added-for-specificity){grid-column:initial;}#kt-layout-id_611ecf-87 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style>\n<div class=\"wp-block-kadence-rowlayout alignfull\"><div id=\"kt-layout-id_611ecf-87\" class=\"kt-row-layout-inner kt-row-has-bg kt-layout-id_611ecf-87\"><div class=\"kt-row-layout-overlay kt-row-overlay-normal\"><\/div><div class=\"kt-row-column-wrap kt-has-3-columns kt-gutter-default kt-v-gutter-default kt-row-valign-middle kt-row-layout-center-exwide kt-tab-layout-inherit kt-m-colapse-left-to-right kt-mobile-layout-row kt-inner-column-height-full\"><style>.kadence-column_d8095e-14 > .kt-inside-inner-col{border-top-width:0px;border-right-width:0px;border-bottom-width:0px;border-left-width:0px;}.kadence-column_d8095e-14 > .kt-inside-inner-col,.kadence-column_d8095e-14 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column_d8095e-14 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column_d8095e-14 > .kt-inside-inner-col{flex-direction:column;}.kadence-column_d8095e-14 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column_d8095e-14 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column_d8095e-14{position:relative;}@media all and (max-width: 1024px){.kadence-column_d8095e-14 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column_d8095e-14 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column inner-column-1 kadence-column_d8095e-14\"><div class=\"kt-inside-inner-col\">\n<p> <\/p>\n<\/div><\/div>\n\n\n<style>.kadence-column_29faab-66 > .kt-inside-inner-col{border-top-width:0px;border-right-width:0px;border-bottom-width:0px;border-left-width:0px;}.kadence-column_29faab-66 > .kt-inside-inner-col,.kadence-column_29faab-66 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column_29faab-66 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column_29faab-66 > .kt-inside-inner-col{flex-direction:column;}.kadence-column_29faab-66 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column_29faab-66 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column_29faab-66{position:relative;}@media all and (max-width: 1024px){.kadence-column_29faab-66 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column_29faab-66 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column inner-column-2 kadence-column_29faab-66\"><div class=\"kt-inside-inner-col\">\n<h2 class=\"wp-block-heading\">Mobile-First Wireframe<\/h2>\n\n\n\n<hr class=\"wp-block-separator is-style-wide\"\/>\n\n\n\n<h4 class=\"wp-block-heading\">For a website that will list cards of art items for sale, I made wireframes to introduce a design, gather stakeholder feedback, make changes.<\/h4>\n<\/div><\/div>\n\n\n<style>.kadence-column_519faf-91 > .kt-inside-inner-col{border-top-width:0px;border-right-width:0px;border-bottom-width:0px;border-left-width:0px;}.kadence-column_519faf-91 > .kt-inside-inner-col,.kadence-column_519faf-91 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column_519faf-91 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column_519faf-91 > .kt-inside-inner-col{flex-direction:column;}.kadence-column_519faf-91 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column_519faf-91 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column_519faf-91{position:relative;}@media all and (max-width: 1024px){.kadence-column_519faf-91 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column_519faf-91 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column inner-column-3 kadence-column_519faf-91\"><div class=\"kt-inside-inner-col\"><\/div><\/div>\n<\/div><\/div><\/div>\n\n\n<style>#kt-layout-id_8401fe-cf > .kt-row-column-wrap{align-content:center;}:where(#kt-layout-id_8401fe-cf > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:center;}#kt-layout-id_8401fe-cf > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);max-width:80%;margin-left:auto;margin-right:auto;padding-top:var( --global-kb-row-default-top, 25px );padding-bottom:var( --global-kb-row-default-bottom, 25px );padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);grid-template-columns:minmax(0, 1fr);}#kt-layout-id_8401fe-cf{background-color:#c0ffff;}#kt-layout-id_8401fe-cf > .kt-row-layout-overlay{opacity:0.26;}#kt-layout-id_8401fe-cf .kt-row-layout-bottom-sep{height:100px;}#kt-layout-id_8401fe-cf .kt-row-layout-bottom-sep svg{width:100%;}#kt-layout-id_8401fe-cf .kt-row-layout-bottom-sep svg{fill:#ffffff!important;}@media all and (max-width: 1024px){#kt-layout-id_8401fe-cf > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}@media all and (max-width: 1024px){#kt-layout-id_8401fe-cf .kt-row-layout-bottom-sep{height:px;}}@media all and (max-width: 1024px){#kt-layout-id_8401fe-cf .kt-row-layout-bottom-sep svg{width:%;}}@media all and (max-width: 767px){#kt-layout-id_8401fe-cf > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}#kt-layout-id_8401fe-cf .kt-row-layout-bottom-sep{height:px;}#kt-layout-id_8401fe-cf .kt-row-layout-bottom-sep svg{width:%;}}<\/style>\n<div class=\"wp-block-kadence-rowlayout alignfull\"><div id=\"kt-layout-id_8401fe-cf\" class=\"kt-row-layout-inner kt-row-has-bg kt-layout-id_8401fe-cf\"><div class=\"kt-row-column-wrap kt-has-1-columns kt-gutter-default kt-v-gutter-default kt-row-valign-middle kt-row-layout-equal kt-tab-layout-inherit kt-m-colapse-left-to-right kt-mobile-layout-row kt-inner-column-height-full\"><style>.kadence-column_5622f3-6f > .kt-inside-inner-col{border-top-width:0px;border-right-width:25px;border-bottom-width:0px;border-left-width:25px;}.kadence-column_5622f3-6f > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column_5622f3-6f > .kt-inside-inner-col{flex-direction:column;}.kadence-column_5622f3-6f > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column_5622f3-6f > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column_5622f3-6f{z-index:14;position:relative;}@media all and (max-width: 1024px){.kadence-column_5622f3-6f > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column_5622f3-6f > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column inner-column-1 kadence-column_5622f3-6f\"><div class=\"kt-inside-inner-col\">\n<h4 class=\"wp-block-heading\">Responsive Visualization: <strong>CSS Grid<\/strong>, Flexbox, &amp; Bootstrap<\/h4>\n\n\n\n<p>CSS has come a long way. Since I&#8217;m often both designer and developer of a front end, I like to turn on the &#8220;Grid&#8221; overlay in Adobe XD or Figma. This can be dialed in to simulate a CSS Grid Area (including gutters) or the 12 columns of a typical Bootstrap grid. It helps illustrate where the design elements should locate and move across different device viewports in a responsive design. <\/p>\n\n\n<style>.wp-block-kadence-spacer.kt-block-spacer-_b4a8a4-fe .kt-block-spacer{height:6vh;}.wp-block-kadence-spacer.kt-block-spacer-_b4a8a4-fe .kt-divider{border-top-width:10px;border-top-color:#00ffff;width:100%;border-top-style:dashed;}<\/style>\n<div class=\"wp-block-kadence-spacer alignfull kt-block-spacer-_b4a8a4-fe\"><div class=\"kt-block-spacer kt-block-spacer-halign-center\" style=\"height:6vh\"><hr class=\"kt-divider\" style=\"border-top-color:rgba(0, 255, 255, 1);border-top-width:10px;width:100%;border-top-style:dashed\"\/><\/div><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Mobile-size Wireframe<\/h3>\n\n\n\n<p>I&#8217;ve come around to mobile-first design practices (when I first learned HTML, there was no mobile Internet). Most sites are visited via mobile viewports nowaday. Therefore: I tend to make designs work and look good on a phone viewport first, then adapt that to a larger format.    <\/p>\n<\/div><\/div>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/07\/WIREFRAME-MOBILE-DEVICE-1.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"462\" height=\"1587\" src=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2020\/01\/WF-ARTBRD-ART-ECOM-MOB-1.png\" alt=\"\" class=\"wp-image-9685\" srcset=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2020\/01\/WF-ARTBRD-ART-ECOM-MOB-1.png 462w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2020\/01\/WF-ARTBRD-ART-ECOM-MOB-1-44x150.png 44w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2020\/01\/WF-ARTBRD-ART-ECOM-MOB-1-447x1536.png 447w\" sizes=\"auto, (max-width: 462px) 100vw, 462px\" \/><\/a><\/figure><\/div>\n\n\n<style>#kt-layout-id_ba8fea-04 > .kt-row-column-wrap{align-content:center;}:where(#kt-layout-id_ba8fea-04 > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:center;}#kt-layout-id_ba8fea-04 > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);padding-top:var( --global-kb-row-default-top, 25px );padding-bottom:var( --global-kb-row-default-bottom, 25px );padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);}#kt-layout-id_ba8fea-04 > .kt-row-column-wrap > div:not(.added-for-specificity){grid-column:initial;}#kt-layout-id_ba8fea-04 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);}#kt-layout-id_ba8fea-04{background-color:#c0ffff;}#kt-layout-id_ba8fea-04 > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){#kt-layout-id_ba8fea-04 > .kt-row-column-wrap > div:not(.added-for-specificity){grid-column:initial;}}@media all and (max-width: 1024px){#kt-layout-id_ba8fea-04 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);}}@media all and (max-width: 767px){#kt-layout-id_ba8fea-04 > .kt-row-column-wrap > div:not(.added-for-specificity){grid-column:initial;}#kt-layout-id_ba8fea-04 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style>\n<div class=\"wp-block-kadence-rowlayout alignfull\"><div id=\"kt-layout-id_ba8fea-04\" class=\"kt-row-layout-inner kt-row-has-bg kt-layout-id_ba8fea-04\"><div class=\"kt-row-column-wrap kt-has-3-columns kt-gutter-default kt-v-gutter-default kt-row-valign-middle kt-row-layout-center-half kt-tab-layout-inherit kt-m-colapse-left-to-right kt-mobile-layout-row\"><style>.kadence-column_8280e5-8c > .kt-inside-inner-col{border-top-width:0px;border-right-width:0px;border-bottom-width:0px;border-left-width:0px;}.kadence-column_8280e5-8c > .kt-inside-inner-col,.kadence-column_8280e5-8c > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column_8280e5-8c > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column_8280e5-8c > .kt-inside-inner-col{flex-direction:column;}.kadence-column_8280e5-8c > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column_8280e5-8c > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column_8280e5-8c{position:relative;}@media all and (max-width: 1024px){.kadence-column_8280e5-8c > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column_8280e5-8c > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column inner-column-1 kadence-column_8280e5-8c\"><div class=\"kt-inside-inner-col\"><\/div><\/div>\n\n\n<style>.kadence-column_262c4e-95 > .kt-inside-inner-col{border-top-width:0px;border-right-width:0px;border-bottom-width:0px;border-left-width:0px;}.kadence-column_262c4e-95 > .kt-inside-inner-col,.kadence-column_262c4e-95 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column_262c4e-95 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column_262c4e-95 > .kt-inside-inner-col{flex-direction:column;}.kadence-column_262c4e-95 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column_262c4e-95 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column_262c4e-95{position:relative;}@media all and (max-width: 1024px){.kadence-column_262c4e-95 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column_262c4e-95 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column inner-column-2 kadence-column_262c4e-95\"><div class=\"kt-inside-inner-col\">\n<h3 class=\"wp-block-heading\">Tablet-sized Wireframe<\/h3>\n\n\n\n<p> Here&#8217;s a tablet-sized (portrait orientation) version of the wireframe. <\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>It shows how some main navigation links will have room to appear outside the flyout menu, <\/li><li>and some of the Grid Area assignments will change (triggered by media query), <\/li><li>and some features of the footer will no longer be hidden. <\/li><\/ol>\n<\/div><\/div>\n\n\n<style>.kadence-column_6c9e9d-07 > .kt-inside-inner-col{border-top-width:0px;border-right-width:0px;border-bottom-width:0px;border-left-width:0px;}.kadence-column_6c9e9d-07 > .kt-inside-inner-col,.kadence-column_6c9e9d-07 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column_6c9e9d-07 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column_6c9e9d-07 > .kt-inside-inner-col{flex-direction:column;}.kadence-column_6c9e9d-07 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column_6c9e9d-07 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column_6c9e9d-07{position:relative;}@media all and (max-width: 1024px){.kadence-column_6c9e9d-07 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column_6c9e9d-07 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column inner-column-3 kadence-column_6c9e9d-07\"><div class=\"kt-inside-inner-col\"><\/div><\/div>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/07\/WIREFRAME-TABLE-TO-DESKTOP-DEVICE.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1025\" height=\"1734\" src=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2020\/01\/WF-ARTBRD-ART-ECOM-TAB-1.png\" alt=\"\" class=\"wp-image-9686\" srcset=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2020\/01\/WF-ARTBRD-ART-ECOM-TAB-1.png 1025w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2020\/01\/WF-ARTBRD-ART-ECOM-TAB-1-600x1015.png 600w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2020\/01\/WF-ARTBRD-ART-ECOM-TAB-1-89x150.png 89w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2020\/01\/WF-ARTBRD-ART-ECOM-TAB-1-908x1536.png 908w\" sizes=\"auto, (max-width: 1025px) 100vw, 1025px\" \/><\/a><\/figure><\/div>\n\n\n<style>#kt-layout-id_9a2319-83{margin-top:5%;margin-bottom:5%;}#kt-layout-id_9a2319-83 > .kt-row-column-wrap{align-content:center;}:where(#kt-layout-id_9a2319-83 > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:center;}#kt-layout-id_9a2319-83 > .kt-row-column-wrap{column-gap:var(--global-kb-gap-none, 0rem );row-gap:var(--global-kb-gap-md, 2rem);max-width:80%;margin-left:auto;margin-right:auto;padding-top:var( --global-kb-row-default-top, 25px );padding-bottom:var( --global-kb-row-default-bottom, 25px );padding-top:0px;padding-bottom:0px;padding-left:0px;padding-right:0px;}#kt-layout-id_9a2319-83 > .kt-row-column-wrap > div:not(.added-for-specificity){grid-column:initial;}#kt-layout-id_9a2319-83 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr) minmax(0, 6fr) minmax(0, 1fr);}#kt-layout-id_9a2319-83{background-color:#00ffff;}#kt-layout-id_9a2319-83 > .kt-row-layout-overlay{opacity:0.30;}#kt-layout-id_9a2319-83 .kt-row-layout-bottom-sep{height:100px;}#kt-layout-id_9a2319-83 .kt-row-layout-bottom-sep svg{width:100%;}#kt-layout-id_9a2319-83 .kt-row-layout-bottom-sep svg{fill:#ffffff!important;}@media all and (max-width: 1024px){#kt-layout-id_9a2319-83 > .kt-row-column-wrap > div:not(.added-for-specificity){grid-column:initial;}}@media all and (max-width: 1024px){#kt-layout-id_9a2319-83 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr) minmax(0, 6fr) minmax(0, 1fr);}}@media all and (max-width: 1024px){#kt-layout-id_9a2319-83 .kt-row-layout-bottom-sep{height:px;}}@media all and (max-width: 1024px){#kt-layout-id_9a2319-83 .kt-row-layout-bottom-sep svg{width:%;}}@media all and (max-width: 767px){#kt-layout-id_9a2319-83 > .kt-row-column-wrap > div:not(.added-for-specificity){grid-column:initial;}#kt-layout-id_9a2319-83 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}#kt-layout-id_9a2319-83 .kt-row-layout-bottom-sep{height:px;}#kt-layout-id_9a2319-83 .kt-row-layout-bottom-sep svg{width:%;}}<\/style>\n<div class=\"wp-block-kadence-rowlayout alignfull\"><div id=\"kt-layout-id_9a2319-83\" class=\"kt-row-layout-inner kt-row-has-bg kt-layout-id_9a2319-83\"><div class=\"kt-row-column-wrap kt-has-3-columns kt-gutter-none kt-v-gutter-default kt-row-valign-middle kt-row-layout-center-exwide kt-tab-layout-inherit kt-m-colapse-left-to-right kt-mobile-layout-row kt-inner-column-height-full\"><style>.kadence-column_89efe4-d4 > .kt-inside-inner-col{border-top-width:0px;border-right-width:0px;border-bottom-width:0px;border-left-width:0px;}.kadence-column_89efe4-d4 > .kt-inside-inner-col,.kadence-column_89efe4-d4 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column_89efe4-d4 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column_89efe4-d4 > .kt-inside-inner-col{flex-direction:column;}.kadence-column_89efe4-d4 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column_89efe4-d4 > .kt-inside-inner-col{background-color:#00ffff;}.kadence-column_89efe4-d4 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column_89efe4-d4{position:relative;}@media all and (max-width: 1024px){.kadence-column_89efe4-d4 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column_89efe4-d4 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column inner-column-1 kadence-column_89efe4-d4\"><div class=\"kt-inside-inner-col\" style=\"background:rgba(0, 255, 255, 1)\">\n<p> <\/p>\n<\/div><\/div>\n\n\n<style>.kadence-column_fe4180-e5 > .kt-inside-inner-col{border-top-width:0px;border-right-width:0px;border-bottom-width:0px;border-left-width:0px;}.kadence-column_fe4180-e5 > .kt-inside-inner-col,.kadence-column_fe4180-e5 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column_fe4180-e5 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column_fe4180-e5 > .kt-inside-inner-col{flex-direction:column;}.kadence-column_fe4180-e5 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column_fe4180-e5 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column_fe4180-e5{position:relative;}@media all and (max-width: 1024px){.kadence-column_fe4180-e5 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column_fe4180-e5 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column inner-column-2 kadence-column_fe4180-e5\"><div class=\"kt-inside-inner-col\">\n<h3 class=\"wp-block-heading\">3D is Key<\/h3>\n\n\n\n<p>Making 3D device renderings can be a good way to convey design intent and may generate more enthusiasm from clients or end users who find other mockups too abstract. <\/p>\n<\/div><\/div>\n\n\n<style>.kadence-column_8e9545-c1 > .kt-inside-inner-col{padding-top:26px;padding-bottom:26px;}.kadence-column_8e9545-c1 > .kt-inside-inner-col{border-top-width:0px;border-right-width:0px;border-bottom-width:0px;border-left-width:0px;}.kadence-column_8e9545-c1 > .kt-inside-inner-col,.kadence-column_8e9545-c1 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column_8e9545-c1 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column_8e9545-c1 > .kt-inside-inner-col{flex-direction:column;}.kadence-column_8e9545-c1 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column_8e9545-c1 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column_8e9545-c1{position:relative;}@media all and (max-width: 1024px){.kadence-column_8e9545-c1 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column_8e9545-c1 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column inner-column-3 kadence-column_8e9545-c1\"><div class=\"kt-inside-inner-col\"><\/div><\/div>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/WIREFRAME-MOBILE-DEVICE-3D-SHADOW.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"999\" src=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/WIREFRAME-MOBILE-DEVICE-3D-SHADOW-1000px.png\" alt=\"WIREFRAME - MOBILE DEVICE - 3D-SHADOW-1000px\" class=\"wp-image-9237\" srcset=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/WIREFRAME-MOBILE-DEVICE-3D-SHADOW-1000px.png 1000w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/WIREFRAME-MOBILE-DEVICE-3D-SHADOW-1000px-150x150.png 150w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/05\/WIREFRAME-MOBILE-DEVICE-3D-SHADOW-1000px-600x599.png 600w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/a><figcaption>WIREFRAME &#8211; MOBILE DEVICE &#8211; 3D-SHADOW-1000px<\/figcaption><\/figure><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Illustrated stories showing parts of the design processes leading to the creation of User Interfaces (UI) for Apps and responsive Websites, or to functional User Experiences (UX) for physical products.<\/p>\n","protected":false},"author":1,"featured_media":8828,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"_editorskit_title_hidden":false,"_editorskit_reading_time":2,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","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":"","jetpack_post_was_ever_published":false},"portfolio-type":[709],"portfolio-tag":[],"class_list":["post-8827","portfolio","type-portfolio","status-publish","has-post-thumbnail","hentry","portfolio-type-ui-ux"],"aioseo_notices":[],"taxonomy_info":{"portfolio-type":[{"value":709,"label":"UI\/UX"}]},"featured_image_src_large":["https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/04\/ICON-UI-ANIMATION.gif",600,600,false],"author_info":{"display_name":"Kris Bunda","author_link":"https:\/\/krisbunda.com\/blog\/author\/kris-bunda\/"},"comment_info":0,"jetpack_sharing_enabled":true,"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/portfolio\/8827","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/portfolio"}],"about":[{"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/types\/portfolio"}],"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=8827"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/media\/8828"}],"wp:attachment":[{"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/media?parent=8827"}],"wp:term":[{"taxonomy":"portfolio-type","embeddable":true,"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/portfolio-type?post=8827"},{"taxonomy":"portfolio-tag","embeddable":true,"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/portfolio-tag?post=8827"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}