This was frustrating. Really.
That’s how I’m going to strat on this one. It was really weird at the begining to understand how it’s going to move when you scroll. The idea of the horizontal scrolling sites is simple. They are like the vertical ones just moving in a different direction. And from there it can get very complicated if you decide to make it. I wanted to have a more interesting horizontal website, I didn’t want it to be like the vertical one just moving differently. I wanted to have sort of a narrative and a little story that the viewers would go through.
My first idea came from the only actually horizontal website that I’ve seen
It’s like a little story and you have characters moving in it. My first few designs were based on this. I wanted to make a seasonal version of the website for the holidays so I came up with a winter story. I had a few different ideas of characters I could make.
- One was having a few kids and adults rolling snow balls that would scroll faster than the rest of the content of the page and it would seem like they were moving. And when you get to the last ‘page’ or segment of the site, you would find them next to a snowman. But the problem I had with this idea was that it very much resembled the one I found and I didn’t want to make something that similar.
- Another idea was to use the same backgrounds but have the scenary change from rural to more city like which would mean that the shop is made for everybody, people would like it so much that they would travel from smaller areas out of the capital just so that they could shop there.
These are some of the visuals I came up with for those ideas
These are all done in Photoshop and Illustrator.
This is a background that I wanted to be the second or third ‘page’, the building should not be there actually, but this was going to lead to more city type of backgrounds. I would’ve added a road on this one and the next backgrounds would have buildings and houses.
I don’t know why I really wanted to make the first house I drew purple but the colour I chose didn’t go well with the background in my opinion so I used the colour replacement tool and then just cleaned out the image a bit
This is a style that I really liked, I was thinking if I should make mine look more hand drawn so I changed the strokes of my drawings in Illustrator
This is part of what I had of the first segment that I wanted to have before I trashed that idea, the shead there or what was supposed to look like one is not finished, that’s the first house from left to right, I also have a few clouds that I had previously made but lost due to some error in photoshop so it was a good thing I had taken screen shots of them.
These are also very big and high quality. Here I’ve zoomed on the smallest house from the picture above and you can see that the lines and the brush strokes are still vey nice and clear. I’m not really sure why I made them so big since in the browser such details would not be visible and I was thinking of having at least one other layer of moving objects on top of this one so people wouldn’t really be able to concentrate on the background.
Here I was distorting the gradient of the sky so it would have a white line near the land so any houses or trees could be seen easily. The ground here is also covered in leaves mainly and there’s no grass, this was made so that it would seem that you’re getting closer to the city and it’s not that green and natury anymore.
These are a few little sketches I made while I was still working on the story idea.