6 ms·

Show HN: TinyUX – Grid based low-fi wireframing on your mobile phone

112 points by juliushuijnk 4y ago

You tap icons to create a wireframe, or do some visual brainstorming. Then export the image to share on Slack, Gitlab, etc. I wanted to work on neural net that interprets an imported image of a wireframe, to then manipulate it inside an app. Figured it would be best to first build the wireframing app. So I created TinyUX. It's released as quickly as possible this influenced some choices: - While created in React Native, it's Android only. - It's paid only (~$5). While freemium might make more sense, this was quicker to release, since in-app-purchases in RN is not trivial. First app I created that's not free, so that's an experiment too. - There are no online features, all is stored on the device. Looking to validate with UX designers, but all feedback is welcome.

marban 4y ago
https://balsamiq.com/wireframes/ https://balsamiq.com/wireframes/
- robertlagrant 4y ago
  Love Balsamiq.
- juliushuijnk 4y ago
  Yes Balsamiq is nice. TinyUX is a mobile app, so unique in that sense. Also TinyUX is cheaper ($5). Price will get up once the app gains in features. Once there is traction adding online features, web- and desktop interfaces will also make sense.
devmor 4y ago
Oh hey, this is actually nice and fills a niche that I can use - on-the-fly layout prototyping with clients. If it was available on iPad, I'd pay $5 for it personally, $10 if it could export UML or some kind of XML definition.
- juliushuijnk 4y ago
  Hi, planning to do iOS release next year. It's built in React Native, so should be easy in theory, only thing is that don't have a have personal OSX laptop (required for publishing) nor Apple developer account at the moment. Your not the first to ask for it, so I guess I'll have to figure it out. > $10 if it could export UML or some kind of XML definition Interesting. One of the features I plan to work on this week is export & import of source files. My first plan is to 'brute force' it, and export a .json file with a attributes for each cell in the grid. But could also be yml, or even XML I guess.
  - alistairclark7 4y ago
    Last time I made a react native app I used https://www.macincloud.com/ https://www.macincloud.com/ to publish on iOS. I'm not affiliated and haven't used them in about 3 years though. It was a little bit of hassle but cheaper than buying a mac in the short term.
    - juliushuijnk 4y ago
      My wife is buying a new laptop, hope to be able to nudge her in the direction of Macbook Air. I do actually have one in my possession for day-job, but don't want to mix private projects on that laptop.
  - devmor 4y ago
    Used mac minis are your friend when it comes to having an Apple box just to build releases! The reason I mentioned UML/XML are because those are the languages used by most popular wireframing apps for cross compatibility - if you do decide to add that feature, I would look into how they implement it specifically and it will probably save you a lot of work too!
    - juliushuijnk 4y ago
      Thanks for the tips. Thinking about creating an open source repo for a script that will turn my export json in any other sort of file-format. Wrote an articla in 2017 about the need for universal .ux files. https://medium.com/proof-of-concept/creating-a-true-ux-tool-part-1-source-files-46faa29094cf https://medium.com/proof-of-concept/creating-a-true-ux-tool-... But have to do some more re-thinking on the specifics.
atomicnature 4y ago
Great stuff. We need more serious and sophisticated mobile apps. During the initial Brainstorming for handheld devices, the inventors had stuff like this in mind. It's a tool for authoring, not just consumption.
- juliushuijnk 4y ago
  Yes!
- rubymamis 4y ago
  Is this GPT?
  - juliushuijnk 4y ago
    Aren't we all?
brainchild-adam 4y ago
Nice! Thank you for sharing. It's probably not something you'd want to prioritize, and you mentioned releasing it quickly influenced some of your decisions. But a way to pay outside of the PlayStore would be nice for those of us who chose to or cannot use it for payment.
- juliushuijnk 4y ago
  Hi, I'm open to suggestions on how. On an alternative store or something like that? Google wont allow distribution via Google Play, and payment via third party I think.
  - brainchild-adam 4y ago
    Thank you for being open to the idea. Having no personal experience distributing applications against payment, all I can draw on is my experience as a customer. Threema recently introduced their app, which requires a paid-for license, through F-Droid using their own repository and license shop parallel to their established offer on GooglePlay. I can only echo rchaud in assuming in theory it should be possible to sell the license and do the check independent of Google like desktop software has been doing for decades. Whether this is something worth your time is, of course, a totally different question. Just wanted to make you aware of this in case you weren't.
  - rchaud 4y ago
    Do the Play Store rules allow you to post an APK with a license key on Gumroad or Shopify or some other provider?
    - juliushuijnk 4y ago
      I'd have to look into it. But presumably it should be possible.
bgorman 4y ago
You need to get an iOS app out yesterday. The UX/design world is filled with Apple loyalists.
- juliushuijnk 4y ago
  Yes.
specialist 4y ago
This is just terrific. -- Old man shouting at clouds... I learned how to do low-fidelity paper prototyping from Luke Hohmann at OOPSLA 1998 in Vancouver. https://www.goodreads.com/book/show/2017112.Oopsla_98 https://www.goodreads.com/book/show/2017112.Oopsla_98 Just like this: "Lo-fi Paper Prototype Example" https://www.youtube.com/watch?v=TRlcZJpl0dw https://www.youtube.com/watch?v=TRlcZJpl0dw I can't quickly find Luke's paper online. IIRC, this book is pretty terrific: "Paper Prototyping: The Fast and Easy Way to Design and Refine User Interfaces" [2004] https://www.sciencedirect.com/book/9781558608702/paper-prototyping https://www.sciencedirect.com/book/9781558608702/paper-proto... Here's the thing. I have near religious devotion to lo-fi prototyping. I really thought it'd become the norm. Back then, I envisioned UIs would be developed like: All the requirements gathering and analysis. User profiles, use cases, creative writing, story boards. Then convert story boards into paper prototypes. Then validate paper prototypes with users. Usability testing where the devs pretend to be the computer. Iterate. Then convert paper prototypes into code mockups. More usability testing. Iterate. Then convert mockups into an app. For this to work, be practical, the cost of change has to be dramatically reduced. To do that, there needs to be a workflow that connects paper to mockups to app. In my future perfect world, TinyUX (Balsamiq, Figma, etc) must first ingest paper prototypes and generate code. Something declarative, like SwingUI. Just enough meat and bones to hand off to devs. Who can then flesh it out or reimplement it.
- juliushuijnk 4y ago
  Yes, the plan is to let it import pictures of paper prototypes, use a neural net to interpret it and translate it to ux-source code. Then you can manipulate it and output it to other tools & platforms. Did some early experiments a while back, and have quite some time in December, so hope to make some progress to this end. Tweets about the Neural Net experiments: - https://twitter.com/Juliu/status/1548691577677152257 https://twitter.com/Juliu/status/1548691577677152257 - https://twitter.com/Juliu/status/1549425680718467079 https://twitter.com/Juliu/status/1549425680718467079 One of the challenges is that the grid size is not known in advance. Going to watch all the Karpathy videos and hope to figure it out.
  - 4y ago
rchaud 4y ago
I like the idea, reminds me of OmniGraffle from many years ago, mixed in with a bit of Excalidraw? Thanks for making an Android app, the platform is lacking in design tools in general. And props to you for making it a flat fee instead of the freemium-to-subscription pipeline that most other app businesses feel compelled to do.
- juliushuijnk 4y ago
  Thanks! Gives me the opportunity to mention that the app does not will NEVER have ads. There will also always be a single-purchase version. The whole purpose of the tool is to help people create and be innovative. Being pushed ads in your face is the opposite. Although I do think the freemium-to-subscription also makes sense here. A free 'crippled' version to make it easier for people to taste before they buy. And for online features (currently the app is fully offline) I would need some sort of subscription to cover server costs.
- juliushuijnk 4y ago
  Also thanks for the link to Excalidraw, didn't know that site.
CyberDildonics 4y ago
Is wireframing newspeak for creating a user interface?
- juliushuijnk 4y ago
  Good excuse for me to explain what the app is all about. In user experience design (UXD or UX design) or interaction design, or however you like to call it, the user interface (UI) is the whole thing that the user interfaces with. Developed and with the final design. A wireframe is a step towards that user interface. Low-fi, meaning low fidelity, meaning with low details to just focus on the big picture stuff, helps to define what the user interface needs to do. It's called a wire-frame, since the lines can be seen as wires, and it's all mostly lines & icons. The idea is that you don't want to get feedback on design details at this stage in the process. Usually such a wireframe is shared with the team (devs, designers, product owner, etc) who give feedback and this process iterates a couple of times. Often adding more detail with each iteration. Quite often a low-fi wireframe is enough for the team to get going. If there is a website with design, the front-end developer knows what to do, keeping the visual designer and the UX designer in the loop. This is the use-case TinyUX aims to help out. For larger, more complex UI, like banking software, you probably also need hi-fi wireframes, clickable prototypes, etc. Here tools like Invision, Figma, Axure are often used. All these hi-fi tools lack a low-fi mobile app. And the UI of these apps would be too complex, because they would find it hard not to put all their neat hi-fi features inside. Since they have good UX designers they'd rather not do that, and decide to make their app only be a viewer of wireframes and prototypes, with feedback stuff. This gives me the chance to enter the market in a low-fi niche that I hope to expand from :).
  - CyberDildonics 4y ago
    Why wouldn't someone just position buttons in photoshop or some image editor? Or just layout the actual program and take a screenshot? It doesn't really take much time to declare a user interface.
    - juliushuijnk 4y ago

112 points by juliushuijnk 4y ago

marban 4y ago

https://balsamiq.com/wireframes/ https://balsamiq.com/wireframes/

robertlagrant 4y ago
Love Balsamiq.
juliushuijnk 4y ago
Yes Balsamiq is nice. TinyUX is a mobile app, so unique in that sense. Also TinyUX is cheaper ($5). Price will get up once the app gains in features. Once there is traction adding online features, web- and desktop interfaces will also make sense.

devmor 4y ago

Oh hey, this is actually nice and fills a niche that I can use - on-the-fly layout prototyping with clients. If it was available on iPad, I'd pay $5 for it personally, $10 if it could export UML or some kind of XML definition.

juliushuijnk 4y ago
Hi, planning to do iOS release next year. It's built in React Native, so should be easy in theory, only thing is that don't have a have personal OSX laptop (required for publishing) nor Apple developer account at the moment. Your not the first to ask for it, so I guess I'll have to figure it out. > $10 if it could export UML or some kind of XML definition Interesting. One of the features I plan to work on this week is export & import of source files. My first plan is to 'brute force' it, and export a .json file with a attributes for each cell in the grid. But could also be yml, or even XML I guess.
- alistairclark7 4y ago
  Last time I made a react native app I used https://www.macincloud.com/ https://www.macincloud.com/ to publish on iOS. I'm not affiliated and haven't used them in about 3 years though. It was a little bit of hassle but cheaper than buying a mac in the short term.
  - juliushuijnk 4y ago
    My wife is buying a new laptop, hope to be able to nudge her in the direction of Macbook Air. I do actually have one in my possession for day-job, but don't want to mix private projects on that laptop.
- devmor 4y ago
  Used mac minis are your friend when it comes to having an Apple box just to build releases! The reason I mentioned UML/XML are because those are the languages used by most popular wireframing apps for cross compatibility - if you do decide to add that feature, I would look into how they implement it specifically and it will probably save you a lot of work too!
  - juliushuijnk 4y ago
    Thanks for the tips. Thinking about creating an open source repo for a script that will turn my export json in any other sort of file-format. Wrote an articla in 2017 about the need for universal .ux files. https://medium.com/proof-of-concept/creating-a-true-ux-tool-part-1-source-files-46faa29094cf https://medium.com/proof-of-concept/creating-a-true-ux-tool-... But have to do some more re-thinking on the specifics.

atomicnature 4y ago

Great stuff. We need more serious and sophisticated mobile apps. During the initial Brainstorming for handheld devices, the inventors had stuff like this in mind. It's a tool for authoring, not just consumption.

juliushuijnk 4y ago
Yes!
rubymamis 4y ago
Is this GPT?
- juliushuijnk 4y ago
  Aren't we all?

brainchild-adam 4y ago

Nice! Thank you for sharing. It's probably not something you'd want to prioritize, and you mentioned releasing it quickly influenced some of your decisions. But a way to pay outside of the PlayStore would be nice for those of us who chose to or cannot use it for payment.

juliushuijnk 4y ago
Hi, I'm open to suggestions on how. On an alternative store or something like that? Google wont allow distribution via Google Play, and payment via third party I think.
- brainchild-adam 4y ago
  Thank you for being open to the idea. Having no personal experience distributing applications against payment, all I can draw on is my experience as a customer. Threema recently introduced their app, which requires a paid-for license, through F-Droid using their own repository and license shop parallel to their established offer on GooglePlay. I can only echo rchaud in assuming in theory it should be possible to sell the license and do the check independent of Google like desktop software has been doing for decades. Whether this is something worth your time is, of course, a totally different question. Just wanted to make you aware of this in case you weren't.
- rchaud 4y ago
  Do the Play Store rules allow you to post an APK with a license key on Gumroad or Shopify or some other provider?
  - juliushuijnk 4y ago
    I'd have to look into it. But presumably it should be possible.

bgorman 4y ago

You need to get an iOS app out yesterday. The UX/design world is filled with Apple loyalists.

juliushuijnk 4y ago
Yes.

specialist 4y ago

This is just terrific. -- Old man shouting at clouds... I learned how to do low-fidelity paper prototyping from Luke Hohmann at OOPSLA 1998 in Vancouver. https://www.goodreads.com/book/show/2017112.Oopsla_98 https://www.goodreads.com/book/show/2017112.Oopsla_98 Just like this: "Lo-fi Paper Prototype Example" https://www.youtube.com/watch?v=TRlcZJpl0dw https://www.youtube.com/watch?v=TRlcZJpl0dw I can't quickly find Luke's paper online. IIRC, this book is pretty terrific: "Paper Prototyping: The Fast and Easy Way to Design and Refine User Interfaces" [2004] https://www.sciencedirect.com/book/9781558608702/paper-prototyping https://www.sciencedirect.com/book/9781558608702/paper-proto... Here's the thing. I have near religious devotion to lo-fi prototyping. I really thought it'd become the norm. Back then, I envisioned UIs would be developed like: All the requirements gathering and analysis. User profiles, use cases, creative writing, story boards. Then convert story boards into paper prototypes. Then validate paper prototypes with users. Usability testing where the devs pretend to be the computer. Iterate. Then convert paper prototypes into code mockups. More usability testing. Iterate. Then convert mockups into an app. For this to work, be practical, the cost of change has to be dramatically reduced. To do that, there needs to be a workflow that connects paper to mockups to app. In my future perfect world, TinyUX (Balsamiq, Figma, etc) must first ingest paper prototypes and generate code. Something declarative, like SwingUI. Just enough meat and bones to hand off to devs. Who can then flesh it out or reimplement it.

juliushuijnk 4y ago
Yes, the plan is to let it import pictures of paper prototypes, use a neural net to interpret it and translate it to ux-source code. Then you can manipulate it and output it to other tools & platforms. Did some early experiments a while back, and have quite some time in December, so hope to make some progress to this end. Tweets about the Neural Net experiments: - https://twitter.com/Juliu/status/1548691577677152257 https://twitter.com/Juliu/status/1548691577677152257 - https://twitter.com/Juliu/status/1549425680718467079 https://twitter.com/Juliu/status/1549425680718467079 One of the challenges is that the grid size is not known in advance. Going to watch all the Karpathy videos and hope to figure it out.
- 4y ago

rchaud 4y ago

I like the idea, reminds me of OmniGraffle from many years ago, mixed in with a bit of Excalidraw? Thanks for making an Android app, the platform is lacking in design tools in general. And props to you for making it a flat fee instead of the freemium-to-subscription pipeline that most other app businesses feel compelled to do.

juliushuijnk 4y ago
Thanks! Gives me the opportunity to mention that the app does not will NEVER have ads. There will also always be a single-purchase version. The whole purpose of the tool is to help people create and be innovative. Being pushed ads in your face is the opposite. Although I do think the freemium-to-subscription also makes sense here. A free 'crippled' version to make it easier for people to taste before they buy. And for online features (currently the app is fully offline) I would need some sort of subscription to cover server costs.
juliushuijnk 4y ago
Also thanks for the link to Excalidraw, didn't know that site.

CyberDildonics 4y ago

Is wireframing newspeak for creating a user interface?

juliushuijnk 4y ago
Good excuse for me to explain what the app is all about. In user experience design (UXD or UX design) or interaction design, or however you like to call it, the user interface (UI) is the whole thing that the user interfaces with. Developed and with the final design. A wireframe is a step towards that user interface. Low-fi, meaning low fidelity, meaning with low details to just focus on the big picture stuff, helps to define what the user interface needs to do. It's called a wire-frame, since the lines can be seen as wires, and it's all mostly lines & icons. The idea is that you don't want to get feedback on design details at this stage in the process. Usually such a wireframe is shared with the team (devs, designers, product owner, etc) who give feedback and this process iterates a couple of times. Often adding more detail with each iteration. Quite often a low-fi wireframe is enough for the team to get going. If there is a website with design, the front-end developer knows what to do, keeping the visual designer and the UX designer in the loop. This is the use-case TinyUX aims to help out. For larger, more complex UI, like banking software, you probably also need hi-fi wireframes, clickable prototypes, etc. Here tools like Invision, Figma, Axure are often used. All these hi-fi tools lack a low-fi mobile app. And the UI of these apps would be too complex, because they would find it hard not to put all their neat hi-fi features inside. Since they have good UX designers they'd rather not do that, and decide to make their app only be a viewer of wireframes and prototypes, with feedback stuff. This gives me the chance to enter the market in a low-fi niche that I hope to expand from :).
- CyberDildonics 4y ago
  Why wouldn't someone just position buttons in photoshop or some image editor? Or just layout the actual program and take a screenshot? It doesn't really take much time to declare a user interface.
  - juliushuijnk 4y ago