GreenTea
TTCTheo's Typesafe Cult
•Created by _-/=elusive1sTh3Byte=-\_ on 1/3/2024 in #questions
Developing a UI without a design
I don't think this is a newbie question, anecdotally, most developers I know struggle with making UI. I don't think there's anything wrong with your approach as it is, however, if you're struggling with visualization I would strongly recommend just building simple wireframes. For example, while I have an art background and prefer figma for detailed mockups, making designs takes a lot of my time. As such, I typically use excalidraw or a piece of paper to make a wireframe of my ui components. The hardest thing to get right in ui design is typically the proportions (padding, margins, font, font-size, white space, etc.), not the details of the components themselves. Bad proportions can make very nice ui components looks bad.
Everyone has an approach that works for them, but mine is typically to begin with a wireframe on excalidraw, block out that wireframe in the UI, for example setting up containers, flexboxes, etc. (sometimes I put red borders around containers to further visualize their place on the page) Then once I'm ready to move forward, I start styling each component one by one, or if I'm using a component library, I then decide color schemes and other adjustments as needed.
I will say that I don't always follow the approach I outlined prescriptively, however, it's a general work flow that I've adopted over the last few years. I hope that helped!
55 replies