Page Creation Process

Following a decision on a design for the layout I began by starting with an off white background and started by designing the banner which was a rectangle which had a gradient added and contrasting wrings; i will use this colour as a divider to break apart sections of the article as well as the colour I will use to highlight key information as well as headings for each section. I placed an image behind the the banner with the image showing some of the most popular arcade machines that were made. I then placed a title of the main topic of the article which is the evolution of video games in a retro arcade typeface with spacing from the images as well as leaving a clear margin and outline around the page. To choose the main text for my article I began by selecting 4 fonts and typed a sentence in multiple sizes and began by looking at what sizes and typefaces were legible; after selecting Gills Sans Light I then wrote a heading underneath the title making sure it wasn’t too big so that it over shadowed the title. For the beginning of the text I began by including a drop capital with the same colour as the banner with a white letter to make it stand out more; the drop capital is three lines deep which means that it stands out against the block of text. I placed a block that was the same colour as the drop capital as well as the banner with some interesting information inside in a white font as well. I then placed three images of some of the most popular arcade games created with equal spacing and captions placed in the bottom left corner with a brief description.

Image

The Banner and off white background is an ongoing theme on all the pages. There are four columns that I have created using the guides and began by leaving one column free of text for some free space; I placed the 8-Bit characters that I have created as well as the joystick and buttons at the base of the page and began by placing a heading at the top of the page in the purple colour about the gaming industry. Using original fonts and images of the games titles I made or imported headings for each one of the games that the article was about. For some of the text I had to make sure that it was spaced around the images to make sure that there was enough space for all the text as well as preventing there from being large gaps between sentences.

Image

For the four pages that featured multiple consoles from each of the generations that featured imagery as well as text about the consoles with information about their most popular games as well as how well the consoles sold. I used another banner but this time plain to break up the generations of the consoles as well as every other page that has a heading in the top banner about what the page was about for example in the handheld page there was a heading telling the reader what was contained on the page. These pages also use the four column layout that I have used throughout my article with both the pages that are next to each other are closer with space on the outside. Most of the images that that are used have been altered by using the clipping mask tool throughout the 8 pages so that the images could fit as well as for some of the images had backgrounds that I didn’t want because of the grey background would have made the images standout and look out of place. There are also images that I recreated myself using illustrator which were made to look like the controllers in a simple colour scheme. I also decreased the opacity of all the images down to 70% because I have found from previous experience that when images are presented normally they seem to stand out too much against a background.

Image

For the future of gaming page I began by placing an image spanning the top of the first page similar to the first page with the banner overlapping as well as a heading underneath in the same colour. I used another drop capital on the page with a quote half way through the text in the stand out colour as well as placing some quotation marks around it with an altered opacity so that the quote stood out more than the punctuation. Images placed at the bottom of the page feature the caption as well as the text being presented in the three column style that I have used throughout the article. The heading has been altered so that it is shaped so that it angles down towards the beginning of the article where the readers eye should be directed to begin reading.

Image

 

The final page contained the banner as well as using the three column layout with the images stepping down towards the bottom of the page. Another drop capital was places used as well as a coloured block at the end of the page with text in like on the first page. The two pie charts that are featured at the bottom of the page are photoshopped so that the images seem to be in the same colour as the theme purple so that they look like part of the article as well as looking out of place when looking through the article. All of the have had their opacity altered similar to the other images throughout the article.

Screen Shot 2013-09-26 at 20.18.04

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: