TLDR: Create a visual representation of your website first, implement it code later.
Personally, I’m not a designer but do have limited experience in designing the UI for products I built.
As for your questions:
- how do you approach building a UI so that everything stays consistent from the start?
I’m very big on consistency, but every single time I wanted to have “perfect” consistency across a product, I rarely got it. For instance, you decide everything should have a certain spacing, and that works most of the time, except for a few places, do you break consistency? I usually did and the design was better for it.
So my first here would be to say don’t worry too much about consistency, if you are using the same font, same color pallet and same general style for instance using a background to communicate surfaces instead of borders or vice versa. These are probably the things you want to have consistent.
You also want consistency between same type of elements i.e. your buttons should look the same, your reading section, your titles in the reading sections etc.
My approach is usually, define a color scheme, core fonts (usually two), and define font-sizes, border radiuses, spacings as variables in case of css either as real variables or as SASS variables. This way I can easily find references and jump across the code base.
Then I implement the design in Figma. This helps me understand my layout and get a large overview over the entire product. I start on the most important screen, then build the rest to match the feeling of the first page.
- what’s the right mindset when structuring layouts (especially when coming from a “just make it look right” approach)?
From your post it seems you don’t have a design document and are simply modifying code. While you can work like that. But it would require you to have great visualisation skills, and you would probably need to map the code to visual representation in your head. This is loads harder than going from design to code.
With this approach, I think you’ll always be left with the “just make it look right” approach. Because there is no way you can hold the entire website in your head to the point you can make it consistent.
So the right mindset, in my opinion, is build a visual design first, in a design software, you could also use Google Stitch. Iterate on that and then convert it to code.
As for structuring layouts, start with reusable segments and components. For instance, if you have a post, it has a title, body, date etc. every post will look the same. Create a reusable component for that, this not only helps when iterating but also makes your website more manageable. because now you are no longer building the website out of unrelated units you are building individual components that end up creating the website.
- is this kind of setup something that can be gradually refactored, or is it usually better to rebuild with a proper system in place?
You can probably refractor, but not just through code. I think as long as you just keep changing the code and don’t have a visually representation in front of you, you won’t be really satisfied with your design, because you don’t have a single place where you can overview the entire product.
So, I’d start with copying your website in a design software. Make sure you reuse as many segments as possible. This will create the hierarchy and structure you are looking for. Iterate on that. You can create different versions by simply copying the entire structure over and changing it. Then once you iterated enough, translate the design back into code.
Working with an design programs, will help you understand your website better, its structure, the decisions made behind different segments. This will in turn make you more confident in your ending result.