{"version":3,"sources":["webpack:///./src/components/articlesLayout.js","webpack:///./src/pages/unlocking-ideas.js","webpack:///./src/images/72avatar.png"],"names":["PostTitle","props","React","createElement","className","title","subtitle","Author","src","avatar72","alt","href","target","rel","Subscribe","width","height","style","border","background","borderRadius","GridType2","header","children","GridType3","image","altText","GridType4","MidColumn","maxWidth","margin","Spacer","defaultProps","ArticleUnlockingIdeas","Layout","SEO","module","exports"],"mappings":"4FAAA,8TAKO,SAASA,EAAUC,GACxB,OACEC,IAAAC,cAAA,OAAKC,UAAU,aACbF,IAAAC,cAAA,UAAKF,EAAMI,OACXH,IAAAC,cAAA,SAAIF,EAAMK,WAKT,SAASC,EAAON,GACrB,OACEC,IAAAC,cAAA,OAAKC,UAAU,UACbF,IAAAC,cAAA,WACED,IAAAC,cAAA,OAAKK,IAAKC,IAAUC,IAAK,YAE3BR,IAAAC,cAAA,WACED,IAAAC,cAAA,UAAI,oBACJD,IAAAC,cAAA,SAAG,+BAEDD,IAAAC,cAAA,WACAD,IAAAC,cAAA,KAAGQ,KAAK,kCAAkCC,OAAO,SAASC,IAAI,uBAAsB,cAOvF,SAASC,EAAUb,GACzB,OACCC,IAAAC,cAAA,OAAKC,UAAU,kBACdF,IAAAC,cAAA,UACAK,IAAI,oCACJO,MAAM,MACNC,OAAO,MACPC,MAAO,CAAEC,OAAQ,iBAAkBC,WAAY,QAASC,aAAc,WA2BlE,SAASC,EAAUpB,GACxB,OACEC,IAAAC,cAAA,WACED,IAAAC,cAAA,UAAKF,EAAMqB,QACXpB,IAAAC,cAAA,OAAKC,UAAU,eACZH,EAAMsB,WAUR,SAASC,EAAUvB,GACxB,OACEC,IAAAC,cAAA,OAAKC,UAAU,oBACbF,IAAAC,cAAA,YACAD,IAAAC,cAAA,WACED,IAAAC,cAAA,OAAKK,IAAKP,EAAMwB,MAAOf,IAAKT,EAAMyB,WAEpCxB,IAAAC,cAAA,YACAD,IAAAC,cAAA,WAAMF,EAAMsB,UACZrB,IAAAC,cAAA,aASC,SAASwB,EAAU1B,GACxB,OACEC,IAAAC,cAAA,OAAKC,UAAU,oBACbF,IAAAC,cAAA,WACED,IAAAC,cAAA,OAAKK,IAAKP,EAAMwB,MAAOf,IAAKT,EAAMyB,WAEpCxB,IAAAC,cAAA,YACAD,IAAAC,cAAA,WAAMF,EAAMsB,WAKX,SAASK,EAAU3B,GACxB,OACEC,IAAAC,cAAA,OAAKc,MAAO,CAAEF,MAAO,OAAQc,SAAU5B,EAAM4B,SAAUC,OAAQ,gBAC5D7B,EAAMsB,UASN,SAASQ,IACd,OAAO7B,IAAAC,cAAA,OAAKC,UAAU,kBANxBwB,EAAUI,aAAe,CACvBH,SAAU,U,kCCvHZ,oEA+GeI,UAnGeA,IAC5B/B,IAAAC,cAAC+B,IAAM,KACLhC,IAAAC,cAACgC,IAAG,CAAC9B,MAAM,oBAEXH,IAAAC,cAACH,IAAS,CACRK,MAAM,kBACNC,SAAS,2EAGXJ,IAAAC,cAACI,IAAM,MAEPL,IAAAC,cAACyB,IAAS,KACR1B,IAAAC,cAAA,UAAI,gCACJD,IAAAC,cAAA,SAAG,0DACHD,IAAAC,cAAA,SAAG,yRAMHD,IAAAC,cAAA,SAAG,uJAOLD,IAAAC,cAAC4B,IAAM,MAEP7B,IAAAC,cAACyB,IAAS,CAACC,SAAS,SAClB3B,IAAAC,cAAA,SAAG,2MAKHD,IAAAC,cAAA,SAAG,qZAQHD,IAAAC,cAAA,SAAG,qPAMHD,IAAAC,cAAA,SAAG,kXAULD,IAAAC,cAAC4B,IAAM,MAEP7B,IAAAC,cAACyB,IAAS,KACR1B,IAAAC,cAAA,SAAG,kNAIDD,IAAAC,cAAA,SAAG,oTAQLD,IAAAC,cAAA,SAAG,qNAKHD,IAAAC,cAAA,SAAG,sGAIHD,IAAAC,cAAA,SAAG,gaAWLD,IAAAC,cAAC4B,IAAM,MACV7B,IAAAC,cAACW,IAAS,Q,qBC3GXsB,EAAOC,QAAU,IAA0B","file":"component---src-pages-unlocking-ideas-js-51b0ffc8f64ee95a058c.js","sourcesContent":["import React from \"react\"\n\n//Assets\nimport avatar72 from \"../images/72avatar.png\";\n\nexport function PostTitle(props) {\n  return (\n    <div className=\"postTitle\">\n      <h1>{props.title}</h1>\n      <p>{props.subtitle}</p>\n    </div>\n  )\n}\n\nexport function Author(props) {\n  return (\n    <div className=\"author\">\n      <div>\n        <img src={avatar72} alt={\"Avatar\"} />\n      </div>\n      <div>\n        <h3>Juan Flores Mena</h3>\n        <p>\n          Product Design & Prototyping\n          <br />\n          <a href=\"https://www.threads.net/@72mena\" target=\"_blank\" rel=\"noopener noreferrer\">@72mena</a>\n        </p>\n      </div>\n    </div>\n  )\n}\n\nexport function Subscribe(props){\n\treturn(\n\t\t<div className=\"notesSubscribe\">\n\t\t\t<iframe \n\t\t\tsrc=\"https://72mena.substack.com/embed\" \n\t\t\twidth=\"480\" \n\t\t\theight=\"350\" \n\t\t\tstyle={{ border: '1px solid #EEE', background: 'white', borderRadius: '12px' }} \n\t\t\t>\n\t\t\t</iframe>\n\t\t</div>\n\t)\n}\n\n/** \n * 1 main core column of text, off-centered, with white space to the sides.\n * Use this for the main content, and consider the side notes attribute as needed.\n */\nexport function GridType1(props) {\n  return (\n    <div>\n      <h2>{props.header}</h2>\n      <div className=\"sectionLeft\">\n        {props.children}\n      </div>\n    </div>\n  )\n}\n\n\n/** \n * A block of text aligned to the left, with white space to the right.\n * Use this for intro sections.\n */\nexport function GridType2(props) {\n  return (\n    <div>\n      <h2>{props.header}</h2>\n      <div className=\"sectionLeft\">\n        {props.children}\n      </div>\n    </div>\n  )\n}\n\n/** \n * 2 columns of content with additional space to the sides.\n * Use this to add paragraphs next to the images.\n */\nexport function GridType3(props) {\n  return (\n    <div className=\"gridSectionType3\">\n      <div />\n      <div>\n        <img src={props.image} alt={props.altText} />\n      </div>\n      <div />\n      <div>{props.children}</div>\n      <div />\n    </div>\n  )\n}\n\n/** \n * 2 columns of content without space to the sides.\n * Use this create variations on the layout between Type 3 and Type 4.\n */\nexport function GridType4(props) {\n  return (\n    <div className=\"gridSectionType4\">\n      <div>\n        <img src={props.image} alt={props.altText} />\n      </div>\n      <div />\n      <div>{props.children}</div>\n    </div>\n  )\n}\n\nexport function MidColumn(props){\n  return(\n    <div style={{ width: \"100%\", maxWidth: props.maxWidth, margin: \"0 auto 40px\" }}>\n      {props.children}\n    </div>\n  )\n}\nMidColumn.defaultProps = {\n  maxWidth: \"650px\",\n}\n\n\nexport function Spacer(){\n  return <div className=\"customDivider\" />\n}\n","import React from 'react'\n\nimport Layout from \"../components/layout\"\nimport SEO from \"../components/seo\"\n\nimport { PostTitle, Author, MidColumn, Spacer, Subscribe } from '../components/articlesLayout'\n\n\n//Assets\n// import layoutAndroid from \"../images/post-assets/keyboard-experiences/layoutAndroid.png\"\n\n\nconst ArticleUnlockingIdeas = () => (\n  <Layout>\n    <SEO title=\"Unlocking Ideas\" />\n\n    <PostTitle\n      title=\"Unlocking Ideas\"\n      subtitle=\"Notes on the role of exploration in Prototyping and Interaction Design\"\n    />\n\n    <Author />\n\n    <MidColumn>\n      <h2>On observation & exploration</h2>\n      <p>Deep observation improves prototyping, and vice versa.</p>\n      <p>\n        Picture a guitarist composing a new song. His eyes are closed while his\n        mind is exploring different rhythms and melodies through the skill of\n        his fingers. His hands dance between previously learned chords, a hard\n        earned technique that improved his capacity to unlock new ideas.\n      </p>\n      <p>\n        At the same time, there’s people creating music with the help of\n        software, without ever needing to touch a real musical instrument in the\n        process.\n      </p>\n    </MidColumn>\n\n    <Spacer />\n\n    <MidColumn maxWidth=\"750px\">\n      <p>\n        There’s something similar going on with designers right now: In order to\n        explore ideas for new interactions, the “chords” to learn are made of\n        variables, methods and functions: programming languages.\n      </p>\n      <p>\n        Obviously, one doesn’t need to learn to code in order to prototype\n        ideas. Specially when there are a lot of options out there using “no\n        coding required” as their selling point. But just as the guitarist is\n        able to experience the flow of ideas being leveraged by his mind through\n        his hands, a designer can scrutinize the feasibility and practicability\n        of interactions and navigation flows through code.\n      </p>\n      <p>\n        Debates of “should designers learn to code?” are a waste of time. Let’s\n        just be clear on this: an intermediate level of javascript will lead you\n        nowhere as a programmer, but it will greatly expand your skills and\n        opportunities as a designer.\n      </p>\n      <p>\n        The key thing here is being able to observe the flow of ideas taking\n        shape. If learning code helps, then great. If having pen & paper is\n        enough for you, that’s OK. But take a moment to close your eyes and\n        experience what’s going on in your head, some of the best solutions\n        might end up buried for relying too much on apps that do all the\n        (limited) thinking for you.\n      </p>\n    </MidColumn>\n\n    <Spacer />\n\n    <MidColumn>\n      <p>\n        I’ve worked in projects in which Axure or InVision were more than\n        enough: great tools to communicate an idea. But honestly, there’s stuff\n        that needs to be carefully explained as part of the sales pitch, like\n        <i>\n          “ok, let’s imagine that in the final build this button is going to be\n          animated from here to here, and the background will change at the\n          exact same time” or “this scrolls the whole content because it’s just\n          a prototype, but let’s just say for now that the timestamps will be\n          sticky in the final version.”\n        </i>\n      </p>\n      <p>\n        That’s acceptable, but sometimes we are demanding too much from our\n        partners/stakeholders and they might not picture the same thing we have\n        in mind; hence the discussion falls short without anyone noticing it.\n      </p>\n      <p>\n        That’s why I‘m constantly looking for more options, and yes, Framer\n        Studio offers some real power!\n      </p>\n      <p>\n        When we talk about high-fidelity prototypes, usually we mean it just as\n        “high-fidelity UI”, but Interaction Design keeps evolving, and it’s time\n        to stop cheapening the “high-fidelity prototype” term, as it should now\n        englobe the triad of UI, motion and interactions, for the sake of\n        bringing better discussions between designers and developers, to raise\n        the bar in our industry, and to keep unlocking new ideas.\n      </p>\n    </MidColumn>\n\n\n    <Spacer />\n\t<Subscribe />\n  </Layout>\n)\n\nexport default ArticleUnlockingIdeas\n\n\n","module.exports = __webpack_public_path__ + \"static/72avatar-58f3a827f729bedb547b9452b94efe01.png\";"],"sourceRoot":""}