{"id":1962,"date":"2025-03-24T05:11:38","date_gmt":"2025-03-24T05:11:38","guid":{"rendered":"https:\/\/appliedartand.design\/lj\/?p=1962"},"modified":"2025-03-24T05:11:38","modified_gmt":"2025-03-24T05:11:38","slug":"applying-ux-and-ui-principles-through-a-film-based-website-the-shawshank-redemption","status":"publish","type":"post","link":"https:\/\/appliedartand.design\/lj\/2025\/03\/24\/applying-ux-and-ui-principles-through-a-film-based-website-the-shawshank-redemption\/","title":{"rendered":"Applying UX and UI Principles Through a Film-Based Website: The Shawshank Redemption"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

This week, I worked on designing a fictional website for the movie The Shawshank Redemption<\/em> 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<\/a><\/p>\n\n\n\n

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.<\/p>\n\n\n\n

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.
<\/p>\n\n\n\n

The prototyping tools in Figma allowed me to simulate the user\u2019s 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.<\/p>\n\n\n\n

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\u2019m proud of the final result and excited to keep learning and designing more advanced user experiences in future projects.<\/p>\n\n\n\n

\n

P.S. If you\u2019re into design and use Figma regularly (or want to start), don\u2019t miss config 2025<\/a><\/strong>, Figma\u2019s annual design conference. It will take place on May 6-8, 2025, both in-person in San Francisco and online for free. <\/p>\n\n\n\n

It\u2019s 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!<\/p>\n<\/blockquote>\n\n\n\n

<\/p>\n","protected":false},"excerpt":{"rendered":"

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, … Continue reading “Applying UX and UI Principles Through a Film-Based Website: The Shawshank Redemption”<\/span><\/a><\/p>\n","protected":false},"author":101,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[240],"tags":[216,16,268,35,18],"class_list":["post-1962","post","type-post","status-publish","format-standard","hentry","category-aad-086-sp25","tag-prototype","tag-design","tag-figma-2","tag-responsive-design","tag-web-design"],"_links":{"self":[{"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/posts\/1962","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/users\/101"}],"replies":[{"embeddable":true,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/comments?post=1962"}],"version-history":[{"count":1,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/posts\/1962\/revisions"}],"predecessor-version":[{"id":1964,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/posts\/1962\/revisions\/1964"}],"wp:attachment":[{"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/media?parent=1962"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/categories?post=1962"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/tags?post=1962"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}