‘Cut out’ Paper wireframe technique
I have previously created paper wireframes for my elements project however I wanted to take that one step further and try the ‘paper- cutout’ technique. I have seen many people use this method of wireframing before but I haven’t tried it for myself, so I decided to try it out on this project. By taking my previous wireframe drawings I simply used scissors and paper and cut out the basic elements that would appear on each screen. Here’s how it went…
Screen 1- Welcome screen or log in?
Screen 2- The full periodic table
Screen 3- The element and the planet it is named after
Screen 3 (scrolled down)- Images of the elements atomic make up and or images of the element in real life alongside some information.
Videos
The good thing about cutting out paper wireframes is that you can move them easily and quickly. I took a video ( see below) of myself moving the elements that I want to add effects to on this website. For example I want the planet image to spin around or move in some way- I need to do some research into how this would work. I also took a video of myself gesturing how I want there to be moving images either automatically swiping or appearing on the page or else a tap element would work better I need to explore that too. I have added those videos below.
How did this go and what did I learn?
This is my first time doing this technique. I have read about this previously and I have always wanted to try it out, I think this was a success. Physically cutting out the pieces of paper was time consuming but it allowed me to move different elements freely and with ease and I was able to move layouts and change them very quickly. I want to keep this student app very simple and straight to the point so I don’t want this app/ website to be over crowded in nay sort of way, like space I want it to be minimal. Therefore making the technique above useful as I didn’t have too many elements and buttons etc. Being able to video myself moving the pieces of paper to show what I intend to do was very helpful, I will use this for exploring animation in the next couple of weeks but to see myself do this action is good to have in my research.
This certainly refreshed my wireframing skills and it was actually very fun, taking the wirefames off the page and into my hands. I think that I will try this technique in the future for the projects as I found it very beneficial.
What is next?
I will take all of my wireframes about and the previous wireframes into Figma and begin creating digital wireframes. I will also begin to create the brand for this app, I have a lot of ideas and I am excited to see where this goes and explore all of my different ideas. I am excited to work on some animation and motion for this project ( the videos above) this is something I haven’t looked at within this course yet so I am excited to learn and see how that would work.