How do you design the layout of your apps?

I am learning Phoenix now and see a lot of Heex, use of Tailwind, and other things that are not just pure html and css.

How do you all tend to design your layouts? Do you use any any third party tool (for example Figma)? I’m guessing nobody here uses something like dreamweaver to lay out any html file and then translate it to code yourself, so I am wondering how you go about it, what is your process.

Do you just lay it out semantically with containers, flex grids, etc? What do you do when you want to move something, do you just change it in the code or do you use any visual tool to visualize the changes as you’re making them? Please describe your overall approach.

1 Like

I’m not using Figma.

I’m sketching very low-fi mockups with excalidraw and then jumping straight into code: HTML + tailwind templates.

Rather than starting from nothing, I often use templates to get me started on the layout.


I design in browser using tailwind css. I follow tailwindui when I can.
Off late i have started using modern css, without using tailwind (mostly grid and flex), but i still design in browser.
P.S: I am not a designer and I have limited designing skill. I work mostly on business app that don’t require too much design (dashboards, tables, forms etc).

1 Like

I draw boxes and squiggles, used to be pencil on paper, nowadays I use a Remarkable. I go straight from that to final heex/html/css/js. When I’m running a team I always have designers who can author html/css/js and so they take boxes/squiggles and produce static pages.

I’ve also worked in teams where the only output from the designers was figma/etc “mockups”, and the overhead of the mockup → html/css/js translation was consistently the greatest area of mistakes, rework and especially “oh, I didn’t realize that’s how html/css/js worked” problems.

1 Like

Thanks, I checked out Excalidraw, it is pretty awesome.

For, if you don’t mind my asking did you pay for all access? Or did you buy individual templates? Do you mind sharing a link to one of the sites you built from this approach, I am very curious what I could expect using an approach like this. (If you don’t want to post it here you can email it to me: rviragh at

How much of a time investment is it to start using a template like that?

1 Like

Do you mean you write it in vscode (or another editor) and then switch windows to the browser to see the changes, or what do you mean by “I design in browser”?

Yes, I paid for the whole package, but it’s been a single shot payment 2y ago and proved to be incredible value for the money since then!

One of the site I built using those templates is the phoenix storybook, here is the demo app:


Very nice! Looks awesome. Thanks for sharing. I’ve had another look and the templates at are very inspiring. I’ve also found another site tailwindawesome that has some free templates, I might get started with one of those before I’m ready to pay for professional ones. All in all, every one of the tailwind templates I’ve seen, across all the sites, look extremely polished.

I’ll admit my first reaction to the tailwind’s entire approach was extremely negative since it involves putting style information in the html - but now that I’ve seen the results and played around a bit with it, I’ve become convinced it is a sound decision.

1 Like

Tailwind has been a total game-changer for me :heart_on_fire:

Along with phoenix function components, you can now write complex, standalone, reusable components. This is a pipe dream I had been chasing for years!


I love breadboarding.

Not what I used to think as a design tool — not really drawing or sketching — , but it’s now a go-to first step.


fantastic link, great idea and advice in that article.

Besides breadboarding, the article you linked also mentioned fat marker - which kind of matches what @cblavier wrote above with “low-fi mockups with excalidraw”, and what @smathy wrote above witih “I draw boxes and squiggles”.

It seems all of these are a very good way to lay out the broad strokes. I’m surprised nobody starts with pixel-perfect complete mockups (made in figma or elsewhere) but as @smathy explained: “the mockup → html/css/js translation was consistently the greatest area of mistakes, rework” so sounds like it is not a benefit to try to do it that way.


Could you name some examples of the kind of function component you have in mind? I am curious what or how much of the design you make complex, standalone, and reusable.

Look at this table example, from our company’s storybook:

It features filtering, sorting, infinite scroll, and other features

1 Like

Yes I write code in helix and then watch the changes in the browser. Sometimes when i just need to change the css styles, i just open the inspector in the browser and modify the styles. Once i am happy with what i have i copy the styles back to the editor.