Before I discuss anything, I would like to draw your attention away for a bit and request something: click on this website (I swear it’s safe) and tell me how long you are able to look at it without closing the tab. I’ll be waiting for you here when you come back.
…and welcome back. How was it? Were you able to keep that website open for more than 10 seconds, or did you immediately close it and vomit in disgust like I did? If you lasted more than 10 seconds, then congratulations on surviving that ordeal and if not, then I’m sorry I made you vomit. I’ll lend you my cleaning supplies after I clean my own mess first.
The website I just showed you is called Arngren.net, and it is a Norweigan website that enables users to purchase or sell items online. This concept isn’t anything new, considering sites like Craigslist and eBay exist, but the main difference with Arngren as you have just witnessed, is its “unique” layout. When I first visited this website, I did not know what I was looking at, neither did I know where to look. Because there was just so much visual clutter thrown at my face, it took me a few seconds to actually process everything that was in view. I feel like this blog post better describes in detail how flawed the website is, as the author criticizes its many questionable design choices and even offers their own suggestions on how they could personally improve the appearance of the site. But to summarize their overall thoughts, Arngren is the embodiment of information overload and a prime example of what you don’t want your own website to look like.
Information overload is a phenomenon that happens when someone receives more information than they can handle, to the point that it actually impedes their decision-making skills, and also results in the person being confused, frustrated, or both. In the context of web design, a good website should be one that avoids this aspect and rather presents relevant information in a simple, but modern layout, which is something that can be easily achieved with a UI framework.
If my memory serves me right, the very first time I learned to build a website was during my 5th grade of middle school. Everyone including me was required to take computer classes at the time, and for one of our assignments, my computer teacher decided to teach us some very basic HTML syntax so that we can get started on creating our own personal websites. Our website needed to be a simple self bio, and had to include a picture of our favorite animal, a list of our hobbies, and a list of our personal likes/dislikes. After working on this assignment for a couple weeks, everyone had to showcase what they had with each other. As a kid, I was not only fascinated by what I was able to create, but also what all my other classmates created as well, often leading me to say things in disbelief like “Wow, did you really make this? That’s cool.” to “How did you make this part?” and etc.
Nowadays, that sense of fascination I had as a kid eventually wavered, as I am more familiar with HTML and CSS than I was before. Every visual element that shows up on my computer screen isn’t because of some sort of magic like I used to believe, and if I were to recreate the website I made as a kid today, I wouldn’t be impressed with myself because as I have just learned recently, websites written in plain HTML and CSS actually look pretty dull and boring. While these dull-looking websites still fulfill the purpose of providing important information to the user in a clean, formatted manner, the amount of dynamic site elements that the user can see is nonexistent. However, UI frameworks alleviate this issue and add even more interesting visuals to your website.
By definition, A UI framework is a set of CSS classes and Javascript functions that define layout and overall appearance of your website. Using an already existing UI framework effectively saves you lots of time from having to build your own framework from scratch. Additionally, UI frameworks like Semantic UI have a lot of powerful features that can instantly make any website look professional.
Having spent some time with Semantic UI, I can currently attest to its usefulness. The ability to just modify images, menus, and other components within my website by adding simple English keywords is very time-saving. No longer do I have to worry that much about constantly editing the CSS stylesheet with long, tricky syntax to get the same job done. To me, Semantic UI is like a set of lego bricks that allow you to essentially create whatever you want, and its modularity allows you to reuse it for future creations that you have in mind. While I personally think Semantic UI has a bit of a learning curve before I can use it to its full extent, I definitely enjoy its current features and am interested in how Semantic UI in conjunction with React will affect the responsiveness of websites I may make later on.