Design exploration

April 18, 2023

Design exploration

Fadil Puthiya madathummal peedikakandy/0354579/bachelor of Design in creative media

Design exploration

Instructions

Create an innovative SDG vision shaped by current design trends and emerging creative technology with “playfulness” at the heart of the experience.

Reflective report - week 1

During week 1, our instructor, Miss Anis, provided us with an overview of the project and set our expectations for the module. The main goal was to create an innovative vision for the Sustainable Development Goals (SDGs) by incorporating current design trends and emerging creative technology while emphasizing the element of "playfulness" in the user experience. To kickstart my understanding of the SDGs, I began reading about the 14 different goals and their respective purposes. This initial research helped me gain insight into the various areas that the SDGs aim to address and the global challenges they seek to overcome.

Week 2

In week 2, I became particularly interested in SDG 14: life below water and SDG 2: zero hunger. Inspired by these goals, I conceived the idea of creating an eye-opening video to raise awareness about zero hunger, as well as a parallax-animated website that would explore the significance of life below water.

To provide a reference for my idea, I shared a website I found, https://2019.makemepulse.com, with the lecturer. The website made a strong impression, and the lecturer expressed genuine interest in the concept. Encouraged by the positive feedback, I decided to focus my efforts on designing the website centred around the topic of life below water.

Week 3

Week 4

In week 4, after careful consideration and brainstorming, I finalized my decision regarding the direction of my final project. I chose to concentrate on the theme of sustainability in the ocean, specifically highlighting the issue of plastic pollution and its detrimental effects on turtles and other marine creatures. My aim was to create a visually aesthetic, playful, and engaging animated website that would effectively communicate the importance of addressing this critical issue and inspire action.

With the concept of life below water and plastic pollution in mind, I envisioned a website that would captivate users through its vibrant visuals, interactive elements, and engaging storytelling. By employing playful design elements and incorporating animations, I aimed to make the website not only informative but also entertaining and enjoyable to explore.

The main purpose of this website would be to raise awareness about the impact of plastic harm on marine life and encourage individuals to adopt more sustainable practices. Through the use of visually appealing graphics, compelling narratives, and educational content, I aimed to evoke an emotional response and motivate visitors to take an active role in protecting the ocean and its inhabitants.

By combining creativity, technology, and the power of visual storytelling, my goal was to develop a website that would effectively communicate the urgency of addressing plastic pollution while fostering a sense of playfulness and fun. I was excited about the potential of this project to make a meaningful impact and inspire positive change in how we interact with our environment.

Week 5 Proposal presentation

Week 6

I delved into the design phase of my project by starting to work on the landing page using the design software Figma. While I had yet to acquire the skills for animation and implementing the parallax effect, I decided to focus on the visual design aspect first. My strategy was to complete the entire website design and then dedicate time to learning and incorporating animation techniques to enhance the overall user experience.

With the aim of creating an impactful and visually appealing website, I dedicated my efforts to crafting an engaging and captivating landing page. Through careful consideration of colour palettes, typography, and layout, I strived to create a visually cohesive and aesthetically pleasing design. By leveraging Figma's powerful design tools, I was able to experiment with various elements and iterate on the design to ensure its effectiveness in conveying the intended message.

Week 7

During week 7, I dedicated my time to further refining the visual elements of my project. In order to enhance the overall design and incorporate captivating visual effects, I decided to explore the use of generative AI. Specifically, I utilized a paid AI tool called Leonardo AI, which allowed me to generate unique visual effects and design elements for my website.

Using Leonardo AI, I was able to tap into its powerful capabilities to create stunning visuals inspired by marine life. This tool provided me with a range of options and creative possibilities, enabling me to bring my vision to life in a unique and captivating way. It is important to note that the use of Leonardo AI does not require any citations and I own all the inputs created for the website

Nevertheless, each image produced by this AI possesses imperfections and issues. Hence, I must personally engage in drawing, refining, shading, color grading, and carefully separating the background and foreground elements to ensure consistent aesthetics across the website design. Undertaking these tasks has proven to be unexpectedly challenging, yet it has granted me an opportunity to acquire newfound knowledge and skills.

Week 8

Week 8 was independent learning week. but did some work and started to understand how Figma animation works

Week 9

During week 9, my focus was primarily on working on the design of the "MyTiger" poster. In line with the theme of sustainability and the impact of plastic pollution on marine life, I came up with the idea of creating a visually impactful poster featuring a fish made entirely out of plastic materials.

To bring this concept to life, I utilized my graphic design skills and software tools to carefully design and craft the plastic fish illustration. I paid close attention to the details, ensuring that the visual representation of the fish accurately conveyed the detrimental effects of plastic pollution on marine ecosystems. By showcasing a fish composed of discarded plastic materials, I aimed to raise awareness and encourage viewers to reflect on their own consumption habits and the consequences they may have on the environment.

The process of designing the plastic fish poster involved selecting appropriate colors, textures, and shapes that effectively communicated the message of the harmful impact of plastic waste on marine life. I wanted the poster to serve as a powerful visual reminder of the urgent need to address plastic pollution and promote sustainable practices.

MYTIGER POSTER FINAL OUTCOME

Week 10

During week 10, I dedicated my time to further refining the visual design of the website. To create a captivating and engaging user experience, I focused on aligning the various pieces and artworks in a harmonious manner. This involved carefully arranging the elements on each page and ensuring that they flowed seamlessly from one section to another.

One aspect that I particularly emphasized was the separation of the foreground and background elements. By leveraging the power of Photoshop, I isolated different layers, allowing me to animate them in a more visually appealing and dynamic way. This technique added depth and dimension to the website, creating a captivating illusion of movement that enhanced the overall user experience.

The process of separating the foreground and background elements in Photoshop required meticulous attention to detail. I carefully selected and masked each layer, ensuring that the transitions were smooth and seamless. By separating these elements, I was able to animate them individually, bringing life and interactivity to the website.

Week 11

During week 11, I had the opportunity to showcase my progress to Miss Anis, I prepared a series of slides to demonstrate the evolution of my work, highlighting the key aspects of the visual design I had been focusing on. Through this presentation, I aimed to provide an overview of my creative journey and the development of the project thus far.

I continued working on polishing the visual design of the website. This involved fine-tuning various elements, such as color palettes, typography, and overall layout, to create a visually cohesive and aesthetically pleasing experience for the users. By paying attention to detail, I aimed to ensure that every aspect of the design aligned with the intended message and objectives.

While my primary focus during this week was on perfecting the visual design, I was also mindful of the upcoming stage of the project: animation. Understanding the importance of seamless integration between design and animation, I made sure that the visual elements I created would lend themselves well to motion and interactivity. This meant considering factors such as layer organization, visual hierarchy, and potential animation effects to enhance the overall user experience.

To prepare for the animation phase, I conducted research and explored various animation techniques and tools that would enable me to bring the website to life effectively. This involved studying tutorials, experimenting with different software, and seeking inspiration from industry professionals. By gaining a deeper understanding of animation principles and best practices.

Week 12

Week 12 felt like it's like trying to cram an entire semester's worth of work into a few short weeks is one of the most hectic weeks because I'm still miles away from completing this design, and the deadline is only 2 weeks left. I rushed everything and stayed on campus till 4 am for a few days to get the progress to 70% with no sleep whatsoever

Week 13

During week 13, my progress was somewhat delayed due to a mild illness and the presence of additional deadlines from other modules. Nonetheless, I persevered and made the most of my time. This week, I successfully completed the essential tasks of separating, colour grading and shading all the images that will be incorporated into my project. This painstaking process ensures visual consistency and enhances the overall quality of the project.

Week 14

And here we are, the final week! As I reflect on my progress, I find myself at the 80% mark. To give my full attention to this design exploration project, I had to put some other projects on hold. It wasn't just an obligation; I genuinely wanted to bring this project to life, and I've been having fun along the way. In order to make significant progress, I made the decision to spend an overnight stay on campus for a few days. This allowed me to focus on completing the animation, refining the visuals, perfecting the typography, and adding the finishing touches.

Since I have done all the images I started working on the animation to polish and refine the movements

After hours of moving around and trial and error, I Managed to get a lot of the frames done

The next problem was the voiceover. I couldn't find a way to incorporate audio directly into Figma

Since I didn't have the luxury of time to record the voiceover myself or seek external assistance, I found out about a lifesaving tool called eleven labs. It provided me with a professional-sounding voiceover that kinda complemented the project.

I came up with an alternative approach. I decided to use Adobe Premiere Pro to carefully synchronize the audio with a video scroll-through of the website. This technique would allow me to showcase the project in a visually engaging manner.