Graphic Design is my Passion
24 Feb 2022To you, 20(00) Years in the Future
Working with UI Frameworks was eye opening to me. Compared to using straight up HTML and CSS, it gave us some type of structure that didn’t make our websites look like it was from the early 2000’s (no offense to anyone who created those websites). To me, this module about UI Design serves as an example of how far website designs have progressed in the past couple decades. Nowadays, we make fun and joke about websites that only contain text in Times New Roman font and poorly floated images or forum websites with “basic” design and formatting, but it was the only kind of website people knew how to make at the time. Now, we have websites that have fancy borders, menus with fancy animations, videos and animations that play in the background, and so much more cool features. A good example would be the League of Legends website. At the top of the screen is the game’s logo with a video playing in the background. When we scroll down, we’re presented with a section that the user can interact with to view different characters accompanied with a small window playing another video. When we scroll down even futher, there are portions of the website that appear right when the user scrolls over this specific portion of the site. Compared to the website we designed on the freecodecamp curriculum and the Browser History website, these websites are universes apart from each other. As much as we make fun of these “poorly designed” websites, it’s where we all have to start from in order to do all these fancy things. Really, I think it’s amazing how we’ve come from making Times New Roman blogs and forums to having fancy animations and art showcasing video games or products from companies.
My Love/Hate Relationship with Semantic UI
Personally, using Semantic UI kind of revived my inner artist. Even though the only websites I’ve created with HTML, CSS, and Semantic UI were for assignments and WODs, I have visions for websites I want to create. Even though I don’t know how to implement videos in the background or let alone have a game I could make a website for, I feel motivated to create different kinds of websites. Using Semantic UI in general looked better than using straight up HTML and CSS. I liked how we can have containers and format everything inside to make it look nice, and especially using columns made things look nice. There are a lot more convenient features of Semantic UI that can help us create a fancy and neat looking website. However, the price of using Semantic UI is the frustration of not knowing why something is not looking the way you want it to look. Multiple times in the past two weeks, I’m left (figuratively) pulling my hair out because I can’t figure out why my text isn’t changing color or why my menu items in the header aren’t lined up correctly. Especially when I was doing the Murphy’s practice WOD in class, there were multiple times where the footer text wasn’t formatted correctly even though I was giving it properties in the style.css file and styling it in that div. Another thing that frustrated me was trying to get images to stay in the right place and adjusting their size. When I was creating the duplicate website for the E36 website, I found it extremely difficult to format a picture in one container. If your picture is where it’s supposed to be, then everything is good. But when it’s not where it’s supposed to be, then it gets really frustrating trying to add margins or padding to make it sit where it’s supposed to be.
My New Habit
Because of this module, I found myself becoming curious about how big companies such as Microsoft and EA Sports code their websites. I frequently use the developer tools to look at how many containers they used, and what those containers were holding. And since I was looking through the code, I found out that I could literally pluck the photo they used for the background or a certain part in the container. This would have been nice to know before turning in my E36 submission… The header for the website I chose took up half of the picture at the top of the website so I had to settle with screenshotting part of the picture then implementing that into my website. Overall, I’m thankful that this module let’s me see how other people code websites for big companies. But at the same time, I’m also dreading the fact that I’ll spend time looking at the HTML and CSS code for a website instead of doing my homework.