Project: Friends Among Strangers Website Mockup
Project type:
A one-page website mockup for my podcast, Friends Among Strangers.
“I wanted to have a central place where listeners could find recent episodes, contact info, and learn more about the podcast itself.”
Project overview:
My podcast had a presence on social media already, but lacked a website. I wanted to create a one-page mockup that would introduce the podcast to listeners, with a section that links and previews to the latest episodes, as well as info on where to listen, contacts, and social media links. Once my co-host and I were satisfied with the overall look and feel, the rest of the website would be designed and built.
Role:
Since this project was for a podcast I personally co-hosted and co-produced, I was both the client and the designer. My co-host, Rebecca Sullins, was also a client and I therefore needed to run the design by her, as well.
Deliverables:
A design comp, made using Adobe XD and Figma, which was exported to a PNG file.
Goals:
The main goal was to design a look and feel of the website I would like to use for my podcast. I wanted to have a central place where listeners could find recent episodes, contact info, and learn more about the podcast itself.
Problem:
The main issue was ensuring a consistent branding and identity that would match what we already had for our social media accounts, while also creating a clean, attractive website.
Design Process
Wireframe
I started with a paper wireframe to make sure I had the clean layout I wanted. From there, I uploaded the photo I took of the paper wireframe and used that to inform the digital wireframe, then the completed look and feel, which I created with Figma.
After getting feedback from my co-host, I decided that it would work better to move the host bios to its own page so that the main page could act more as a landing page for the latest episodes. Also, instead of having only one episode featured prominently, it worked better for us to have the four most recent displayed so that new listeners could see more of what we have to offer right away. I removed the social media feed sidebar to keep the page cleaner, too. I updated the wireframe with Adobe XD once I decided which elements to include or leave out.
“I started with a paper wireframe to make sure I had the clean layout I wanted.”
Colors
The color scheme came from the logo that had already been designed for the podcast by my eldest son, Eli Northcutt. From there, I chose the ones I felt complemented each other well and would look best as backgrounds, highlights, and text.
“I chose the [colors from the logo] I felt complemented each other well”
Typography
Since the podcast discusses seasons of the show that were filmed in the mid-1990s, I wanted to use a font that evoked that era. I felt that Special Elite had the correct look to achieve that goal in the larger headings.
For the smaller headings and paragraphs, I chose the sans-serif font Catamaran because it was clean and easy to read.
“Since the podcast discusses seasons of the show that were filmed in the mid-1990s, I wanted to use a font that evoked that era.”
Imagery
In order to showcase the most recent episodes, I pulled the graphics I had created for each episode in Canva. I included a preview of each episode’s show notes, which listeners could view on their podcast platform of choice, in order to show what each episode discussed.
In the full website, the idea was to have listeners click the image of the episode, which would take them to the episode’s page with the episode itself embedded for listening. The episode images and notes would update as new ones were released.
“In the full website, the idea is to have listeners click the image of the episode, which would take them to the episode’s page with the episode itself embedded for listening.”
Final Design
Challenges:
The main challenge was remembering how to create the digital wireframe and completed look and feel in Adobe XD. It had been a little while since I had used XD for a design project, but I was able to find the information I needed to design and complete the website mockup by revisiting lessons in my Skillcrush classes.
The big takeaway for me was that I can always find resources to help me be successful whenever I feel stuck or unsure during the design process.
“The big takeaway for me was that I can always find resources to help me be successful.”
Conclusion:
The conclusion was a one-page mockup to showcase the look and feel I was going for in the podcast’s website. It solved the problems of consistency in branding and identity by utilizing the materials that had already been created for social media. The next step would be to draft additional pages for the website, such as the “about the hosts/podcast” page, and ultimately code the site so listeners can find what they need to enjoy the podcast.
What the client has to say about the finished product:
“This looks great. I think once we get this coded, it’ll really help us get us more listenership, as it’ll make us look more professional having our own website in addition to our social media accounts.”