Show HN: TinyUX – Grid based low-fi wireframing on your mobile phone | Hacker News Reader

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

tinyux.app

112 pointsjuliushuijnk34 comments

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.

Open articleView on HN

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

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:

    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.

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/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.

Perhaps a Large Language Model (LLM) can translate my .ux source code to all the different platforms for me.. So many ideas, so little time!

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

Yes.

https://balsamiq.com/wireframes/

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.

Love Balsamiq.

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.

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.

Also thanks for the link to Excalidraw, didn't know that site.

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.

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.

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!

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-...

But have to do some more re-thinking on the specifics.

Last time I made a react native app I used 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.

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.

> that don't have a have personal OSX laptop (required for publishing) nor Apple developer account at the moment.

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)

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.

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.

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.

Do the Play Store rules allow you to post an APK with a license key on Gumroad or Shopify or some other provider?

I'd have to look into it. But presumably it should be possible.

Is wireframing newspeak for creating a user interface?

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 :).

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.

Good question:

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'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.

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?

> 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.

Btw, this type of clearing up confusement is one of the most important (and hard) parts about UX Design. The wireframing is quite easy if you finally really understand all the requirements and stakeholder goals you need to balance.

So in the future the app will include features to facilitate this process too.

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.

Is this GPT?

Aren't we all?

Yes!

Reply on news.ycombinator.com