All That You Need to Paint

08 Oct 2020

The late artist Bob Ross once stated "All You need to paint is a few tools, a little instruction, and a vision in your mind." In this regard I feel like designing websites is very much like painting. All you need is a few tools, the knowledge of how to use them, and the vision of how you want your website to look. UI Frameworks definitely aim to be just that sort of tool that you would use, as opposed to trying to build your own paintbrush from scratch.

I recently had the chance to work with Semantic UI in designing websites. They advertise that it's designed to allow more straightforward approaches to building webpages, but my experience has been a little more daunting than that. From having to struggle with the API to line up an element correctly, to having to wrestle with the framework just to center something, the framework ended up being a lot less straightforward than I thought it would be. I can see see the reasoning behind using a framework, but sometimes it might not be worth the hassle.

The first project that I tackled using Semantic UI was to make a mock-up of the Island Snow website. Doing this website mock-up with Semantic overall probably took a little less time than trying design it on my own (particularly the top bar menu and dropdown selections), but I feel like the sacrifice was a lot of control and customizability. I am by no means an expert at html or css, but it became frustrating when the framework didn't behave the way it said it would, or the API didn't quite have the instructions to make certain elements behave a certain way. One thing in particular that I remember is that one of the dropdown menus would take on the text of any item that was part of it that was clicked, and had no way to return the text to normal without completely refreshing the page. The semantic API had no mention of how this item would behave, and I certainly did mot expect it to behave the way it did.

The next project that I tackled with Semantic UI was to essentially copy the front end of a website: the recently released and somewhat popular game, Genshin Impact. I probably spent way longer on this project than I should have, but much of that time was perusing through the Semantic UI for anything I could use, not finding what I wanted, and then moving on to find out how to do something via the great knowledge browser that is known as Google Search. Overall, the first section of the webpage didn't cause me too much angst aside from trying to customize colors, force margins and paddings, and making sure each element was in the proper div class element. Coloring the dropdown menu in particular cost me at least half of an hour trying and testing different things to get it to actually color what I wanted it to. The second section is probably what consumed most of the time that I spent on this site: the News section. Semantic UI refused to co-operate with the slideshow division that I created, either tossing and sticking it to the left side of the page, or actually centering it but not partnering it with the section that had the actual news updates. For the slideshow section, I couldn't use Semantic UI at all as it wouldn't cleanly move things together if I did, and Semantic had no innate support for such a thing.

From what I experienced thus far, the Semantic UI framework seems very promising for creating websites from scratch and having a little sandbox to play around with what it has to offer, but isn't so great for copying other websites to get their unique aesthetic into a new one. I can definitely see the reasoning behind using a UI framework to make designing an experience for users more straightforward or intuitive, but I feel like Semantic UI is lacking in what it has to offer for certain types of websites.