Moving onto the First Draft
Now that my prototype has been refined, and I am happy with it, I am ready to move on to actually building the website.
I am really unsure about how to make many of the interactions and animations that I have included in my prototype on Webflow. However, I know that I should be able to find Youtube videos that guide me through most of them.
This is the link to my first draft website. I have only experimented with a couple of interactions and animations so far, but I wanted to get all the content down first and figure out my layout. The issue with some of it is that, even though I used the right techniques for making a responsive website (based on the Webflow website), when I open it on Safari rather than Chrome, some of the content shifts around.
I am going to remake the site using continuous scroll interactions (rather than just the buttons in the nav bar) anyway, so I will attempt to fix this issue as I do that. If not, then it’ll be very frustrating, as I know a good website should always be responsive.
In order to allow myself to have enough pages without paying for the Webflow package, I added a bunch to my portfolio site and duplicated it. This made all of the slugs for the pages unrelated to the actual page that you’re on though, but I don’t think that’ll be a huge issue as all of the pages are related to one story.
New Additions
The first thing I wanted to add to this website was a navigation bar. This was both because of the feedback Hal gave me, as well as the feedback I got from conducting my prototype user test (this wouldn’t upload onto my blog as the file size is too big, so I will post it on Youtube in due course).
I changed the hover state of each button to turn yellow – this makes the button appear clickable and creates better usability.
Trying Some Interactions
I also decided to give some interactions a go, and by using the Z-index (thanks to a Youtube video), I was able to make it work!
Original state:
On hover:
I also made sure to add who said the quote this time, as I realised I hadn’t done that on my prototype.
I also played around with timed animations, where elements appear after the screen loads. I think this is something I could make appear a lot smoother when I re-jig the site.