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.
Solution:Jump to 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!...
38 Replies
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!
Thanks man! This is a well thought out solution and I will definitely use this
If you want at some point to go down the figma path there are a lot of tutorials out there and some really good design sytems you can play around with. If you are using shadcn/ui it does have a figma design system file as well (linked in their docs) and you can try to get some practice by building websites that use shadcn in figma. This doesn't change the approach Green Tea suggested which is also my favourite and even if you go down the figma path i think most people start with wireframes anyways!
I wasn't aware of this shadcn/ui component library. It looks really nice!
And there's a figma design file associated with it?
I’m pretty much the same, however at the very least I’m thinking ahead a bit with what I’d like the app to look like to some degree in my head and take notes (mostly while I’m not building). Then as I’m building the UI, I’m thinking about how it should look in more detail and what would bring the best user experience. Libraries like Shadcn make it so easy to bring components in and changing the UI on the fly.
Figma
Every component recreated in Figma. With customizable props, typography and icons.
This is the most I do when it comes to my “planning” of a UI, and it probably won’t happen that way as I’ll probably think of something better while I’m building
It’s the best!
When you're mocking or designing the components in figma or wireframing, are you building out the specific component based on the task, or are you mocking or wireframing the entirety of the app?
I never use figma, I tried to build a UI with it for “best practice” sake, but I found that its quicker just bringing in components from a prebuilt library. You avoid wasting time playing around with the radius of your buttons for example, I don’t care about that, I wanna build and get it done. Imo it’s more targeted for UI designers specifically who don’t code.
That's fair
I guess when you're wireframing then would you be specific to your task or the wireframe is the entirety of the release or app?
It also depends a lot who you are building for. If you are doing contract work having a figma is nice because it's easier to change once you learn it
Design it, I usually design with Figma.
Oh lol ofc discord doesnt show anyones responses
@barry It's alright! I still apprectiate the responses!
I know you guys are very busy and the fact you took the time to answer my question is quite generous!
But yeah, I usually just design a general design, and I do my best to follow it, I spend time on colors and typography, and I always just keep it simple.If it’s a personal project it depends on your preference, if it’s for a contract then it’ll depend on the customer.
also if you have a frontend masters subscription there is a great figma "course" there as well!
Another great recourse is the book the creatros of tailwind made. Refactoring UI i think it's called
yup
its expensive for a solo developer just learning for fun though
99$ i think? just for the pdf book
but its great content
Very true!
I’d definitely try doing a figma wireframe for my next contract, I landed my first one last month and it was a bit frustrating having to change things after showing the customer something. But for my personal stuff I wouldn’t bother.
yh for personal i do go a bit more loose, but i always start off with a design no matter what, i feel like it speeds me up
also Sarah Dranser did a course on frontend masters about design theory as well which is awesome! (she is director of eng at google for ios web and android)
It’s actually the first time I’ve seen a wireframe, had to google it now 😂 it’s just enough UI planning for my taste
one thing that sped me up was a refactoring ui tip
always, start out, black and white
i find that i can spend a lot of time nitpicking on a color for one thing just to change it later anyways
sounds like good advice
color is just hard man
for me anyways
same, i like to just look at the clothes im wearing lol
then i take black white + the colors im wearing
and add some gradients of the colors
I follow a lot of UI guys on instagram for inspiration, sometimes I’ll see someone make a color palette I’d never use look really good
i wish there was a catppuccin theme i could just apply to all my projects and be done the same way I'm done with nvim tmux and all the dev things
i gave up on nvim, but ive tried like 3 times now
i love being from scandinavia, but damn is the nordic keyboard layout so vastly different from US and its terrible with vim binds
I was obsessed learning the binds so i got a split keyboard for that. Noticed i was cheating so i switched to nvim for that reason (thinking i was gonan get bavck to vscode once i was comfy with them) now i just cannot. Used the lazynvim "distro" and did a few changes and i stuck with it
hehe yeah i aint got the money to buy a keyboard just to use vim 🤣 big bet
tryna' save up for a beast of a pc
very fair!
This all started cause i was having pain issues but totally fair. Sorry for derailing the thread
Thanks guys (or gals, I don't know) I'll try to summarize the suggestions here:
* The simplest approach is creating a wireframe. If it's a personal project, it'd be best to do the entire wireframe and then use that for making the mock or skip right into implementing the UI.
* Once the wireframe is done, block out the wireframe in the UI with markup. Like red lines for containers and blocks for components. Then style those components.
* The wireframe tool is excalidraw.com and the component library is https://ui.shadcn.com/
* Sometimes clients want mock ups and figma is good for that. The shadcn library provides figma designs
Anything I'm missing?
shadcn/ui
shadcn/ui
Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
I personally just use shadcn/ui and Tailwind UI in the early stages of a project. I just take 1 step at a time and pick whatever component looks the best for the thing I am trying to make. You can waste so much time over designing something you don't even need in a few days.
My recommended approach if you want to improve your UI skills: start with a component library that has a predefined and all encompassing style system. I’d recommend Mantine or Chakra. Work within these out of the box styling constraints and aggressively copy UIs. For instance if using Mantine copy the example UIs at https://ui.mantine.dev/ . Then just keep building stuff.
Over time you learn what patterns work, how much spacing between elements you should use, what to put where, etc. Tailwind is great to use at that stage
Take this website as example: https://unbound-studio.vercel.app
I made it without any design prototype whatsoever, except for some little copycat and modification from someone design in dribbble
Unbound // Digital Agency Studio
A web based design agency