Meet Phase — { hi! }

Username

blog.prototypr.io

•

4 years ago

Published on | Prototyping: From UX to Front End — Medium Phase.com

Digital Design Reinvented

<img class="rounded" src="https://cdn-images-1.medium.com/max/1200/1*KTxIQI9XhoxOXGOgk7rBnQ.png"/></a><div class="py-6"><a class="underline text-gray-600 font-semibold" href="https://blog.prototypr.io/meet-phase-hi-3f395c695d87?source=rss----eb297ea1161a---4" target="_blank">Read more</a></div></div></div></div><div class="col-span-full mb-6 lg:mb-0 lg:col-span-3 order-last lg:order-last lg:block"><div class="sm:hidden block lg:block"><div class="bg-white border-gray-300 p-5 rounded-lg flex flex-row sm:flex-col"><a href="https://open.prototypr.io"><div class="relative rounded mb-2 w-full" style="height:148px"><span style="box-sizing:border-box;display:block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:absolute;top:0;left:0;bottom:0;right:0"><img data-gumlet="false" alt="https://prototypr-media.sfo2.digitaloceanspaces.com/wp-content/uploads/2022/03/d0aace79-b8e3-4ea1-bfc1-6c40a21990a7.jpeg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="fill" class="md:w-auto flex-shrink-0 sm:w-full rounded-lg mr-4 object-contain" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;object-fit:cover"/><noscript><img data-gumlet="false" alt="https://prototypr-media.sfo2.digitaloceanspaces.com/wp-content/uploads/2022/03/d0aace79-b8e3-4ea1-bfc1-6c40a21990a7.jpeg" sizes="100vw" srcSet="/_next/image?url=https%3A%2F%2Fprototypr-media.sfo2.digitaloceanspaces.com%2Fwp-content%2Fuploads%2F2022%2F03%2Fd0aace79-b8e3-4ea1-bfc1-6c40a21990a7.jpeg&w=640&q=75 640w, /_next/image?url=https%3A%2F%2Fprototypr-media.sfo2.digitaloceanspaces.com%2Fwp-content%2Fuploads%2F2022%2F03%2Fd0aace79-b8e3-4ea1-bfc1-6c40a21990a7.jpeg&w=750&q=75 750w, /_next/image?url=https%3A%2F%2Fprototypr-media.sfo2.digitaloceanspaces.com%2Fwp-content%2Fuploads%2F2022%2F03%2Fd0aace79-b8e3-4ea1-bfc1-6c40a21990a7.jpeg&w=828&q=75 828w, /_next/image?url=https%3A%2F%2Fprototypr-media.sfo2.digitaloceanspaces.com%2Fwp-content%2Fuploads%2F2022%2F03%2Fd0aace79-b8e3-4ea1-bfc1-6c40a21990a7.jpeg&w=1080&q=75 1080w, /_next/image?url=https%3A%2F%2Fprototypr-media.sfo2.digitaloceanspaces.com%2Fwp-content%2Fuploads%2F2022%2F03%2Fd0aace79-b8e3-4ea1-bfc1-6c40a21990a7.jpeg&w=1200&q=75 1200w, /_next/image?url=https%3A%2F%2Fprototypr-media.sfo2.digitaloceanspaces.com%2Fwp-content%2Fuploads%2F2022%2F03%2Fd0aace79-b8e3-4ea1-bfc1-6c40a21990a7.jpeg&w=1920&q=75 1920w, /_next/image?url=https%3A%2F%2Fprototypr-media.sfo2.digitaloceanspaces.com%2Fwp-content%2Fuploads%2F2022%2F03%2Fd0aace79-b8e3-4ea1-bfc1-6c40a21990a7.jpeg&w=2048&q=75 2048w, /_next/image?url=https%3A%2F%2Fprototypr-media.sfo2.digitaloceanspaces.com%2Fwp-content%2Fuploads%2F2022%2F03%2Fd0aace79-b8e3-4ea1-bfc1-6c40a21990a7.jpeg&w=3840&q=75 3840w" src="/_next/image?url=https%3A%2F%2Fprototypr-media.sfo2.digitaloceanspaces.com%2Fwp-content%2Fuploads%2F2022%2F03%2Fd0aace79-b8e3-4ea1-bfc1-6c40a21990a7.jpeg&w=3840&q=75" decoding="async" data-nimg="fill" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;object-fit:cover" class="md:w-auto flex-shrink-0 sm:w-full rounded-lg mr-4 object-contain" loading="lazy"/></noscript></span></div></a><div class="flex-col sm:px-0 px-4"><a href="https://open.prototypr.io" class="block sm:mt-1"><div class="text-sm cursor-pointer leading-5 font-medium text-gray-800"><p>We're an Open Source, Web Monetized project. Learn how to build your own Web Monetized website.</p> </div></a></div></div></div><div class="hidden md:block bg-white rounded-lg mt-6 p-6 lg:mb-16"><h1 class="text-sm font-semibold font-noto-serif mb-3">Top Stories</h1><div><div class="flex h-full relative mb-3 md:mb-0 border-b border-gray-50 cursor-pointer"><div class="rounded-lg relative flex md:my-4 h-16 w-16 md:h-16 flex-none"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2766%27%20height=%2766%27/%3e"/></span><img alt="From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="cardImage flex-shrink-0 shine h-16 w-16 md:h-16 rounded-md border border-gray-100" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;object-fit:cover"/><noscript><img alt="From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill" srcSet="/_next/image?url=https%3A%2F%2Fprototypr-media.sfo2.digitaloceanspaces.com%2Fstrapi%2F8d8070381d986c2f80b500cdb024f518.png&w=96&q=75 1x, /_next/image?url=https%3A%2F%2Fprototypr-media.sfo2.digitaloceanspaces.com%2Fstrapi%2F8d8070381d986c2f80b500cdb024f518.png&w=256&q=75 2x" src="/_next/image?url=https%3A%2F%2Fprototypr-media.sfo2.digitaloceanspaces.com%2Fstrapi%2F8d8070381d986c2f80b500cdb024f518.png&w=256&q=75" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;object-fit:cover" class="cardImage flex-shrink-0 shine h-16 w-16 md:h-16 rounded-md border border-gray-100" loading="lazy"/></noscript></span></div><div class=" sm:w-auto pl-3 py-4 md:pl-3"><div class="cursor-pointer text-sm text-gray-800 leading-tight" style="overflow:hidden">From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill</div></div></div></div><div><div class="flex h-full relative mb-3 md:mb-0 border-b border-gray-50 cursor-pointer"><div class="rounded-lg relative flex md:my-4 h-16 w-16 md:h-16 flex-none"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2766%27%20height=%2766%27/%3e"/></span><img alt="From Design System to ‘NFT Design System’: Creating TinyFaces" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="cardImage flex-shrink-0 shine h-16 w-16 md:h-16 rounded-md border border-gray-100" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;object-fit:cover"/><noscript><img alt="From Design System to ‘NFT Design System’: Creating TinyFaces" srcSet="/_next/image?url=https%3A%2F%2Fprototypr-media.sfo2.digitaloceanspaces.com%2Fwp-content%2Fuploads%2F2022%2F05%2FoZREIb60.png&w=96&q=75 1x, /_next/image?url=https%3A%2F%2Fprototypr-media.sfo2.digitaloceanspaces.com%2Fwp-content%2Fuploads%2F2022%2F05%2FoZREIb60.png&w=256&q=75 2x" src="/_next/image?url=https%3A%2F%2Fprototypr-media.sfo2.digitaloceanspaces.com%2Fwp-content%2Fuploads%2F2022%2F05%2FoZREIb60.png&w=256&q=75" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;object-fit:cover" class="cardImage flex-shrink-0 shine h-16 w-16 md:h-16 rounded-md border border-gray-100" loading="lazy"/></noscript></span></div><div class=" sm:w-auto pl-3 py-4 md:pl-3"><div class="cursor-pointer text-sm text-gray-800 leading-tight" style="overflow:hidden">From Design System to ‘NFT Design System’: Creating TinyFaces</div></div></div></div><div><div class="flex h-full relative mb-3 md:mb-0 border-b border-gray-50 cursor-pointer"><div class="rounded-lg relative flex md:my-4 h-16 w-16 md:h-16 flex-none"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2766%27%20height=%2766%27/%3e"/></span><img alt="Neurodiversity and Inclusion: Choosing Kinder Design" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="cardImage flex-shrink-0 shine h-16 w-16 md:h-16 rounded-md border border-gray-100" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;object-fit:cover"/><noscript><img alt="Neurodiversity and Inclusion: Choosing Kinder Design" srcSet="/_next/image?url=https%3A%2F%2Fprototypr-media.sfo2.digitaloceanspaces.com%2Fwp-content%2Fuploads%2F2022%2F05%2FA6E37491-A0FB-4EE3-9E7E-8542137F5D5A.jpeg&w=96&q=75 1x, /_next/image?url=https%3A%2F%2Fprototypr-media.sfo2.digitaloceanspaces.com%2Fwp-content%2Fuploads%2F2022%2F05%2FA6E37491-A0FB-4EE3-9E7E-8542137F5D5A.jpeg&w=256&q=75 2x" src="/_next/image?url=https%3A%2F%2Fprototypr-media.sfo2.digitaloceanspaces.com%2Fwp-content%2Fuploads%2F2022%2F05%2FA6E37491-A0FB-4EE3-9E7E-8542137F5D5A.jpeg&w=256&q=75" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;object-fit:cover" class="cardImage flex-shrink-0 shine h-16 w-16 md:h-16 rounded-md border border-gray-100" loading="lazy"/></noscript></span></div><div class=" sm:w-auto pl-3 py-4 md:pl-3"><div class="cursor-pointer text-sm text-gray-800 leading-tight" style="overflow:hidden">Neurodiversity and Inclusion: Choosing Kinder Design</div></div></div></div><div><div class="flex h-full relative mb-3 md:mb-0 border-b border-gray-50 cursor-pointer"><div class="rounded-lg relative flex md:my-4 h-16 w-16 md:h-16 flex-none"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2766%27%20height=%2766%27/%3e"/></span><img alt="Web5 is here. Goodbye Web3? TBD." src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" class="cardImage flex-shrink-0 shine h-16 w-16 md:h-16 rounded-md border border-gray-100" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;object-fit:cover"/><noscript><img alt="Web5 is here. Goodbye Web3? TBD." srcSet="/_next/image?url=https%3A%2F%2Fprototypr-media.sfo2.digitaloceanspaces.com%2Fstrapi%2F7698182c0f7e732a32a65bf390d5edba.png&w=96&q=75 1x, /_next/image?url=https%3A%2F%2Fprototypr-media.sfo2.digitaloceanspaces.com%2Fstrapi%2F7698182c0f7e732a32a65bf390d5edba.png&w=256&q=75 2x" src="/_next/image?url=https%3A%2F%2Fprototypr-media.sfo2.digitaloceanspaces.com%2Fstrapi%2F7698182c0f7e732a32a65bf390d5edba.png&w=256&q=75" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;object-fit:cover" class="cardImage flex-shrink-0 shine h-16 w-16 md:h-16 rounded-md border border-gray-100" loading="lazy"/></noscript></span></div><div class=" sm:w-auto pl-3 py-4 md:pl-3"><div class="cursor-pointer text-sm text-gray-800 leading-tight" style="overflow:hidden">Web5 is here. Goodbye Web3? TBD.</div></div></div></div></div></div></div></div></main></div><footer class="bg-accent-1 border-accent-2"><div class="xl:container mx-auto px-3 pb-8 xl:px-8" style="max-width:1200px"><div class="w-full max-w-screen-xl relative mx-auto py-16 px-6"><div class="flex flex-wrap"><div class="w-full md:w-6/12"><p class="text-xl font-semibold">Get Prototypr Weekly</p><input class="hidden" value="hello@prototypr.io"/><p class="text-base mt-0 text-gray-700">Top articles and tools every week  💌</p><div class="rounded-md mb-12 lg:mb-0"><div><form class="sm:flex w-11/12 mt-5"><div class="sm:flex-1 sm:max-w-xs w-full"><label for="Email" class="sr-only ">Enter your email address</label><input type="text" id="Email" style="font-size:.875rem" placeholder="Enter your email address" name="emailRequired" class="border-transparent border-solid border-2 border-gradient-br-blue-darkblue-gray-50 hover:border-gradient-tl-blue-darkblue-gray-50 gradient-border-3 w-full h-full p-3 text-gray-800 bg-white rounded-lg"/></div><div class="hidden email-octopus-form-row-hp" aria-hidden="true"><input type="text" name="hp1cc5fdf6-63b5-11ea-a3d0-06b4694bee2a" tabindex="-1" autoComplete="nope"/></div><div class="flex flex-col "><button aria-label="Sign up for newsletter" class="flex justify-center md:text-left items-center md:justify-between w-full px-5 py-3 mt-4 font-medium text-white bg-blue-default rounded-lg sm:w-auto sm:mt-0 sm:ml-3 hover:bg-blue-600" type="submit">Sign up<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="flex-shrink-0 w-4 h-4 ml-3"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg></button></div></form><div class="px-1 w-10/12 mx-auto"></div></div></div><p class="text-sm mt-6 text-gray-800 font-semibold">Created by <a class="text-blue-800 underline" href="https://twitter.com/annchichii">Ann</a>, <a class="text-blue-800 underline" href="https://twitter.com/graeme_fulton">Graeme</a>, and <a class="text-blue-800 underline" href="https://twitter.com/iamsofiamm">Sofia</a>. Illustrations by <a class="text-blue-800 underline" href="https://twitter.com/thisismimiespi">Mimi</a>.</p><p class="text-sm text-gray-700 font-semibold mt-2"> © 2020 Prototpyr, All rights reserved.</p></div><div class="w-full md:w-6/12"><div class="flex flex-wrap items-top mb-6"><div class="w-full md:w-6/12 xl:w-4/12 pt-6 md:pt-0 md:px-4 ml-auto"><span class="block uppercase text-gray-900 text-sm font-semibold mb-2">Good Stuff</span><ul class="list-unstyled"><li><a class="text-gray-700 hover:text-gray-900 font-base block py-3 text-base" rel="noreferrer" href="https://github.com/Prototypr" target="_blank">Open Source</a></li><li><a class="text-gray-700 hover:text-gray-900 font-base block py-3 text-base" href="/posts">Prototypr Open</a></li><li><a class="text-gray-700 hover:text-gray-900 font-base block py-3 text-base" rel="noreferrer" href="https://twitter.com/prototypr" target="_blank">Twitter</a></li><li><a class="text-gray-700 hover:text-gray-900 font-base block py-3 text-base" rel="noreferrer" href="https://instagram.com/prototyprio" target="_blank">Instagram</a></li></ul></div><div class="w-full md:w-6/12 xl:w-4/12 pt-6 md:pt-0 ml-auto"><span class="block uppercase text-gray-900 text-sm font-semibold mb-2">Other Resources</span><ul class="list-unstyled"><li><a class="text-gray-700 hover:text-gray-900 font-base block py-3 text-base" rel="noreferrer" href="https://adobe.com/products/xd/adobe-fund.html" target="_blank">Adobe Fund for Design</a></li><li><a class="text-gray-700 hover:text-gray-900 font-base block py-3 text-base" rel="noreferrer" href="https://grantfortheweb.org" target="_blank">Grant for the Web</a></li><li><a class="text-gray-700 hover:text-gray-900 font-base block py-3 text-base" rel="noreferrer" href="https://interledger.org/" target="_blank">Web Monetization</a></li><li><a class="text-gray-700 hover:text-gray-900 font-base block py-3 text-base" rel="noreferrer" href="https://letter.so" target="_blank">Mail by Letter</a></li><li><a class="text-gray-700 hover:text-gray-900 font-base block py-3 text-base" rel="noreferrer" href="https://prototypr.io/privacy-policy/" target="_blank">Privacy Policy</a></li></ul></div></div></div></div></div></div></footer></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"preview":null,"post":{"attributes":{"title":"Meet Phase — { hi! }","slug":"meet-phase-hi","content":"\u003cp\u003ePublished on \u003ca href=\"https://blog.prototypr.io/meet-phase-hi-3f395c695d87?source=rss----eb297ea1161a---4\"\u003e| Prototyping: From UX to Front End \u0026mdash; Medium\u003c/a\u003e Phase.com \u003c/p\u003e\n\u003cp\u003eDigital Design Reinvented\u003c/p\u003e\n\u003cp\u003e\u003ciframe src=\"https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FE5xeEXewW9o%3Ffeature%3Doembed\u0026amp;url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DE5xeEXewW9o\u0026#038;image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FE5xeEXewW9o%2Fhqdefault.jpg\u0026amp;key=a19fcc184b9711e1b4764040d3dc5c07\u0026amp;type=text%2Fhtml\u0026amp;schema=youtube\" width=\"854\" height=\"480\" frameborder=\"0\"\u003e\u003ca href=\"https://medium.com/media/d13e94abd818c40d094d23dd402b7cb4/href\"\u003ehttps://medium.com/media/d13e94abd818c40d094d23dd402b7cb4/href\u003c/a\u003e\u003c/iframe\u003e\u003c/p\u003e\n\u003ch3\u003e\u003cstrong\u003eDigital Design — From Scratch.\u003c/strong\u003e\u003c/h3\u003e\n\u003cp\u003eWe want to help you spend more time being creative.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eThe Creative Process\u003c/strong\u003e — that root of our passion and joy as designers. It’s oh so hard to describe, that feeling when your ideas take on an energy of their own. When your creativity starts to flow. Words fall short.\u003c/p\u003e\n\u003cp\u003eIt’s the electricity we feel when we design. It’s what hooked us. It’s embedded in our DNA. It makes us — designers — who we are.\u003c/p\u003e\n\u003cp\u003eIt sure is an exciting time to be a designer. Modern design and the design tools that have come with it seem to have changed more just in the past few years than they did in full decades past.\u003c/p\u003e\n\u003cp\u003e\u003cem\u003eBut…are we moving in the right direction?\u003c/em\u003e\u003c/p\u003e\n\u003cp\u003eWith each turn of the design tools ecosystem it seems like we spend a little less time in the Creative Process, and a little more struggling with problems that really have nothing to do with creativity, or design.\u003c/p\u003e\n\u003cp\u003eWhen did we start spending more time struggling with our tools, than we spend solving design problems? \u003cem\u003eThan we spend, actually doing design?\u003c/em\u003e\u003c/p\u003e\n\u003cp\u003eSome think this is just the nature of modern design — digital design is more complex and dynamic than static print, so the complexity we have to deal with has naturally grown.\u003c/p\u003e\n\u003cp\u003eMaybe that’s partially true, but only partially.\u003c/p\u003e\n\u003cp\u003eWe believe the truth is that after years of supposed progress, we are still essentially dealing with print design tools. Sure we’ve duct-tapped a thing or two onto them, but their foundations are still essentially the same.\u003c/p\u003e\n\u003cp\u003eWe deserve better. It’s time our products finally, truly evolve.\u003c/p\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https://cdn-images-1.medium.com/max/1024/1*KTxIQI9XhoxOXGOgk7rBnQ.png\"\u003ePhase.com — Coming Early Summer 2018\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003ePhase is a Digital Design product — Re-worked from the ground up.\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003eDesigning websites and apps — \u003cem\u003ewhat we at Phase call Digital Design\u003c/em\u003e — is fundamentally different from Print Design. That’s not news, but despite deep and obvious differences we’ve tried for years to tweak and transform existing Print Design-products into digital tools, piece by piece.\u003c/p\u003e\n\u003cp\u003eThe resulting Frankenstein-products seem to do less than half of what we really need, and do poorly at that.\u003c/p\u003e\n\u003cp\u003eIt’s time Digital Design got the attention it deserves.\u003c/p\u003e\n\u003cp\u003eLet’s build a product that finally rethinks things from first principles. Let’s build a product that…gets out of our way. That fits modern Digital Design so snugly, that we forget it’s even there.\u003c/p\u003e\n\u003cp\u003eAnd of course, let’s start with the basics.\u003c/p\u003e\n\u003ch3\u003eBack to Basics ⇱\u003c/h3\u003e\n\u003cp\u003eWhen we think about re-working Digital Design, there are a few basics we need to nail right off the bat.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eWe’re designing screens, not pages.\u003c/strong\u003e This means dropping the idea of fixed page sizes that is a a legacy from our print tools’ past. It means a workspace that dynamically adjusts, and adapts.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eWith Adaptive Layouts \u003c/strong\u003ethat are more than constraints. Websites and apps are dynamic. They adapts and flow based on content, and context. It’s time our design tools catch up with real, adaptive layouts.\u003c/p\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https://cdn-images-1.medium.com/max/1024/1*MYBQb9RlIE-jAQBaWTcbpg.png\"\u003eDynamic, Adaptive Layouts\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eElement States — \u003c/strong\u003eeverything website and app has them. From basics like a click, hover, or scroll to the most advanced element interaction states.\u003c/p\u003e\n\u003cp\u003eYet existing tools still can’t handle state?\u003c/p\u003e\n\u003cp\u003eAt least not with something better than copy paste? Duplicate elements, and make changes. Oh, don’t forget to label the new layer ‘hover’ so we know what it does. We deserve better than that.\u003c/p\u003e\n\u003cp\u003eElements in websites and apps have states — our design products should too.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eComponent Libraries \u003c/strong\u003eand Design Systems real in websites and apps work very differently from how libraries work in today’s design tools.\u003c/p\u003e\n\u003cp\u003eReal Component Libraries are so much more than SVG symbols. They’re so much more than just Elements, and rigid Text styles.\u003c/p\u003e\n\u003cp\u003eColors, Properties like fills, borders, and shadows…border radius, width, and height — everything is a component now. Create components at the level of composition you need, to keep your design consistent, fast.\u003c/p\u003e\n\u003cp\u003eLet’s design libraries in the same way we’re going to use them in the real world, with \u003cstrong\u003edeep and dynamic composition.\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https://cdn-images-1.medium.com/max/1024/1*5A6elXhGgacqK2KGVmNJ7Q.png\"\u003eEverything is a Component Now\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eReal Digital Elements\u003c/strong\u003e are video, audio, form inputs, etc. These are elements that have a behaviour. Yet our design products still mimic them with Print Design-esque placeholders? It’s time we get real.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eThe output of digital design is \u0026lt;Code /\u0026gt;\u003c/strong\u003e. We may be working visually and not directly in code, but we still need code to come out the other side when we hit the export button.\u003c/p\u003e\n\u003cp\u003eBut…just any code? — \u003cem\u003eno.\u003c/em\u003e\u003c/p\u003e\n\u003cp\u003eEvery project and every team is different, and generated code is only actually useful if it’s generated exactly the way we need. So it’s time we start \u003cem\u003ebuilding exported code \u003c/em\u003ewith fully customized configurations, and not generating gibberish code that can’t actually be used in the world.\u003c/p\u003e\n\u003ch3\u003eDesign is Visual → It’s Human Nature.\u003c/h3\u003e\n\u003cp\u003eBeyond the Basics— It’s Time We Rethink Interaction Design.\u003c/p\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https://cdn-images-1.medium.com/max/1024/1*nqOKlSR6MPanpJHYh0GxKg.png\"\u003eDesign is Visual — It’s Human Nature\u003c/p\u003e\n\u003cp\u003eThey say that today every modern designer must today become a designer-coder hybrid. Switching back and forth between visual design tools and working directly in code in modern design.\u003c/p\u003e\n\u003cp\u003eSome take things even further, urging us to drop visual tools altogether and design from scratch directly — \u003cem\u003eand exclusively\u003c/em\u003e — in code.\u003c/p\u003e\n\u003cp\u003eModern design is just so dynamic, they say, that visual tools will never be powerful or flexible enough. Code is flexible. Code is dynamic. It can do anything we need. So let’s use code!\u003c/p\u003e\n\u003cp\u003eCode is great — but in the Creative Process it slows everything down.\u003c/p\u003e\n\u003cp\u003eWith visual and intuitive products we can create complex video games, or Hollywood special effects. Heck, take a second to look around you. Everything you see — \u003cem\u003emoving parts and all\u003c/em\u003e — can be modelled in visual 3D CAD.\u003c/p\u003e\n\u003cp\u003eWe can create some pretty darn complex things with visual tools. \u003cem\u003eCan it really be true that websites and apps — i.e. modern Digital Design — is just too dynamic and too complex to be done in visual tools?\u003c/em\u003e\u003c/p\u003e\n\u003cp\u003eVisual tools for Digital Design have been tried before, but they’ve always been painfully limited in what they could do and cumbersome to use. So working directly in code —\u003cem\u003e at least so far \u003c/em\u003e— really has been a better way.\u003c/p\u003e\n\u003cp\u003eBut let’s step back and think about this…how do these visual tools, so cumbersome and restrictive, actually work?\u003c/p\u003e\n\u003cp\u003eWell, they created lists of pre-made interactions. Fade-out, slide-up, rotate, scale, drag, etc. — as many pre-made interactions as possible. Now let’s stop again and think about that. \u003cem\u003eIs that how any design actually works?\u003c/em\u003e\u003c/p\u003e\n\u003cp\u003eWell no, not really. Pre-made lists of interactions like fade-in, or scale up? That’s really just the Interaction Design form of clipart.\u003c/p\u003e\n\u003cp\u003e\u003cem\u003eNo, it’s not how we actually design.\u003c/em\u003e\u003c/p\u003e\n\u003cp\u003eWhen we design we take design’s core building blocks — \u003cem\u003ethings like paths, text, fills, borders, shadows, colors, etc.\u003c/em\u003e — and \u003cstrong\u003ecompose designs\u003c/strong\u003e mixing these core building blocks together, to create designs with as much or as little complexity as we need.\u003c/p\u003e\n\u003cp\u003ePrint design, video games, animation, CAD — it’s always the same. We don’t piece designs together exclusively from pre-made templates. We compose designs with the basic building blocks for that type of design.\u003c/p\u003e\n\u003cp\u003eIt’s time we think about Interaction Design the same way and finally make the basic building blocks of Interaction Design — things like selectors, events, conditions — first-order citizens in our Digital Design products.\u003c/p\u003e\n\u003cp\u003eWhen we do we’ll finally be able to take our Creative Process back, with visual and intuitive tools that make your designs a reality \u003cstrong\u003e\u003cem\u003efast\u003c/em\u003e\u003c/strong\u003e. That let you focus on being creative, and not struggling with your broken tools or code.\u003c/p\u003e\n\u003ch3\u003eWorking Together → The Designer Way\u003c/h3\u003e\n\u003cp\u003eThe days of working in silos are behind us.\u003c/p\u003e\n\u003cp\u003eToday we’re part of teams that work alongside engineers, marketers, managers, and scores of other designers on shared projects.\u003c/p\u003e\n\u003cp\u003e\u003cem\u003eBut what does working together really look like, in design?\u003c/em\u003e\u003c/p\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https://cdn-images-1.medium.com/max/1024/1*-nnN0uVATlElxTG_UR5lQg.png\"\u003e\u003c/p\u003e\n\u003cp\u003eIs the answer git? Well, sort of.\u003c/p\u003e\n\u003cp\u003eWe designers need some kind of version control. But what about real-time collaboration? Realtime collaboration…that’s not git. Do we need version control? With branching, masters, and merges? Or do we need realtime collaboration?\u003c/p\u003e\n\u003cp\u003eHopefully, the answer is obvious \u0026#8211; \u003cstrong\u003e\u003cem\u003ewe need both\u003c/em\u003e.\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003eThought of a new idea you want to experiment with? Create a branch with slimmed down and visual version control — \u003cstrong\u003e\u003cem\u003eand collaborate in realtime\u003c/em\u003e\u003c/strong\u003e on it with your team. Or, work on your own in a private branch, to experiment freely without the feeling of someone looking over your shoulder.\u003c/p\u003e\n\u003cp\u003eThat’s designer collaboration. We’re been force-fed developer collaboration workflows and for too long. It’s time we make designer collaboration, well…for designers.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003ePrototypes — That Actually Work\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e\u003cem\u003eWhy aren’t we building prototypes that actually work?\u003c/em\u003e Fully-functional mock apps that pull real live data. Where every button, every page, every navigation, and every interaction \u003cstrong\u003e\u003cem\u003eactually works.\u003c/em\u003e\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003eLet’s 10x the speed of of design → user testing → feedback with prototypes that actually work. Without wasting time writing code.\u003c/p\u003e\n\u003cp\u003eIt’s as simple as sharing a live URL to your design’s prototype — it’s that simple. Need to update your prototype in real time? Go right ahead 😉\u003c/p\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https://cdn-images-1.medium.com/max/1024/1*c0hpnc8mqnPav6ooNokDzQ.png\"\u003e\u003c/p\u003e\n\u003ch3\u003eJoin Us! — Let’s Take Our Creative Process Back.\u003c/h3\u003e\n\u003cp\u003eWe hope you’ll join us in building the simple, visual, intuitive Digital Design product that we’ve always dreamed of.\u003c/p\u003e\n\u003ch4\u003eComing Summer 2018 → \u003ca href=\"https://phase.com/\"\u003eGet Early Access.\u003c/a\u003e\u003c/h4\u003e\n\u003cul\u003e\n\u003cli\u003e\u003cstrong\u003ePhase Slack:\u003c/strong\u003e \u003ca href=\"https://phase.com/community/\"\u003ehttps://phase.com/community/\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eTwitter:\u003c/strong\u003e \u003ca href=\"https://twitter.com/phasecommunity\"\u003ehttps://twitter.com/phasecommunity\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eFacebook:\u003c/strong\u003e \u003ca href=\"https://www.facebook.com/phasecommunity/\"\u003ehttps://www.facebook.com/phasecommunity/\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https://cdn-images-1.medium.com/max/1024/1*cMohw_Www_1pbFeFq07yRg.png\"\u003e\u003cimg src=\"https://medium.com/_/stat?event=post.clientViewed\u0026amp;referrerSource=full_rss\u0026amp;postId=3f395c695d87\" width=\"1\" height=\"1\" alt=\"stat?event=post.clientViewed\u0026amp;referrerSou\"\u003e\u003c/p\u003e\n\u003chr\u003e\n\u003cp\u003e\u003ca href=\"https://blog.prototypr.io/meet-phase-hi-3f395c695d87\"\u003eMeet Phase — { hi! }\u003c/a\u003e was originally published in \u003ca href=\"https://blog.prototypr.io\"\u003ePrototypr\u003c/a\u003e on Medium, where people are continuing the conversation by highlighting and responding to this story.\u003c/p\u003e\n","seo":{"metaDesc":"","canonical":"https://prototypr.io/blog/meet-phase-hi/","opengraphModifiedTime":null,"opengraphPublishedTime":null,"opengraphTitle":"Meet Phase — { hi! } - Prototypr | Prototyping","opengraphDescription":"Published on | Prototyping: From UX to Front End \u0026mdash; Medium Phase.com Digital Design Reinvented https://medium.com/media/d13e94abd818c40d094d23dd402b7cb4/href Digital Design — From Scratch. We want to help you spend more time being creative. The Creative Process — that root of our passion and joy as designers. It’s oh so hard to describe, that feeling when your ideas take on an energy of [\u0026hellip;]","opengraphImage":null},"link":null,"date":"2018-02-08T10:06:39.000Z","legacyAttributes":{"link":"https://blog.prototypr.io/meet-phase-hi-3f395c695d87?source=rss----eb297ea1161a---4","imgUrl":null,"ogImage":"https://cdn-images-1.medium.com/max/1200/1*KTxIQI9XhoxOXGOgk7rBnQ.png"},"ogImage":{"opengraphImage":null},"tags":{"data":[]},"legacyFeaturedImage":{"id":"3469","mediaItemUrl":null,"thumb":null},"featuredImage":{"data":null},"relatedArticles":[{"localizations":{"data":[]},"title":"From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill","slug":"from-photography-to-nft-twisted-landscapes-with-nate-hill","legacyFeaturedImage":null,"featuredImage":{"data":{"attributes":{"url":"https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/8d8070381d986c2f80b500cdb024f518.png","formats":{"large":{"ext":".png","url":"https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/660d5848c774dd76de059e2754a7344f.png","hash":"660d5848c774dd76de059e2754a7344f","mime":"image/png","name":"large_Crossover Series NFTs.png","path":null,"size":453.71,"width":1000,"height":500},"small":{"ext":".png","url":"https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/c0b4b2eaabf40327313a30b374c2ac2a.png","hash":"c0b4b2eaabf40327313a30b374c2ac2a","mime":"image/png","name":"small_Crossover Series NFTs.png","path":null,"size":125.2,"width":500,"height":250},"medium":{"ext":".png","url":"https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/2346793057dd9a854f38fca4ef47a068.png","hash":"2346793057dd9a854f38fca4ef47a068","mime":"image/png","name":"medium_Crossover Series NFTs.png","path":null,"size":262.53,"width":750,"height":375},"thumbnail":{"ext":".png","url":"https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/63771b3a5ed23d97c829bbb601cb13ef.png","hash":"63771b3a5ed23d97c829bbb601cb13ef","mime":"image/png","name":"thumbnail_Crossover Series NFTs.png","path":null,"size":35.4,"width":245,"height":123}}}}}},{"localizations":{"data":[]},"title":"From Design System to ‘NFT Design System’: Creating TinyFaces","slug":"from-design-system-to-nft-design-system-creating-tinyfaces","legacyFeaturedImage":{"mediaItemUrl":"https://prototypr-media.sfo2.digitaloceanspaces.com/wp-content/uploads/2022/05/oZREIb60.png"},"featuredImage":{"data":null}},{"localizations":{"data":[]},"title":"Neurodiversity and Inclusion: Choosing Kinder Design","slug":"neurodiversity-and-inclusion-choosing-kinder-design","legacyFeaturedImage":{"mediaItemUrl":"https://prototypr-media.sfo2.digitaloceanspaces.com/wp-content/uploads/2022/05/A6E37491-A0FB-4EE3-9E7E-8542137F5D5A.jpeg"},"featuredImage":{"data":null}},{"localizations":{"data":[]},"title":"Web5 is here. Goodbye Web3? TBD.","slug":"web5-is-here-goodbye-web3-tbd","legacyFeaturedImage":null,"featuredImage":{"data":{"attributes":{"url":"https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/7698182c0f7e732a32a65bf390d5edba.png","formats":{"small":{"ext":".png","url":"https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/4f1459212f9509e4250976a94b308a67.png","hash":"4f1459212f9509e4250976a94b308a67","mime":"image/png","name":"small_652ccf22c8853584bde5553986a4eed0.png","path":null,"size":14.78,"width":500,"height":240},"medium":{"ext":".png","url":"https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/f0f57d2995a71c2df222337020a37e72.png","hash":"f0f57d2995a71c2df222337020a37e72","mime":"image/png","name":"medium_652ccf22c8853584bde5553986a4eed0.png","path":null,"size":23.77,"width":750,"height":360},"thumbnail":{"ext":".png","url":"https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/6b7c6fcaf6d91ca168caa67c73f77b8b.png","hash":"6b7c6fcaf6d91ca168caa67c73f77b8b","mime":"image/png","name":"thumbnail_652ccf22c8853584bde5553986a4eed0.png","path":null,"size":5.66,"width":245,"height":118}}}}}}],"author":{"data":null}}},"domain":"blog.prototypr.io","link":"https://blog.prototypr.io/meet-phase-hi-3f395c695d87?source=rss----eb297ea1161a---4","postDate":"\"2018-02-08T10:06:39.000Z\"","morePosts":[{"localizations":{"data":[]},"title":"From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill","slug":"from-photography-to-nft-twisted-landscapes-with-nate-hill","legacyFeaturedImage":null,"featuredImage":{"data":{"attributes":{"url":"https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/8d8070381d986c2f80b500cdb024f518.png","formats":{"large":{"ext":".png","url":"https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/660d5848c774dd76de059e2754a7344f.png","hash":"660d5848c774dd76de059e2754a7344f","mime":"image/png","name":"large_Crossover Series NFTs.png","path":null,"size":453.71,"width":1000,"height":500},"small":{"ext":".png","url":"https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/c0b4b2eaabf40327313a30b374c2ac2a.png","hash":"c0b4b2eaabf40327313a30b374c2ac2a","mime":"image/png","name":"small_Crossover Series NFTs.png","path":null,"size":125.2,"width":500,"height":250},"medium":{"ext":".png","url":"https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/2346793057dd9a854f38fca4ef47a068.png","hash":"2346793057dd9a854f38fca4ef47a068","mime":"image/png","name":"medium_Crossover Series NFTs.png","path":null,"size":262.53,"width":750,"height":375},"thumbnail":{"ext":".png","url":"https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/63771b3a5ed23d97c829bbb601cb13ef.png","hash":"63771b3a5ed23d97c829bbb601cb13ef","mime":"image/png","name":"thumbnail_Crossover Series NFTs.png","path":null,"size":35.4,"width":245,"height":123}}}}}},{"localizations":{"data":[]},"title":"From Design System to ‘NFT Design System’: Creating TinyFaces","slug":"from-design-system-to-nft-design-system-creating-tinyfaces","legacyFeaturedImage":{"mediaItemUrl":"https://prototypr-media.sfo2.digitaloceanspaces.com/wp-content/uploads/2022/05/oZREIb60.png"},"featuredImage":{"data":null}},{"localizations":{"data":[]},"title":"Neurodiversity and Inclusion: Choosing Kinder Design","slug":"neurodiversity-and-inclusion-choosing-kinder-design","legacyFeaturedImage":{"mediaItemUrl":"https://prototypr-media.sfo2.digitaloceanspaces.com/wp-content/uploads/2022/05/A6E37491-A0FB-4EE3-9E7E-8542137F5D5A.jpeg"},"featuredImage":{"data":null}},{"localizations":{"data":[]},"title":"Web5 is here. Goodbye Web3? TBD.","slug":"web5-is-here-goodbye-web3-tbd","legacyFeaturedImage":null,"featuredImage":{"data":{"attributes":{"url":"https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/7698182c0f7e732a32a65bf390d5edba.png","formats":{"small":{"ext":".png","url":"https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/4f1459212f9509e4250976a94b308a67.png","hash":"4f1459212f9509e4250976a94b308a67","mime":"image/png","name":"small_652ccf22c8853584bde5553986a4eed0.png","path":null,"size":14.78,"width":500,"height":240},"medium":{"ext":".png","url":"https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/f0f57d2995a71c2df222337020a37e72.png","hash":"f0f57d2995a71c2df222337020a37e72","mime":"image/png","name":"medium_652ccf22c8853584bde5553986a4eed0.png","path":null,"size":23.77,"width":750,"height":360},"thumbnail":{"ext":".png","url":"https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/6b7c6fcaf6d91ca168caa67c73f77b8b.png","hash":"6b7c6fcaf6d91ca168caa67c73f77b8b","mime":"image/png","name":"thumbnail_652ccf22c8853584bde5553986a4eed0.png","path":null,"size":5.66,"width":245,"height":118}}}}}}]},"__N_SSG":true},"page":"/blog/[slug]","query":{"slug":"meet-phase-hi"},"buildId":"ObAzqkbZVJyJ9VZeDkJMU","runtimeConfig":{"nextPlausiblePublicProxyOptions":{"customDomain":"https://analytics.prototypr.io","domain":"4.prototypr.io","selfHosted":true,"trailingSlash":false}},"isFallback":false,"dynamicIds":[7765,1477,7134,5683,5348,8721,8460,6675,9250],"gsp":true,"locale":"en-US","locales":["en-US","es-ES"],"defaultLocale":"en-US","scriptLoader":[]}</script></body></html>