Developing a UI without a design
It maybe a newbie question, and if it is I'm sorry, but how do you develop a UI without using a design reference? I find it difficult to visualize what the UI is going to look like when I'm implementing features. It can be really slow down my development speed.
My original approach so that I maintain flow is essentially building the component (React, vue, etc.) using default styles so that my functionality is there and then style the components after. I'm wondering if there is a better way that doesn't interfere with flow.
My original approach so that I maintain flow is essentially building the component (React, vue, etc.) using default styles so that my functionality is there and then style the components after. I'm wondering if there is a better way that doesn't interfere with flow.
Solution
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!
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!
Similar Threads
Was this page helpful?
