Vertical Website and paralax scrolling

This was the site I had finished first. I had the main parts or pages as they would be pages if it was a proper site with pages ready and after that I just kept adding additional elements that would move around and make the whole experience more interesting. I also added a lot of movement to some objects but not all as I thought it would get  a bit too much with a lot of movement if everything was flying into the screen while the user scrolls.

Basically all movement on the website is done by scrolling and it’s controlled by either the mouse or the scroll bar of the browser.

This one is a bit easier to wrap your head around than the horizontal one when taking in the scrolling directions and speed.

vertical

This is the main view when you open the file in Muse. You can actually see that I have two pages there instead of one. I still consider the website mainly one page one but I decided to creat an addintional pages that would be a platform for all the recipies. I thought that it wouldn’t be a good idea to have numerous recepies that you would have to scroll down because that would elongate the whole process of going through the website. I thought that it might be considered annoying by some users, seeing as I would definitely find it annoying and useless to go through.

vertical2

This is what that page with the recepies looks like. I’ve just stretched it a bit to show how it would look like with more recepies in it. One can also see the little arrow that’s at the bottom of the smaller rectangle. I have pinned that to the bottom of the page so that it would always be in the center of the page when someone scrolls, inbetween the recepies and I have also enabled the footer settings on it so that it would not stretch the page size and it would remain at the very end of it without adding addintional scrolling.vertical1This is what the main page of the site looks like. This one contains all the basic information. I tried to keep it as simple as possible so that I wouldn’t trow too much at the viewers and I wouldn’t loose their interest. I made some elements scroll into view to prevent the page from being too static. I also added parallax scrolling, something that I found really interesting and cool the first time I saw it.

Parallax scrolling is basically the part of the page while scrolling where it looks like you have, in my case, the squares containing the information scroll over and image. It might look like the image underneath is either not scrolling at all or that it’s scrolling at a different speed than the rest of the objects. That particular effect is achieved again by scrolling properties but not the same ones you would use for the rest of the images. Also the image is not imported as an image inside the project but instead you use a box which you fill with the image, scale it to fill and access the scrolling properties from that same window you open to change the fill. When making a responsive or adaptive site where the images are bigger you have one more thing that you need to do to prevent any issues with viewing the website. For some reason I had not encountered that in any of the tutorials I watched so it was something I had to figure out completely by myself. I had a lot of issues with it because at first I didn’t know how to fix and I couldn’t find any hints on the internet. To be honest I didn’t even look a lot for any hints, I just rewatched the tutorials I had already used and when they didn’t help I just started going through all the settings to see what could be wrong. The problem I came upon was that the image I used to fill in the box would stretch the whole page and also add a horizontal scroll bar at the bottom of the page. That completely messed up the design as all the objects had been moved from their original positions and the user was also able to scroll using the horizontal bar which wasn’t what was supposed to be happening. At first I tried just undoing my actions to see if it would resolve the issue but when it didn’t I just started creating the webpage from scratch. Everything was going nicely until I started adding those filled boxes for paralax scrolling so I figured out that they were causing the problem, I just didn’t know how. I think I made at least 3 new versions of the page before I found the little setting in the image below that fixed everything.parallaxscrolling

Turns out, when you have that selected which is 100%widht everything works out fine. No more stretching of the page and horizontal scroll bars showing to mess up the design.


Menu

I added a menu because it’s good to have one really but I made it a bit simple so it wouldn’t really stand out to much because I felt that with this scrolling website and with the fact that every segment of it is different with objects placed in different places I have to have a menu that’s small and doesn’t take too much space so it doesn’t get in the way of the content on every ‘page’. Plus I also really like when dots are used for menus, I don’t really know why, can’t explain it.

Also the menu slowly fades into view after you scroll down and reach the second ‘page’. That was done so that it wouldn’t get in the way of the logo and the first ‘page’ was cleaner. But I put a little orangy arrow there that would automatically lead you to the next segment and so people would also figure out easier that they have to scroll.


Fonts

choosing fonts

As I thought finding fonts to work with cyrillic wasn’t easy and I couldn’t just use customs ones I already had because of search engines. I also had to keep in mind that people of all ages should be able to read it easily. So I kept the font as simple as possible. I just used a more custom one for the logo but that one is an image anyway.


Muse also has some tutorials you can easily watch when you open the program. If you don’t have a project open a window opens and you can choose.

installing

Advertisements

Вашият коментар

Попълнете полетата по-долу или кликнете върху икона, за да влезете:

WordPress.com лого

You are commenting using your WordPress.com account. Log Out / Промяна )

Twitter picture

You are commenting using your Twitter account. Log Out / Промяна )

Facebook photo

You are commenting using your Facebook account. Log Out / Промяна )

Google+ photo

You are commenting using your Google+ account. Log Out / Промяна )

Connecting to %s