Developed Logo
Website
Proposal
From the initial research I did I found that the following points that need addressing:
- Wrong font choice. The font is Oswald, and it too heavy for the website and lacks hierarchy
- Input field is also in my opinion not appropriate
- Not very image orientated for a visual website
- There is also a lot of text
- All the text on the website is the same size
I want to create a website for the Savoy which is minimal and stripped down. This will be easy to achieve because of the current website.
I want to highlight the USP's of the cinema and engage the audience with interactive features such as social media, competitions and clever copy.
The Savoy doesn't have consistent social media and the twitter page isn't even featured on the website so this is something I am going to address.
Copy is going to be an important feature on the website because I want to explore the concept of telling stories through clever copy. I think this will also make the website stand out visually.
I am going to make the film showings easier to find and navigate along with purchasing tickets.
I am going to create a sense of hierarchy within the website with information I find more important being featured higher and larger.
I am going to minimise unnecessary pages.
I am currently using two fonts and the logo font. The first is Apercu, the second Georgia. I simply picked the two fonts because they worked well together. Although the decision is not set in stone and I would like to change Apercu to a different sans serif typeface.
Site Map
From the original Savoy website I started to create a site map. Once I had defined the site map I started to remove unnecessary pages and features, I also grouped certain pages to make the website smaller. From my research I decided the websites primary purpose was to list showings and times, secondly information such as location, price, offers and private hire.
Site map:
I began by creating the current site map. After I created the current site map I decided that it needed some pages deleting and also that some could be grouped. I wanted to make it easier for the user to navigate in a logical way, basically simplifying the whole website. The homepage had too many element going on. I decided to take away kids parties, gift vouchers and search feature from the homepage.
Practical Development
Grid Development
Homepage
.png)
I knew that I needed enough columns to cater for the film showings so that it would be clear and also easy to navigate. The film showings are highest priority on the website. I started by creating a grid with six column from the page margin, my idea being that I would use multiples of three 'tiles' going horizontally down the page.
Designing the tiles with the constellation concept. The tiles need rollovers so that when a user moves his/hers mouse on the selected film tile it displays the information clearly.
I started working on the background that would go under the body on the website. I started creating these circles which I tried to make look like stars. I was looking at how much opacity was needed in order to make the content stand out and not over power the foreground.
I was still adjusting the document guides to appropriately fit the tiles.
I began inserting the navigation bar and also a top body. My idea for the navigation bar was that it should represent a star constellation in some way; I linked each circle with a line horizontal line that ran through. When the user hovers over a link the circle with change colour.
The top body contains the text element. The idea behind this element is that it will appear on as many pages as possible and continue to tell a story through copy. I think this makes the website more personal and fits into the concept. The copy can be changed by the cinema over a period of time, maybe continuing the story. What I don't want the copy to do is become a ad space or news element.
The three tiles at the top are intended to connect the audience to the cinema - social media, current news and I think contact details. I went for a minimal design because I think the information and how it is formatted is more important. Keeping it simple defiantly works visually for me, especially when the current website has no hierarchy or information that stands out.
I was originally designing to a document size of 984 by 588 pixels, I quickly realised this was too small and change the document to 1700 by 3000 pixels, this allowed me to insert my background. The main will move but the background will stay be static.
You can see the rollover effects I have started to design. The top three are the current styles I am working on. I'm not that keen on them to be honest, so I will continue to experiment and develop them.
I also began inserting film images into the tiles and experimenting with how they appear. I liked the idea of them being multiplied over a colour linked to the overall brand of the cinema; Change the red colour as it looks to sinister, especially when the image overlaid is a children's film!
Changes:
- Inserted temporary logo
- Experimented with tile colour
- Strengthen background opacity
- Inserted calendar feature
After the crit yesterday I had people raised the following points:
- Film tile colours need to be softer
- Showings link need to be first after homepage
- Star background needs to be higher opacity
- Social media buttons need inserting
- Footer needed
- Other pages need designing!
From the crit I implemented the changes people thought were necessary. The website homepage is pretty much finished in my eyes now and I feel I have a clear template for the other website pages.
Below you can see close ups of the changes I have made.
I inserted a footer which included 'The legal stuff and 'the important stuff'. I also choose the twitter tile blue to go underneath the tile image. I felt this was a warmer more inviting colour which at the same time contrasts the currently showing films, indicating the films in blue were coming soon.
I choose this purple colour for the tile background, again like I said it contrasts the blue well but also allows the film images to be visible which is important for people trying to gage what film they want to see.
I feel these tile elements are really important. They are the first things people see when they access the website. The system needs to be a mix of interactiveness and practicality while at the same time promotion. In the crit people said maybe the showings tiles should go above these tiles. I feel the act of scrolling down or clicking on the clearly labelled 'showing' link isn't too much hardship.
The top three tiles allow people to see whats going on but at the same time allow the cinema to promote themselves. The Silver-screen tile and option for me is important as ethically I think we should include the older community more, so essentially it's going to have hierarchy over the showing tiles!
The top of the website is successful I think because its visually clean. The new logo fits better because again its simpler. From my research I identified the old website was cluttered and had no hierarchy - the main solution was minimal design.
Showings page
I spent so long polishing the homepage that it made it the showings page fairly easy. I added a ticket cart which ill explain in more detail on the next image.
I swopped the showing tiles and the coming soon tiles with the twitter, silvers-screen and the contact tiles.
You can see how many tickets you have in your cart by looking at the red triangle with the cart information. To buy tickets you click on the ticket link within the film title which changes the tile effect to the image below.
Here you can select how many tickets you want to purchase. When you click the Buy link on the film title it will take you to your method of payment. I have not designed the payment page yet because I am unsure how it will work, it might be a fixed E-commerce page.
Info page
The info page was different. I have made it so when you click on the info link from the navigation it pop up this black screen with some key information in the foreground, this includes:
- Find us
- Bookings
- Parking
- Disabled facilities
- Opening hours
- Ticket prices
- Google maps
My idea behind this is that when viewing this information the user should not be distracted by unnecessary formatting. I want it to be blindly easy to find and gather the information the user needs.
You can see how basically I formatted the information heavy element. I think this makes sense. It would work across multiple devices.
I decided the competition page should be engaging enough that people actually attempt to enter. The prize would have to be worth while.
The aim of the competition is promotion. although I have put 'send entries to (email address)' I will change the entering rules to retweeting or sharing along with sending the answer in an email. This will enhance the marketing results.
Each month or every two weeks a new blurred film scene will appear in the box, people have to simply guess from which film this scene is from to possibly win the competition. The idea of a blurred image was again from the concept of narrative, the blurred image represent the beginning or a narrative which is unknown. Visually I think it looks interesting and think this competition can be applied to print as well.
The tiles again are at the bottom of the body above the header.
I am contemplating a font change. It doesn't read very well here. I will experiment with the formatting but like I said it may result in a font change.
Private hire
Basically I used the same tiles as the Silver-screen tile. I felt this made more sense as it started to create a system of recognition. The black and red look like notices or highway signs designed to show important messages. I think the eye is drawn to these elements first.
Again I used copy to hook the audiences attention. I don't think people can be bothered to read extremely long copy so they just want to get a quick gist.
This is the original page from the Savoy website. There is no structure or hierarchy and finding the part you want is laborious.
The tile copy is then supported by information underneath that explains the offers in more detail.
I started designing icons originally to replace the copy headings, although they didn't really fit in with the theme of the website and I scrapped them off.
Crit (Thurs 14th November)
Feedback
Feedback 1
-The logo works well simple as it allows the content and imagery to stand out more as this is what people will be attracted to.
-I think the colour scheme works well to communicate the cinema environment and atmosphere, however make sure the colours for the imagery compliment this
-Maybe work more on the 'V' to make it look more like a projector as it isn't very clear at the moment. Depends how obvious you want to make it.
-The brand translates across different platforms really well which is important.
Feedback 2
-Love the concept for the logo however I do feel you must make the relation ship to the reel much more apparent.
-Site looks like its easy to navigate and that usability is high.
-Love the "skilled in the art of..." gives the design a real character.
Feedback 3
-Logo is great simple and communicates the idea.
-Copy is something different from the traditional cinema therefore is engaging.
-Colour scheme is effective but not sure about the red around the silver screen box on the site seems out of place.
Twitter
Leave your comment