Full-Stack Engine

Choosing the right front-end framework.

Have you started a new project and easily chosen the right back-end platform, database engine and even a JS framework for the UI, but had a bad time trying to decide the right front-end framework for UI/UX?.

If you've been working in the back-end and middleware worlds more than in the client side as I have, the chances are that UI design might seem too open, with plenty of options and different ways to get similar results. The logic and architecture patterns that govern in the server side reign doesn't apply when dealing with human interaction and the flexible nature of visual design.

A smart phone displaying the Facebook page and scrabble tiles forming the words “social media”
Photo by William Iven / Unsplash

To understand how to choose the right framework for visual design, let's see a brief history of visual design in Software and its fundamental concepts, then we'll try to categorize each framework to get a straightforward method to pick our choice.

Skeuomorph Design

Skeuomorph goes back to the beginnings of Visual Design in computing when the transition from analog to digital was taking place. Our human nature makes us resistant to changes, so people needed some familiarity with what's known to them at the moment, exactly what a skeuomorph is. Take as an example the following picture of a digital watch emulating the interface of an analog one with clock hands. There's no need for hands; however many people love how it looks.


Photo by Jens Kreuter / Unsplash

This kind of design is still used today, to give a warm touch in some designs. As a trend, however, it was left behind in favor of another minimalistic philosophy. [1]

Flat Design

Flat design is opposite to skeuomorphism. It replaces the adornments and visual complexity by a cleaner and more straightforward interface, with emphasis on display content using straightforward elements, which allows creating a design more quickly since a designer doesn't need to worry about elaborated styles or creating complex layouts, borders, shadows or even drawings. The whole interface is made by simple geometric forms, which also let the elements to be responsive more easily. As a back-end developer, this approach is especially useful if you lack graphical design expertise.

A good example of what a flat-based framework looks like is Twitter's bootstrap,

Untitled

There are several frameworks based on Flat design, following a list of some popular ones,

Material Design

Nevertheless, the Flat design is a great approach and has gained much momentum from the community, but it lacks some graphical enhancements that turn a UI more visually appealing and improves User experience as well.
Material Design is a series of guidelines intended user interfaces that combines the simplicity and cleanliness of flat design while introducing elements from scheuophormism like shadows, animations, and more complex shapes to provide an excellent User Experience.
Google created Material Design as an effort to defined a common design framework for their applications for desktop and mobile environments. [2]

Some of the most popular Material-based frameworks include,

The following image shows an example of Material Design from Materialize CSS,

Untitled2

Mobile First & Responsive Web Design

Now let's move to design philosophies. With the popularization of mobile devices, web designs needed to incorporate the ability to adapt to different screen sizes and resolutions. The same elements re-arrange, show or hide in different viewport sizes depending on the device rendering the page, this kind of design is known as Responsive Web Design.

On the other hand, we have Mobile First Design, a philosophy you start creating a web page for mobile screen sizes first, and then you work on details progressively for larger resolutions. Some frameworks include tools for this kind of design methodology and elements comes with a default look and behavior for mobile.

mobile-devices-2017978_1280

Comparison

Let's take a look at the previous features we can find for front-end frameworks,

Flat Material Mobile First Responsive
Bootstrap
*
*
*
Foundation
*
*
*
Semantic UI
*
*
Ulkit
*
*
*
Angular Material
*
*
*
Material-UI
*
*
Materialize
*
*
Polymer
*
*

Conclusion

We have visited some great visual styles, design philosophies and front-end frameworks that we can use for our next project. All of them are excellent options, and you can't go wrong on any of them. However, a particular framework makes your life more comfortable if it aligns with your needs.

Now, you can choose the right one based on some criteria, perhaps your project it's intended for mobile consumers more than for the desktop, in this case, a Mobile First methodology is especially useful for you. On the other hand, if you want a clean and simple design you can create quickly, a Flat Design is an excellent choice and doesn't fail to produce good looking and experience for the final users. However, maybe you want a design with more intuitive components and fancy visuals and animations that integrates perfectly on mobile devices, and you don't mind a little more work for details, then you can go with Material Design.

Thank you for reading this guide, and we'll see you again next time. Take care!.


  1. 99designs.com ↩︎

  2. wikipedia ↩︎

Author image
Costa Rica
Passionate Software Developer with full-stack development experience.