Have you seen one of those websites from the 90s? Plain design, Times New Roman font, basic HTML and CSS layout. Maybe an image in the background that repeated in tiles. While these websites contain the necessary information needed to be displayed, the visual layout – the UX and UI design – is severely lacking. There’s no appeal, there’s no user-friendly interface that makes it enjoyable for the user at all. You can add in a bit of CSS to spice things up and make things slightly more palatable, but basic HTML and CSS can only take you so far in your website design.
This is where UI frameworks come into play. These additional libraries can take your website out of the 90s and back into 2019, shaping your website’s elements with modern visualizations that not only displays your content effectively, but also with visual appeal. UI frameworks allow us to modify our websites in ways that we want to, whether it be adding slideshows, animations, etc. It makes the UI designer/web developer’s life both easier, and simultaneously harder, since learning a new framework is almost like learning an entirely new language.
Over the past week, we’ve been working with the UI framework Semantic UI and it’s made designing websites a tad bit more easier. The framework has so many elements that are crucial for designing beautiful and effective websites, without the use of heavy CSS (amazing, in my humble opinion). Designing a menu, integrating images and icons onto the website, and overall creating the website has become less of a tedious task to think about and implement, as you can just call “ui fixed topmenu menu” or “ui tiny image” to create the element that you need for your website.
Without Semantic UI, designing the elements of a webpage took a lot of time and effort – each class needed to be defined by CSS, you had to make sure every characteristic was typed out. For example, in a previous Branden WOD, we had to create our own mock code editor using only HTML and CSS. This mockup was an emulation of JSFiddle, containing a top menu with button links, a side menu with textarea elements, and a main editing area where you typed in your code. To be honest, this was an extremely difficult task to do, and even though I eventually created the elements through vanilla HTML/CSS, it took a long time to figure out the layout. With Semantic UI on the other hand, creating websites is no problem – there’s a class for any element you need (except for carousels and video supporting), which you can give automatic margins and sizings by specified in the div class tag. Totally easier than bare-bones HTML/CSS. The catch, which some people including myself can get caught on, is the amount of libraries and tags that you can use. It’s overwhelming in a pressured setting, becuase sometimes you blank and you don’t know which element to use. “How do I center this menu?” or “Why can’t this element align with the other elements even though I used fluid/fixed?” are frequent frustrations that have occurred as I design webpages.
Regardless, I very much prefer using UI frameworks to design my future webpages instead of vanilla HTML/CSS. It produces cleaner, more modern designs that easily and effectively display your work. I dabbled in a bit of React in the spring and the summer, so I can’t wait to properly learn how to use it now with my new knowledge of web development.