r/webdev • u/Sprinkles_Leather • 1d 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...
3
u/moh_kohn 1d 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 1d 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
u/Sprinkles_Leather 20h ago
thnx on the insight
1
u/rbobby full-stack 16h ago
Accessibility could be a good focus area. Adding keyboard support tends to be overlooked and a huge issue for anyone with challenges. Same for contrast and color issues.
Learning how to identify controls, and their purposes, is key to getting good results from screen readers and other assistive technology.
Just a thought for an area that lots of folks tend to disregard.
1
u/salty_cluck 1d ago edited 1d 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 20h 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 1d 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 20h 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 1d 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 21h 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/Ok_Flamingo_7877 17h ago
One thing I'd recommend is getting a consistent design system in place before relying too heavily on AI for frontend work.
A lot of the generic-looking AI-generated interfaces come from letting the model make design decisions independently on every page. Defining your colors, typography, spacing, and component patterns upfront gives it something consistent to work with.
I'd also recommend using an established component library rather than building everything from scratch, especially if you're primarily a backend developer. Look for something with good TypeScript support, accessible components, responsive behavior, and enough customization that you're not locked into a particular visual style.
For code quality, don't just check whether the generated UI looks right. Test keyboard navigation, mobile layouts, loading/error states, and component behavior. Having automated component and accessibility tests helps catch issues that AI-generated code can easily miss.
1
u/HolidayBeginning3182 17h ago
If you want to avoid that sterile AI-template look without getting bogged down in years of design theory, focus on three high-leverage things:
Pick one deliberate typographic pairing: AI defaults to generic sans (like Inter or system font) everywhere. Swapping your headers to a distinct typeface with personality (like Cabinet Grotesk, Plus Jakarta Sans, or a warm modern serif) instantly gives the app character while keeping body text clean.
Subtlety over raw defaults: The gray-bordered cards AI spits out feel flat. Use slight surface tinting (off-white or deep charcoal rather than harsh #000 or #fff), low-opacity borders (1px with 8-10% white/black opacity), and multi-layered soft shadows instead of one harsh drop-shadow.
Human micro-copy: A huge part of why an interface feels polished isn't just the CSS, but how it speaks in edge states. Replace robotic AI copy like 'No records found' or 'Submit data' with conversational, contextual explanations of what the user should do next.
1
u/BrightRutabaga7008 11h ago
Pick one component library your stack already likes and stay inside it for a month so you are not inventing spacing rules from scratch. Copy real product screens into a mood board and note only three things: type scale, spacing rhythm, and color roles (text, surface, accent). Ship small UI PRs that improve one flow end to end instead of rewriting the whole design system. For code quality, treat accessibility and empty/loading/error states as part of "done," not polish. AI can draft layouts, but you still need a short checklist to catch contrast, alignment, and inconsistent padding before merge.
1
u/hypercosm_dot_net 1d ago
There's a reason frontend is its own discipline. Good luck.
1
u/Sprinkles_Leather 21h 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...
1
u/AutomaticChemical756 9h ago
If the customer wants to pay for only one dev using ai, they're just like managers that think 2 devs will halve the overall timeline of the project. It's a fallacy, and you have to either explain to the customer that they're getting a better quality product from you or they can kick rocks or expect a delayed timeline
0
u/information-general 1d 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 21h 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 1d 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
1
u/quietcodelife 3h ago
The jump from backend to frontend is easier when you treat UI like you'd treat an API - start with constraints, not freedom.
What helped me: instead of picking colors and fonts from scratch, I grabbed a design token set from an existing system (like Radix or Tailwind's defaults) and just used those as my "allowed values." Same way you'd use typed enums instead of magic strings. It removes 90% of the decision fatigue.
For layout, honestly just learn CSS Grid properly. It clicks for backend brains because it's explicit about rows and columns. Flexbox for one-dimensional stuff, Grid for two-dimensional.
And one thing nobody told me early: the browser DevTools' CSS panel is your debugger. You wouldn't write backend code without logging, so don't write frontend without inspecting. The computed styles tab shows you exactly what's being applied and where it's coming from.
9
u/Technical-Pizza237 1d 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.