{"id":2,"date":"2019-01-14T00:58:11","date_gmt":"2019-01-14T00:58:11","guid":{"rendered":"http:\/\/www.scoobr.com\/niblettes_old\/?p=78"},"modified":"2021-06-04T02:31:21","modified_gmt":"2021-06-04T02:31:21","slug":"tools","status":"publish","type":"post","link":"http:\/\/www.scoobr.com\/niblettes_old\/2019\/01\/14\/tools\/","title":{"rendered":"My UI Prototyping Toolkit (1 of 7)"},"content":{"rendered":"
\"\"<\/figure>\n

<\/h1>\n

We designers love to talk about tools and process. But too many articles are either sloppy laundry lists of usual suspects, idealized manifestos or idiosyncratic case studies.<\/p>\n

I want to try something different. I want to help you judge what could work for you and how, by sharing what works for me and how. I will organize things into the prototyping phases that I typically follow.<\/p>\n

    \n
  1. Concepts<\/li>\n
  2. Sketches<\/li>\n
  3. Wireframes<\/li>\n
  4. Interactive<\/li>\n
  5. Mockups<\/li>\n
  6. Functional<\/li>\n
  7. General<\/li>\n<\/ol>\n

    1. Concepts<\/h2>\n

    Capture, formalize, interrogate and connect ideas into coherent wholes. It is important to tell yourself the story first before telling others.<\/p>\n

    Tools<\/h3>\n
      \n
    1. Pencil and Paper<\/li>\n
    2. iA Writer<\/li>\n
    3. MindNode<\/li>\n
    4. Draw.io<\/li>\n<\/ol>\n

      \"\"<\/p>\n

      Pencil and Paper<\/h3>\n

      Every designer uses these. But what is important is how. I use them only to capture and interrogate volatile thoughts as they are happening.<\/p>\n

      Benefits<\/h4>\n
        \n
      • Speed<\/li>\n
      • Flexibility<\/li>\n
      • Ease<\/li>\n<\/ul>\n

        Drawbacks<\/h4>\n
          \n
        • Fixed<\/li>\n
        • Can’t copy\/paste to explore variations<\/li>\n
        • Opposite of DRY<\/li>\n
        • Very limited sharing<\/li>\n
        • Very limited collaboration<\/li>\n
        • Easy to misplace<\/li>\n<\/ul>\n

          Price<\/h4>\n
            \n
          • Pretty much free<\/li>\n<\/ul>\n

            \"\"<\/p>\n

            iA Writer
            \nMarkdown Editor<\/h3>\n

            iA Writer is a powerful and polished markdown text editor. It is all about focus. First, markdown itself frees you from formatting trivia. And second this app offers a distraction-free UI. Like a blank page, it has almost no UI at all.<\/p>\n

            My goal with iA Writer is to start formalizing vision, strategies, problems, solutions, thoughts. I do this first for myself and later to share with others. It won’t be perfect. It shouldn’t be perfect. The concepts only need to be sufficiently formalized to support the weight of subsequent phases.<\/p>\n

            Benefits<\/h4>\n
              \n
            • Visually minimal<\/li>\n
            • Markdown based editor<\/li>\n
            • Focused<\/li>\n
            • Integrated blog publishing to Medium and WordPress<\/li>\n<\/ul>\n

              Drawbacks<\/h4>\n
                \n
              • Markdown is Non visual, and some ideas at this stage can be hard to express textually<\/li>\n
              • As text, markdown requires reading<\/li>\n
              • iA Writer is very expensive for what it does<\/li>\n
              • iA Writer is in a market crowded with other solutions that may suit you better<\/li>\n<\/ul>\n

                Price<\/h4>\n
                  \n
                • $30. I find this very expensive compared to other markdown editors, and there are many good ones that are free. But I like it. So I paid.<\/li>\n<\/ul>\n

                  Alternatives I have Used:<\/h4>\n
                    \n
                  • MacDown, Quiver, Evernote, OneNote, SimpleNote, Notability, TextEdit, Notes, Contour, Scrivener, etc…<\/li>\n<\/ul>\n

                    \"\"<\/p>\n

                    Mindnode
                    \nMind Mapping<\/h3>\n

                    Mindnode is a minimalist mind mapping application. It provides just enough features to structure your thinking and stays out of the way so you can focus on content.<\/p>\n

                    My goal in mind mapping is to structure things and their logical relations. These could be screens, concepts, goals, component states, actions, almost anything. At first I just want to inventory the “stuff.” After establishing a basic inventory I want to discover and model the inherent patterns, affinities and gaps in the “stuff”.<\/p>\n

                    Benefits<\/h4>\n
                      \n
                    • Simple UI<\/li>\n
                    • Simple to use<\/li>\n
                    • Limited features help keep me focused on substance<\/li>\n<\/ul>\n

                      Drawbacks:<\/h4>\n
                        \n
                      • Mac only<\/li>\n
                      • Does not support connecting branches back together into downstream nodes<\/li>\n
                      • Collaboration options are limited to sending exported files<\/li>\n<\/ul>\n

                        Price<\/h4>\n
                          \n
                        • $40. This is a good price for a mind mapping of this quality.<\/li>\n<\/ul>\n

                          Alternatives I have Used:<\/h4>\n
                            \n
                          • Xmind.<\/strong> More complex and more expensive than MindNode. It is fully cross platform (Windows, Mac, Linux, Mobile) and provides a helpful Gantt chart view of your map. This view allows Xmind to bridge across conceptualization and project management better than MindNode.<\/li>\n<\/ul>\n

                            \"\"<\/p>\n

                            Draw.io – Identify and Model Actions<\/h3>\n

                            Draw.io is a free browser-base flowchart tool. It is sufficiently featured UX design. I usually avoid browser based design tools. They aren’t responsive enough and I like owning control of my core tools. But in this case, free wins.<\/p>\n

                            My goal in flowcharting is to model user and system actions. I do this by identifying the user’s tactical goals and constructing the sequences of necessary cause-and-effect steps to achieve them. This is the heart of UX design, and I spend a lot of effort keeping screen designs and flows in sync.<\/p>\n

                            Benefits<\/h4>\n
                              \n
                            • Simple enough<\/li>\n
                            • Free<\/li>\n
                            • Easy collaboration<\/li>\n<\/ul>\n

                              Drawbacks<\/h4>\n
                                \n
                              • It isn’t optimized for design, so it has a lot of features that we don’t typically need<\/li>\n
                              • For complex diagrams connection lines require a lot of manual intervention<\/li>\n
                              • I would prefer an infinite canvas over tiled pages<\/li>\n<\/ul>\n

                                Price<\/h4>\n
                                  \n
                                • Free<\/li>\n<\/ul>\n

                                  Alternatives I Have Used<\/h4>\n
                                    \n
                                  • LucidChart.<\/strong> Nearly identical in most ways. Except it seems to have more features (which complicates usage) and costs.<\/li>\n
                                  • OmniGraffle.<\/strong> A very mature solution. However it is much more expensive and like nearly all of Omni’s UIs, it is needlessly clumsy and convoluted. I dislike every Omni UI that I have used.<\/li>\n<\/ul>\n

                                     <\/p>\n","protected":false},"excerpt":{"rendered":"

                                    We designers love to talk about tools and process. But too many articles are either sloppy laundry lists of usual suspects, idealized manifestos or idiosyncratic case studies. I want to try something different. I want to help you judge what could work for you and how, by sharing what works for me and how. I […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[2],"tags":[],"class_list":["post-2","post","type-post","status-publish","format-standard","hentry","category-design"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/sarCYG-tools","_links":{"self":[{"href":"http:\/\/www.scoobr.com\/niblettes_old\/wp-json\/wp\/v2\/posts\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.scoobr.com\/niblettes_old\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.scoobr.com\/niblettes_old\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.scoobr.com\/niblettes_old\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/www.scoobr.com\/niblettes_old\/wp-json\/wp\/v2\/comments?post=2"}],"version-history":[{"count":3,"href":"http:\/\/www.scoobr.com\/niblettes_old\/wp-json\/wp\/v2\/posts\/2\/revisions"}],"predecessor-version":[{"id":326,"href":"http:\/\/www.scoobr.com\/niblettes_old\/wp-json\/wp\/v2\/posts\/2\/revisions\/326"}],"wp:attachment":[{"href":"http:\/\/www.scoobr.com\/niblettes_old\/wp-json\/wp\/v2\/media?parent=2"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.scoobr.com\/niblettes_old\/wp-json\/wp\/v2\/categories?post=2"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.scoobr.com\/niblettes_old\/wp-json\/wp\/v2\/tags?post=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}