Interactive Media Design – Task 2: Understand the principles

Criteria 1.1

Interactive Design

Website 1 – Songkick

A website for users to track down their favourite artists and musicians to be alerted when they are playing near a reachable venue in their area. It’s purpose is to remind its users when tickets are selling out, alert them of concerts they may be interesting in attending and giving key information regarding events.

The appearance of the website is neat and basic. The use of colours displayed on the website is predominantly white and black. However, the common use of suitable imagery adds variety to the website’s appearance. An image slideshow adds more depth to the use of colour without displaying too much imagery and information at once.

The structure of the website is professional and the main content sits suitably at the top of the home page without having to scroll to see the rest of the image. There is a search bar at the top right hand side of the page which is important for navigation. That being said, it is easy to navigate around the webpage and even with several links for individual artists and venues, users can still find themselves on the right page depending on their needs.

There is lots of content on the webpage including unique pages for each individual artist and venue. All of the imagery and captions relate and are suitable. The content is kept to a minimum for each event but offers users a link to find out more about each event. This keeps the content and the appearance clear without having too many links, images and details of events.

The webpage is clear about what it intends to provide to its visitors. The two main headlines are “Be the first to hear about concerts” and “Track your favourite artist and never miss them live”. This instantly draws in the right audience i.e. music fans. This is the audience that will use the website more frequently. The information on headings is clear and is easy to understand for it’s visitors.


Website 2 – The Brunswick

The Brunswick is a music and events venue in Hove.

The website has a very dark feel to it with the use of the colour black as the webpage background. A “Join our mailing list” appears when users first visit the website and covers the main content. After closing this pop-up, the main content is available to view. Images and white text are the only aspect of the webpage that break up the constant use of the colour black. The text used for the tabs at the top of the page can appear very boring to some visitors.

The structure is set out and separated into two columns. The latest events are displayed on the home page and there is a lot of scrolling to do before the visitors reaches the bottom of the page. There are tweets that have been posted or ‘retweeted’ by The Brunswick on the right hand column on the webpage. Only the centre of the webpage is used for content and this is a common structure for websites. Brunswick’s website is relatively easy to navigate despite the fact it has several different, and sometimes unnecessary, pages and at times, relevant information can be difficult to obtain.

Content on the webpage varies from the venue’s appearance to key details of upcoming events. There are also images down the right hand side that each have a link that goes to a separate page when visitors click on them. However, it can be unclear to the visitor where the link brings them to, because of the lack of text heading over the image. There is a drop down box with a number of different pages. After clicking through each page, there are some empty spaces on some pages and therefore could merged together with another part of the site.

It can be a little confusing to fully understand what the business/website does and it’s purpose. The image slideshow first displays some Rugby players which later goes on to describe that the venue show live Rugby games on their TVs. However, this can be very misleading and is difficult to acknowledge that it is a venue at first glance.



Website 3 – StickSports Games

Stick Sports is a website and mobile games developer. They have their own website that is listed with all the games they have developed as well as details of how to download their mobile games.

The website is aimed at people interested in both gaming and sports. It is likely that the majority of visitors to the website are male and below the age of 30. It is expected a lot of of teenagers and children would visit the website because of the simplicity of the games themselves and the cartoon-like graphics. The typical visitor of the website could be from any nation with sports such as football, aussie rules, cricket and baseball to appeal to different audiences located around each region.


Website 4 – Treyarch

Treyarch are another games developer. Their website is dark-themed with minimal text. There are a few large images across the screen representing the games they develop.

Treyarch’s audience is predominantly males between the ages of 18-40. Treyarch structure their website and the content that is on it based on the fact that the vast majority of visitors are avid gamers with an interest in shooter and action games. Because of the detailed features and authentic graphics on both the webpage and the video games themselves, it is clear that it is suited for an audience that are have a strong interest in gaming. When attempting to view certain pages of the website or watching trailers produced by the company, it will ask visitors of the website to enter their date of birth to prove their age. This is because of the age certificate of the game they produce. People will still be able to have access to the website and games that are under the age limit, but the audience Treyarch aim at is mostly people who are older than the limit.


Differences in Design and Content

There are many differences between the websites of Stick Sports and Treyarch games. The audiences are very different and this affects the content and the appearance of the websites. Treyarch’s website uses the whole width of the screen and it appears very spacious. Stick Sports use the centre of the webpage for their content. In regards to the content itself, Stick Sports’ website displays all of their games that are ready to play with a thumbnail and a link to start the game. There is no news or blog section to the website. However, that is not the case with Treyarch games. Their website focuses on the features of their products as opposed to ‘throwing’ the content in the visitors’ faces. Treyarch also display news, blogs and social media posts on their website. Finally, there are also tabs with drop down menus at the top of the page including ‘About’ and ‘Careers’. Stick Sports have ‘terms and conditions’ and a ‘contact us’ links hidden down the bottom of the webpage.


Navigation Design

Evaluation of Navigation Styles

The three main navigation styles can all be accessible and user friendly when presented on webpages. Primary navigation predominately includes header links that take users to different pages of the website. Examples of header links include a home page, about, contact us and other header links depending on the type of business/website it is. Primary navigation is clear to the viewer and is the initial stage to which the user tries to find their way around the website.

Secondary navigation is when there are links from a drop down menu or separated down from primary navigation.When the header links at the top of a website can be expanded into different categories or features, secondary navigation in the form of links is often used because it helps the user found out the information they require from the website. A detailed and complex website is likely to have secondary navigation to separate larger pieces of information into different categories.

Mega-menus are often used by businesses with a large amount of products and services or a website that displays of various different pieces of information, features or resources. Mega-menus display a large amount of links to separate pages of the website or other relevant links. They are often separated into two or more columns and can be seen by the user when they hover their mouse over the relevant header link. It can be difficult for users to find out where they want to navigate to when trying to navigate through mega-menus, especially when there are a large number of different links. Because of this, it can sometimes be unclear where they can obtain the information they require.


Visual Cues

Within a website, there are many visual cues that draw attention to a visitor and persuade them to click on a particular link or feature of the website. Visual cues are regarded to be highly valuable to a website. It can take less than a second for a visitor to decide to leave a website on first impressions alone.

  • Drop Down Menu – this benefits the navigation of a web page. It attracts attention by showing more links and information whilst being initially hidden before the user hovers over the heading.
  • Rollover Image Links – these are images displayed on the web page. When using the mouse to hover over the image, it will differ slightly (e.g. highlighted or change of colour). They will also have links that take the user to the relevant page.
  • Buttons – these are a regular features on websites. Buttons are usually shaped like a rectangle and will have a short heading that will link to a unique page of the website. They attract attention by their larger size and extra variation to the use of colours.
  • Use of Text  – the way websites display their text is very important to the user and their first impressions on the site. While consistent text and font looks professional, persuasive use of language can often be the easiest method to draw someone’s attention to a page on a website. Too much text on a website can lead to the user not finding the information they require or unable to navigate around the site. Too little information can look unprofessional and unfinished. This can lead to the visitor leaving the website.



Website 5 – Comedy Central

There are many different technologies displayed on a website. These can include video, audio or animation. Comedy Central is an American television network that broadcasts from channels worldwide. Their website uses many different technologies.


Screen Shot 2017-02-03 at 10.59.45.png

The above images show the ‘latest video’ page and an example of the video technology being played. Videos are used on websites for entertainment, research or personal purposes. It can reduce the amount of extra text to a website. This can increase the visitor’s attention span.

Screen Shot 2017-02-03 at 11.18.23.png

This image is in a form of a gif file. A gif is a moving image that is repeated. It is a form of animation. The gif can be seen here. Gifs are often found in lists and articles and are often preferred over streaming multiple short clips.


This image shows a podcast added to Comedy Central’s Soundcloud page. This is accessible to visit via a link on Comedy Central’s website under the podcasts section. A podcast is essentially an audio file that users can listen to. They are often for entertainment or research purposes.



Leave a Reply

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

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

Google photo

You are commenting using your Google 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 )

Connecting to %s