After completing my sketches, I wanted to create some lo-fi wireframes to better understand the layout I would need, what assets I would need to source and those I would need to create.
I chose to use Whimsical again for this task as I have found it to be the best tool for the job, it keeps the fidelity of my wireframes at the correct level, meaning I concentrate on the key areas without being distracted by visual concerns such as colour or imagery. It also has preset frames for different devices and a large selection of UI components and icons. This makes the job of creating lo-fi wireframes quicker and iteration easier.
It was a struggle to move my wireframes from Whimsical to this Notion blog so I have included the link to Whimsical as well as the screenshots.
Link to Whimsical: https://whimsical.com/apollo-narrative-project-5DuDptrD6pxeDksWt8LRMi
As I had done my sketches in different sections I felt the easiest way to make the next step to lo-fi wireframes was to create these in sections and then put them together making whatever edits required to make the whole.
My basic overall layout is a two-column z-shaped layout, this matches observed reading patterns of people reading online content in research completed by the Nielsen Norman Group. I will alternate between imagery, videos and my text content, this keeps the layout interesting and will hopefully keep my users engaged with the content.
I will be adding motion, transitions and animations to this content and this will also add interest and engagement to the content itself.
I was able to see how hierarchy would work in my chosen layout with headings and subheadings and I will look to continue this in my finalised prototype.
This lo-fi version has also helped me see exactly what assets I will need to source and potentially create, so now I can make a list and start to source these online.
I am happy with this layout so will use it as the base for my high-fidelity prototype.
