When constructing physical building structures, foundations serve a crucial role of in providing stability to hold the building up and together for the foreseeable future. User Interface (UI) frameworks provides this sort of stability in developing web applications. They are user-written code kept together representing a “frame” or “base” in which projects can be built around. Building projects purely from scratch becomes a lot more tedious and time consuming than desired, especially with more complex projects. To alleviate some of these complexities with project management, UI frameworks provide tool sets, code libraries, amongst other resources aimed to accomplish efficiency in time and money. Well known frameworks include Bootstrap, Foundation, among numerous others. So far, I have been able to explore a bit in the universe of Semantic UI.
The exploration of web page design, has led me down the path of familiarization with Semantic UI. Building several web pages in practice shown me how we’re able to quickly design usable, responsive, and attractive web pages. In addition, it promotes an even more user-friendly work experience than other frameworks i.e. code can be deemed more “human readable” than typically accustomed to. This is based on the concept of building web sites using interface elements as opposed to individual HTML tags. Raj Panchal’s Efficient & Minimalistic designing using Semantic UI provides an example of this case for building a 3-column block within a Semantic UI grid:
<div class="ui stackable inverted divided equal height stackable grid">
<div class="three wide column">
Coding becomes more similar to writing regular text, very human friendly!
In Erik D. Kennedy’s 7 Rules of Creating Gorgeous UI, two rules I was able to align with are, “Double your whitespace” (Rule 3) and “Learn the methods of overlaying text on images” (Rule 4).
Erik states that the “look” of a UI designed interface requires us to, “add a lot of breathing room.” This whitespace provides the aesthetics that allow interfaces to seem more inviting and simple. Of course this does not mean exclusively “whitespace” but space between elements. Space between lines, elements, and group of elements.
Being able to put text over images in an appealing way is something to strive for as a UI designer. A number of web designs I’ve come across effectively takes this approach. In practice, I was able to be introduced to several methods in accomplishing this task. Methods such as applying text to the image directly or overlying the whole image.
Using Semantic UI is a viable approach in becoming an effective designer. It provides a sleek, subtle, and light weight experience with ample illustrations/documentations to allow for easy learning. With a variety of components to use and options of customization, Semantic UI is an approach I intend to continue to build upon within my skill set for any future projects.