Barefoot Magazine

Interactive Layout Design

Barefoot Magazine – Interactive

Design Layout Project


 This project was for my digital design and interactive layout class. The objective of the project was to create an interactive booklet that was compatible for the web browser and mobile.

For this project, I first made a mind map to direct myself in what topic I wanted to design an interactive magazine for. Barefoot Magazine is a fictional magazine featuring trending topics. This one is based on “Slow Fashion” 


Designer, Content Creation


InDesign, Photoshop


01. Brainstorm

For this project, I created a mindmap to figure out what topic I could write a lot about.

02. Create

I made two versions of this interactive booklet, one for mobile and one for desktop.

03. Finalize

In the end, I submitted my project however, since then I made a new iteration that has a better layout and content.

01. Brainstorm

Once I chose my topic, I started with brainstorming a name for the magazine,  table of contents, created a moodboard, and started writing. I ended up with 4 different stories all about sustainable fashion.

It took me some time to write and edit the stories, but after I was really excited to put these stories into a magazine!

After the heavy lifting of writing was done, I created a moodboard to give myself an idea of the different style options I could go with it. In the end, I went for a nature inspired theme with bright oranges, and other colours.

Following the moodboard, I gathered all the images needed to fill my magazine and gave my stories one last edit.

02. Create

Once I had everything I needed, I created my Indesign document and played around with some layout options. It took a lot of shuffling the content, but in the end I was happy with the layout.


The last step to this interactive design magazine, was critical – it was learning how to make interactive. It was my first time using the interactive workspace, and I was amazed at all the possibilities there were for making it interactive. I made the table of contents interactive, so if you click on a story title, it takes you to that page and I added next/previous buttons on every page using a master layout.


Once the web version was done, I made a mobile version layout. This was one of the requirements for the assignment and was a good exercise at practicing layout design for mobile, especially since its popular. It took me longer than I thought because I needed to present the same content in a smaller space, but I was happy with the final product.

03. Finalize

Check out Barefoot Magazine

Want to bring an idea to life? Let’s make it happen. Reach out here.