Say bye bye to DIY UI
04 Oct 2017
Talk about a Throwback Thursday
Even though I have had exposure to html and css for over a decade, I just recently started studying them academically. Now the exposure I speak of takes me all the way back to my 14 year self, equal parts MCR & Destiny’s Child. I am a member of the short-lived guinea pig era of the first social media platform that really exploded the net waves: MySpace. One of the coolest parts about MySpace was this ability to download html code and paste it directly into your profile. It didn’t take long for websites dedicated to profile style became popular and I would use these websites to edit my page: make it black, make it pink, throw up an emo song or some country ballad depending on the middle school drudgery of the evening, change the font, etc. The point was, I could make my profile look really cool and use it to add more visual information about myself that didn’t take words. It was easy to see my mood, what inspired me, or things I liked, depending on the style and what I linked into my profile page.
It’s not what you can do for design, it’s what design can do for you
Fast forward to now and I’m studying ways to use user interface (UI) frameworks that fulfill the same tasks for any website, in a much shorter time. There now exists UI frameworks that are designed to take care of the sizing and time draining issues associated with designing websites based on a pixel grid. They’re designed to recognize and produce the common features of websites that most developers care for. Examples of this would be “red button” or “dropdown menu”. Before these elements and collections took lines of css and html just to achieve. Now this can be invoked with simply using a specific class name that describes the features.
Semantic UI
The UI framework that I have been working with recently is Semantic UI. This is actually the framework running the styling behind the website that you’re currently viewing (my professional profile). Here are also a few example sites that I found to show different ways to utilize the UI framework: Snapchat, Zomato, Florida Institute of Technology, and Funded Today.
Semantic UI is gaining popularity, but it’s not the only UI framework that exists. Another popular one is Twitter Bootstrap that is featured on sites such as Vogue or Meteor. My novice recepetion so far has been that this is a great tool to speed up development. It helps to save time on styling as well as clean up and shorten a code base. I’m happy I started learning about this under the guidance of mentors at the University of Hawaii so I can find help if I need. I’ve quickly realized that there are times when multiple divs stack up (div-ception) behavior becomes unpredictable and it is hard to create the look you want.