Project Development: Magazine layout for film review

Once I have completed my film review, I will put it in a magazine format. Recently, I read an article by Shumi Perhiniak about the 'anatomy of a magazine layout'. I found this article quite interesting, as it was a great reminder of the key components that make a good magazine. From reading this article, I decided to gather some thoughts and design my magazine layout.

Before I start designing my magazine cover, I need to consider the following (Pehiniak, 2022): 

1. Purpose: The purpose of my magazine layout is to help engage reader's to read my film review. The idea is to keep it formal, image-based yet entertaining to read. Is it image-based, story-based, formal, funny? etc.

2. Balance: I will make sure my content is evenly spread on my layout, to make sure there is a great balance of images and text to help maintain the reader's interest. 

3. Hierarchy: The most important pieces of information will need to stand out, for example the headline, introduction and pull-quote. This will help illustrate the priority of these vital bits visually. 

4. Readability: I need to make sure my text is easy to read for the reader, so I will use a serif font for the main text, to help ease the eyes on print form. I will aim to use the traditional Times New Roman font, as most readers are familiar with this, and will use font size 12, as this is the minimum number considered to be legible for users (health.gov.uk, 2022). I will aim to use a black font as this will contrast against the white background, and make it easier for one to read. 

I have created a sketch of my intial idea of how my magazine layout may appear. I aim to use Adobe InDesign to create the layout: 

            

    Initial idea sketch for potential magazine layout for film review

References:

Display content clearly on the page (no date) Use a readable font that's at least 16 pixels. - Health Literacy Online. Available at: https://health.gov/healthliteracyonline/display/section-3-3/ (Accessed: December 7, 2022). 

Perhiniak, S. (2021) Anatomy of a magazine layout, Yes I'm a Designer. Available at: https://yesimadesigner.com/anatomy-of-a-magazine-layout/ (Accessed: December 7, 2022). 

Project Development: Initial ideas brainstorm for film review

To create my film review, I will start conducting research into how to write a film review. Recently, I read an article by M.G. Jasper about '10 essential components' for writing a film review. I found this article fascinating and straightforward. From reading this article, I decided to gather some initial ideas, and brainstorm some thoughts based on Jasper's essential components that I could potentially include in for my film review on Avatar. As I read more articles, books and journals on how to write a film review, I will gain a more clearer idea how to write one. 

Initial ideas brainstorm for the film review on Avatar

References:

Jasper, M.G. (2022) 10 essential elements for movie reviews, Medium. Medium. Available at: https://medium.com/@mgjasper/10-essential-elements-for-movie-reviews-921230d7fb1e (Accessed: November 22, 2022).

Avatar (2009) - imdb (2022). Available at: https://www.imdb.com/title/tt0499549/ (Accessed: November 22, 2022).

Further Research: Roger Erbert

 

Roger Erbet (Time, 2011)

I am looking at the late Roger Erbert, who was a renowned, successful film critic. He was considered to be "the most powerful pundit in America" (Forbes, 2007). He was also the first film critic to win the Pulitzer prize. Erbet focused on using creative metaphors in his work and his love for movies evidently shows in his work (IMDB, 2007). I am looking at this film critic as his style of film criticism will inform how I write my film review on Avatar. Erbet's style of writing is known to be simple yet effective. He chooses to use simple words, so that his message can be conveyed easily and is accessible to all. Erbet reviewed hundreds of movies, all ranging from diverse genres, but one factor that all his reviews have in common is that they all have a personal touch. Erbet clearly voices his opinion yet he chooses to use a friendly, conversational style which draws the reader into his review and genuinely talks about the characters, film making and audience reactions as an enthusiastic film critic. His experiences as a screen writer can be evidently seen as his cinematic knowledge about the movie making experience does show in his work, no wonder he is considered to be a highly esteemed film critic.

To be continued....

How has it informed your work? Go into the research

References:

Ebert, R. (2009) Avatar Movie Review & Film Summary (2009): Roger Ebert, Avatar movie review & film summary (2009) | Roger Ebert. Available at: https://www.rogerebert.com/reviews/avatar-2009 (Accessed: November 16, 2022). 

Feeney, N. (2014) 7 of Roger Ebert's most brutal movie reviews, Time. Time. Available at: https://time.com/2957019/roger-ebert-life-itself-brutal-reviews/ (Accessed: November 16, 2022). 

Roger Ebert (2022) IMDb. IMDb.com. Available at: https://www.imdb.com/name/nm0001170/bio (Accessed: November 22, 2022).

Website creation: Home page

 I decided to change the design of my original template, as I felt I needed to create a website that was more visually appealing and showed a bit more of my personality and passion for the multimedia design.

Hence, I began creating my website again on Wix and I opened Wix and chose the 'begin with a template' option as shown in the screenshot below, for my multimedia design website. 

Followed by this, I looked at a range of template designs and decided to go for the 'food stylist' template, as I liked the design style of the template and felt I could modify it to make it more relevant to multimedia design. I did have a look at many graphic design, photography, marketing and creative website templates but felt this one was the best one.

Once I was happy with the template selection, I decided to change the colour scheme of the website to personalise it. I chose to go with the 'mature' colour pallette by clicking on the 'choose your theme' menu. I tried different colour schemes, but felt this was ideal as it went well with the website.

Once the colour scheme was selected, I decided to rename the site to 'Milan Multimedia' using the 'text settings' menu and placed the title in the navigation bar. I changed the font to Quicksand with font size 24, as it gave the site a modern look.

I changed the colour of my text to a deeper shade of purple to go with my theme. I also chose to use a bolder font, to make the my name stand out to the user.

I then focused on editing the navigation bar design by choosing the 'menu designs' option. I selected the first option for the 'discover more menus' drop down under the themes for the horizontal menu. I chose this option, as I quite liked the design and felt it gave my website a modern look.

After I edited the navigation bar, I edited the mid section of the page. I started by adding my full name using the Quicksand font (font size 18 with the paragraph 1 text theme) to maintain consistency.

 

I then changed the word 'food' to 'multimedia' as I wanted my website to reflect on my multimedia work not on food! Again, I used the 'text settings' tool and changed the theme to 'heading 3', font 'Quicksand' with the font size 45 in capitals, as I wanted to place emphasis on the word 'multimedia'.

Once again, using the text settings I changed the word 'stylist' to 'designer' with a full stop as I wanted to place more emphasis on the word 'designer' compared to 'multimedia'. I chose to use the 'heading 2' theme as this was bigger than 'heading 3'. Again to maintain consistency, I chose to use the Quicksand font with the font size 60. I also changed the text on this row to bold.

Once I was happy with the text, I then decided to change the picture of the model to my own, to personalise the website.

I then uploaded my image using the 'choose an image' option and uploaded my own image.

Once I was happy with the image, I experimented with the position of the image using the settings and my mouse to get the following result.

I then added the 'my gallery' link using the text settings drop down menu, with the font size 23, font Quicksand to maintain consistency and encourage users to check out my work on the 'my gallery' section.

I wanted to make my image stand out more, so I decided to experiment with the image frame design settings and finally chose the polaroid frame as it went well with rest of the layout.

I then selected a copyright free image from the Unsplash website to use as a background image for my home page, instead of the current image of cookies. In my mind, I wanted to use an image that was high resolution and reflected my work space. I wanted an image that showed a desk with a laptop, possibly with other gadgets, and that somehow reflected my love for books, coding and graphics. I was fortunate enough to find the image below. I decided to use this image temporarily as my backdrop, and then will hopefully take a picture of my work space using a DSLR later on.

Once I was happy with the image, and saved it on my desktop folder, I right clicked on the mouse and the selected the 'strip background' drop down menu, which then presented me with the option to replace my background image. I then uploaded my image using the site files option as shown below.

I then found that the image clashed with my multimedia designer box, so I clicked on the image settings and experimented with the image opacity. I then settled for the image opacity at 60% as I felt that the image could be seen vividly and wouldn't clash with the text box in the centre. I wanted less attention to be drawn on the background but more on the main text box.

Once I was happy with the opacity, I clicked on the settings to change the design for the 'multimedia designer box'. I selected the 'box design' drop down menu and experimented with the range of layout and finally settled for the shape as indicated below. I then changed the box outline to a deep purple using the colour picker tool. I made sure the shade of purple matched the navigation bar to maintain consistency.

This is the how the homepage now appears in preview state.

Mobile view of homepage....

In conclusion, I am happy with the home page of the website as it reflects my sense of style. The home page took a little longer to edit in comparison to the contact me page, however the effort was worth it as I am pleased with the final result. 

Website Creation: Contact Me Page

I then edited my contact page, by adding a contact form and then clicking on the form to set notifications to my email and I adjusted the design by adding an image and changing the text on the page. See below 

First of all, I clicked on the 'add section' button on the left, and selected 'contact form'. I then added the second contact form, as I liked the design and felt it would go well with the theme of my website.

   

I then clicked on the form settings, to set my notifications to my email. Followed by this, I then clicked on the 'text box settings' and changed the placeholder text to personalise the form a little and make it easier for the user to type in their text. I also changed some of the fields as a requirement for the user to type in their text.

I then edited the text for the 'contact me' section. I started off by selecting the text settings for the footer. I personalised the footer by adding in the copyright symbol alongside my company name with the year. I changed the text settings to the theme 'paragraph 2' with the font Quicksand. I decided to make the text a little smaller compared to rest of the text and changed the font size to 15, to draw less attention to the footer and place more emphasis on the 'contact me' title.

Following this, I deleted the text on top of the 'contact me' title. I then edited the text below the 'contact me' title to help make the form more user friendly. I changed the text settings to the font 'Quicksand', and changed the font size to 15, the same as the footer to maintain consistency.

 

Followed by this, I changed the font size to 59 of the title, selected the bold setting on the text settings for the title, and made sure the theme was 'heading 3' with the Quicksand typography, to maintain consistency with rest of the page and make the title stand out to the user.

Once I was happy with the title, I decided to make the social media icons a little larger by selecting the 'social bar layout' settings and changing the icon size to 30px. I felt the social media icons needed to be a little larger and required more spacing, so I changed the spacing to 12px.

Once the size and spacing of the social media icons were altered, I then 'set the social media links' and connected all the buttons to my social media links as shown below.

I then deleted the 'let's chat function' as I wanted to keep my social media page simple yet effective.

Following this, I wanted to add a relevant picture from the Unsplash website to go with my contact me page. I chose a picture with a person typing on the laptop as I felt it was appropriate for my website. I downloaded and saved the laptop picture on my desktop folder to use for my website. Followed by this, I selected the 'add elements' button on my contact page, and then selected the 'image' icon and then in the drop down menu selected the 'upload and import button', as shown below.

I selected the laptop image from my dektop menu and uploaded it onto the Contact page.

The image was placed on the left hand side of the Contact page as shown below.

I then used the 'cropping' tool to crop my picture to a rectangle smaller size, to make the page more visually appealing.

Once I was happy with the placement of the picture, I altered the alignment, by shifting the text and contact form a little to the right. This is the end result of how my page appears. I am pleased with the result, and felt the contact page was the quickest page to customise in the website.

I will now add the mobile view of the contact me page....

Project Plan: Film Review on Avatar

My project plan can be found below. I'll complete the project tasks on a weekly basis and explain them in further detail in the project blog posts.

Project Sign off: Film Review on Avatar

I have now completed my project sign-off for my project. Below is the movie trailer of James Cameron's film, Avatar. This is the movie I will be writing a review on. Before writing a review, I will conduct research and explore the work of film critics such as Mark Kermode and Roger Erbert to get a better idea on writing a review on Avatar.

    

                                                        Movie trailer of the film Avatar (2009)

Please find my project sign-off here.

Milanote Research Ideas for Film Review Project

I've made a Milanote board (click on the image below) to explain my plans for the research I'll conduct for my major project, a proposed film review of the 3D film Avatar. This made me realise that I was more interested in the works of film critics such as Roger Erbert and Mark Kermode putting forward a film critic perspective through the work I will produce.

Please also find the link to my Milanote Board here.

Website Research

Whilst I am developing my own website, I will research and compare two websites. This website research will enable me to comprehend how to create my personal website. Whilst researching the two websites, I'll take into account the following factors - layout, design, colour scheme, headings, features, typography, navigation, usability/ accessibility, hyperlinks, white space and responsive design (mobile site view).

I'll be studying the websites of Roger Ebert and Mark Kermode as I will be researching these two film critics for further research, so it'll be useful to compare how their work is presented on the digital platform. I will look at the similarities, differences and what could I take away from these two websites for my own website.

I will begin by looking at Roger Ebert's website. The screenshot of Roger Erbert's home page can be seen below:

                        

                                                     Roger Erbert's site landing page

I find the homepage has quite a few adverts by external organisations, not related to the content of the website. Nevertheless, the website contains a search bar at the top right corner of the website and the name of Erbert with a logo on the left. The search bar enables users to search the content of the website easily. Beneath the brand name is a navigation bar, prominently positioned in the top centre. The text of the navigation bar is in capitals and in Sanserif typography, whereby the buttons are white, so inevitably users cannot miss it.

                                                        Top navigation bar with the search bar

As it can be seen, the navigation bar contains hyperlinks to movie reviews, Erbert’s wife’s journal, interviews, collections, movie reviews, contributors, tv streaming and collections. The buttons are easy to click on as when you hover over the hyperlinks, the colour changes from dark gray to a teal shade containing alt text, making the text easier to read. This works well against the button names.

Example of the colour changing to teal when you hover over the 'great movies' button

The background colour of the website is white, which makes it easier to read the dark gray text on the website and goes well with the gold, dark gray and teal colour scheme. The navigation, movies text and footer are mainly written in Sanserif fonts, whereas the rest of the content is written in Serif font. The website does have quite a bit of content on the landing page, which requires a lot of scrolling and is graphics heavy, which takes time to load on the mobile. However, the use of white space and text create a good balance of text and images.

I find the homepage has quite a few adverts by external organisations, not related to the content of the website. Nevertheless, the website contains a search bar at the top right corner of the website and the name of Erbert with a logo on the left. The search bar enables users to search the content of the website easily. Beneath the brand name is a navigation bar, prominently positioned in the top centre. The text of the navigation bar is in capitals and in Sanserif typography, whereby the buttons are white, so inevitably users cannot miss it.

Example of an advert on the website beneath the navigation bar

There is no ‘About Me’ page on this site, however when you scroll down the footer the user can see an ‘About the site’ link, which tells the audience the motive behind the site, the legacy left behind and the collection of work which is displayed in this form of site, which is now run by his wife since his death. This helps the user gain a better understanding of the film critic and his work.

        

                Footer of the Erbet's website

I then clicked into movie reviews to view the Erbet’s work. The top part of the site is easy to use as it allows the user to filter a large number of reviews by using the filter options to easily find the movie, star rating, year and genre they are looking for as shown below.

                                                           Movie filters for the Erbert website

It is easy to click into the works which leads to another page which contains a film review on that particular film, including a title, ratings, the film poster and information about the film, which is well-written as well as informative. The site features not only Erbet’s reviews, but other contributors of the site too.­­­

                                                            Erbert website reviews


Alternatively, the user can click on the image of a movie, see the film credits and Erbet’s review on the film.

                                                                Film review on Avatar

The last page I will look at here is the ‘contact us’ page. This link is present in the bottom top right corner of the footer. This page is clear, requires less scrolling compared to the home page. It is simple in design with a consistent serif font for the main content using black text on a white background. This page does include a form which requires the user to fill in their email, name, what they are contacting about the message, and a CAPTCHA code. The page also contains a section on movie reviews beneath the form, which users can easily click on. I do feel an email address and social media links could have been included and this page should have been featured in the top navigation bar to make the site more user friendly, as many people would not have scrolled right at the bottom of the site to find the contact page. easy usability as many people would not necessarily click into this page and then copy and click these links. The copyright is included on this page consistently like the other pages and has copyright details for the Erbet website.

                                            

        Contact Us page

Lastly, I checked the mobile view of Erbert’s website on my mobile phone. I believe this website works better on a desktop view or on a bigger screen size as the website requires a lot of scrolling and utilises a lot of images, takes a little longer to load compared to a desktop site. This makes it difficult to view on a mobile phone, as the icons and images are close together, and at a smaller size, an incorrect link can easily be clicked on. Although, there is a clear menu button on the right-hand corner of the homepage and clear hyperlinks to each page, where you can click on the reviews, the social media links are right at the bottom of the footer, which is one of the key factors that determine the online presence for a film critic.

   

                     Mobile view screenshot of Roger Erbert's website using a Google bot smartphone

I'm going to look at Mark Kermode's website now. The screenshot of the homepage can be seen below:

Mark Kermode website homepage

Kermode's website lacks an 'about me' page, but it does include a biography on the home page. The biography is clear and informative, with a fairly detailed overview of Mark Kermode's work and accomplishments. There is a Twitter link at the bottom of the biography, to enable users to follow Kermode on Twitter. On the desktop site, users can also see his latest film reviews on the left side bar and the latest tweets using a Twitter widget present on the right-hand side bar. This works really well as a homepage, and the image of Kermode in the background adds life and context to the page. The two side bars are not present on the mobile version of the website, which makes the site more user friendly.

                        
                        

The homepage of the site contains a navigation bar at the top of the site in the top centre. When the user selects a page, the button is highlighted in red with white text, and when the user hovers over the navigation bar the buttons change the colour into a lighter shade of red with text. The navigation bar utilises Serif text in capitals in black, which works well against the white backdrop of the navigation bar. I do think however, if the opacity of the navigation bar changed into a 100% white rather than having a low opacity, the text for the navigation would seem more readable. The navigation bar contains internal hyperlinks to Kermode’s film reviews, book, BFI, BBC, print, radio, music and contact page. The BFI, BBC, print and radio icons contains a drop down menu which allows the user to select different categories, whereby the user can click on each link leading to another page where they can immediately read more information. 

Navigation bar of the Mark Kermode website

I click on the ‘Kermode on film’ button which leads me to the Kermode on film page. This is easy to use. The page contain brief information about Kermode’s work on films and contains an external hyperlink at the bottom of the text highlighted in the form of a red button, leading to another website which contains Kermode’s podcast on his film work. Each page of the site contains a balance of image and text. Each page contains a pose of Kermode, highlighting that this is his website. The colours used are mainly black, white and red. This colour scheme is consistent throughout the website. However, the Kermode on film page deliberately uses a light gray background, to place more emphasis on his work and content of this page. This emphasises the importance of this page and making the text more readable. The website uses wide margins on the left and right hand side of the page, creating white space and placing emphasis of the content of the site.

                                                            'Kermode on Film' page

The contact page link is featured in the top navigation bar and is consistent with all other pages, there is an image of Kermode which goes with the theme of the site but it does work and it is easy to use. There is a link to an external site for business enquiries, a Twitter link and credit of people who designed his site and took the photos for his website. Other than this, there are no other contact information and contact form. Besides the Twitter link, there are no other social media links available. I do personally feel, that Kermode should consider adding more social media links, to enable his work to be promoted on a global scale and advertised more.

                                                        Contact page for Mark Kermode

The Mark Kermode website's mobile view is good and looks quite similar to the desktop site, remaining consistent and easy to use. In comparison to the Erbert website, the Mark Kermode website appears more mobile friendly and appears to work better on the mobile version, as it is more structured, organised, and the layout appears less busy. With Erbert’s website, although the layout on the homepage can seem quite busy on the mobile phone, and it does require a lot of scrolling compared to Kermode’s site, the homepage is clearly organised with different sections.

 

                       Mobile view screenshot of Mark Kermode's website using a Google bot smartphone

Both sites contain social media links, but I do personally feel the links on both sites can be increased to promote these film critics work more, so they can easily be reached to more viewers. Both websites contain content and work related to the film critic’s site. On Kermode’s website, the hyperlinks are easier to click on and view, but his film critic work is on an external hyperlink, which makes it easier to view his work, but perhaps the site could be more compelling by possibly featuring some interviews and reviews. Although, Erbet’s site contains a lot more of his work in a structured and organised way, reflecting his life’s work but may be less of it should be on the homepage and contain links instead of a gallery of all his work, to make the site more exciting and less confusing for the users.

In terms of the footer, Kermode’s site does not contain any copyright information or internal hyperlinks, whereas Erbet’s site does. The footer on Erbert’s site is organised in four sections, whereby the first section contains links to movie reviews, prime, the second section contains links to, movie genres, the third has links to blogs and the last section has important site links including about, contact us etc, Erbet’s memory and social media links.

In conclusion, researching the websites of both these film critics made me realise that I need to consider aspects of both websites. I need to make sure the website is consistent in design, layout and typography. It also needs to be accessible, user friendly and mobile friendly to all users. I need to use colours that makes it easier to read the content of my site, use white space to balance the images and text on the site. My navigation bar also needs to be featured at the top with my buttons clearly labelled with Sanserif typography, so the text can be easily read. I will also add a footer, which contains copyright information about my website. The main content of the site will have key information, without the user having to scroll too much on the phone. In addition, I need to make sure that the website has appealing content, features a contact page, home page, about page and a page to display my projects with a selection of social media prominently displayed on my website to improve audience content and connectivity.