UI Frameworks are meant for U and I
04 Oct 2023
Who knew there could be art in Software Engineering? Not me! Majoring in computer science, I thought it was all about coding and did not anticipate any art to be incorporated into the mix. After creating simple websites and even replicating much more complex websites, I discovered the art within software engineering. Of course, I was not able to just write code from scratch. I had some help from UI Frameworks. If you ever right click on a website page and hit inspect, you’ll understand why I needed that help as merely a student in an entry level software engineering course.
In high school, I remember creating and designing a website for my photography class where I would display any essays and photography projects. Going into replicating websites, I thought “piece of cake! I’ve done something similar before!” Boy was I in for a terrible wake up call. Designing a website through a website formatter like Wix or SquareSpace is VERY different than trying to write code to design a website. Even with the help of beloved UI Frameworks, there were many bumps along the road.
What are UI Frameworks??
In short, UI Frameworks are pre-built toolkits for designing, in my case, websites. They aid in the design process by providing ready made components like navigation bars and buttons to save time. I am using Bootstrap and it helps simplify the process of building an interface that is not only user friendly, but attractive since the design language is consistent so the separate components and elements blend well together. Bootstrap works by providing a collection of pre-designed HTML, CSS, and JavaScript components that can be easily integrated into web projects. The use of classes and styles come together to create responsive, mobile-friendly websites with consistent design and functionality, reducing the need for custom CSS and JavaScript coding.
My experience with UI Frameworks
Have you ever gone through a lot of effort, only for the outcome to be mediocre? That’s kind of what it felt like at first with UI Frameworks. The first assignment very hard, confusing, intimidating, terrible… am I missing any negative adjectives? I almost shut my laptop and gave up. But like anything new, it’s hard at first. I worked through it for a couple hours and finally completed it and let me just say: it was not worth the struggle to be honest. It was the feeling of I did it, but it’s not great. I am a perfectionist and cannot rest easy until I perfect what I am doing. This is the very reason I have a love-hate relationship with art. I need to produce something of perfect quality and when I cannot because I am not familiar with the design tools I’m given, I get very upset. When using UI Frameworks for the first time, I knew I only possessed 1% of the knowledge needed to use it to the fullest abilities. However, as I got more familiar with it after several assignments, I was finally producing work I could be proud of.
No succeeding without failing first
One of the final assignments/projects was to recreate a website’s homepage of your choice. The links could be broken and any animations could be a static interpretation. I thought it would be easy and didn’t start on the assignment until the night it was due. It was a struggle. Let me just say, it is so difficult putting words over an image. On top of that, if you want to set a specific image as a background, good luck. I had at least 90 failed attempts (not kidding) of having the picture be either not a background that filled up the screen or I would do something then add in something minor and the picture would totally disappear. It was a disaster to say the least. I remember countless Google searches of desperately trying to get it to just work. The one thing that really bothered me was the website I chose used an Adobe font primarily throughout the entire page. If you know Adobe, they really suck as much money out of you as possible. It was a whopping $50 just to get the html code for the font I wanted to use. I tried to inspect the code on the actual page, but with no luck because they did NOT use bootstrap to build their site and therefore I was reading what looked like chicken scratch. I was forced to just choose the closest google font, which in my eyes, was very disappointing. I recreated the site as best I could, but what I turned in was definitely not my greatest accomplishment.
The final product
So I guess now is the part where I show you what I recreated. I also wanted to include the actual website link because it is an amazing organization that rescues dogs from Chinese meat shops and puts them in good homes to live better lives full of love here. Who doesn’t love a wholesome organization that helps dogs?
Can you tell which one is real and which is fake? It is definitely not my favorite project, but I had a few successes. I got the picture at the top to have text in it and even a side navigation tab that definitely does (not) work. I still consider it a success, regardless of the font being off, because I learned a lot about creating containers and paddings to make the text not go all the way to the edge and having a nearly perfect text size replication. I am overall pretty impressed with what I was able to do, and I know if I knew more of the ins and outs of Bootstrap (and $50 to pay Adobe for their fonts) that I would be able to perfect it to look identical.
Concluding thoughts
UI Frameworks are difficult. READ, READ, READ! I cannot stress enough how important it was to read up on how it worked, I used FreeCodeCamp to teach me a bit about it as well. Ask questions, practice, read, use Google. Make use of all resources given and those you can find because you will need all the help you can get. I can’t tell you how many times I was so close to submitting a half completed page because it was so frustrating to push forward. Simply not giving up was a success for me and I will only gain more knowledge from this experience. Cheers and good luck with Ur experience… I hope mine didn’t scare you off too bad!