Tasks:

This week we were given the task of creating a homepage and 2 case studies for the following week.

Home page:

I began by working on my home page which took a lot of tinkering as I wanted to add slight animations, to do this I looked up many sites and videos that gave tutorials on how to do this.

Here is a full-page spread of my home page however it’s a bit bugged with the capturing software that I used.

The Blue background gives the user something to place images and text on and gave the page some form of colour the blocks of images and text use a parallax effect to slide down the page slightly and the bottom footer pops up when you reach the end of the page.

Animations included

• Bio scroll
• underline wipe on menu
• blue background parallax
• case study parallax
• footer pops up
• case study turns into a card on hover

animation video:

parallax scroll:

These are a few of the videos I watched to help put together the parallax effects on scroll but a lot was done through playing around with speed and distances on multiple device sizes to fine-tune the final animation.

I also found out that you can see what other web flow creators are doing and how they did it by previewing their projects.

This is a great tool and something I always had open in another page.

On this first page, I made sure the user could see a hint of the blue to know that there is something below to scroll to. This is always there on all screen sizes with no more than the number showing. I found this important otherwise people would thinkthis was it and there was nothing more to the page.

The case studies follow you down the page and add depth to the screen with shadows and animations. On hover, they pop out and follow the cursor and tilt in a card-like fashion. These are set on a flexy grid and can be moved around quite easily in the editor.

When it comes to case studies I didn’t really get too much down but I laid out the bare bones for the rest creating components and divs and began inserting information.

This was the simple idea for my first case study, I think it works well, it’s functional and simple. I just have some refining to do.

Eg. images padding margins and animations. I feel like I need to give some background to the images and get better photos.