Horizontal website story idea

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

6

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.

background

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.

drawingthrees1

This is me drawing a tree in Photoshop, I just altered the settings of the brushes I was using which let me get different and better results.drawingthrees2

Here’s I’m adding some snow with a different brush and then just transforming the images so I find the shape that I like the most.drawingthrees3

I also used the dodge and burn tools to add some shading to the treedrawingthrees4

These ones I made with the shape tool in photoshop and adding a stroke to them made an interesting effect on the trees so they weren’t just a plain colourdrawingthrees5

Here I’m experimenting with the brush to create snow, I changed settings like the colour and shape dynamics, texture, scattering.drawingthrees6

This are more brush settings and I think I was looking for a brush style that I could make to look more drawn like for the windows of the housedrawingthrees7

I think the ground has a bit of a weird colour and that’s supposed to be grass that I wanted to later cover with snow.replacing colour

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 bitlike

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

background5This 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.

background6

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.

drawingsky

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.

This slideshow requires JavaScript.

These are a few little sketches I made while I was still working on the story idea.

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