My Project

Many websites base themselves along the same basic structure. A navigation bar
placed on the top or left side of the page, a header and footer and a main body of
text. The difference between these websites and the one I am intending to build, is
that mine must be an experience.
But what does it take to take a website from being a set of pages where the user is
spoon-fed information, into a website where the user is immersively engaging with
the space they are in to find this information? Perhaps it requires a breakdown of this
basic well-known structure into something that is unfamiliar and invites the user to
explore its contents.
Each existing medium has its own recognised conventions of structuring the
information, sometimes with an obvious reasoning behind the choice and sometimes
just because everyone else does it in that way. A similar thing is happening with the
way people structure websites ( Barfield: 2004, 204)
An experiential website requires an element of interaction with the user, making
them scroll or click certain aspects of the website to progress to another space.
This interactivity develops a relationship with the websites audience. To make them
explore the space instead of feeding them information creates an experience and
therein lies the brief of my project.
I have sectioned this book into two of the phases of James Gordon Bennets
Design Process in the book Design Fundamentals for New Media(2005). The third
Presentation Phase is not included as it relies on a prototype of the website being
built. I will however design and annotate one of the pages of my website to give an
idea of how it is to be composed

Project Brief

To design and produce an interactive,

experimental website, which does not
conform to a traditional website layout
but instead creates an experience
for the user through their interaction

Information Phase
In James Gordon Bennets book Design Fundamentals for New Media(2006), he
states that the design process has 3 phases. The first phase is the information phase,
where the idea of the websites function is decided. It is at this stage that I must
decide what my website is about, who will visit my website and therefore what style
of media and what content I will put in it.
My website will be based on a game. Games create a new world alongside our
own, where product, businesses and celebrities exist. It is my intention to create a
website that represents one of these companies and their products, and to guide the
user through a typical company website with similar themes to that of the games.
Interaction is created by making the user move through the website to uncover more
information.
The site will be visited mainly by fans of the video games/their associated media,
between the ages of 12 and 40.
Many videogames are developed into films or are adapted from media such as comic
books. Followers of these may also have interest in my website, so it is important
to make sure that my websites information is balanced, and that if I reference the
games storyline, that I stick as close as possible to the entire story rather than just
that shown in a graphic novel or videogame.

The design of a website begins

by determining the purpose of the
site. The answer to the question
What is the site supposed to do?
will influence the design more
than any other part of the process
Bennet, 2005:28

Concept
To begin developing a website idea, I took two of my favourite video game series,
Ratchet and Clank and Portal, and placed them onto a spider diagram. Around
their titles, I began writing what I thought were good in-game structures that I could
build a website upon.
These ideas mainly revolved around the businesses or organisations that were such
a huge part of both series. The original idea was to somehow mock a professional
website for the company.

Gadgetron

Gadgetron is a gadget and weapon supplier in the Ratchet and Clank series. One of my
concepts was to produce a shopping website for the business with different sections
for gadgets, weapons and armour. All items would be priced in bolts, the games
currency, and upon trying to buy something from the site, a humorous technical
difficulties page that related to the game would be shown.
The idea behind this piece is to make the user become immersed in the games themes.
Shopping with its currency, choosing sizes for a certain alien race or viewing the
swingshot or hydrodisplacer in the gadget section add a layer of interactivity that is
outside that of the game.
Jokes and novelty items from the game such as the personal hygenator are included,
with humorous game-related reviews about the item.

OR

Portal
The game Portal takes place in a science testing facility named Aperture Laboratories.
Portal and its sequel have produced an enormous following, with recurring jokes and
themes that would make a website based on it very exciting.
The company itself has a dark past and opens up the idea of having a website beyond
what is seen at face value. Upon arrival, a user will be shown a clean professional
site about Aperture Laboratories, but through interaction and exploration they can
uncover the old Aperture Science website, filled with images and pages relating to
this side of the company.
The idea of recruitment crops up frequently in the game. I had the thought of building
a jobs section of the site that on one side appears to be asking for willing test
subjects, and on the other begs for participants, with the promise of $60 or $120
payment. Perhaps seeing this as one of the most important points to make in this
entire section.
Announcements in the game often try to be personal to the player, whilst omitting
their name for [Test Subject] or their location as [Subject Home Town]. With this
in mind, content for the website will be directed towards the user. The website will
address them directly as a person and will encourage the user to interact with the
page.
The main site will be viewable using the standard computer mouse or trackpad,
however, by using the arrow keys the user will be able to switch between the Old and
New sites. A clue/prompt to do this will be written on the page in a typical Portalstyle referencing the idea of someone who has already been testing and is unable
to move a mouse, or a visitor from the future that has evolved beyond the use of
opposable thumbs.

Style
After some consideration and research of other websites, I decided upon producing
the Portal concept because of how open ended the idea was. Unlike the other ideas
I could introduce a lot of humour and images of my own into the website. It also
had a very distinct visual style that would be great to conform to when building the
website.
The entire game is filled with iconic imagery that it incredibly memorable and
distinctive, and I intend to use them to support the graphics of my website. Even the
older, second side of the proposed site has its own separate, but equally distinctive
imagery and themes, some of which directly link to that of the cleaner webpage. It is
these that will help juxtapose the two pages with each other.
Although the New Aperture page will be a clean, professional white and blue layout,
I feel that the Old page should have a vintage 1950s look. Many of the images and
signs in this section of the company use imagery that is in a style of that time. Media
from games such as Fallout and Bioshock will help inuence this style. Many of the
Portal logos and symbols can be made easily in photoshop using Polygons and Layer
Masks.

Parallax

As a small visual effect on the page, I had thought of using a parallax effect when the
user scrolled down. The image would be of the Portal icon falling through portals on
each container. The character would be hidden at each gap. An image of this idea is
shown to the right. A great example of a similar effect is found at
http://lostworldsfairs.com/atlantis/, where an elevator travels smoothly town the
chute as the user scrolls. It is hidden and revealed at regular intervals as information
passes it. This site uses jQuery to create the parallax effect.

Colour
Portal is clearly built mainly around 4 colours; Blue, Orange, Grey and White.
Blue and Orange are compliments on the colour wheel (they are directly opposite
eachother), and as I feel that orange is a very warm colour and takes away from the
cold, almost medical look of Aperture Laboratories, I have decided that my website
will be predominantly off-white/grey with hints of the other colours running through
it. The following quote from Alan Pipes helps reinforce my idea of keeping colours
subtle rather than a shocking, high contrast colour pallette.
Black text on a white background provide the highest degree of contrast, but a
white background may be seen as cold and clinical and black text too boring. Try
more subtle shades, as you would when painting a room- say, off-white for the walls
and dark greys for the details (Pipes:2011, 119)
Using an eyedropper onto the Portal logo I pasted the hexadecimal code for the blue
and orange into kuler.adobe.com, a popular colour scheme design website. Upon
doing so, it created different colour schemes based on certain rules of the colour
wheel. I chose several that I liked and placed them on the page opposite.
After looking at them together I feel that I should stick to the monochrome blue
colour scheme, and use the orange compliment for certain highlights.
For the older section of the website, perhaps the orange monochrome colour scheme
can be used within the vintage look as an aged/worn colour pallette. The colour
scheme of this section of the game is mainly greys and browns and therefore it
should work quite well.

Analogous

Monochromatic

Monochromatic

Complimentary

Interaction Phase
The Interaction Phase is described by Bennett as how visitors will interact and
navigate on the site(Bennett: 2005, 28). It is the place where I decide what order
my content will be presented and how the website will be structured.
Bennett states 3 steps in the Interaction Phase;
- Consider how the viewer receives content
- Consider how the viewer controls the website
- Map out the site
and these steps will be discussed in the next few pages.

How the user views content

The user will view the website in one of two sections, and will interact to the second
section by exploring the website in more detail. Interaction is created by making the
player scroll or move using the keyboard for more information and by including links
to images, or other pages of the site. Using the keyboard instead of the mouse takes
the player out of conventional web navigation and forces them to think about the
navigation and how the content is placed in the website.
The portal character moving through the containers entices the viewer down towards
the bottom of the page to see their fate at the bottom.
By navigating to the right, the user is given a completely different visual experience
from the last, Players of the game will instantly recognise the icons and visuals and
be drawn to the content of the website.

Viewer Control and the Transition

I intend to transition my page off to the left or to the top of the screen, making the
second page appear from the right or bottom. This is because in Western culture, we
tend to read from left to right, and top to bottom. It will appear more pleasing to the
eye to move in this way.
Codrops contains an interesting tutorial on CSS3 transitions (found here: http://
tympanus.net/codrops/2012/01/30/page-transitions-with-css3/). These transitions
allow me to build my entire site on one page and upon clicking a button, hide all the
information with a slide or fade animation and display a new page with new content.
Although this does not currently incorporate my idea of using the keyboard for
navigation, it does show an interesting way of disguising one webpage within another
and animating between the two in an aesthetically pleasing way. As jQuery can
be used together with CSS3 transitions, perhaps I can find a way for a right-arrow
keypress to trigger a transition.
It is also possible to use the parallax scroll horizontally for the page transition. If the
viewer presses the right arrow key, the second page will scroll in from the right in
front of the first page hiding it. Keyboard navigation will work on a parallax scroll
and horizontal scrolling speed can also be changed. This may become the most
reliable method of building my website with the effect that I am looking for.

Structure
By looking at several different interactive websites I have found that a single page
website will benefit the aesthetics and the interaction in my site. A deeply structured
site would take away from the fact that the home page can in fact be transformed
into an alternate one.
The two sections must be structured so that their most important information is the
first thing that the user sees.

New Section

The New section will directly reference the user in the beginning as [Possible
Future Test Subject], with a side panel hinting at how the arrow key functionality
will work should it be implemented in the final design. The information will begin
with a brief description of Aperture Laboratories and Aperture Science Enrichment
Center, talking about its achievments and finally talking about recruitment, clicking
on the Enrol button will link to a humorous Page not found page, or perhaps link
to the old page, should the arrow key transition be deemed unsuitable.

Old Section

The old section will appear as an advertisement for recruiting new test subjects,
where the focus is on the $60/$120 payment and the possiblity to have the
opportunity only althletes and astronauts have had before. It will make false claims
similar to those in the game, and reference the history of Aperture Science.

Websites such as ufo.lt and www.

skittles.com make use of a single
page to produce their websites. It
is interesting how the entire site
background forms an image despite
fractions of it being seen on screen at
a time. As I am most likely building a
single or two page website, the idea
of a complete image or repeating
pattern may also be included in my
website.

Design
The entire site remains still until the
user scrolls past this line.
The logo and a repeatable
background remain still as the user
scrolls down.
Information containers oat above
the background and the portal
character moves in and out of the
portals as the user scrolls off and
onto another container.
The website is composed with
a fixed width and repeatable
background to avoid screen size
issues. All content is centred and
sized using percentages and with a
set minimum width.
The older section will remain
the same working layout, but
will conform to a different
aesthetic style. Content will be
ordered differently, and the static
header section will become an
advertisement for enrolment
instead of a control help screen.

Portals Own Website

As the Portal website is a small section of the half-life website, I felt it necessary to
examine the Portal 2 Official Site www.thinkwithportals.com. It is a conventional
web layout with a large space between the navigation and the main-content
container for an image slideshow to show through.
The website has a relatively shallow structure and its main content conforms to a
strict 2 column layout.
It sticks to 4 main colours; white, blue, grey and black, using blue also as a hover
colour.

Site Map

As the website pages are built as long vertical pages, the site map only has several
boxes. All of the content apart from the two Page does not exist images is built
onto one webpage in two sections; New and Old. It is important to note that at
any time, the viewer can scroll/switch between the two sections.

Bibliography
Bennet, James Gordon: Design Fundamentals for New Media, 2005, Delmar
Cengage Learning
Barfield, Lon: Design for New Media, 2004
Pipes, Alan: How to Design Websites, 2011, Laurence King Publishin