web design – Page 2 – Learning Journal

Applying UX and UI Principles Through a Film-Based Website: The Shawshank Redemption

This week, I worked on designing a fictional website for the movie The Shawshank Redemption using Figma. The goal of this project was to apply visual design principles while also thinking about user experience (UX) and navigation flow. I wanted the design to capture the emotional tone of the film, including its themes of hope, resilience, and friendship, while maintaining a clean, modern layout suitable for a movie-focused website. You can view my interactive prototype here: Figma Prototype

The structure of the website includes a landing page with a hero section, a short synopsis of the film, a cast section with actor images and names, and a simple navigation bar. I focused on maintaining visual hierarchy by using large headings, consistent spacing, and high-contrast colors to guide the user’s attention. The typography was chosen to reflect a sense of depth and seriousness, similar to the mood of the movie.

Figma was incredibly helpful throughout the process. I used frames and auto layout to keep spacing consistent across different sections, which made the design feel more organized and scalable. I also created components for elements like buttons and movie cards, which helped me make quick updates and keep everything consistent.

The prototyping tools in Figma allowed me to simulate the user’s experience on the site. I added interactions like hover effects and page transitions to test how users might move through the design. While testing, I noticed a few UX issues, such as unclear navigation and misaligned buttons. I revised these elements to improve usability and flow.

This project gave me the chance to apply both visual and interactive design skills. It also helped me become more confident in using Figma not just for static design work, but also for building working prototypes. I’m proud of the final result and excited to keep learning and designing more advanced user experiences in future projects.

P.S. If you’re into design and use Figma regularly (or want to start), don’t miss config 2025, Figma’s annual design conference. It will take place on May 6-8, 2025, both in-person in San Francisco and online for free.

It’s a great opportunity to learn from industry leaders, discover new features, and get inspired by real design stories from around the world. I highly recommend joining, even just attending online can spark so many new ideas!

Figuring out Figma & Ditto Clipboard

Using Figma to design my microsite has gone very smoothly, if you ignore my mess of layers and the random slivers of empty space that like to appear and disappear along the edges of my project.

Midterm, Midpoints, and Madness

Midterm: Sorted. Midpoint: Reached. Now, I need to figure out how to keep myself occupied for the next two weeks.

No expert here, but I have learned a few tricks.

Designing for the web can be …

Week 8: Midterm and Responsive Design

Now that we are halfway through the semester, I can see my CSS and HTML knowledge improving. All of the practices, notes, and challenges have helped me practice strategies and learn new techniques. When working on the Midterm Drafts and learning responsive design, I can see my growth from my previous class. To me learning responsive design for me was a major step towards making more professional sites.

Flexbox Torture

You would think learning would be fun. But it turns out

Week 5 & 6 Layout Techniques

These last two weeks have been a challenge! I had never even heard of grid, positioning, or floats, until this course. This is all very new and a bit overwhelming, but I am determined to understand it to the best of my abilities.

Grid Garden Party

I played all 28 levels of the Grid Garden game and started our Grid Challenges assignment feeling pretty confident, only to get completely humbled!

Typography is Great! But consider slower network speeds!

This week we went over how to properly incorporate fonts in our web pages. There’s a lot to typography and there’s even more to know when it’s used on the web!

95% of web design is typography?!? Oh no! 😱

Okay, okay, I confess. I don’t have strong feelings for or against any typefaces. Over a decade ago, when a classmate asked our professor to be excused from using Helvetica because she hated it, I felt puzzled. “How do you grow to hate a font? What did the font do to you?” I wondered.

Typography This Week

Who knew there was so much to

First Two Weeks In Web Design

The first two weeks have been a breeze, with plenty of fun and enjoyment in new material. The HTML discoveries made in our resumes and the deep dives into the world of elements have been valuable learning experiences.

My Journey with HTML

My previous experience with HTML / CSS, and how I have been refreshing myself with the material!

Fun with Lists and Tables

You know you’re a nerd when you’re excited to learn about making lists, tables, and forms with HTML5! Interactive elements are still new to me and I’m looking forward to learning more about them.

Woman meditating about HTML dies and no one notices for twenty years.

Yes, a mummified woman was found in the lotus position and believed to have died while in deep meditation about HTML. She did however leave a

Back at it

These first two weeks have been what I would call a shock. Winter break did not feel like very long, but I still find myself with brain fog on week 2.

How Do I Code Again?

Jumping back into HTML after a month of not using it has been humbling to say the least. While I remember most of the tags that I used in my Introduction to Web Design class, I’m realizing how much I’ve already forgotten in such a short amount of time. On top of that, I’m also starting to realize how much I don’t know about coding in general.

A Quick Tour of Week 2

Week 2 of my AAD0086 class has been a nice warm-up of what’s to come. I appreciate the reintroduction to HTML through our future resume project, which was harder than I thought it would be given I’d just finished 0085 last semester. My first post is a reflection of what I’ve learned so far and what I’m looking forward to in this class.

Thinking of my final

This past week I have been thinking about what I want to do for my final.

Parallax and Bootstrap in CSS

Week 12 of this semester focused on utilizing CSS parallax and Bootstrap. Both are valuable features that enhance website aesthetics and streamline the design process. I’ve discovered that parallax is particularly effective for storytelling and product presentation, as it adds a visually appealing element to the website. However, it’s crucial to exercise moderation, as excessive use can lead to monotony and repetition.