TomStanding On the Shoulders of Giants
Building a fast, reliable and responsive web app that respects the user’s needs, that is built in such a way that, ideally, from the first moment on the application’s structure is clear and concise and enables the user to fulfill the desired task as efficiently as possible - that’s the goal of frontend, ultimately.
When I develop the frontend-part of our latest and greatest full stack application, my tasks not only contain writing the code that holds everything together, but also to first think about the user and the requirements the user base will have.
This work process relies heavily on best-practices and patterns in UI and UX - not trying to reinvent the wheel but reusing existing knowledge. That’s because as a user, I’m more comfortable interacting with my apps in the same way, even if they’re not from the same developer. Furthermore, the user interface has to look pleasant to drive engagement and overall provide a nice experience.
The libraries are coming
And this task, specifically, is best handled by UI-libraries. Let’s take a look at them!
Material UI
The Material Design System is maintained by Google and defines a complete set of UI and UX elements. Using this design system as a template, the community build material-ui, one of the most used and best tested libraries. If you don’t know where to start with your UI, material-ui is always a good start for all domains, no matter if for productivity or your own little blog!
material-ui provides various packages under different namespaces with accessibility as a first-class citizen. @material-ui/core is the base slice, containing all the necessary React components to use for your app. @material-ui/icons gives you a set of Google-designed icons, which can be directly imported and used. All styles in material-ui are consumable via JSS.
But what’s really nice about this library is that @material-ui/system gives you the building blocks to start your own UI design system - completely as you want it to look. A++!
Carbon Design
This is some serious tasty eye candy here - Carbon Design by IBM. Yes, IBM currently builds not only one of the best looking UI libraries, but also one of the most thoroughly researched ones with best-in-class accessibility support. Their documentation details in high degree why the system was designed the way it is now.
On top of that, Carbon Design gives you packages for vanilla JS as well as Vue.js, which is nice. All styles are defined in SCSS, no matter what target (React, Vue.js, ...) you choose.
Fluent Design
Microsoft, the power house of Design?! You wouldn’t believe it, but the company has been investing in design heavily for the past years and even providing it free to the use as open source.
Fluent Design for the web differs from the native Windows version and tends to look more like the current Office 365 UI. That’s no coincidence, as the library was prior known as Fabric UI, an open source design system using Office 365 influence.
Nevertheless, Fluent Design is a good choice if you’re unsure what to choose - specifically for productivity apps. Remember, Office gets used by millions of people every day, so the UI is battle-tested and proven. Also note that Fluent Design is not only available for the web, but all other major platforms as well, making it a serious choice if you’re developing cross-platform in tandem with e.g. React Native.
React Bootstrap
Well, not much has to be said about Bootstrap at this point. React Bootstrap is a rich collection of Bootstrap elements with support for theming. Not the fanciest looking one, but it gets the job done very well and is never a wrong choice.
Ant Design
Ant Design is similar in look to Bootstrap with a focus on minimalist aesthetics. Next to the usual suspects such as a vast collection of components to use and theming, Ant Design offers some commonly used feedback-related views prepackaged, such as success, error and 403-hint.
Semantic UI
Akin to Ant Design’s style, yet with a heavier emphasis on productivity usage. I’ve mainly listed it here to give you a broader overview of what’s available.
Thinking Outside the Box
Those are just some of the many UI-libraries you can use in your next project. Use them as your guiding light during prototyping and UI/UX-testing, especially if your team is small or you’re developing an app on your own. Material UI, Carbon Design and Fluent Design not only provide a vast collection of components to use as-is, they also were developed with attention to detail and research of how to best implement user-patterns.
Remember, we’re standing on the shoulders of giants, and this has never been more true than when it comes to design.
- Tom