After completing my sketches, lo-fi wireframes, sourcing and creating all the content I needed I am now ready to take all of these elements and create my high-fidelity mock-ups for my immersive prototype.
I will be building my immersive prototype using Figma, as we may turn this prototype into either a website or an e-book I have decided to start with a desktop frame in my case for a Macbook Pro 16”.
As I am going to be building an immersive prototype, animations and transitions will be a key part of my final product however, to make these work sometimes you have to create multiples of certain layouts or use workarounds, especially with the smart animate tool. As my prototype may not work as intended at a critique due to these features, I decided to first create a static layout from which I could plan these features and which could work as a backup if I had issues.
I created this layout as if I were creating a single-page website, therefore I made it so that you simply scroll from top to bottom. This layout does not contain any of the interactive elements that I wish to add to my prototype as this is designed as a backup if that prototype doesn’t work.
I used the colour palette and other design decisions I had made while creating my style tile and I am happy with how they have worked as part of this mock-up.
I did notice some issues with this layout, I am not happy with how my sub-headings look they are too big and don’t fit with the flow of the content. Also, some of the spacing between elements needs work.
I discovered when I went to prototype this layout that Figma does not support a user scrolling down the page as a trigger for transitions or animations. This means I will need to create another static layout with my sections split into different frames to allow me to add animations. This is frustrating but I will make the changes to the layout I mentioned above when I create the second layout.
As mentioned above I needed to create a layout that separated my sections into different frames to allow me to prototype the layout with animations and transitions.
All of these frames are again built using the Macbook Pro 16” frame size. I have also added all the content for my interactive elements such as my Saturn V infographic and two timelines. This will aid me when I come to prototype this layout as everything is in place and I can concentrate on adding the extra elements that will take my design from a static layout to an immersive prototype.
I changed the sub-headings within this layout and used the Auto-Layout tool to ensure my spacing was correct and consistent throughout, any spacing errors would become very obvious when the layout is prototyped and therefore I need to ensure I get it right at this stage to save issues later.
With this layout complete I can now move on to creating my immersive prototype in time for the design critique.
Creating these high-fidelity mock-ups was my first opportunity to see all my work and decisions up to now come together as a complete project. This has been useful as it has shown that most of my decisions have been correct and work as part of the layout as I intended. I did find a couple of issues and the process of creating these mock-ups has allowed me to address these before the critique which is why this was an important process.
I have also been able to prepare for the prototyping phase of my project’s development by ensuring I have laid everything out in such a way that I should have no issues when I come to adding the transitions and animations. This will make my task a lot easier.
I am happy with how my mock-ups look and hope that adding prototype features will allow me to make it immersive as required by our design brief.