HTML/CSS Website

Web Content Management
In my Web Content Management class, I took a deeper dive into honing my HTML and CSS skills while immersing myself in standard web practices and various design principles. The pinnacle of my learning experience was manifested in the final project, where I crafted a website from scratch using HTML and CSS, bringing to life an imaginary business in a digital realm.

The Process

Coding a website for a made-up business was a month-long journey that had its own rhythm. I started things by laying down the groundwork—a basic website structure with a keen eye on typography hierarchy. Then, I used CSS to add style, throwing in grids and media queries for responsiveness in different screen sizes. Here's the kicker: our professor swears by the "wax on, wax off" technique (yeah, straight out of Karate Kid). This meant we had to deliberately make our creation look like a digital eyesore before we could add our personal touch. This was especially difficult for us GrC majors because we love making things look pretty. After battling through the ugly phase, I wrapped things up by picking colors and crafting a logo to put the finishing touches on my website. Even though the journey was challenging, I was more than happy with my final product and grateful for the innovative learning process. From this experience, I learned the importance of beginning with a solid foundation and effective organization before adding visual elements.  

Design Principles

After spending all quarter learning about these design principles, we were graded on how well we implemented the following principles into our final project.

  • Aesthetic-usability effect; Form follows function; Expectation effect
  • Entry point; Visibility
  • Consistency; Similarity
  • Proximity; Horror vacui
  • Mental model; Wayfinding; Iconic representation; Fitts’s law
  • Alignment; Hierarchy
  • Color; Highlighting; Von Restorff effect
  • Picture superiority effect; Face-ism ratio
  • Legibility; Chunking
  • Hick’s law; Progressive disclosure

Final Website

Latte and Leaves

Thanks for viewing!

This course and its final project have been pivotal in expanding my grasp of design principles. The exploration of hierarchy in typography, strategic organization of elements, and the importance of persevering through challenges have become integral facets of my evolving design approach. This project, a tangible outcome of a quarter filled with diverse learning opportunities, not only signifies the completion of assignments but also serves as a reflection of my growth as a designer. It encapsulates the practical application of newfound skills and a heightened design sensibility honed throughout this transformative period of learning.

home