Show HN: TinyUX – Grid based low-fi wireframing on your mobile phone (tinyux.app)
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.
34 comments
[ 2.5 ms ] story [ 86.0 ms ] threadOnce there is traction adding online features, web- and desktop interfaces will also make sense.
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.
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.
I do actually have one in my possession for day-job, but don't want to mix private projects on that laptop.
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!
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-...
But have to do some more re-thinking on the specifics.
So you don't need a developer account for development. If you use the same icloud account that's on the phone (I use an iPhone SE original edition), you can login to XCode and deploy your app to your phone for 7 days I believe. Great for development.
You're SOL on the Macbook though, ask around, maybe you have a buddy that can loan you one (or get a cheapo used macbook air with a busted display or something)
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.
Google wont allow distribution via Google Play, and payment via third party I think.
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.
--
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
Just like this:
"Lo-fi Paper Prototype Example" 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-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:
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.
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/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.
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.
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.
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 :).
If you are doing things by yourself, this can be the way the go. But even then I think it helps to first think about the big picture.
Reasons to first do low-fi wireframing:
- It's the quickest way to find out if you understand the requirements of the task.
- It takes more time to do the details, in that time you could have gotten your first feedback. Like from the developer who says there is a component already built that looks like your wireframe, but somwhat different. Then you get to talk about that. Perhaps you can say "Yes, use that component" and your job is done.
- You might get the wrong feedback, like; why did you not use our company color blue for that button? Why is the tablet version looking so bad? Why didn't you consult with legal department about those texts? etc.
- Trying to design the whole thing at once might kill creativity in your team. Designers get sad if they only have to 'paint by number'. They probably have some good ideas you can incorporate. Same for the dev.
Having worked for decades in digital media (sites, apps, games, etc), I've seen projects waste many many hours by developing or designing things that the client simply didn't want. Just because there was a misunderstanding about requirements.
There are many more reasons, but again, if you are working for yourself, and you have a process that works for you, then that's great.
It takes more time to do the details, in that time you could have gotten your first feedback.
These are claims, but not explanations about how this is better.
The rest of what you are saying are benefits of working incrementally, but it doesn't seem to have anything to do with what you made.
low-fi wireframing
I still don't get this. Isn't it just using a different style of outline around buttons? What is lo-fi about it? Wouldn't lo-fi be something that was much lower memory and much faster to draw, like solid color boxes?
Low-fidelity is jargon. It's a word used in the UX Design community for high level, low detail design artifacts. Perhaps you are thinking of low-fi audio and try to match that to wire-frames.
https://www.invisionapp.com/inside-design/low-fi-vs-hi-fi-pr...
https://balsamiq.com/wireframes/
"Balsamiq Wireframes is a rapid low-fidelity UI wireframing tool that reproduces the experience of sketching on a notepad or whiteboard, but using a computer.
It really forces you to focus on structure and content, avoiding lengthy discussions about colors and details that should come later in the process.
Wireframes is FAST: you will generate more ideas, so you can throw out the bad ones and discover the best solutions."
> ..but it doesn't seem to have anything to do with what you made.
The thing I made allows you to do this on your mobile phone, so anywhere, anytime. That's the unique part.
As far as I know, there are also no great tools to do a little bit of front-end development on your phone either. So perhaps a cool niche for someone to jump into.
So in the future the app will include features to facilitate this process too.