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.
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).
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.
Thanks, I checked out Excalidraw, it is pretty awesome.
For tailwindui.com, 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 gmail.com).
How much of a time investment is it to start using a template like that?
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”?
Very nice! Looks awesome. Thanks for sharing. I’ve had another look and the templates at tailwindui.com 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.
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.
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.
