Rapid Prototyping Blues

When it comes to building website and app layouts it is no different really from that of a magazine. It will always be using the right tool for the job which comes down to not using Photoshop to layout a 60-page magazine with dynamic and template areas and instead using CorelDraw or InDesign.

Not sure if InDesign still exists, I don't really care because when it comes to desktop publishing software Adobe has always shat the bed.

---

Prototyping Tools

There are quite a few open source "Site builder" tools like Grape.js and really just search Open Source Drag and Drop Builder which is great to an extent.

Each of them have their gotchas, even if it is just ok but you have to host it yourself. Which is basically free as in beer. For something quick yet shareable and no hassle the options get a bit more narrow.

Over the past couple of years Figma has been making quite a few improvements to their Free tier. I could be mistaking them for proto.io or framer but I think they did not always have the most friendly Free tier. Now you at least get to work on 3 Projects and have unlimited collaborators.

The collaborators part is not important until it is. One of the things many of these sites do is they push you to publish some weird free website thing as a service, or they will lock down simple things like showing the work or getting put from others.

A further reason why I will be trying Figma a bit more often is because of their extensive plugin support. Which leads to the main prototyping tool I want to try using a bit more often.

Teleport^HQ

The cover probably gave it away anyhow. Teleport^HQ Is a bit more stringent than Figma when it comes to layouts and the elements you use, it enforces a bit more of a web context.

That goes back to using the right tool for the job. For me designing a website layout with pages is just not the same in a static design app. I want to hover things and see them respond, scale the page and see things flow. I do not want to meticulously design each state of a page.

That is why I do prefer in-browser prototyping. I write the CSS and things either respond how I want or I tweak them and as I do that I have constant feedback from the flow of elements as they respond to variable context ie page width, presses or other triggers.

Teleport^HQ integrates with Figma so that I can meticulously design things there without too much concern for the flow of them and then I can without even having an account export the design to be imported by Teleport^HQ.

Inside Teleport, just before I discounted it as nice but possibly bothersome I found a experimental feature.

The ability to use tailwind classes. Since Teleport mainly aims to make prototypes downloadable as usable HTML pages having the specific CSS framework you use in the export means almost no work in adapting to the output aside from hydrating with backend data.

More so than Figma, Teleport will probably be the most crucial step for me as I further refine and make more complex layout structure for @dreemport . It is all fine and dandy fiddling in the browser until things look good but a lot of time can be saved with a UX tool that follows the rules.

Moving from grid layout for page elements to flexbox for components to relative absolute into the fuckism that is CSS positioning can get on a persons nerves and hopefully this find will help maintain my sanity.

In the end I end up hopefully with a clean responsive Tailwind Css page which I slap some data in, sprinkle some Alpine.js and move on to the next problem.

Look ma! I am becoming pro.