Hi all, my first post here!
I am a self-taught aspiring front-end developer who came from a non-technical background. I love and enjoy working with HTML, CSS (and preprocessors), and templating systems (ERB, Mustache, Handlebar). I am still improving my Javascript and related tech stacks (React, bundlers, static site generators). While I don't instantly "get" everything at once, I make reasonable progress and enjoy the learning process.
But one thing that gives me serious impostor syndrome is I am not good at creating UI design.
I'm familiar with basic graphic design principles (proportion, proximity, etc) and can create reasonably decent websites with style guides or existing frameworks/themes to work on. I love implementing existing visual design comps, improving and optimizing for web (responsiveness, accessibility, etc). I enjoy learning about user needs and figuring out ways to meet those needs.
However, I am stuck whenever I try to create UI design on my own (pick colour schemes, make layout from scratch, decide on spacing, sizes, illustration style, iconography, etc). I spend hours on Pinterest & Dribbble, I browse and recreate designs I like; I try to translate moods, concepts, and objectives into inspired visual elements; but my UI designs remain simple and mediocre, and I find it frustrating.
I'm aware that "front-end" technically encompasses a complex spectrum of overlapping fields and might be considered separate from "UI design". But in the real world, good front-end developers I follow mostly seem to have good artistic skills, and front-end job positions I see (often? occassionally? sometimes?) require good UI design skills.
My questions:
- How important are UI design skills for professional front-end developers?
- If you have experience with this: How do you make up for the lack of advanced UI skills? (Do you have to be extra good at the programming/logic side of things? Or excelling at HTML, CSS, JS would suffice?)
I've been worrying about this for a while — did not realize it'd end up this long, sorry! 😅 — and I'd be interested to hear from folks in the same boat.
Anyway... thanks for reading!
Latest comments (14)
I've been on the same boat, but whith holes in it 😂
It literally took me a year, from the moment I thought about writing my portfolio to the moment I actually coded something I thought it was worth publishing.
Since I was a backend developer, I started learning Nodejs as a way of learning Javascript. Then I moved to React. And then I went to back to learning deep Javascript foundations I was lacking.
When it comes to CSS, oh God, basically trial and error, looking for code examples and tweaking them. I purposedly jumped on an opportunity as a front end developer so I could learn more.
When it comes to UI, I'm definitely not the creative type. There's a controversial quote "good artists copy; great artists steal", I think one way to get better at UI is by taking inspiration from awarded sites and mocking them, and then tweaking them until it transforms into something you can finally say "ok, this looks more like me".
Confidence will eventually come and you'll be able to design your ideas from scratch, because you won't get held back by the thought that you're not technically good enough.
Nowadays most from my learning is coming from frontendmasters.com
You pointed out that front-end encompasses a complex spectrum of overlapping fields, and I want to mirror that by noting that UI design is an equally complex and interrelated assortment of practices. It seems like you are most concerned about visual design, but UI design also encompasses every other aspect of how a person interacts with software. You do not need to know very much at all about visual design to be a great front-end developer. However, UI design is deeply connected to things that appear to be progamming concerns:
I love spending time on Dribbble! But when I'm hiring front-end developers I don't really care that much if they know about font-size ratios. We have wonderful, highly skilled designers that work with us to codify those aspects of our design into reusable components. What I do care about are all of the things that I mentioned.
Being a great front-end developer isn't about being very good at writing code and also, separately, being very good at making nice looking visuals. It's about understanding where those two outcomes intersect and why they are related.
I'm going to ask a really dumb question here. If designers are creating a component library with code, what are the FEs doing? I have not worked with any large teams (yet) so this is a question I have always had.
Here's an analogy:
You have interior designers who come and figure out a good layout for a room, considering all the different things the client wants in their home.
You also have the movers, painters, carpenters, etc who make the vision a reality.
We are the movers, painters, and carpenters. Design/Product provides a vision of where the end product should be, while developers bring that vision to life.
Er... That's the traditional FE roles. I am familiar with that. But if interior designers are also moving your furniture, what is the mover doing?
It all depends on the scope of the project.
Designing and moving are two different skill sets. The thing is, it's not common for people to have an exceptional ability at both. They're extremely talented at one or the other.
If the designer only had one product to create, which was to design your living room, then surely the designer could also help move stuff with the movers, but most likely not at the speed and proficiency of the other movers. The same thing could be said if the tables were turned.
But now, let's imagine that you as a designer have to design for 5 different projects instead of just one.
If you're moving furniture, who is going to keep looking after the designs to see if anything could be improved/added? It's gonna be hard if you're focused on moving stuff.
End goal of what im saying is that:
On small projects it could be beneficial to have a designer help create systems for ease of development.
However at a big company unless that's their sole job, they will have other priorities because designing is much more than simply creating component libraries.
Like Luke said,
This is why i'm not a fan of the terms front-end and back-end. Designers/Developers/Project Managers all work together to create products! :)
We have wonderful, highly skilled designers that work with us to codify those aspects of our design into reusable components.
designers are codifying it? I want to understand this! because traditionally, designers produce the vision in graphic format and devs translate vision in code, don't they?
I would say for the most part that for that there are developers that collaborate with designers to "codify" the designs that a design team made.
However there are developers that have previous experience as a designer and would be great at taking these abstract designs, and then making them into a reality.
It is definitely is a job but it is a rare skillset to be able to do both at a very skilled level. Matter of fact, my company is hiring for that exact position right now, take a look at the job description for yourself!
Thank you for posting that job. Job posts like these confuse the hell outta me. I am pretty good with code (if not then I can figure it out) but I absolutely suck at designing. But all jobs seem to want people who can design first and code later, or code in JavaScript exclusively. I guess you are looking for those rare people?
I wouldn't say all jobs want people who can design first and then code later, because not every company wants developers who design.
Sometimes they just want people that can take a wireframe or mockup, and implement it in a client - whether that's web or mobile.
For that specific position, we're looking for someone to guide the improvement of our design system, allowing developers to be more productive instead of worrying about styling.
One way to understand the process is that work on components is a place where the line is blurred between the two. Designers write code to build components, and engineers use intuition from working on components to make decisions about the visual character of other components. For us it frequently happens at the same time through pair programming.
Another way to look at it is that creating components is a very small part of building a frontend application. Engineers have to then use those components and connect them to data and business rules in order to make an application. Most of our front end engineering time is spent here.
Thank you for your detailed explanation, very insightful and helps a lot!
This made me realize that the reason UI design is often closely associated w/ front-end is because they actually share similar concerns and pretty much go hand in hand.
I'm worried about the visual aspects because it's the only part I don't quite get, but your explanation helped me see beyond that -- which is where I should focus my attention to.
As far as your career prospects: if you like having a playbook to follow, you might do better at larger companies. They'll have separate design and UX departments who give you a style guide or pattern library and wireframes to implement; your role is to help them work out what is and isn't feasible, and then to make the final designs real as efficiently as possible. You could stop there, or use the opportunity afforded by working with pros to develop your own design sensibilities.
Or you could keep trying to learn interface design on your own -- it's a skill, it can be learned! It just takes time, effort, and the willingness to keep iterating on less-than-stellar prototypes.
Either way, very few people are going to be good at design without first putting in a lot of time at getting good. Figure out how you're likely to learn more faster and give it a shot.
Thank you for the insight and the advice!
Yeah, I'll keep trying to improve my design chops. I'm building my personal website and hoping to finish this Q3. And yes, that's the plan, I hope to be good enough to someday work in a team with good designers! *fingers crossed