hollymontfordinteractivedesign

[hollymontfordinteractivedesign]

Completed Website. 

This is a short video navigating my completed webpage. The reason for each artistic or developmental choice is detailed below in my process book.

[hollymontfordinteractivedesign]

[hollymontfordinteractivedesign]

Creating a Gif

To feature on my website, I created a small animation of a running 8-bit video game style character, meant to run across the bottom of the website, almost appearing as though the user is ‘playing’ the website like a game.

To create this, I drew three separate frames, illustrating the character at different points of running. In Photoshop, I made these into a frame by frame animation. To create the illusion of the character running I would make only one layer visible in each frame, having alternate positions of the character progress a small amount at each step in the animation.

I made the delay period between each frame short to ensure that the movement seemed fluid, yet not too fluid to seem out of place in the context of a retro video game.

After animating this, and adding it to my website, I decided that overall, the website appeared better without it.

Although I’m happy with how the animation turned out, the horizontal movement of the character alongside the horizontal scrolling of the website appeared jarring against each other. To ensure the website didn’t appear empty without this animation, I created more still animations to appear on the website.

[hollymontfordinteractivedesign]

Gantt Chart

A Gantt chart is a bar chart illustrating a project schedule. To ensure I get everything done in the following weeks, I’ve made a very simple yet concise chart of the main tasks I need to carry out per week.

[hollymontfordinteractivedesign]

Prototyping within my target market

After having initially tested my paper and basic Muse prototype with my peers, to collect more targeted opinions as the interface and design aesthetic grows, I collected a focus group of 3 individuals. each individual identified with the ‘gamer’ label, and represented a slightly different age range, one 16, one 19, and one 22.

Each person had a slightly different take-away from the exercise, but many of the points of improvement were universal.

The main point of improvement shared by all was the development of the visuals. This was expected however, as this has not yet been completed on this prototype. Only one illustration is currently completed leaving the pages empty.

Another improvement suggested was the presentation of text. The text on the website varies slightly in size. This was done so that each text box would occupy the same amount of space, but was jarring according to my focus group, and is something I’ll rectify in development.

Another comment was that the slightly different placement of the arrow key on each page slowed down the interaction and made navigation more difficult. This will also be fixed before the product is finished.

[hollymontfordinteractivedesign]

Developed Website for Prototyping with a focus group 

As I developed my website and the video game aesthetics, I collected a group of people to help to test out the interface and give me opinions on site so far.

Above is a screen recording of one of my focus group navigating the website, the clicks can be seen via small circles on the screen.

[hollymontfordinteractivedesign]

Creating Illustrations

To maintain the video game aesthetic on my website I’ll have to use illustrations rather than photographs of the technology I'm depicting. 

I’ve begun creating these on photoshop, roughly tracing over photographs with block colours and crafting simple illustrations of the products. For example, this illustration of the Nintendo Wii remote. 

However, I want my website to project a narrative, and one way In which I’m doing this is by having illustrations of technology move from pixelated to clear and crisp as the timeline progresses. The style of graphic will roughly imitate the style that would have been played on that controller, for example, with older controllers being drawn in an 8-bit style. 

This is an example of one of the older controllers, ‘Tennis for Two,’

This pixelated effect, that will be used on multiple illustrations and the background design, is easily rendered on Photoshop. The tool ‘Mosaic’ allows me to alter the cell size of each individual cell, letting me gradually progress the illustrations and allow a narrative to progress. The larger the cell size the more pixelated an image will appear and therefore older technologies will be drawn with a larger cell size. 

[hollymontfordinteractivedesign]

Creating Interactive Buttons

To help create the video game aesthetic, I downloaded the font ‘GamePlay’ from Dafont to use throughout the website. Before using this on Muse, the text has to be converted into a JPEG as to be able to appear on all different web browsers.

I used this font to create the button on the home page, the first point of interaction between the user and the webpage. I made this interactive, changing colour scheme when the user hovers over it, displaying primary colours commonly seen in retro video games. 

To do this I, created the text on Photoshop, allowing different layers to appear during the normal and rollover states. The result of this is shown in the short screen-recorded video below.

[hollymontfordinteractivedesign]

Algorithms, Key to the game experience?

All media forms contain algorithms of some sort, a sequence of simple operations that are executed to accomplish a task. Lev Manovich states that these are specifically ‘key to the game experience,’ as a player discovers rules and trends that command how the game is to be operated.

As I am attempting to reference the video game form within my Interactive website, known algorithms of video games will be replicated. The website will open with an ‘Enter’ button, that users will recognise from the video game medium and respond to accordingly. This will be the case with all of the interactions within my web page.

[hollymontfordinteractivedesign]

Creating a Side-Scrolling Interface

I decided to format my website to have a side-scrolling interface, mimicking the open-world interface of the Japanese interactive role-playing games (JRPG) popularised in the mid 90’s to 2000’s, such as the Animal crossing, Pokémon and Legend of Zelda series.

Although it’s possible to download templates to create a similar interface, I decided to craft this from scratch on Adobe Muse, as this would give me more freedom creatively to craft the website to fit my vision.

To do this, I have to format all of the webpages onto one large inclusive and easily navigated page, excluding the home page. Each new webpage is placed vertically under each other, and the ‘scroll effects’ tool is used to place them at the correct place within the scrolling format 

Each new item placed will have to be formatted to fit this, given a unique number code depending on where they fall on the X and Y axis.

[hollymontfordinteractivedesign]

Contextual environment of my work

 The website I’m creating will exist to compliment an exhibition about the history of video games, summarising information on display and encouraging new users to discover the video games in person at the exhibition.

I’ve looked into real examples of exhibitions to form the contextual environment I want to create.

The main example I explored was the ‘National Video Game Museum’ in Sheffield. This Museum focuses on representing Video Games as not just as enjoyable, but as an art form and an important part of culture. This is something I too will try to tackle in my website. Despite the work and technology put into video games by artists and developers, this form of technology is often seen as less intellectual than others.

Looking at past video games can also tell us a lot about the cultural context in which they were developed, especially using Zielinski’s method to ‘not seek the old in the new, but to find something new in the old.’

The National Video Game Museum presents new technologies to visitors, but most importantly praises past developments.The web design is dynamic and interactive, showing clear homage to the video games that it is representing. 

While the National video game museum is the only of its kind in the UK, many other museums have hosted video game exhibitions. 

In January 2019, the V&A is hosting an exhibition on Video games, featuring concept art and prototypes alongside the large-scale installations. This exhibition only features work from the mid 2000′s onward. The focus on recent work is apparent in the web design, accompanying the exhibition with very current vapourwave style aesthetics.

My own website will be designed to praise past technologies, accompanying an exhibition of the same theme.

[hollymontfordinteractivedesign]

Paper Prototype

I crafted a very simple paper prototype of my initial idea for my website, presenting the sideway scrolling mechanism I hope to use, a moving animated avatar, and buttons to enter and replay the webpage.

I tested this prototype with peers, and the overall opinion was that the scrolling mechanism itself was not a clear enough navigation tool. While I want to keep this as a key part of my website, I could also include buttons to provide an alternate method of navigation. 

One opinion was that the layout of the website was too simple. This layout could be varied if the text box layout was varied or simple animations or illustrations were drawn.

The interface has been designed to imitate a retro video game. This however, wasn't immediately clear to everyone testing the paper prototype. To make this clearer I should craft aesthetics matching the theme.

[hollymontfordinteractivedesign]

Dimensions of Interactive Design

Gillian Crampton Smith introduced four dimensions in which interactive design exists, which each either define or enable the interaction between the user and the interface. These consist of:

Words- meaningful and simple, communicate information and create your persona

Visual representations- 2D images, supplement the words, photorealistic truth or a constructed image, engage with people differently

Physical objects or space- interactions with the objects and spaces the media is consumed, engaged through a computer screen or phone and what environment will they be in etc.

Time- engagement with how the pages move through time, how long it takes.

This list of dimensions has been expanded further by interactive designers and media theorists, with Behaviour considered as an interactive design dimension now. This refers to what people are giving back to you and their responses

These all need to be considered in regard to the development of my website.

Words will be used to display information, informing the users about the history of the video game controller, these will be aided by the second dimension, physical representations, to help explain this history.

Illustrations will be used instead of photographs as the physical space and context provided (a museum exhibition) will provide the tangible forms of these artefacts, so it’s not necessary to replicate this. The illustrations instead will provide a further context, with the style mirroring the graphics of the games on each device.

Time needs to be considered, to make sure that the website engages at a similar pace as an RPG video game. The behaviour of the user will be further investigated as I engage a focus group.

[hollymontfordinteractivedesign]

Website Proposal

I want to create a website displaying information about the development of video game controllers throughout time. I want to craft this website in a way in which to replicate the structure of interactive video role playing games such as Super Mario Bros and Sonic the Hedgehog. I want to most specifically focus on these games that were popularised in the Mid 90’s - 2000’s to appeal to my target market.

I’m targeting my website at people aged 16-25 within this gaming community as this is an active age group who typically have free time and would therefore be interested in visiting an exhibition.

Furthermore, there’s been a recent surge of nostalgia based products released, with films from this time period being remade or rereleased, as well as old games consoles such as the N64.

[hollymontfordinteractivedesign]

Initial reflections on example websites

I responded best to the more graphic and design led websites, rather than the examples which appear to be more information driven. For example, on http://dismagazine.com/, I found the large chunk of text with the traditional black text on white background harder to draw me in, as while it appeared more educational and academic, the lack of colour and lack of opportunity for user interaction made the website less engaging. 

I found websites such as http://www.evolutionoftheweb.com to be far more dynamic which engages audiences such as myself. The graphic animation and interactive aspects includes the audience, making them more active in the process. Specific strands can be isolated, letting the reader decide what information they want to read, instead of it all being presented as a block paragraph while the use of a physical timeline makes it easy to evaluate the data overall. I also enjoyed using https://onyx.net/25-years-of-the-internet, with the 2D graphic style suggesting less formal content. While some people found interacting with this website less simple due to the graphic of the mouse contrasting how users were supposed to use the website, designing with an iterative process would avoid problems such as these. 

While I engaged well with the last two examples, time was represented in both of them in a simple linear fashion while more dynamic and less simple representations could have been explored.