The frontend is a crucial part of every project; after all, it’s the first thing the user sees and your only chance to make a great first impression. If the frontend is ugly, sluggish or just doesn’t fit the overall environment, no one will care what your backend can do. That’s why UX and UI designs are so important. However, developing a great frontend can be a time-consuming and tedious process of moving things around, resizing, changing color and so on, and on, and on…
Fortunately, there are ready-made frameworks that give you your dream design straight away. It’s tempting but is it always the best option? Or should you let your designers break off the chains of popular design guidelines and go with their imagination? We’re comparing ready-made UI components frameworks against hand-crafted designs.
The advantages and disadvantages of ready-made frameworks
+ Fast implementation
Time is money and ready-made components are the fastest way to create a frontend. Developers only have to hook functionalities to these components and there is no need to worry about looks or common behavior… just apply the app’s logic and voila! All the styling work that many developers don’t like—especially when they need to support Internet Explorer— is taken care of.
– Slow implementation
“Wait?! You said it was fast and now you are saying it is slow?” Bear with me… With ready-made components, everything is easy as long as you go the standard route. But changes can be painful as many frameworks are not built for custom modifications. Even the smallest behavior change may take a few hours (or even days!) of reading docs from cover to cover and require some ugly code hacks.
+ Using tested and broadly liked looks
Another advantage of ready-made frameworks is that they provide a set of looks that just fit some specific needs or mimic very well what’s written in popular guidelines. Want your web app to look like an Android app? Go with Material-UI. Maybe you prefer the look of Microsoft Office because you want to create a complementary add-in for it? Choose Fluent UI. The list is endless (there are even rather jokey ones like React95, which I’d love to use in a real life project one day). The hardest part is choosing what you like the most.
– Closed to custom looks
It’s nearly the same as at the point with slow implementation. Want a small visual change or a custom theme? It’s not always obvious how to provide it. Sometimes it takes long hours just to find what CSS should be overridden and exactly where… and you’d better hope that the changes you make don’t cause something else to break!
+ Great support
From the developer’s point of view, this is a very important point. We all want to be infallible but reality is rough and sometimes every dev needs to go to docs, Stack Overflow, or some beginner tutorials. You never know what can cause problems and when you’ll need support, which is why it’s nice to use the most popular or commercial frameworks. Bootstrap is so popular that probably every possible problem has already been addressed on Stack. On the other hand, there are libraries with paid support like Telerik or DevExtreme, where they are happy to help with every problem (as long as you’re paying).
– Bad support
Okay, I know I may be annoying saying that every advantage can also be a disadvantage. With support, it is really important to read about the framework you are interested in before your start working with it, because saying that the quality of support varies is a huge understatement. You’ll find solutions with only partial documentation and you need to dig about in the source code yourself for answers and others in which the community don’t speak your language. It’s no good if the dev community for a framework are all discussing complex issues Chinese and you need the answer to a simple issue in English but can’t find it.
What about doing everything from scratch?
You can unleash the imagination of UI designers
With custom components, the sky’s the limit. No matter what you want to achieve visually, it will be possible. It will take some time, of course, but it will be a similar amount of it whether you’d like a professionally looking Material-like design or a colorful comic-like look for kids. Macabre, glittery, retro? You name it, you’ve got it. It takes the same amount of time to write “color: black” and “color: pink”.
You can unleash the imagination of UX designers
Similarly, doing any custom behavior won’t be a problem. Of course, it takes more time when complexity increases but developers are not blocked by framework constraints. So, once again, the sky’s the limit.
It may be just the easiest way
Designers have broad imaginations; we often joke that it is too broad but it is something we should celebrate. Going the non-standard can offer a path for creativity and innovation, while using a very restrictive framework makes it hard for developers to implement. And it’s not about making anything strange. Even small things, like a number input with “plus” and “minus” buttons next to it may not be so easy when the framework enforces input with “up” and “down” arrows on the right side.
Hand-crafted or ready-made frontends? What to choose?
The decision should be based mainly on the needs of the project: whether it should strictly stick to some design guidelines or if we want some freedom.
Fortunately, at ValueLogic we have great designers and frontend developers that are comfortable with both ways of working, so we choose ready-made frameworks or custom design based on the needs of the client. The final deciding factor is always the business value that the end solution brings.
