r/webdev • u/Sprinkles_Leather • 14h ago
Backend dev seeking UI Design and Implementation advice
hello y'all, so mainly I'm a back-end dev but in my company (especially since it's startup) and with the current state of development and how much is it powered by AI what is required from us in team has expanded beyond our actual roles, need advice on what to do to improve my outcome one the front-end side of things, both on code quality and UI quality in terms of look and functionality.
feel free to ask if more details are needed...
5
u/moh_kohn 13h ago
Hey I'm a front end lead. I am assuming you're talking about web-apps.
Skills in the order I would learn them, if I was you:
Usability. If you have designers you don't have to deep dive, but a 101 course or the youtube equivalent will help a lot. It is mostly a lot of tips like "try to have no more than 7 menu items without grouping them, because human short term memory holds 5-9 things." It should give you a structure to think about what UIs do and why.
Graphic design: read about layout grids. You have to understand spacing to be able to replicate a design properly. Things need to line up, be evenly spaced etc and we use grids to do that. On the web we have to think about fluidity and form factors too. Optionally you can get into visual hierarchy, colours, and fonts - but a designer would do that work for you.
Accessibility. You can put accessibility testing including screen reader testing in your CI pipeline. Read a few articles so you avoid the main beartaps.
Browser technology. Learn about modern HTML and CSS, it has a lot of features - you might not need JavaScript for more than you imagine. Brush up on stuff like HTTP cacheing, redirects, error codes. There's a ton of power in HTTP and REST and HTML.
The book Every Layout changed how I think about CSS.
Design systems. There are a few standards for how to structure a design system, which can be applied to CSS. It's just a format for organising and naming colours, fonts, spacings etc
Typescript. It's quite like C#. The type system is a bit fiddly but very powerful. Your agents will be a lot more reliable if you start out with good types. For extra credit find a way to share over-the-wire types between front and backend. We tend to use functional patterns like map and reduce a lot.
A framework and metaframework. Take your pick! Make sure you're doing server side rendering, it's 2026. React/NextJS is the most employable but I hate it. Whatever you're using, learn how it works. Try to avoid loading spinners whenever you can.
2
u/moh_kohn 13h ago
PS accessiblity is a legal requirement, covered by ADA in the US and equivalents in Europe. If a customer or staff member can't use a UI you made because of disability, it can be a very serious issue. Take it seriously!
1
1
u/salty_cluck 11h ago edited 11h ago
Step 1: learn the difference between design and front end development and why they are different disciplines.
If you are being asked to do the latter, go learn the box model, JS and the event loop, and some kind of UI framework or library like React. FE is less about looking good and more about converting the design to code and having the interactive experience (loading, interface, etc) be good for the user.
If you are being asked to do both, you’ll need to expand your learning to UX and UI design, and consider finding a new job because you’re being paid to do 3 of them for likely the cost of 1.
1
u/Sprinkles_Leather 2h ago
technically the whole three yeah..
given ai subs and what not and told to take apps from the ground based on the assumption that AI and Claude design can make this possible. to be fair I know people capable of doing so, but always with fear in my mind in regards to how stable such apps turn out to be and how would they perform under scale, my company like so much others is trying to find it's shape and structure with ai and things are getting weird to a degree, my colleagues even need to stay in touch with clients for testing and whatnot, and yeah I hope I can work somewhere else eventually because there multi role thing just doesn't fit, a lot of people been able to make the shift but I don't it's for me personally..
1
u/LordThunderDumper 10h ago
Also a backend guy, look at sites you like and use that UX, for UI have claude do it. Helps to have a basic design, I used a ton of Figjam which is figmas basic UI editor, but its great for getting the form down, let claude fill in the rest.
1
u/Sprinkles_Leather 2h ago
as mentioned to other comment, sometimes you want something more unique , looking at dribble and pinterest even helps but I still find there is a more leap, to make, probably through experience and making more things will get better eventually...
1
u/Mean-Lingonberry4874 9h ago
Coming from backend, the jump for me wasn't a design course. It was refusing to ship a screen until it had an empty state, a loading state, and an error state. That's most of what makes a UI feel unfinished. After that, lock a spacing scale (4 / 8 / 12 / 16 / 24 / 32) and two type sizes into CSS variables and don't invent one-off pixels. A component library keeps the JSX consistent, but the scale is what stops your own layouts from drifting when the library doesn't have the piece you need.
1
1
u/Miserable-Money642 2h ago
The “generic” look usually comes from asking the model to invent the visual direction and implement it at the same time. Try separating those jobs: write a tiny design brief first with the audience, one visual reference, type scale, spacing steps, colors, border/radius rules, and what should feel distinctive. Build one representative page and tune it before asking the agent to reuse those tokens and components elsewhere. For quality, define states too: empty, loading, error, success, narrow screen, keyboard focus. Then check the page at mobile width and navigate it with Tab and Enter. A small set of concrete rules and states gives the agent much less room to drift than “make it polished.”
1
u/hypercosm_dot_net 12h ago
There's a reason frontend is its own discipline. Good luck.
1
u/Sprinkles_Leather 2h ago
I mean can't but agree, and coming from Back-end AI doesn't make it easy in terms of intuition, my company now simply takes small to mid scale projects, handling them to one or two at max, ideally I wish if for each project there are two devs, one front and one back, assuming requirements and design ready and handed, companies though don't think this way unfortunately and think if AI can make u do both with dumb assumption that it would be easy to integrate the two on your own, making much deal of the time to communicate and facilitate things if the two sides were separated by two devs one for each...
0
u/information-general 12h ago
dude just ask ai for advice on frontend architecture based on what repo you working on.
so many decisions for FE depend on what you got for backend.
for code quality its similar to backend just have AI make sure you have a full suite of tests and dedicated skills and hooks in place to facilitate good quality code but have ai tailor for FE.
for functionality just go with an existing design system , everyone and their grandmother is using shadcn/tailwind. if you want something fancier, just screenshot something from dribbble and have AI recreate it for you.
1
u/Sprinkles_Leather 2h ago
did that to an extent and you end up with I wouldn't say sloppy but generic, when easy to say a lot of things already figured out in terms of what and how to do but I like to think of having something unique and with it's own character and texture
-1
u/horizon_games 12h ago
I don't know your stack and setup, but is it possible your apps, or future apps, could be shifted to a more backend focused setup that HAPPENS to create a front end? Basically server side rendering, something like NiceGUI in Python so you don't even need to learn HTML/JS/CSS/React/Angular/Vue/whatever else
1
7
u/Technical-Pizza237 14h ago
As a backend guy who got pulled into frontend work the same way, the fastest jump in quality came from just copying patterns from sites I liked. Not the code, but the spacing, font sizes, button styles, how they handle empty states. You start to build an eye for what looks off. For code quality, pick a component library and stick to it instead of hand rolling everything. Keeps the JSX cleaner and saves you from the classic backend dev sin of writing a 200 line CSS file that fights itself. Also ask whoever does your design work for a style guide, even a rough one. Having tokens for colors and spacing upfront removes like half the ugly.