Week Eight
Project #2: Blue Law Integrated Ad Campaign for the Ad Council Presentation
This week marked the official conclusion of project #2, and what a project it has been! Not only was this project a deeper dive into prototyping web and mobile design using Figma, but it was also an important lesson on the value of research. If I had to describe this project in any way, it would be this: research, research, research! Before starting this project, I was told by design students who had taken this course before that sometimes you need to have a minor breakdown before understanding Figma, and now I understand what they meant! Figma can be difficult at times, especially when all of your graphic and text elements keep jumping out of the frame, or when one small element gets messed up and throws off the entire design or causes the prototype to stop working altogether! There were definitely some nights when I needed to step away from my computer just to take a break from Figma and the stress of completing this project on time. However, I can safely say that I understand Figma a little better, which I consider to be a win since I knew almost nothing about Figma prior to taking this course. Plus, the previous project was only design-focused and didn't require students to have interactive features. Now I have two fully working prototypes of my campaign's website, which can be a really fun and interactive way to spice up my portfolio. Overall, I am grateful for this project, despite all the challenges and obstacles, especially towards the end!
The objective of project #2 was to develop an integrated advertising campaign for the ad council to raise awareness about a blue law in South Carolina. Blue laws are considered outdated laws dating back to colonial times, aimed at discouraging religious immorality and promoting attendance at church or religious practices on Sundays. However, in today's age, most of these blue laws have been repealed. To approach the project realistically, as if I were working with the ad council, I set out to find an active blue law in South Carolina and discovered a specific law that prohibits turkey hunting on Sundays. After selecting this law, I spent about two weeks researching it, creating a mood board, and determining the visual direction for my ad campaign. Then I spent another two weeks designing and prototyping a desktop and mobile website. While defining the visual direction, I also delved into designing personas and using archetypes to guide the tone and voice of the ad campaign. I chose to base my campaign around the innocent and caregiver archetypes. I created six personas, three for kids and three for adults, as the target audience for the campaign was children and their parents in various regions of South Carolina. Drawing inspiration from the Smokey Bear and Woodsy Owl campaigns, I decided to continue the themes of the two ad council ad campaigns and create a fun, playful mascot for the campaign. As a result, Tom Turkey was born, with the mission to raise awareness of hunting safety and regulations and to protect the wild turkey population of South Carolina.
When designing Tom's look, I followed the same line art style as the ad council's previous mascot-centered campaigns. These designs were used for the final billboard designs, which were the first visual element of my campaign. Next, I worked on desktop and mobile design using Figma to create a website for my ad campaign. I intended for the website to be viewed on iPhone 13 and iMac prototypes. Designing the mobile app was relatively easy as I studied websites such as the national park's main website, the South Carolina state parks website, and the Smokey Bear web page. This helped me identify strong design elements to integrate into my web design and what elements to avoid, such as excessive text and insufficient images. From these studies, I created a mobile and desktop website that prioritized the message and mission of the ad campaign without overwhelming the user with text. I focused on providing an easy, navigational user experience by giving the audience multiple opportunities to navigate to the same places and incorporating plenty of white space to give the users' eyes a break. The website is designed to be easy on the eyes, not overwhelming to navigate, kid- and parent-friendly, and to have an overall nature, woodsy vibe that captures the playful and caring personality of Tom Turkey. There are small interactive components on the website that give the design a playful feel, such as images changing when the mouse hovers over them, fun bold graphics creating a nature/woods atmosphere, and easy-to-read text with headings that clarify the content without requiring the user to read the entire body copy.
The overall experience was quite challenging at times, but completing this project has been incredibly rewarding. I hope to look back on this project in the future and be grateful for the opportunity to learn and grow with Figma. I also aim to continue improving my prototyping skills. While Tom Turkey may not be a real mascot for the Ad Council, I'm glad I had the time to learn and develop this character, and I hope to see more of Tom in the future. For now, I'm happy to celebrate the completion of this project and I look forward to what's in store for project #3!
Figma Module 4: The Future of Design Systems is Semantic
The reading for this week delves into the evolution of design systems, with a focus on how Figma's new feature, variables, is transforming the design and development landscape. Although I'm not fully acquainted with components and design tokens in Figma yet, this article provided a comprehensive exploration of this more dynamic and flexible approach to coding principles.
According to the article, a variable is a reusable, changeable value that can store design data such as colors, sizes, or strings. They are more versatile than traditional design tokens, which were limited to representing fixed design elements like colors or typography. I remember experimenting with design tokens when Professor Khalili first covered these components during her lecture on single-scroll websites. Variables enable dynamic features like theming and prototyping, allowing designs to adapt to different contexts such as light/dark mode, languages, or screen sizes. This provides more flexibility and structure within the design itself.
Design tokens have been in use since 2014, with Salesforce being a key pioneer. These tokens represent small, repeatable design decisions such as colors and typography, which contribute to maintaining consistency across different platforms. Major companies like Google Maps utilize tokens to simplify complex design systems by centralizing control over design changes, ensuring consistency, and reducing redundancy. Variables are seen as an expanded concept, with tokens considered a specific type of variable. Variables help teams switch between contexts more easily and empower designers to work across different platforms with minimal complexity. They also help bridge the gap between design and development, promoting a shared language that both sides can understand and use to increase workflow. While I am primarily focused on the design side, it's interesting to glimpse into the side of development for a change. Does this convince me to get into coding and switch careers? Not exactly, but this article is informative in giving me a very brief look into that side of the industry and how it can apply to the world of design!
When it comes to prototyping, Figma's new capabilities for prototyping enable variables to create responsive and interactive prototypes that closely resemble real product experiences. Variables can be utilized to perform mathematical operations, combine expressions, and even simulate real-time user interactions, all without the need to write code. This empowers designers to swiftly validate ideas, test prototypes, and gather feedback without having to wait for development teams to build actual interfaces. Overall, this article provided valuable insights into variables, enhancing my understanding of development in the design process.