Capstone Project
Building a Promotional Website for the Graphic Design Program at the Newhouse School of Public Communications at Syracuse University Using Generative AI and Synthetic Media
Prototype video created in Figma.
My project aims to showcase how artificial intelligence can improve a designer's productivity, efficiency, and creativity. I designed a website for the Graphic Design Program at the Newhouse School at Syracuse University, creating a marketing campaign and website within a compressed timeframe. This project will highlight the potential benefits of integrating AI tools into the design process and create a framework for producing bespoke content quickly.
I needed to create a video for the about section. Fortunately, I had a convenient solution. I requested a script from Bing and utilized an AI-powered tool called Reals.ai to produce the video. I inputed the content into the Reals.ai forms and edited the video style options to produce an excellent promotional video for the graphic design program at Newhouse. After editing the video and making various changes, I posted it to my youtube page as an unlisted video. Next, I embedded it within the about page on the website.
Case Study
Website Link:
http://matthewbrodsky.com/index.html - Username & Password: skynet2023
I allocated one week to accomplish as much as possible for my capstone project, relying solely on AI to execute the tasks while I provided guidance. The results were extraordinary.Within a week, AI conducted market research, generated a social media and email campaign, designed a website, created images, specifically a "hero image" graphic, and scripted and produced a video about the Newhouse School.
Output: Bing generated over 1,645 words of text, Midjourney made over 40 images for the site; GPT-4 produced a functional HTML and CSS file with a CTA form using JavaScript; other systems created social media campaigns and posts; and another system developed a video with an actress, voice files, and motion design.
Parameters: I had only one week, with one person, taking only one HTML class to produce this entire marketing, social, and digital promotional campaign.
Content: I "created" a marketing/social media campaign, an email campaign, a coded website, a logo, a hero and secondary images, a script and animated video, and other supplemental materials.
Step-by Step Synopsis:
Educate the AI about the project and request it to learn autonomously.
Use Bing, a GPT-4 model connected to the internet, to conduct market research and learn about the project and its market.
Request Bing to create a document outlining an email marketing campaign and a single webpage to promote the program.
Ask Bing to create four emails for the campaign.
Utilize Bing’s knowledge of the campaign to initiate the website’s construction.
Employ ChatGPT-4 to build the website by providing it with instructions and informing it that it is an expert site designer creating a promotional webpage/homepage for the Graphic Design Program at the Newhouse School.
Code the content within each section of the homepage using ChatGPT-4, ensuring that it codes one section at a time without starting from the beginning.
Add JavaScript for the CTA section using ChatGPT-4.
Create a CSS file for the website using ChatGPT-4 and explaining the Syracuse hex codes and fonts for the website’s style guide.
Transition to Midjourney, a text to image AI service on Discord, to create images for the homepage’s hero section and program overview section with minimal use of Photoshop.
Head back to Bing’s AI and ask it to research and help create content for the homepage.
Identify sub-pages for the website by asking Bing and have ChatGPT-4 create a navigation system by coding a navigation bar at the top of the website.
Show ChatGPT-4 the CSS code it had previously made with the Syracuse brand guidelines in mind and ask for the same.
Repeat the process used to create the homepage to make sub-pages by asking Bing for an outline for each page and taking each outline into ChatGPT-4 to create the HTML for each sub-page.
Get the CSS code from ChatGPT-4 for each sub-page and generate the rest of the content using Bing and images using Midjourney.
Link each page within the navigation so each webpage functions as one promotional site.
Return to Bing to establish a social media campaign by asking it to compose a headline, punchline, and CTA line.
Use Adcreative.ai to produce Instagram post options using text information, color combinations, and images made in Midjourney.
Input information provided by Bing into Adcreative.ai’s form to generate unique options and layouts for Instagram posts.
Request a script from Bing and use Reals.ai to produce a video for the about section.
Input the content into Reals.ai’s forms and edit the video style options to produce a promotional video for the Graphic Design Program at Newhouse.
Edit the video and post it to a YouTube page as an unlisted video before embedding it within the about page on the website.
Make the HTML website a live site on the internet.
Accomplishing this volume of work independently would have been time-consuming, spanning several weeks or months. According to a recent Forbes magazine article, the website alone should take, “10-14 weeks from ideation to completion” (How Long Does It Take To Build A Website? – Forbes Advisor). While many humans could potentially produce better results, the speed at which AI completes the tasks is unmatched. This presents both a challenge and an opportunity. How will it impact our lives when we can execute superhuman quantities of work? Will we work less and enjoy more leisure time? Will we work more, taking on the roles of multiple individuals? Hopefully, we are heading towards a future where we can delegate trivial tasks to AI, enabling us to focus on more meaningful and fulfilling work.