Every so often, somebody will ask for my suggestions on UI frameworks. By “UI framework”, I imply any third-party bundle that’s centered on offering styled UI elements. It contains CSS frameworks like Bootstrap, in addition to JS element libraries like Materials UI or Ant Design.
My reply to this query tends to catch folks off guard: I don’t use them, and I don’t suppose they need to be used for many consumer-facing merchandise. 😅
To be clear, I’ve nothing in opposition to these instruments, and I do suppose there are some legitimate use circumstances for them. However I’ve seen so many builders attain for these instruments with unrealistic expectations concerning the issues they’ll remedy, or how simple it’ll be to construct purposes with them.
On this article, I’m going to make my case for why you most likely don’t want these instruments. I’ll additionally share a few of my go-to methods for constructing professional-looking purposes with no design background.
The Attraction Of UI Frameworks
There are many causes that builders attain for a UI framework. Listed below are the three commonest causes I’ve seen:
- They need their app/web site to look polished {and professional}, and these instruments present nicely-designed UI elements.
- They wish to get one thing up and operating rapidly with out spending a bunch of time constructing every little thing from scratch.
- They acknowledge that many UI elements — issues like modals, dropdowns, and tooltips — are actually exhausting to get proper, particularly when contemplating accessibility, so that they wish to be sure they get it proper.
These are completely affordable issues to need, and I can completely see the attraction of discovering an answer for these issues. However in some circumstances, I believe there’s a mismatch between expectation and actuality. In others, I believe there are higher instruments for the job.
Let’s get into it.
Skilled Design
This primary purpose may be the most typical. There are tons of builders who wish to construct stuff, however who don’t have a design background. Fairly than spend years studying the way to design, why not use a third-party bundle that gives beautifully-designed elements proper out of the field?
Right here’s the issue, in my view: design is about a lot extra than nice-looking items.
A short while in the past, I acquired a LEGO Nintendo Leisure System as a present:
It was a actually enjoyable equipment to construct. If you happen to’re a LEGO fan, I extremely advocate checking it out!
Right here’s the factor, although: I used to be in a position to construct this mannequin as a result of the equipment got here with a 200-page guide that instructed me precisely the place to position every brick.
If I used to be given all the items however no directions, my NES would look a lot worse than it does. Having high-quality bricks isn’t sufficient, you additionally have to know the way to use them.
A element library can provide you good buttons, date pickers, and pagination widgets, however it’s nonetheless your job to assemble them.
The blocks in a design system like Materials Design have been constructed by a gifted design staff. That staff understands the framework, they usually have the talents to assemble the items into stunning interfaces. We’ve entry to the identical items, however that doesn’t imply we’ll robotically obtain the identical outcomes.
I bear in mind listening to a designer say that solely Google could make Materials Design apps that look good. The Android App Retailer is stuffed with third-party apps that use the identical professionally-designed elements however don’t look skilled in any respect.
There are such a lot of intangible features to good design — issues akin to steadiness, spacing, and consistency. To make use of a element library successfully, it is advisable to put your self within the sneakers of the designers who created it and perceive how they’re supposed to be deployed.
Plus, irrespective of how complete the library is, it’ll by no means have all of the items you want. Each app and web site is exclusive, and there’ll at all times be particular necessities. Making a brand-new element that “blends in” with an present third-party design system is actually friggin’ exhausting.
I don’t suppose it’s not possible — I’m certain there are examples of professional-looking apps with third-party kinds. However in case you’re in a position to make it look good, you most likely have some fairly important design chops and don’t want these instruments within the first place.
I empathize with builders who wish to launch a professional-looking challenge with none form of design instinct… Nevertheless it doesn’t often work out that means, from what I’ve seen.
Saving Time
The subsequent purpose I’ve heard is that UI frameworks assist save time. Constructing an entire element library from scratch is a major enterprise and one that may be skipped by counting on a UI framework.
There’s some reality to this, however from what I’ve seen, it’s usually a tortoise-and-hare state of affairs.
I spent a number of years educating net improvement fundamentals to bootcamp college students at Concordia College. This system culminates in a 2-week private challenge. College students determine what to construct, and it’s as much as them to do it. As an teacher, I’d reply questions and assist get them unstuck.
We seen a pattern: college students who decide a UI framework like Bootstrap or Materials UI get off the bottom rapidly and make speedy progress within the first few days. However as time goes on, they get slowed down. The daylight grows between what they want, and what the element library offers. They usually wind up spending a lot time making an attempt to bend the elements into the suitable form.
I bear in mind one scholar spent an entire afternoon making an attempt to switch the masthead from a CSS framework to help their navigation. In the long run, they determined to scrap the third-party element, they usually constructed another themselves in 10 minutes.
Writing your personal kinds feels a bit to me like writing exams: it’s a bit slower at first, however that early effort pays off. In the long term, you’ll save a whole lot of time, power, and frustration.
Usability And Accessibility
The ultimate purpose I’ve heard is an excellent legitimate one. The net doesn’t have a really sturdy “customary library” in the case of issues like modals, dropdowns, and tooltips. Constructing a modal that works effectively for mouse customers, keyboard customers, and screen-reader customers is extremely tough.
UI frameworks have a hit-or-miss report in the case of usability and accessibility. A number of the libraries are literally fairly good on this respect. However typically, it’s a secondary focus.
Fortunately, there’s one other class of instruments that focuses solely on usability and accessibility, with out prescribing a bunch of kinds.
Listed below are a few of my favourite instruments on this class:
- Attain UI
A set of accessibility-focused primitives for React. Constructed by Ryan Florence, co-creator of React Router and Remix. - Headless UI
A set of unstyled, absolutely accessible UI elements for React and Vue. Constructed and maintained by the Tailwind staff. - Radix Primitives
A set of unstyled, accessibility-focused elements for React. This library has a really broad set of included elements, a number of actually neat stuff! - React ARIA
A library of React hooks you should use to construct accessible elements from scratch.
Notice: I notice that this record may be very React-heavy; there could also be comparable instruments for Angular, Svelte, and different frameworks, however I’m not as energetic in these communities, so I’m unsure. Be happy to let me know on Twitter if you realize of any!
No person ought to be constructing a modal from scratch within the 12 months 2022, however that doesn’t imply you want an infinite styles-included UI framework! There are instruments that exactly remedy a very powerful accessibility challenges whereas remaining completely agnostic in the case of cosmetics and kinds.
Rebuttals
I’ve been talking with builders about this topic for a few years now, and I’ve heard some fairly compelling rebuttals.
Familiarity
First, Daniel Schutzsmith identified that “industry-standard” instruments like Bootstrap have one huge benefit: familiarity.
It’s simpler to onboard new builders and designers when utilizing instruments which are extensively understood. New teammates don’t must spend a ton of time studying the ins and outs of a customized framework, they will hit the bottom operating.
From the attitude of an company that takes on a number of brief/medium-term tasks, this might make a whole lot of sense. They don’t have to begin each new challenge from zero. And because the staff will get an increasing number of snug with the instrument, they be taught to make use of it actually successfully.
I haven’t finished a lot company work, so it’s exhausting for me to say. I’ve spent most of my profession working for product corporations. Not one of the locations I’ve labored for have ever used a third-party UI framework. We at all times constructed one thing in-house (eg. Marvel Blocks at Khan Academy, or Walrus at DigitalOcean).
Inner Instruments
I believe that it could possibly make sense to make use of a UI framework when constructing inside instruments or different not-for-public-consumption tasks (eg. prototypes).
If the objective is to rapidly get one thing up and operating, and also you don’t want the UI to be 100% skilled, I do suppose it may be a little bit of a time-saver to rapidly drop in a bunch of third-party elements.
What About Tailwind and Chakra UI?
So, I don’t take into account Tailwind or Chakra UI to be on this identical class of “UI frameworks”.
Tailwind doesn’t present out-of-the-box elements, however it does present design tokens. As Max Stoiber says, Tailwind offers builders a set of guardrails. You continue to want a design instinct to make use of it successfully, however it isn’t fairly as daunting as designing one thing from scratch.
Chakra UI does present styled-components out of the field, however they’re very minimal and low-level. They principally simply seem like nicer variations of platform defaults.
My good good friend Emi talked about to me that she likes utilizing Chakra UI as a result of it offers her with a set of smart defaults for issues like checkboxes and radio buttons. She’s adequate at design to keep away from the customization pitfalls, however not so assured that she’d be snug creating an entire design system from scratch. This instrument is the proper center floor for somebody in her state of affairs.
I believe the distinction is that these options don’t declare to resolve design for you. They assist nudge you in the suitable route, however they ensure that every little thing is customizable, and that you just aren’t locked into a selected design aesthetic.
My Instructed Various
So, in case you’re a solo developer who needs to construct professional-looking web sites and purposes, however who doesn’t have a design background, what do you have to do?
I’ve some recommendations.
Develop a Design Instinct
So, right here’s the dangerous information: I do suppose you must spend a little bit of time studying some design fundamentals.
That is a kind of issues the place somewhat bit goes a great distance. You don’t have to go to an artwork college or dedicate years to studying a brand new craft. Design is tough, however we aren’t making an attempt to turn out to be world-class designers. Our targets are far more modest, and also you may be shocked by how rapidly they are often attained, or how far alongside you’re already!
Even in case you’re not that taken with design, I believe constructing a design instinct is a vital ability for front-end builders. Imagine it or not, we’re continually making design selections in our work. Even probably the most detailed high-fidelity mockup continues to be lacking a ton of necessary context.
For instance:
- If we’re fortunate, we may be given 3 display sizes, however it’s as much as us to determine how the UI ought to behave between these display sizes.
- Information isn’t as clear because it seems in mockups, and we have now to determine the way to deal with lengthy names, lacking knowledge, and so forth.
- Loading, empty, and error states are sometimes lacking from mockups.
One among my super-powers as a developer is having sufficient design sense to have the ability to determine what to do after I run right into a state of affairs not clearly specified within the design. As a substitute of being blocked, whereas I await the designer to reply to my questions, I can depend on my instinct. I gained’t at all times get it proper, however I often will (and after I don’t, it’s one other alternative to enhance my design instinct!).
How do you develop a design instinct?
If you happen to work with a product/design staff, you might have an amazing useful resource out there to you! Assume critically concerning the designs they produce. Ask a number of questions — most designers can be delighted that can assist you perceive how issues are structured, and why they made the selections they did. Deal with it as an engineering problem. You possibly can be taught the methods and processes that result in good designs.
I wrote a weblog publish some time again, referred to as “Efficient Collaboration with Product and Design”. It goes a bit deeper into a few of these concepts.
If you happen to don’t work with any designers (or have any designer associates), you possibly can attempt to reverse-engineer the merchandise you employ each day. Take a be aware of how issues are spaced, and what font sizes are used. With a vital eye, you’ll begin to see patterns.
Steal
Alright, so even with a eager design intuition, it’s nonetheless actually exhausting to give you a design from scratch. So, let’s not try this.
As a substitute, let’s try to discover some skilled designs which are much like the factor we’re making an attempt to construct. You possibly can search on designer-community websites like dribbble or behance or use archives like awwwards.
For instance, let’s say we’re constructing an Uber-for-dogs startup, and we’re making an attempt to design the motive force dashboard. A Dribbble seek for “dashboard” turns up a ton of fascinating designs:
Dribbble tends to skew very “designery”, and so that you would possibly wish to use real-world merchandise for inspiration. That works too!
The trick is to make use of a number of sources. If you happen to steal 100% of a design, it’s plagiarism and a nasty type. Individuals will discover, and it’ll trigger issues.
As a substitute, we will combine 3 or 4 designs collectively to create one thing distinctive. For instance, possibly I’ll take the colour scheme from one web site, the final structure and spacing from one other, and the typography kinds from the third!
After I’ve talked about this technique to precise designers, they chuckle and say that it’s what all of them do. I believe that is their model of the “joke” that programmers spend half their time googling issues.
This technique seems like such a life hack. It’s not easy, and it does require some design chops. The designs you employ for inspiration gained’t 100% match the factor you’re constructing, and also you’ll want to make use of your instinct to fill within the gaps. Nevertheless it’s by far the quickest means I’ve discovered to give you a professional-looking design with no design background.
Placing It All Collectively
As builders, it may be tempting to consider {that a} UI framework will absolve us from needing to be taught something about design. Sadly, it doesn’t often work out that means. No less than, not from what I’ve seen.
Right here’s the excellent news: you possibly can undoubtedly construct a professional-looking product with no designer! With a number of high-quality reference designs and a touch of design instinct, you possibly can construct one thing that hits the “good-enough” threshold, the place a product feels respectable and “actual”.
There’s yet another side we haven’t actually spoken a lot about: CSS.
A lot of front-end builders battle with CSS. I struggled with it too! CSS is a deceptively advanced language, and it could possibly usually really feel inconsistent and irritating, even after you might have years of expertise with the language.
It is a drawback I really feel very passionately about. I spent all of final 12 months centered full-time on constructing and growing a CSS course, to assist builders achieve confidence with the language.
It’s referred to as CSS for JavaScript Builders. It’s made particularly for people who use a JS framework like React or Angular. The course is concentrated on supplying you with a sturdy psychological mannequin so that you’ve an intuitive understanding of how CSS works.
If you happen to really feel like CSS is unpredictable, I actually hope you’ll test it out. 9000+ builders have gone by means of the course, and the response has been overwhelmingly constructive.
You possibly can be taught extra right here: css-for-js.dev.
(vf, yk, il)
