3. Research
PC Gamer is a British magazine that started publishing in 1993 focusing
around computer games. While founded in the UK, the magazine also
produces different editions for the best selling PC games each month in their
respected regions.
The content incudes reviews of the latest games. previews of new games while
also having articles about hardware, mods etc.
4. The front cover for PC Gamerâs January 2015
edition.
They use a full page to show a picture of one of
the characters, Tracer, from the game being
promoted in the headline, âOverwatchâ. Only
one picture is used to show that this is the most
likely main focus for this edition. The
predominant colour on the front is orange , both
from the headline to Tracerâs leggings to the
spot on the front labeled âthe best games of
2014â. The colour orange is eye-catching along
with the red in the title of the magazine.
The font is mainly big bold fonts on either the paler background or on a
coloured blob or star. The remainder of the text a smaller size about the
other parts of the content but still bold and readable. The title logo for PC
Gamer uses a bold white font on a black and red background. The small
amount of red is enough to catch the attention of the reader but is still easier
enough to read that might have been difficult if the whole logo had a red
background.
5. The double page spread for PC
Gamerâs January 2015 edition.
In contrast to the front page,
the right side of the page has
several different pictures to
show screenshots from the
various different games the
article talks about.
Around the pictures are small bits of texts about the pictures shown. The
colours are a plainer black and white with some colour or bold used for
headings. A yellow blob/star and red ring are used to draw attention to bits of
text that might be important or showcasing something such as a free item.
That layout suits this magazine but Iâm less sure if it would work for mine as
the page might look crowded and not have enough room for the written
content Iâm going to write for my double page.
6. The home page for PC Gamerâs website.
They use the eye catching colour red so that the
person viewing has their attention drawn to the
headings of the different articles they could read.
The website used predominantly images to show
the main focus of the article with some text to
headline.
The theme is consistent throughout with all of
the article title pictures using brighter colours
and clear images to draw the attention of the
reader.
The fonts are still usually a larger font with
bolder headings to make the point clear. The
font is sans serif so that screen readers and
people with trouble reading serif fonts.
7. Total Film is a British magazine starting in 1997 that publishes thirteen
times a year.
In 2014, Total Filmâs website decided to merge with GamesRadar,
which is where the online content for Total Filmâs is now accessible.
Besides the editions released in the UK, Total Film also release versions
in Russia, Serbia, Turkey etc.
8. Total Filmâs 2017 April magazine
focused on the new a the time
Scarlett Johansson film âGhost in the
Shellâ.
The bright pink font logo catches the
attention of the viewer, followed by
the bold white text captioning the
focus of that editionâs magazine.
Like the PC Gamer magazine, they
use the cover to show one image
across the whole page to not crowd
the front page.
The background is darker colour than most other magazine covers so that
the headlines in pink and white stand out more.
The fonts across the rest of the page seem to different and change
depending on what film or actor that text is highlighting possibly to
replicate the font dedicated to the actual film itself.
9. A double page spread
from Total Filmâs most
recent edition of their
magazine shows it uses a
similar style of layout to
PC Gamerâs.
Although it is a different
edition to the front cover
I looked at, the layout on
the inside is quite
different.
This page is headlining that a large section of the magazine is going to be
focused on the new Lara Croft film. This is why a large section of the page
shows a picture of the actress from the film. On the right hand side there
are also other pictures to show what other parts will be about before the
viewer needs to read any of the text.
In the text, it is mainly black writing on a white background using red to
highlight headings for each parts of content.
10. With Total Filmâs website now being on
GameRadarâs website, the quality of the
website doesnât seem to match the quality
of layout for the magazine.
The main headlines are shown with
relevant pictures and the text written at
the bottom. The rest of the articles are
using smaller images with the text title
beside it linking to the article. The
background uses a light grey with plain
black text and an orange box to show the
topic of the article.
Itâs practical but not very appealing or eye
catching to the viewers. The layouts are
very simple but a little boring.
11. Cinefex is a magazine, launched in 1980 that discusses, reviews and
explains the special effects in cinema, written by Don Shay.
Issues are released every two months and discuss and breakdown the
effects in a lot of detail.
âA defining characteristic of Cinefex is its unusual 8"x9" configuration, a
format Shay chose to enable him to reproduce film frames in a format
similar to the original film aspect ratio. In 2011, Cinefex was made
available for the iPad, enabling users to purchase digital copies of back
issues of the magazine.â - Wikipedia
12. This is the 154th edition of Cinefexâs
magazine, where the focus of the special
effects magazine is Spider-Man:
Homecoming.
The cover is made up of just an image
taken from the film. The picture seems to
be edited slightly, with the logo, issue
number and price over-layed on the top.
The colours, especially the red of Peterâs
suit and the yellow of the logo, are good
at getting the attention of potential readers. With the background being a
darker colour with highlighted parts of lighter blue to represent the water, it
doesnât make the background boring but still makes Spider-Manâs suit stand
out. If the background had of been a plain colour such as completely black,
grey or blue, it wouldnât have been as effective.
13. A double page spread from an earlier
edition of Cinefexâs magazines.
The layout seems to be a balanced mix of
images and text, with images taking up
half of the page with small writing text
filling the rest of the page.
The text for my magazine might be a bit
too small depending on how much text
the article I write for my double page
spread uses. So for mine, I might use a
bigger text size since there might not be
as much, but the use of similar font to the
film for the title is a nice addition that
could look quite throughout on the
magazine.
14. The landing page for Cinefexâs
website. The use of the image
showing the magazine in paper
and digital form is a good way
to promote it as soon as you
arrive on the website.
Underneath the image is a
section for social media which is
a nice edition and possibly
something I could include in
my website.
A similar style of image is used throughout and uses small spots of brighter colour
to catch the attention of viewers to the subject. Itâs something I should consider
when making my website.
15. Summary of Research
After looking at three different websites and magazines, theyâve helped me
have some more thought into how I can lay out my own.
I know to keep a consistent colour scheme throughout all three products to
make the connections more obvious. This is why Iâll make a style sheet
with all of the colours Iâll use for my products. The front covers for all three
of the different magazines looked very similar, prioritising one character to
be the focus of the cover and might be something to take into account if a
different layout isnât as effective. The double pages however were all
different so Iâll try to take the better parts from each one that I thought
went well and leave out what wouldnât work for my double page. The
websites were the same, although I wasnât as happy with the look of them
as I was with the magazines. This will probably mean I will take more
inspiration to my magazine and use more of my own creativity for
designing the look of my website.
16. Proposal
Working Title: J.A.R.V.I.S â the name of one of Marvelâs most well known
characters AI system.
What is it called? This can change if you think of something better later
Audience:
My audience could appeal to all age ranges since Marvel Studiosâ movies are
popular across most generations. It might cater most towards the slightly younger
generations but not so young since a lot of the Marvel movies have a twelve or
fifteen certificate. Stereotypically, Marvel, especially childrenâs toys, are classed as
âboysâ toys though the idea of superheroes are becoming vastly more popular
among all genders and a broader age range. Marvel can appeal to any levels of
society but itâs more likely to appeal for classes A to C2. Like with the social classes,
any one of the psychographics could be drawn to the Marvel universe. Because of
the many different personalities the each individual characters have, it is easier for
different people to relate with different characters, partly explaining why the
franchise is so popular.
Who is your audience? Be very detailed; age, gender, social status, psychographic etc. Use the
Audience Classifications PowerPoint on Blackboard to help you develop this section. Why would
your project appeal to this person? Discuss each audience element in relation to content (why would
your product appeal to the age group? Why would your product appeal to the gender? Etc.)
17. Rationale (approx. 100 words):
During secondary school I did ICT and Graphics. During those subjects I created websites and
designed several different products so I knew the basic steps already. I picked the topic of
Marvel because Iâve been a fan for a while and I knew I would have enough to talk about for
my double page and my website.
Review your progress throughout the year- what skills and knowledge have you acquired?
How has the subjects you have studied this year informed your choice for this project?
What have you studied and how will it have a direct impact upon your project?
Evaluation (approx. 50 words)
I plan to evaluate my work by comparing how each part of the film is shot and
edited compared to how the concept is in my head and written down. Whether
it went the way it was planned and if not, how was it changed? Did that make
it better or not as good? Iâll also compare it to the current products already
existing and how they have influenced my final product.
How do you plan to evaluate the work? Reference conducting on-going evaluation and your final self-
reflection, analysing
18. Project Concept (approx. 200 words)
The concept for my project is the have a magazine that focuses on the Marvel
Cinematic Universe and how the movies are made. It can explain some of the
GCI and special effects used to create what the viewers see on the screen. I
may also add some sections in to do with what certain movies are about and
the best order to watch the movies in. If I have time, I could potentially add
pages on characters, possibly on their likelihood for surviving Avengers:
Infinity War, or on the games released and reviews on those. Itâs possible I
could split these parts of information over the website and magazine that I will
create, depending on which will work best. A bank of all the Marvel characters
would take too long, so perhaps a section on the magazine could have
information about a randomly selected character, either well known or not,
and possible references to comic series with them in or if theyâve been in a
movie. The character may be selected due to a film being released that isnât too
well known.
What is the concept for your project and what are you going to make?
What research will you need to conduct and how will it help you make your project?
19. Front Cover Experiment
The mock front page I made on Photoshop was to
text out a potential idea that I thought could work
quite well with the existing styles that I researched.
I liked my use of the blob to catch the viewerâs eye
and the placement of the barcode but they do take
up quite a lot of space so when making my actual
one they will probably be smaller. The font too was
not the best choice either as it didnât really fit with
the style of the classic Marvel font. In my actual
front cover, a more fitting style will be picked.
20. Double Page Website
I used InDesign for the first time to
create a mock up for what my double
page magazine spread might look like.
The images seemed to be a good size but
maybe could have done with another
smaller image at the top of the second
page. I might make the text a little bigger
since I donât want to make it look boring
with just big blocks of text with the
occasional image.
21. Website Experiment
I used Wix website builder to
see how a mock up of my
potential website could look. I
focused more on what the
names text for the different
pages would be as well as
getting inspiration for font,
colour scheme etc.
29. Evaluation
Now that I have finished my three products, I can compare how I had originally
planed them to be, what I changed and why. Then Iâll say if and why I thought
this was a better idea and how this improved my product, what problems I
encountered and what I ended up learning as a result.
First Iâll talk about creating my magazine front cover, then the double page
spread and then the creation of my website.
30. Front Page Evaluation
My initial plan for my front page was to have one image as the background
and overlay other images on the top for different stories and articles that would
be inside. However, when looking back at my experiment and how I thought it
looked, I realised that this might not be an effective design. All three of my
front covers only used one image for the front cover so I created a new flat plan
that would hopefully be a more efficient design.
I started by opening up a page in Photoshop and setting the background to one
of the colours from my style sheet to keep the colour consistency.
I then added the picture I wanted to use for the front onto a new layer.
However, I felt like the image didnât look quite right, as if I had just pasted it
over the top and it didnât look as good. To combat this, I added a new layer that
was a copy of the background and changed the blending mode to âmultiplyâ
and the opacity to 30%.
This meant that by having that layer over the top of the image
it made the rest of the layers seem to blend together more
efficiently and more professionally.
31. From there I could start to add in the text for the title, heading and extra parts
of writing. At first I had a problem with downloading the font I needed. So, to
try and get round this I tried to fill in the blank versions of the fonts with the
colour I wanted. This wasnât a very effective procedure and I didnât like how it
turned out. Luckily this problem was soon fixed and I
was able to add in the text how I wanted to be able to. With the heading I
made some minor changes such as having the second part of it underneath in
a smaller font size which meant that the main focus was on the character
name and not as much of the picture was covered up by text. I also added in
extra parts of text that I knew most other magazines had, such as clues and
hints to the content of that issue that I thought would make sure the cover
didnât look neither empty nor crowded. Then I noticed another problem.
While the colours were easy to read for the title and the heading, the text for
the other parts didnât seem as easy to read. Looking back at my colour palette,
I picked one of the other colours to use as a blob. I found this to be so much
easier to read. I then had another idea of how I could add in some extra effects
to make the front cover look better. I created a copy of the layer for my
character and changed the colour to the same as the blob, the blending mode
to colour burn and the opacity to 50%. When I moved this layer it created a
shadow like effect that I positioned to be used for an effect that I thought
looked like a good addition to the front cover.
32. After thinking that I liked the effect, I decided to repeat the same process with
the title and the heading over the image. I thought the end result was a definite
improvement.
Overall, Iâm pleased with
how my front cover turned
out. It is quite close to the
second option of my flat
plan that I designed. The
main changes is that I
added an extra blob to one
side, putting part of the
heading underneath and adding in the shadows. I feel like making those
additions made a lot of difference for the better and that the product is better
overall as a result. One improvement I might make is that I might have moved
the shadow back to its original place to make it a bit more noticeable and
dramatic, although Iâm still pleased with how it looks currently.
I enjoyed learning extra effects in Photoshop I hadnât created before, even if the
tools were what Iâm used to, such as the blending modes. Iâll definitely enjoy
using these sorts of effects in the future.
33. Double Page Evaluation
Creating my double page spread was a fairly simple process that only took as
long as it did due to technical errors.
To start with, I created a document and added guides in to help with my
layout, as I had done in my experimented double page.
As done in my text page, I used three rows
and three columns as that I what I am used
to. This meant I found it easier to work out
how big the images were going to be and
what size that the columns of text would be
as a result.
By this point I had already written up the
content for my double page plus some extra text that would end up on my
website as I was unsure how much text I would need. It intended to be more
than I required and I had decided to have the double page focus on just one
film rather than on three or four.
34. My next step was to add in the images I wanted to add in and I could
move them if I had to in order to make sure that the text I had fit the
double page. I used to rectangle frame tool that
allowed me to look at how the size of the image
would look. Once I was happy with the size of the
Box, I could look at InDesignâs ribbon to see what size my image would
have to be. The dimensions that I could clearly see showed me that I
would have to go onto Photoshop to crop and resize my
images to, to insure that they fit correctly on the page.
This took a few attempts to get the cropping and resizing
right without making the images look distorted. To test if I had sized each
image correctly, I went to file, and place to input the images into the
rectangular boxes that I had created. After the several
attempts it took to make the images fit and look natural,
I was able to input my text into the columns. It ended up
taking longer than I had originally expected since I had to
organise the text so that it was readable and was all there
but so that the continuity wasnât lost over where one
column ended and the other began. I did briefly consider
changing the background and text to fit the colour scheme
but I thought it might be too much and difficult to read
with the small text size.
35. Overall I am fairly pleased with how my double page turned out, although I
feel like there is a lot more I could have done to make the quality match the
standards of my front cover and my website.
I think that I should have tried another version of my double page while using
the colour scheme I had for my other two products and could have compared
which of the two looked better. This would have been something I would have
done, given that I had more time to do so. I enjoyed learning how to use
InDesign as it was a new
software, even if I did find
it frustrating at times. The
main problem however is
that not all of the
computers and macs I
used had the correct
version of InDesign so the
speed of creating my page
was slower and if I had
been able to have more
time on it, perhaps I
would be more proud of
my magazine double page.
36. Website Evaluation
Creating my website definitely took the majority of my time. Whether that was
due to that being the most accessible product out of my three or just because I
had the most to do on it, the website is definitely in more detail than the others.
My first step was to choose a template that showed some resemblance to the
flat plan I created. Once I found one, I made minor adjustments to make the
image banner a little smaller to fit in with where the smaller images
underneath did. Since I wasnât able to upload my font that I had on my
style sheet, I found and decided to use Chelsea Market
instead, which did bear a lot of resemblance to the
Excelsior Comics font I used on my front cover. My original
plan was to have the background as which
is the same as my front cover. However, I found a feature of
Wix that allowed animated backgrounds. One of them I
thought went very well with the style of my website so I
was faced with a dilemma: the colour from the style sheet
or the animated background.
37. It turned out that I didnât need to choose
as I found a way that allowed me to
change the colour of the animated
background and so I didnât have to pick
one after all. After comparing all three of
my options I decided that it looked the
most effective with my website and could
be linked to the topic in certain ways. I
found it fairly easy to add in the images to
my banner and to the other images below.
What made it even easier was that most of
them were my own screenshots. The blob
on the banner and the headings for the
articles I had pre-written used the red from my style sheet to highlight and draw
attention to what the subject of the text below is about.
Once I started to go through and look at the rest of the pages, I realized that I
needed to edit the layout. The pre-written text I had written was moved to a
page of its own so that the home page didnât go on for ages and the other pages
to seem bare.
38. As a result, my home page changed slightly as I added in what would be
like previews with links to YouTube clips and other pages to the landing
page so that it has a similar height to my other pages.
My landing ended up
looking like this.
My pre written text ended up here.
I felt like this was a more appropriate and
effective layout design for my website so I
decided to keep it like that. Once I had those
two pages sorted, I moved onto the
remaining three. What originally was a
reviews page became my magazine page so
that I had the ability to put my front cover
and my double page onto my magazine.
39. I wanted to make sure I had some of my own original photography on
my website so I decided to add a section to my website to function as a
shop, since the rest of the time I had been relying on screenshots from
existing Marvel products. So to combat this I created a small
photoshoot for some of the Marvel merchandise that I own.
I used some white card to make
sure I had a white background
and floor to make the images
more clear. When I brought the
images into college the next day, I
make some adjustments on
Photoshop before then adding
them to my website.
The link to the finished website:
https://melnuttall04.wixsite.com/jarvismagazine
40. My penultimate page was my contacts page. From the
template there was already a form to send a message
to an e-mail. I liked this idea so felt like I didnât have to
change it. To test if the contacts page would work, I
created an e-mail address that would collect all the
messages that get sent to. Luckily it worked first time,
as long as whomever sends the messages fills in the
fields of the form that I set to be mandatory, such as
the e-mail of the sender and the actual message. If this
was actually a commercial website it would hopefully
reduce the risk of spam e-mails.
The template also included a map which
I thought would be a great feature on
my website. However, I wasnât initially
sure about how I could incorporate a
map for a Marvel magazine. The
location of a comic con crossed my mind
but eventually I decided to choose a
random location to be the Headquarters
for the magazine. In my opinion this was
a more appropriate use of the map.
41. The last page I created was the magazine
page, where I would show the front cover
and the double page spread I had designed.
Personally it was the most frustrating page to
make out of the other four pages. My plan for
this page was to have a small paragraph
explaining the page and then a box with a
slider that would allow the visitor to scroll
between the front cover and the double page
to be able to read it. When I first tried this, I
couldnât get the image to align correctly as
the image had been zoomed in on and
couldnât be read properly. I decided to try
another option in case I couldnât get the slider
to work as a plan b. This was just the images
added in underneath each other. That in itself
had problems for I had to be able to make the
images big enough to read but not go outside the boundaries all of the
other pages had. This I was just about able to manage, but I wasnât as
pleased with the look as what Iâd hoped it looked like.
42. However, a final attempt to make the slider work had a much better outcome
for I was able to sort out the sizing to just make it work. I compared it to the
other version I currently had on my website to see
which I preferred. I chose the slider as it was
closer to my initial plans and could be viewed on
a bigger screen if the text is small to read which is
much better in my opinion.
Overall, Iâm very happy with how my website
turned out. I liked how I was able to incorporate
the colour scheme as well as I did, especially
using the moving background with the shade of
blue that I used for the front page. I managed to
stay as close to my plan as I could, in exception
for moving some of the articles onto the other
page because I felt it was more effective and
useful that way. The main change however was
the website map, since that ended up not being
I enjoyed learning how to use Wix, as it was a new website builder for me.
Previously in the past Iâve used Adobe Dreamweaver but I definitely found
Wix easier to get my website to look how I wanted. If I made any
improvements, Iâd probably try to add more articles in about more films or
have a reviews page that visitors could send in if Iâd had time.
an effective design in the end.