Rosita Kanto

I decided on making a more simple looking website for a cinema online. My inspiration and where I found which elements should be represented I got via this website: http://www.kino.dk/ http://www.dfi.dk/filmhuset/cinemateket.aspx The website is crammed with information and menu elements are numerable. So I wanted to create a website in a simple design providing the user with only the bare minimum of information about the movies an such.

My first sketch for the wireframe for the front page.

first sketch for the first drill down, very much inspired by my front page since these pages should not change layout too much.

second drill down page and its wireframe. This page would need an interactive window adjusting the placing of seat according to where the user inputs his/ her seat request.

Since my wireframe contained a logo for navigation back to the front page I started looking into logo design. At first I started designing the logo in a simple round edged square but with a 3D effect making it almost looking like a button.

But I decided to go with this flat designed logo instead because it had more of a logo feel to it being more neutral not stealing too much attention from the rest of the content. This logo also works as the navigation back to the front page for every page element of the website.

Started up filling my workspace with a logo for navigation to frontpage in every page featured on the website. Also the menu content, a sub line with additional information and social network icons were added to create a sense of a full bodied page with all the elements of a regular website.

By framing the menu content with black lines it makes it look more clickable since you would get the feeling that this area might change color/ be interactive. The effect of the line is that it centers the attention on the text and not on the white-space (background) around it.

This is the final front page of the cinema website. I edited the search bar so that the search icon is dark grey in stead of white on the previous layout. The white icon took up too much information and since the search bar is almost always situated on the top righthand corner of the page no additional elements were needed to focus attention to it.
View PDF

The first drill down is a page where you can watch trailers for movies in cinema. I've moved and made the search bar bigger to emphasize that the user should search for the movie he'd like to screen. Also I added the 'top 10' list since it would be likely that the user was actually browsing for a popular movie trailer. Else it's just sort of a public service function stored in the drill down.
View PDF

The last drill down is the 'buy your ticket' page. This page has a sub menu containing 'When' 'What' and 'Where'. These menus should work as drop down menus containing dates, lists of movies and lists of cinema venues. When pairing up the three parametres the user inputs (when, what, where), the software should recognize the choices and create an interactive image of the seats in the cinema chosen. This would help the user visualize where they will be seated in the cinema in question. I did this because a lot of cinemas vary in size and therefore row 12 could be all up in the front if it is a huge cinema. This would be solved using Java Script making the cinema seats clickable and providing the user with the location of the seats they've chosen.
View PDF

Re-design of front page after feedback
View PDF

Did not change anything on second drill down
View PDF

Re-design of second drill down after critique
View PDF