Hand in - Rationale

Rationale.

My goal was to recreate the event cinemas website putting more of a focus on the movies themselves. In that I think I have succeeded. The movie image takes up the whole background on both the tablet, mobile and desktop versions.

In terms of whether or not it was more intuitive, I definitely think the navigation bar has potential to be, if it could scroll when dragged in mobile view, or move up and down by 1 with the mouse scroll that would definitely improve it. I think the website is easy to read and it is easy to find and get the information you would want to see on a movie theatre website.

Of course given more time I would love to have completed more of the site, (or given some faster coding skills) by I think my submission shows the idea of what I was aiming for in my design quite well. I managed to complete the core parts of the website to show off the aim and design, which I think in and of itself was successful.

Hand in screenshots

Desktop.

Desktop with info slider out.

Tablet

Tablet nav menu has changed to stack vertically.

Tablet movie showtimes.

Mobile

Mobile sidenav

Mobile theatres page

Mobile theatre info page

More of the theatre page.

Tablet theatre page,

Desktop theatre page.

Coding update 2

So this card this has been tricky. There is probably a much more efficient way of doing it but they way I have managed has given me a ludicrous amount of javascript code... but it does work! 

The side navigation bar has proved to be really tricky but that too has been sorted and works smoothly as well. I have started on the responsiveness and that is going well also. Looking good!

Sadly, I'm starting to run out of  time at this point, so I may not be able to complete my site to the level I would like. 

Coding update

So coding is well underway now and I've just got a few screenshots to show whats been taking up my time.

Initially I had trouble getting the image to resize with the page properly without stretching, once I got that done, I had to figure out how to get them to scroll.

Above you can see the output showing the browser size changing in realtime and displaying itself in the console.

This is halfway through a movie slide transition...

...slide transition completed.

While this is working, at the moment it gives a swipe effect - I am aiming for each movie page to slide up as if it were a card.

SiteMap

Design Process

While thinking about a topic for what I wanted to make a responsive website on I also wanted to watch a movie. I went to see what was playing, and realised how poor the responsiveness and general usability of both the flicks.co.nz and the eventcinemas.co.nz websites were, so I thought I would remake the Event Cinemas site to put more of an emphasis on the movies and hopefully make it more of an interactive and generally pleasant experience to find a movie to watch.

Here is a rough plan drawing for the desktop site:

And the following is how I imagine it would resize to the mobile site.

After this I made a mockup on Photoshop. Below are screenshots documenting the process.

And here is the finished layout mockup for the now showing page:

Then I moved on to mock up the cinema information page. I struggled to find a place the worked for the map so I experimented many times with its positioning.

Giving it a black box shadow helped it to stand out from the background alot. This is the design I settled on.

With that it's time to get even more stuck into the coding side!

some inspirations

I love the infinite scrolling aspect of many cool websites seen these days. Here are some examples:

http://www.soleilnoir.net/believein/#/start

http://www.bagigia.com/

My goal is to make a quite intuitive site.