Building UI, Made Easier

Frameworks

      In development, whether it is for software or web development, frameworks and libraries exist to make things easier for the developer. Developers have taken problems that they encounter on a consistent basis and made tools to help alleviate those problems. These solutions could include something as simple as making programming to be a smoother and faster process syntactically. Or instead of having to implement a complex algorithm by yourself, you could use a library that already has that algorithm implemented and you simply have to call that function in your code.

      Building UI for a website is no easy feat. Now to add more on top of the plate, building a visually pleasing UI is a much harder feat. When a visitor loads up a web page, there are certain elements on the web page that would immediately pop out more than other elements. Many factors can come into play as to how a certain element can pop out more than others in a web page. Some of these factors would include something as simple as the size or color of the element. Obviously, an element that is big and bright red would pop out more than small, white elements. While something as simple as making one element bigger than the rest is a simple action at face value, in reality there is a bigger psychological game at play. There is an entire set of study when it comes to designing UI/UX interfaces for websites that aims to improve user interaction. So how do we start in making these types of UI as a web developer?

      This is where UI Frameworks can come into play. As an example, let us look at navigation bars. Navigation bars is what you would most likely interact with the most when visiting a website. It links to other parts of the website that you can navigate such as an ‘About Us’ section. Most navigation bars are pretty simple looking. They have their own section in the website where most of the time they are either bordered or have a different background color that differs from the rest of the page to make them stand out.

      Seems pretty simple so far, right? I mean, navigation bars are most of the time just a one horizontal line with just hyperlinked text. But, what if we want to change how it looks when we interact with it? Let’s say we want each item in the navigation bar to be highlighted when we hover over it. And we want half of the items in the navigation bar to be in the far left side and the other half being on the far right side of the page. Now, we could style this using pure CSS. But that would take a tedious amount of time. As developers, we want to do things fast and efficient. So we use a UI Framework to help us.

      It is standard for UI frameworks to take care of the things that we wanted in a few lines, if not a single line. Little details such as the background color of an item being changed into something darker when we hover it can be done using built in classes from these frameworks in one line. To add on to this already great template that UI frameworks give us, we can customize it even more. So instead of expending the effort to implement the features that we wanted in pure CSS plus any other custom style features that we also want to implement, we can use UI frameworks to help us implement the feature that we want in one line and then add any other custom style that we want on top of it.

Semantic UI

One great UI framework that is easy to learn and master is Semantic UI. Semantic UI revolves around the idea of natural language, or in other words, our own human English language. To get a clear view of this idea of natural language as a syntax, let’s say we wanted to add a big red button to our page. To add this using Semantic UI, we would literally just write

<div class="ui big red button">Button</div>

It does not take anyone with knowledge of web programming to know that code of line indicates a big red button, literally.

      This kind of syntax that revolves around our natural languages makes Semantic UI a great UI framework for web developers. The syntax allows for consistent and clear readability of the code that makes building UI for web pages easy and fast. Their built in classes such as buttons, labels, menus, and many more all have a wide range of options of states and variations to customize with. Semantic UI also has great documentation that showcases different ways you can use their classes.