WEBSITE PUBLISHING
Film Reel: Designing a Website
A web publishing project, Film Reel is a website which specialises in "Behind the Lens" videos/documentaries on popular Films and TV shows. Showing passionate fans the creation process for some of their favorite TV shows such as; Top Gear, Walking Dead and Peaky Blinders with emphasis on providing an experience to users on what it was like to work on the sets and encourage community discussions.
PROJECT AMBITION
The task was to create and design an online magazine using the Wordpress website building platform. I was required to create content for a major feature on a subject relating to one aspect of my chosen creative sector.
Content and focus should be related to lifestyle content for e.g. arts, music, design, events, fashion, popular culture…
It could be located in a specific area (Northeast, North) or genre (hip hop, illustrations, etc)
Content can be aggregated from other existing websites but must be credited. And I needed to create at least 1 original article that had been researched and written. As well as have a strong social media marketing element.
IDEA GENERATION & COMPETITIVE ANALYSIS
To begin I made a list of potential topics that I could base my website idea around.  I ended up going with a combination of film and television as that form of media holds an important place in my heart and I have always had a keen interest in film/TV production. I felt this had great potential for interest website content. I began to look into existing websites which cover this spectrum that would be competitors, for example, Empire Magazine/Website.
TARGET AUDIENCE AND USER PERSONAS
The Website content would appeal to the avid movie viewer or television series fan rather than your typical audience. Those who are interested in how certain aspects of a film/show were approached or how specific scenes were done. For example how the production of a show, props and film equipment they used, or use computer generated/ special effects. User Personas are great at influencing the design direction of a product, designing around real characters. I used this to aid in the development process of the website.
WIRE FRAMING
For design layout ideas I used my analysis of other website layouts to come up with potential options for the structure of my website. How the front page would look, how the articles would fit on the page, where the links to other pages would go and so on.
​
My decision was to organise my articles in a Zen Grid System, which is often used when displaying multiple pieces of content together such as a collage. This layout system also works extremely well with CSS, which was one of the coding softwares I was using, as a simple yet effective layout method. Larger pictures will naturally be more recent or more important articles of news and will draw the attention of the viewer. It will also provide the website with a more TV menu viewer style which will link well on an aesthetic level to the genre of the website.
BRANDING
For branding, I chose to stick to a similar font and logo style to example sights I found that provied initial inspiration.
I continued to push the line design to test how it looked in other ways. Some lines passed through the centre others round the outside to frame the logo but they almost always emanated from a letter in the Logo Font.
IDEATION
I had several articles for the website I wrote about, Walking Dead, Game of Thrones, Top Gear e.t.c. I wrote them all from scratch while paying some mention to exist articles I researched. I wanted to discuss different topics such as production, or acting, or trailers or upcoming seasons to keep the information varied. After establishing the articles I wanted to include I had to feature them on the front page and create a navigation bar so the articles could be specifically searched for, each post was assigned categories to fall under and then the categories were added to the top bar menu as a means of choosing posts related to a certain category
I also included a search bar as a secondary means of navigation allowing the user to search for articles via article names or subjects.
DESIGNING THE PAGE
The first step was the set up all the blog posts. All posts were separated out into categories relating to their covering subjects, directing, special effects, production, e.t.c.
The right-hand column was used as a secondary shortcut for the website and advertisement for a fictitious 500 word competition relating to the game of thrones. I was able to use the grid system and separate out articles with pictures and give a brief description about what the topic was on, with every picture providing a link to a larger article.
I wanted to add in the ability to comment on posts on the website as an additional feature and a means of bringing viewers together to discuss topics about their favourite TV Shows. I believe this is a good way for people to express their opinions on their favorite show and create a lot of activity on the website. I used the plugin WPDiscuz to enable a comment section and designed the comment box and post comment button as well as activated a placement holder profile image.
With content found to input for all the posts, the first step was the set up all the blog posts. All posts were separated out into categories relating to their covering subjects, directing, special effects, production, e.t.c.
Posts could be searched for based on these categories so it was imperative the content and language matched their respective tags.
I tested the website by loading it on Tablets and mobiles. The image on the far right shows how the website looks on both. They are identical except for resolution. The menu becomes a tag on the left hand side and as you can see the grid system becomes a centered layout for all articles, search bar and logo. I like this format and think it works rather well.
​
​The website turned out to look really busy and seemingly filled with different features such as Gallery’s, contacts as so forth. My particular favorite addition to the site was the comment section that I hope would be used in abundance by other users to create a flowing discussion between site visitors. Leaving a comment requires no sign up so anyone can message, and the comment section has been programmed so all comments must be approved by the site owner (Myself) before they are able to be seen which was a nice touch. The contact section on the contact page also worked out really well and functions as anticipated, as well as sending a pre-programmed response message to the viewer which further adds to the feeling of activity to the sight
WEBSITE TOUR
An in-depth website tour was created to showcase the "FilmReel" site in detail. Showing its features, functionality, articles and explaining why and how certain elements were added.