CINXE.COM

<!DOCTYPE html><html class=no-touch lang=en-US xmlns=http://www.w3.org/1999/xhtml><head><link rel=stylesheet href=https://matthewcarlstrom.com/wp-content/cache/minify/ba505.default.include.4ad96d.css media=all><style>img.lazy{min-height:1px}</style><link href=https://matthewcarlstrom.com/wp-content/plugins/w3-total-cache/pub/js/lazyload.min.js as=script><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel=profile href=https://gmpg.org/xfn/11><link rel=pingback href=https://matthewcarlstrom.com/xmlrpc.php><meta name='robots' content='index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1'><style>img:is([sizes="auto" i], [sizes^="auto," i]) { contain-intrinsic-size: 3000px 1500px }</style><title>Wireframes are how I began to explore the UX for PhotoStacks</title><meta name="description" content="Wireframes twice, and mock up once, is how the old adage goes. Low-fidelity wireframes proved to be an effective way for me to visualize Photostacks' UX"><link rel=canonical href=https://matthewcarlstrom.com/portfolio/prototype-wireframes/ ><meta property="og:locale" content="en_US"><meta property="og:type" content="article"><meta property="og:title" content="Wireframes are how I began to explore the UX for PhotoStacks"><meta property="og:description" content="Wireframes twice, and mock up once, is how the old adage goes. Low-fidelity wireframes proved to be an effective way for me to visualize Photostacks' UX"><meta property="og:url" content="https://matthewcarlstrom.com/portfolio/prototype-wireframes/"><meta property="og:site_name" content="Matthew Carlstrom Product Design"><meta property="article:publisher" content="https://www.facebook.com/matthew.carlstrom"><meta property="article:modified_time" content="2020-06-23T23:28:03+00:00"><meta property="og:image" content="https://matthewcarlstrom.com/wp-content/uploads/Matthew-Carlstrom-PhotoStacks-iOS-Header@2x.jpg"><meta property="og:image:width" content="732"><meta property="og:image:height" content="1208"><meta property="og:image:type" content="image/jpeg"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:site" content="@matyasjanos"><meta name="twitter:label1" content="Est. reading time"><meta name="twitter:data1" content="5 minutes"> <script type=application/ld+json class=yoast-schema-graph>{"@context":"https://schema.org","@graph":[{"@type":"WebPage","@id":"https://matthewcarlstrom.com/portfolio/prototype-wireframes/","url":"https://matthewcarlstrom.com/portfolio/prototype-wireframes/","name":"Wireframes are how I began to explore the UX for PhotoStacks","isPartOf":{"@id":"https://matthewcarlstrom.com/#website"},"primaryImageOfPage":{"@id":"https://matthewcarlstrom.com/portfolio/prototype-wireframes/#primaryimage"},"image":{"@id":"https://matthewcarlstrom.com/portfolio/prototype-wireframes/#primaryimage"},"thumbnailUrl":"https://matthewcarlstrom.com/wp-content/uploads/Matthew-Carlstrom-PhotoStacks-iOS-Header@2x.jpg","datePublished":"2019-11-01T21:06:25+00:00","dateModified":"2020-06-23T23:28:03+00:00","description":"Wireframes twice, and mock up once, is how the old adage goes. Low-fidelity wireframes proved to be an effective way for me to visualize Photostacks' UX","breadcrumb":{"@id":"https://matthewcarlstrom.com/portfolio/prototype-wireframes/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https://matthewcarlstrom.com/portfolio/prototype-wireframes/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https://matthewcarlstrom.com/portfolio/prototype-wireframes/#primaryimage","url":"https://matthewcarlstrom.com/wp-content/uploads/Matthew-Carlstrom-PhotoStacks-iOS-Header@2x.jpg","contentUrl":"https://matthewcarlstrom.com/wp-content/uploads/Matthew-Carlstrom-PhotoStacks-iOS-Header@2x.jpg","width":732,"height":1208},{"@type":"BreadcrumbList","@id":"https://matthewcarlstrom.com/portfolio/prototype-wireframes/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://matthewcarlstrom.com/"},{"@type":"ListItem","position":2,"name":"Portfolio","item":"https://matthewcarlstrom.com/portfolio/"},{"@type":"ListItem","position":3,"name":"Prototype App & Wireframes"}]},{"@type":"WebSite","@id":"https://matthewcarlstrom.com/#website","url":"https://matthewcarlstrom.com/","name":"Matthew Carlstrom Product Design","description":"Design for Digital Products","publisher":{"@id":"https://matthewcarlstrom.com/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://matthewcarlstrom.com/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https://matthewcarlstrom.com/#organization","name":"Matthew Carlstrom UI/UX/Design","url":"https://matthewcarlstrom.com/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https://matthewcarlstrom.com/#/schema/logo/image/","url":"https://matthewcarlstrom.com/wp-content/uploads/mc_logo_block_3_alt-copy@4x-100.jpg","contentUrl":"https://matthewcarlstrom.com/wp-content/uploads/mc_logo_block_3_alt-copy@4x-100.jpg","width":248,"height":106,"caption":"Matthew Carlstrom UI/UX/Design"},"image":{"@id":"https://matthewcarlstrom.com/#/schema/logo/image/"},"sameAs":["https://www.facebook.com/matthew.carlstrom","https://x.com/matyasjanos","https://www.instagram.com/matyasjanos/","https://tr.linkedin.com/in/matthew-carlstrom-80a5351","https://pinterest.com/matthewcarlstrom/"]}]}</script> <link rel=dns-prefetch href=//www.googletagmanager.com><link rel=dns-prefetch href=//fonts.googleapis.com><link rel=alternate type=application/rss+xml title="Matthew Carlstrom Product Design » Feed" href=https://matthewcarlstrom.com/feed/ ><link rel=alternate type=application/rss+xml title="Matthew Carlstrom Product Design » Comments Feed" href=https://matthewcarlstrom.com/comments/feed/ ><link rel=alternate type=application/rss+xml title="Matthew Carlstrom Product Design » Prototype App & Wireframes Comments Feed" href=https://matthewcarlstrom.com/portfolio/prototype-wireframes/feed/ ><style id=classic-theme-styles-inline-css>/*! This file is auto-generated */ .wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none}</style><style id=global-styles-inline-css>/*<![CDATA[*/:root{--wp--preset--aspect-ratio--square: 1;--wp--preset--aspect-ratio--4-3: 4/3;--wp--preset--aspect-ratio--3-4: 3/4;--wp--preset--aspect-ratio--3-2: 3/2;--wp--preset--aspect-ratio--2-3: 2/3;--wp--preset--aspect-ratio--16-9: 16/9;--wp--preset--aspect-ratio--9-16: 9/16;--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);}:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;} :where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;} :where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;} :root :where(.wp-block-pullquote){font-size: 1.5em;line-height: 1.6;}/*]]>*/</style><link rel=stylesheet id=uncodefont-google-css href='//fonts.googleapis.com/css?family=Nunito+Sans%3A200%2C200italic%2C300%2C300italic%2Cregular%2Citalic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic%2C900%2C900italic%7CMontserrat%3A100%2C100italic%2C200%2C200italic%2C300%2C300italic%2Cregular%2Citalic%2C500%2C500italic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic%2C900%2C900italic%7CCabin%3Aregular%2Citalic%2C500%2C500italic%2C600%2C600italic%2C700%2C700italic%7CMerriweather%3A300%2C300italic%2Cregular%2Citalic%2C700%2C700italic%2C900%2C900italic&subset=vietnamese%2Clatin%2Clatin-ext%2Ccyrillic%2Ccyrillic-ext&ver=2.9.1.3' type=text/css media=all><style id=uncode-style-inline-css>@media (min-width: 960px) { .limit-width { max-width: 1200px; margin: auto;}} .menu-primary ul.menu-smart > li > a, .menu-primary ul.menu-smart li.dropdown > a, .menu-primary ul.menu-smart li.mega-menu > a, .vmenu-container ul.menu-smart > li > a, .vmenu-container ul.menu-smart li.dropdown > a { text-transform: uppercase; } #changer-back-color { transition: background-color 1000ms cubic-bezier(0.25, 1, 0.5, 1) !important; } #changer-back-color > div { transition: opacity 1000ms cubic-bezier(0.25, 1, 0.5, 1) !important; } body.bg-changer-init.disable-hover .main-wrapper .style-light, body.bg-changer-init.disable-hover .main-wrapper .style-light h1, body.bg-changer-init.disable-hover .main-wrapper .style-light h2, body.bg-changer-init.disable-hover .main-wrapper .style-light h3, body.bg-changer-init.disable-hover .main-wrapper .style-light h4, body.bg-changer-init.disable-hover .main-wrapper .style-light h5, body.bg-changer-init.disable-hover .main-wrapper .style-light h6, body.bg-changer-init.disable-hover .main-wrapper .style-light a, body.bg-changer-init.disable-hover .main-wrapper .style-dark, body.bg-changer-init.disable-hover .main-wrapper .style-dark h1, body.bg-changer-init.disable-hover .main-wrapper .style-dark h2, body.bg-changer-init.disable-hover .main-wrapper .style-dark h3, body.bg-changer-init.disable-hover .main-wrapper .style-dark h4, body.bg-changer-init.disable-hover .main-wrapper .style-dark h5, body.bg-changer-init.disable-hover .main-wrapper .style-dark h6, body.bg-changer-init.disable-hover .main-wrapper .style-dark a { transition: color 1000ms cubic-bezier(0.25, 1, 0.5, 1) !important; }</style><style id=uncode-custom-style-inline-css>@font-face { font-display:swap;}.share-button.share-inline .social.top li.social-linkedin,.share-button.share-inline .social.top li.social-xing,.share-button.share-inline .social.top li.social-facebook,.share-button.share-inline .social.top li.social-pinterest{display:none !important;} .portfolio-header .background-inner { filter:blur(8px); -webkit-filter:blur(8px); transform:scale(1.1);}</style> <script id=uncode-init-js-extra>var SiteParameters = {"days":"days","hours":"hours","minutes":"minutes","seconds":"seconds","constant_scroll":"on","scroll_speed":"2.5","parallax_factor":"0.2","loading":"Loading\u2026","slide_name":"slide","slide_footer":"footer","ajax_url":"https:\/\/matthewcarlstrom.com\/wp-admin\/admin-ajax.php","nonce_adaptive_images":"b92d9da80e","nonce_srcset_async":"c05d42ee51","enable_debug":"","block_mobile_videos":"","is_frontend_editor":"","main_width":["1200","px"],"mobile_parallax_allowed":"","listen_for_screen_update":"1","wireframes_plugin_active":"","sticky_elements":"off","resize_quality":"90","register_metadata":"","bg_changer_time":"1000","update_wc_fragments":"1","optimize_shortpixel_image":"","menu_mobile_offcanvas_gap":"45","custom_cursor_selector":"[href], .trigger-overlay, .owl-next, .owl-prev, .owl-dot, input[type=\"submit\"], input[type=\"checkbox\"], button[type=\"submit\"], a[class^=\"ilightbox\"], .ilightbox-thumbnail, .ilightbox-prev, .ilightbox-next, .overlay-close, .unmodal-close, .qty-inset > span, .share-button li, .uncode-post-titles .tmb.tmb-click-area, .btn-link, .tmb-click-row .t-inside, .lg-outer button, .lg-thumb img, a[data-lbox], .uncode-close-offcanvas-overlay, .uncode-nav-next, .uncode-nav-prev, .uncode-nav-index","mobile_parallax_animation":"","lbox_enhanced":"","native_media_player":"1","vimeoPlayerParams":"?autoplay=0","ajax_filter_key_search":"key","ajax_filter_key_unfilter":"unfilter","index_pagination_disable_scroll":"","index_pagination_scroll_to":"","uncode_wc_popup_cart_qty":"","disable_hover_hack":"","uncode_nocookie":"","menuHideOnClick":"1","smoothScroll":"","smoothScrollDisableHover":"","smoothScrollQuery":"960","uncode_force_onepage_dots":"","uncode_smooth_scroll_safe":"","uncode_lb_add_galleries":", .gallery","uncode_lb_add_items":", .gallery .gallery-item a"};</script> <script src=https://matthewcarlstrom.com/wp-content/themes/uncode/library/js/init.min.js id=uncode-init-js></script> <script src="https://matthewcarlstrom.com/wp-includes/js/jquery/jquery.min.js?ver=3.7.1" id=jquery-core-js></script> <script src="https://matthewcarlstrom.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=3.4.1" id=jquery-migrate-js></script> <script src="https://www.googletagmanager.com/gtag/js?id=G-LML7MQXSDH" id=google_gtagjs-js async></script> <script id=google_gtagjs-js-after>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);} gtag("set","linker",{"domains":["matthewcarlstrom.com"]}); gtag("js", new Date()); gtag("set", "developer_id.dZTNiMT", true); gtag("config", "G-LML7MQXSDH");</script> <script></script><link rel=https://api.w.org/ href=https://matthewcarlstrom.com/wp-json/ ><link rel=alternate title=JSON type=application/json href=https://matthewcarlstrom.com/wp-json/wp/v2/portfolio/4547><link rel=alternate title="oEmbed (JSON)" type=application/json+oembed href="https://matthewcarlstrom.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fmatthewcarlstrom.com%2Fportfolio%2Fprototype-wireframes%2F"><link rel=alternate title="oEmbed (XML)" type=text/xml+oembed href="https://matthewcarlstrom.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fmatthewcarlstrom.com%2Fportfolio%2Fprototype-wireframes%2F&format=xml"><meta name="generator" content="Site Kit by Google 1.140.0"><script src=//use.typekit.com/xou4kyp.js></script> <script>try{Typekit.load();}catch(e){}</script> <style>.broken_link, a.broken_link { text-decoration: line-through; }</style><link rel=icon href=https://matthewcarlstrom.com/wp-content/uploads/cropped-Artboard-13-32x32.png sizes=32x32><link rel=icon href=https://matthewcarlstrom.com/wp-content/uploads/cropped-Artboard-13-192x192.png sizes=192x192><link rel=apple-touch-icon href=https://matthewcarlstrom.com/wp-content/uploads/cropped-Artboard-13-180x180.png><meta name="msapplication-TileImage" content="https://matthewcarlstrom.com/wp-content/uploads/cropped-Artboard-13-270x270.png"> <noscript><style>.wpb_animate_when_almost_visible { opacity: 1; }</style></noscript></head><body data-rsssl=1 class="portfolio-template-default single single-portfolio postid-4547 style-color-lxmt-bg hormenu-position-left hmenu hmenu-position-right header-full-width main-center-align textual-accent-color menu-mobile-default mobile-parallax-not-allowed ilb-no-bounce unreg qw-body-scroll-disabled menu-sticky-fix no-qty-fx wpb-js-composer js-comp-ver-7.8 vc_responsive" data-border=0><div id=vh_layout_help></div><div class=body-borders data-border=0><div class="top-border body-border-shadow"></div><div class="right-border body-border-shadow"></div><div class="bottom-border body-border-shadow"></div><div class="left-border body-border-shadow"></div><div class="top-border style-light-bg"></div><div class="right-border style-light-bg"></div><div class="bottom-border style-light-bg"></div><div class="left-border style-light-bg"></div></div><div class=box-wrapper><div class=box-container> <script id=initBox>UNCODE.initBox();</script> <div class="menu-wrapper menu-sticky"><header id=masthead class="navbar menu-primary menu-light submenu-light menu-transparent menu-add-padding style-light-original menu-absolute menu-with-logo"><div class="menu-container menu-hide style-color-xsdn-bg menu-borders"><div class="row-menu limit-width"><div class=row-menu-inner><div id=logo-container-mobile class="col-lg-0 logo-container middle"><div id=main-logo class="navbar-header style-light"> <a href=https://matthewcarlstrom.com/ class=navbar-brand data-minheight=20 aria-label="Matthew Carlstrom Product Design"><div class="logo-image main-logo logo-light" data-maxheight=18 style="height: 18px;"><img decoding=async src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-src=https://matthewcarlstrom.com/wp-content/uploads/mc_logo_block_3_alt.svg alt="Matthew Carlstrom Design" width=1 height=1 class="img-responsive lazy"></div><div class="logo-image main-logo logo-dark" data-maxheight=18 style="height: 18px;display:none;"><img decoding=async src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-src=https://matthewcarlstrom.com/wp-content/uploads/mc_logo_block_3.svg alt="Matthew Carlstrom Design" width=1 height=1 class="img-responsive lazy"></div></a></div><div class=mmb-container><div class=mobile-additional-icons></div><div class="mobile-menu-button mobile-menu-button-light lines-button"><span class=lines><span></span></span></div></div></div><div class="col-lg-12 main-menu-container middle"><div class="menu-horizontal "><div class=menu-horizontal-inner><div class="nav navbar-nav navbar-main navbar-nav-last"><ul id=menu-main-menu class="menu-primary-inner menu-smart sm"><li id=menu-item-5287 class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-5287 menu-item-link"><a title=Work href=https://matthewcarlstrom.com/#my-work>Work<i class="fa fa-angle-right fa-dropdown"></i></a></li> <li id=menu-item-15 class="menu-item menu-item-type-post_type menu-item-object-page current_page_parent menu-item-15 menu-item-link"><a title=Blog href=https://matthewcarlstrom.com/blog/ >Blog<i class="fa fa-angle-right fa-dropdown"></i></a></li> <li id=menu-item-4826 class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4826 menu-item-link"><a title=About href=https://matthewcarlstrom.com/about/ >About<i class="fa fa-angle-right fa-dropdown"></i></a></li></ul></div><div class="uncode-close-offcanvas-mobile lines-button close navbar-mobile-el"><span class=lines></span></div><div class="desktop-hidden menu-accordion-secondary"></div></div></div></div></div></div></div></header></div> <script id=fixMenuHeight>UNCODE.fixMenuHeight();</script> <div class=main-wrapper><div class=main-container><div class=page-wrapper><div class=sections-container> <script>UNCODE.initHeader();</script><div class="page-body style-light-bg"><div class="portfolio-wrapper portfolio-wrapper-- portfolio-wrapper--with-builder"><div class=portfolio-body><div class=post-content><div data-parent=true class="vc_row row-container onepage-section" data-label=high-fidelity-prototype data-name=high-fidelity-prototype id=row-unique-0><div class="row limit-width row-parent" data-height-ratio=full><div class="wpb_row row-inner"><div class="wpb_column pos-top pos-center align_center column_parent col-lg-12 single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ><div class="vc_custom_heading_wrap "><div class="heading-text el-text" ><h1 class="fontsize-576976" ><span>Prototype and Wireframes for PhotoStacks</span></h1><div><p>Interaction Design / UX Design / UI Design</p></div></div><div class=clear></div></div><div class="empty-space empty-single" ><span class=empty-space-inner></span></div><div class="vc_row inverted-device-order row-internal row-container"><div class="row row-child"><div class="wpb_row row-inner"><div class="wpb_column pos-middle pos-center align_left column_child col-lg-6 single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ><div class="vc_custom_heading_wrap "><div class="heading-text el-text" ><h1 class="h1" ><span>Prototype - Swipe action gesture</span></h1></div><div class=clear></div></div><div class=uncode_text_column ><p>The problem with sorting through large numbers of photos on your phone is that it’s tedious and difficult to view photos so you can decide what you want to do with it. I designed PhotoStacks’ UX to work with larger photos using a set of gestures that lets you move, delete, or keep your photos.</p></div><span class=btn-container ><a href=#low-fidelity-wireframes class="custom-link btn border-width-2 btn-default btn-icon-left">Read More</a></span></div></div></div></div></div><div class="wpb_column pos-bottom pos-center align_center column_child col-lg-6 single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ><div class="uncode-single-media text-center"><div class=single-wrapper style="max-width: 320px;"><div class="tmb tmb-light img-round img-round-std tmb-shadowed tmb-shadowed-std tmb-media-first tmb-media-last tmb-content-overlay tmb-no-bg"><div class=t-inside><div class=t-entry-visual><div class=t-entry-visual-tc><div class="uncode-single-media-wrapper img-round img-round-std"><img fetchpriority=high decoding=async class="wp-image-4786 lazy" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20320%20569'%3E%3C/svg%3E" data-src=https://matthewcarlstrom.com/wp-content/uploads/PhotoStacks-Prototype-swipe-gesture.gif width=320 height=569 alt="Prototype of the PhotoStacks swipe gesture"></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div><script id=script-row-unique-0 data-row=script-row-unique-0 class=vc_controls>UNCODE.initRow(document.getElementById("row-unique-0"));</script></div></div></div><div data-parent=true class="vc_row row-container onepage-section" data-label="Low Fidelity Wireframes" data-name=low-fidelity-wireframes id=row-unique-1><div class="row limit-width row-parent"><div class="wpb_row row-inner"><div class="wpb_column pos-top pos-center align_left column_parent col-lg-12 single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ><div class="vc_row row-internal row-container"><div class="row row-child"><div class="wpb_row row-inner"><div class="wpb_column pos-top pos-center align_left column_child col-lg-2 single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ></div></div></div></div></div><div class="wpb_column pos-top pos-center align_center column_child col-lg-8 single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ><div class="vc_custom_heading_wrap "><div class="heading-text el-text" ><h2 class="h2" ><span>Wireframe Of Basic Gestures</span></h2></div><div class=clear></div></div><div class=uncode_text_column ><p style="text-align: left;"><a href=https://apps.apple.com/us/app/photostacks-organize-photos/id1421866112 target=_blank rel="noopener noreferrer">PhotoStacks</a> for iOS does not have many buttons in the UI because it relies on gestures for its core functionality. This meant that I had to create detailed wireframes to help visualize how the app functioned. Gestures as a central UX was an interesting contrast to other <a href=https://matthewcarlstrom.com/portfolio/discover-dash-android-app/ target=_blank rel="noopener noreferrer">apps</a> that I have designed.</p></div></div></div></div></div></div><div class="wpb_column pos-top pos-center align_left column_child col-lg-2 single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ></div></div></div></div></div></div></div></div><div class="uncode-single-media text-left"><div class=single-wrapper style="max-width: 100%;"><div class="tmb tmb-light tmb-media-first tmb-media-last tmb-content-overlay tmb-no-bg tmb-lightbox"><div class=t-inside><div class=t-entry-visual><div class=t-entry-visual-tc><div class=uncode-single-media-wrapper><div class=dummy style="padding-top: 63.1%;"></div><a tabindex=-1 href=https://matthewcarlstrom.com/wp-content/uploads/PhotoStacks-UX-Keep-Gesture1.png class=pushed data-skin=white data-lbox=ilightbox_single-5305 data-options="width:1500,height:947,thumbnail: 'https://matthewcarlstrom.com/wp-content/uploads/PhotoStacks-UX-Keep-Gesture1-470x300.png'"><img decoding=async class="wp-image-5305 lazy" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201500%20947'%3E%3C/svg%3E" data-src=https://matthewcarlstrom.com/wp-content/uploads/PhotoStacks-UX-Keep-Gesture1.png width=1500 height=947 alt="PhotoStacks UX - Keep-Gesture wireframes" data-srcset="https://matthewcarlstrom.com/wp-content/uploads/PhotoStacks-UX-Keep-Gesture1.png 1500w, https://matthewcarlstrom.com/wp-content/uploads/PhotoStacks-UX-Keep-Gesture1-768x485.png 768w" data-sizes="(max-width: 1500px) 100vw, 1500px"></a></div></div></div></div></div></div></div></div></div></div></div></div><script id=script-row-unique-1 data-row=script-row-unique-1 class=vc_controls>UNCODE.initRow(document.getElementById("row-unique-1"));</script></div></div></div><div data-parent=true class="vc_row row-container" id=row-unique-2><div class="row limit-width row-parent"><div class="wpb_row row-inner"><div class="wpb_column pos-top pos-center align_left column_parent col-lg-12 single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ><div class="vc_row row-internal row-container"><div class="row row-child"><div class="wpb_row row-inner"><div class="wpb_column pos-top pos-center align_left column_child col-lg-2 single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ></div></div></div></div></div><div class="wpb_column pos-top pos-center align_center column_child col-lg-8 single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ><div class="vc_custom_heading_wrap "><div class="heading-text el-text" ><h2 class="h2" ><span>Wireframe First</span></h2></div><div class=clear></div></div><div class=uncode_text_column ><p style="text-align: left;">The main question I had to answer was, “can many photos be managed with just a few simple gestures?” To help solve this, I thought it was important to visually explore how gestures could be functional in low-fidelity wireframes. After I had a simple solution, I could go back and create and working <a href=#high-fidelity-prototype>high(er) fidelity prototype</a>.</p></div></div></div></div></div></div><div class="wpb_column pos-top pos-center align_left column_child col-lg-2 single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ></div></div></div></div></div></div></div></div><div class="uncode-single-media text-left"><div class=single-wrapper style="max-width: 100%;"><div class="tmb tmb-light tmb-media-first tmb-media-last tmb-content-overlay tmb-no-bg tmb-lightbox"><div class=t-inside><div class=t-entry-visual><div class=t-entry-visual-tc><div class=uncode-single-media-wrapper><div class=dummy style="padding-top: 59%;"></div><a tabindex=-1 href=https://matthewcarlstrom.com/wp-content/uploads/PhotoStacks-UX-Swipe-Up-Sort-to-Album1.png class=pushed data-skin=white data-lbox=ilightbox_single-5307 data-options="width:1816,height:1071,thumbnail: 'https://matthewcarlstrom.com/wp-content/uploads/PhotoStacks-UX-Swipe-Up-Sort-to-Album1-470x300.png'"><img decoding=async class="wp-image-5307 lazy" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201816%201071'%3E%3C/svg%3E" data-src=https://matthewcarlstrom.com/wp-content/uploads/PhotoStacks-UX-Swipe-Up-Sort-to-Album1.png width=1816 height=1071 alt="PhotoStacks UX - Swipe Up-Sort to Album wireframes" data-srcset="https://matthewcarlstrom.com/wp-content/uploads/PhotoStacks-UX-Swipe-Up-Sort-to-Album1.png 1816w, https://matthewcarlstrom.com/wp-content/uploads/PhotoStacks-UX-Swipe-Up-Sort-to-Album1-1536x906.png 1536w, https://matthewcarlstrom.com/wp-content/uploads/PhotoStacks-UX-Swipe-Up-Sort-to-Album1-768x453.png 768w" data-sizes="(max-width: 1816px) 100vw, 1816px"></a></div></div></div></div></div></div></div><div class="uncode-single-media text-left"><div class=single-wrapper style="max-width: 100%;"><div class="tmb tmb-light tmb-media-first tmb-media-last tmb-content-overlay tmb-no-bg tmb-lightbox"><div class=t-inside><div class=t-entry-visual><div class=t-entry-visual-tc><div class=uncode-single-media-wrapper><div class=dummy style="padding-top: 63.1%;"></div><a tabindex=-1 href=https://matthewcarlstrom.com/wp-content/uploads/PhotoStacks-UX-Swipe-Delete-keep1.png class=pushed data-skin=white data-lbox=ilightbox_single-5306 data-options="width:1500,height:947,thumbnail: 'https://matthewcarlstrom.com/wp-content/uploads/PhotoStacks-UX-Swipe-Delete-keep1-470x300.png'"><img decoding=async class="wp-image-5306 lazy" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201500%20947'%3E%3C/svg%3E" data-src=https://matthewcarlstrom.com/wp-content/uploads/PhotoStacks-UX-Swipe-Delete-keep1.png width=1500 height=947 alt="PhotoStacks UX - Swipe Delete-keep wireframes" data-srcset="https://matthewcarlstrom.com/wp-content/uploads/PhotoStacks-UX-Swipe-Delete-keep1.png 1500w, https://matthewcarlstrom.com/wp-content/uploads/PhotoStacks-UX-Swipe-Delete-keep1-768x485.png 768w" data-sizes="(max-width: 1500px) 100vw, 1500px"></a></div></div></div></div></div></div></div></div></div></div></div></div><script id=script-row-unique-2 data-row=script-row-unique-2 class=vc_controls>UNCODE.initRow(document.getElementById("row-unique-2"));</script></div></div></div><div data-parent=true class="vc_row row-container" id=row-unique-3><div class="row limit-width row-parent"><div class="wpb_row row-inner"><div class="wpb_column pos-top pos-center align_left column_parent col-lg-12 single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ><div class="vc_row row-internal row-container"><div class="row row-child"><div class="wpb_row row-inner"><div class="wpb_column pos-top pos-center align_left column_child col-lg-2 single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ></div></div></div></div></div><div class="wpb_column pos-top pos-center align_center column_child col-lg-8 single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ><div class="vc_custom_heading_wrap "><div class="heading-text el-text" ><h2 class="h2" ><span>Basic Navigation Wireframes</span></h2></div><div class=clear></div></div><div class=uncode_text_column ><p style="text-align: left;">The goal for the MVP version of this app was to keep the main functionality in front of the user. To achieve this I designed the Stack screen and the storage UI to be at the same level. It’s basically a top navigation tab system. The result was a simple way to navigate from the activity screen to the folder and filter screens and kept them nicely in the same organizational context.</p></div></div></div></div></div></div><div class="wpb_column pos-top pos-center align_left column_child col-lg-2 single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ></div></div></div></div></div></div></div></div><div class="uncode-single-media text-left"><div class=single-wrapper style="max-width: 100%;"><div class="tmb tmb-light tmb-media-first tmb-media-last tmb-content-overlay tmb-no-bg tmb-lightbox"><div class=t-inside><div class=t-entry-visual><div class=t-entry-visual-tc><div class=uncode-single-media-wrapper><div class=dummy style="padding-top: 63.1%;"></div><a tabindex=-1 href=https://matthewcarlstrom.com/wp-content/uploads/PhotoStacks-UX-Folder-Navigation1.png class=pushed data-skin=white data-lbox=ilightbox_single-5304 data-options="width:1500,height:947,thumbnail: 'https://matthewcarlstrom.com/wp-content/uploads/PhotoStacks-UX-Folder-Navigation1-470x300.png'"><img decoding=async class="wp-image-5304 lazy" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201500%20947'%3E%3C/svg%3E" data-src=https://matthewcarlstrom.com/wp-content/uploads/PhotoStacks-UX-Folder-Navigation1.png width=1500 height=947 alt="PhotoStacks UX - Folder Navigation wireframes" data-srcset="https://matthewcarlstrom.com/wp-content/uploads/PhotoStacks-UX-Folder-Navigation1.png 1500w, https://matthewcarlstrom.com/wp-content/uploads/PhotoStacks-UX-Folder-Navigation1-768x485.png 768w" data-sizes="(max-width: 1500px) 100vw, 1500px"></a></div></div></div></div></div></div></div><div class="empty-space empty-single" ><span class=empty-space-inner></span></div><div class="vc_row row-internal row-container"><div class="row row-child"><div class="wpb_row row-inner"><div class="wpb_column pos-top pos-center align_left column_child col-lg-2 single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ></div></div></div></div></div><div class="wpb_column pos-top pos-center align_left column_child col-lg-8 single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ><div class=uncode_text_column ><p style="text-align: left;">My initial goal was to make Filter and Settings discrete screens, as in the wireframe below. However, after a little real user testing, we found that Filter was used quite often, while Settings was not. With this insight, I elevated the Filter screen to a more prominent tab item, but I buried Settings into the filter screen.</p></div></div></div></div></div></div><div class="wpb_column pos-top pos-center align_left column_child col-lg-2 single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ></div></div></div></div></div></div></div></div><div class="uncode-single-media text-left"><div class=single-wrapper style="max-width: 100%;"><div class="tmb tmb-light tmb-media-first tmb-media-last tmb-content-overlay tmb-no-bg tmb-lightbox"><div class=t-inside><div class=t-entry-visual><div class=t-entry-visual-tc><div class=uncode-single-media-wrapper><div class=dummy style="padding-top: 63.1%;"></div><a tabindex=-1 href=https://matthewcarlstrom.com/wp-content/uploads/PhotoStacks-UX-Filter-Settings1.png class=pushed data-skin=white data-lbox=ilightbox_single-5303 data-options="width:1500,height:947,thumbnail: 'https://matthewcarlstrom.com/wp-content/uploads/PhotoStacks-UX-Filter-Settings1-470x300.png'"><img decoding=async class="wp-image-5303 lazy" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201500%20947'%3E%3C/svg%3E" data-src=https://matthewcarlstrom.com/wp-content/uploads/PhotoStacks-UX-Filter-Settings1.png width=1500 height=947 alt="PhotoStacks UX - Filter-Settings wireframes" data-srcset="https://matthewcarlstrom.com/wp-content/uploads/PhotoStacks-UX-Filter-Settings1.png 1500w, https://matthewcarlstrom.com/wp-content/uploads/PhotoStacks-UX-Filter-Settings1-768x485.png 768w" data-sizes="(max-width: 1500px) 100vw, 1500px"></a></div></div></div></div></div></div></div><div class="empty-space empty-single" ><span class=empty-space-inner></span></div><div class="vc_row row-internal row-container"><div class="row row-child"><div class="wpb_row row-inner"><div class="wpb_column pos-top pos-center align_left column_child col-lg-2 single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ></div></div></div></div></div><div class="wpb_column pos-top pos-center align_left column_child col-lg-8 single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ><div class=uncode_text_column ><p>I designed Trash to be a familiar user experience concept so people would feel comfortable about how deleting photos would behave. I also designed some extra safety measure so there would be less regret over mistakenly deleted聽 photos.</p></div></div></div></div></div></div><div class="wpb_column pos-top pos-center align_left column_child col-lg-2 single-internal-gutter"><div class="uncol style-light" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ></div></div></div></div></div></div></div></div><div class="uncode-single-media text-left"><div class=single-wrapper style="max-width: 100%;"><div class="tmb tmb-light tmb-media-first tmb-media-last tmb-content-overlay tmb-no-bg tmb-lightbox"><div class=t-inside><div class=t-entry-visual><div class=t-entry-visual-tc><div class=uncode-single-media-wrapper><div class=dummy style="padding-top: 63.1%;"></div><a tabindex=-1 href=https://matthewcarlstrom.com/wp-content/uploads/PhotoStacks-UX-Trashed-Folder1.png class=pushed data-skin=white data-lbox=ilightbox_single-5308 data-options="width:1500,height:947,thumbnail: 'https://matthewcarlstrom.com/wp-content/uploads/PhotoStacks-UX-Trashed-Folder1-470x300.png'"><img decoding=async class="wp-image-5308 lazy" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201500%20947'%3E%3C/svg%3E" data-src=https://matthewcarlstrom.com/wp-content/uploads/PhotoStacks-UX-Trashed-Folder1.png width=1500 height=947 alt="PhotoStacks UX - Trashed Folder wireframes" data-srcset="https://matthewcarlstrom.com/wp-content/uploads/PhotoStacks-UX-Trashed-Folder1.png 1500w, https://matthewcarlstrom.com/wp-content/uploads/PhotoStacks-UX-Trashed-Folder1-768x485.png 768w" data-sizes="(max-width: 1500px) 100vw, 1500px"></a></div></div></div></div></div></div></div></div></div></div></div></div><script id=script-row-unique-3 data-row=script-row-unique-3 class=vc_controls>UNCODE.initRow(document.getElementById("row-unique-3"));</script></div></div></div></div></div></div></div><div class="row-container row-navigation row-navigation-light"><div class="row row-parent style-light limit-width"><nav class=post-navigation><ul class=navigation><li class=page-prev><span class=btn-container><a class="btn btn-link text-default-color btn-icon-left" href=https://matthewcarlstrom.com/portfolio/discover-dash-android-app/ rel=prev><i class="fa fa-angle-left"></i><span>Prev</span></a></span></li><li class=page-next><span class=btn-container><a class="btn btn-link text-default-color btn-icon-right" href=https://matthewcarlstrom.com/portfolio/mobile-app-design/ rel=next><span>Next</span><i class="fa fa-angle-right"></i></a></span></li></ul></nav></div></div></div></div><footer id=colophon class=site-footer><div data-parent=true class="vc_row style-color-919101-bg row-container" id=row-unique-4><div class="row limit-width row-parent"><div class="wpb_row row-inner"><div class="wpb_column pos-top pos-center align_left column_parent col-lg-12 single-internal-gutter"><div class="uncol style-dark" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ><div class=uncode_text_column ><p><a href=mailto:designer@matthewcarlstrom.com target=_top rel="noopener noreferrer">designer@matthewcarlstrom.com</a></p></div><div class=uncode_text_column ><p><a href=https://matthewcarlstrom.com/my-resume/ target=_blank rel="noopener noreferrer">Resume</a></p></div><div class=uncode-vc-social><div class="social-icon icon-box icon-box-top icon-inline" ><a href=https://www.linkedin.com/in/matthew-john-carlstrom-80a5351/ target=_blank><i class="fa fa-linkedin"></i></a></div><div class="social-icon icon-box icon-box-top icon-inline" ><a href=https://x.com/matyasjanos target=_blank><i class="fa fa-twitter-x-fa"></i></a></div></div></div></div></div></div></div><script id=script-row-unique-4 data-row=script-row-unique-4 class=vc_controls>UNCODE.initRow(document.getElementById("row-unique-4"));</script></div></div></div><div class="row-container style-color-130326-bg footer-last"><div class="row row-parent style-dark limit-width no-top-padding no-h-padding no-bottom-padding"><div class="site-info uncell col-lg-6 pos-middle text-left">© 2024 Matthew Carlstrom Product Design. All rights reserved</div></div></div></footer></div></div></div></div> <script type=text/html id=wpb-modifications>window.wpbCustomElement = 1;</script><script src=https://matthewcarlstrom.com/wp-content/themes/uncode/library/js/plugins.min.js id=uncode-plugins-js></script> <script src=https://matthewcarlstrom.com/wp-content/themes/uncode/library/js/app.min.js id=uncode-app-js></script> <script></script><script>window.w3tc_lazyload=1,window.lazyLoadOptions={elements_selector:".lazy",callback_loaded:function(t){var e;try{e=new CustomEvent("w3tc_lazyload_loaded",{detail:{e:t}})}catch(a){(e=document.createEvent("CustomEvent")).initCustomEvent("w3tc_lazyload_loaded",!1,!1,{e:t})}window.dispatchEvent(e)}}</script><script async src=https://matthewcarlstrom.com/wp-content/plugins/w3-total-cache/pub/js/lazyload.min.js></script></body></html>