Week 06: Prototype Critique

This week we had a critique of out prototype projects so far.

Currently my prototype contains:

  • My launch screen
  • Home page (story of Apollo)
  • The Numbers
  • Crew
  • Silver Screen

The feedback I got in this section was:

  • Decrease the spacing between logo and button in launch screen
  • make map image full screen
  • some prototype interactions still not working.
  • Silver screen section looks too different from rest of project

I agreed with all of this feedback and I knew I needed to take more time making these small interactions work.

While sitting in this week’s class I found some inspiration in work my class had done. Some have used some really nice type hierarchies in their text and I think this is something I could apply more in my own project.  I also like how some people showed their sections for the user to choose from, big images with hover states to let the user know what they are clicking into. I think this would be a more immersive way of showing my sections in my own prototype.


Changes

The first thing I changed was the spacing in my launch screen.

This is what the screen looked like before.

This is what it looked like after changes

Along with moving the button higher I also made the the button cornered instead of curved as I feel this matches the angular visual style of the type better. I think that has made the launch screen look much better and more considered.

The next change I made was to make the map in the home screen, the full screen width.

This is what the map looked like before.

This is what the map looks like after the changes.

I think this change made a lot of sense and it makes a lot better use of the space. The image has a lot more impact taking up the full width.

These were some of the quick fixes I could make to my project, next i needed to get my interactions working. What I need to fix is:

  • Hamburger navigation menu
  • fade in text for block-quote
  • counting up numbers in silver screen section

The first interaction I decided to tackle was the counting numbers. I watched this tutorial on how to create this animation. Before I started to take what I learned and adapt it to my project I completed the tutorial step by step.

This is how the tutorial came out:

I changed some colours and type to what I use in my project just to get a feel for what it could look like. I like the effect of the numbers moving and I understand the concept now. The next step is to start integrating with my project. At the moment the animation works by tap triggers and moving to another artboard but I didn’t want a button that the user would have to click, I wanted it to appear more seamless. Therefore I started experimenting with hover states.

I thought a more visually interesting way to display this animation would be to put the ‘$’ sign that I have used in my project, before the number mask. This sign will the act as my hover trigger. When the user hovers over this sign, the animation will begin.

This is how I created the effect. I started off with the image on the right, grouped the zero and the ‘$’ sign together and created a component. In the component section I added a hover state and then started changing parts of the component, like changing the fill colour and the position of the numbers. I really like how this came out, I messed around with the easing options on the prototype section and decided on the ‘wind-up’ that lasts 1.5 seconds. I kept the zero in the default state as I felt it would help the user understand that an interaction will take place here. It also creates a bigger hover space so the user doesn’t have to hover over just the ‘$’ sign.

I then tried to adapt what I’ve learned from the tutorial further, into my project. I started off with a duplicate of the ‘$’ sign and default number mask. I resized both of these to the same type size as the project. I then created another 4 columns in the number mask to reach the correct amount of digits. I repeated the same process as in the tutorial. However I had to change some things as the number I want t create is 52,000,000. This contains a lot of zeros which won’t animate well as they are all moving to the same position. Therefore I changed the order of my number mask so the zero would appear in different positions.

This is what that looks like

At this point I fully understood the process and just had to repeat it for the numbers $355,237,933, $105,714,218 and $70,000,000. I took these components and copied and pasted them onto both my film screens.

This is what this looks like while all components are in their default states. I have all components set to the same prototype conditions (‘wind up’ transition for 1.5 second) as I feel this has the smoothest look.

The next interaction I wanted to fix was the hamburger navigation menu. To work out how to do this I watched this tutorial. It looked pretty straightforward so I followed it step by step, adding or changing things to work with my project.

I started with creating the hamburger menu shape.

 

With that done, I then changed the shape into a cross to create the ‘opened’ menu state.

After this was done, I wrote out the sections in my project and aligned them to the right of the menu.

I decreased the opacity of these sections and created a line underneath them, with the opacity set to zero. These will all come up to full capacity when hovered over. I then created individual components for each section to create this effect.

The next step was to create a circle behind my menu. This is so that when it is opened, the user can see all the sections names clearly regardless of the content the menu opens on.

The last step was to set the opened menu back to its default shape and turn the opacity of the other elements down to zero. I then created a component for the menu and set that state to default. I then created a new state which I called ‘opened’ and changed the menu’s shape back to the cross and the opacity of everything up to 100% again.

This is what my menu looks like when opened and hovering over the first section.

I already had a home button working at this point to help me navigate through the website without the menu so it is not included in the nav menu. I added this menu component to all of my screens so that the user could go to any section from any section. There’s still some things to fix, I have some longer screens and the menu being sticky would allow the user to still click it without scrolling all the way to the top.

The last interaction I had to fix was the block-quote animation. I wanted the quote from Neil Armstrong to fade in and out when the user scrolls it into view.

 

Leave a Reply

Your email address will not be published. Required fields are marked *