Relevant to interactive digital media

Links 1 and 2 were links for my research on the precedent presentation and research towards my design documentation in reflection in terms of the layout and colour of the site i planned to run with for my prototype.

Link 1 :https://4ocean.com/

Link 2: https://www.take3.org

Links 3 – 6 are interactive websites that are related to interactive digital media, i browsed these websites, and i thought they were very creative on how they built the structure to the website and the content involved for the specific themes the content creators tried to design.

Link: 3 http://species-in-pieces.com/

Link: 4 http://www.climber.io/work

Link: 5 https://www.adidas.com.au/futurecraft

Link: 6 http://wakeup.isadoradigitalagency.com/

Links 7-8 were websites we used in the process of developing our personas for our intended user when building our interactive platform with the use of Xtensio and Invision for the creation of our prototype to make it come to life.

Link: 7 https://xtensio.com/

Link: 8 https://www.invisionapp.com/

Before

After

4Ocean

What is the interactive about?

4Ocean is an informational environmental website, which is the only global ocean cleanup operation that is stopping plastic pollution at the source. It is an informational website where it discusses the cleanups they run around the world.

Who is it designed for?

The recommended user that it can be designed for is someone who is at a mature age veering around the late 20s to late 50s who has an interest in preserving the environment and marine life as well as people who watch their plastic use at home.

What knowledge does it assume the target audience?

• Laid back formality
• Easy to read (blue text on white)
• Bold text at times
• Anyone can navigate the page easily.
• Simple navigation on phone.
• Not cluttered, easy to read.
• Used space effectively
• There isn’t much information so it seems that anyone should be able to navigate easily through and understand whats happening

Describe the type of user interactions, and the user interface.

• No indicator for page and the inconsistency of pages isn’t helping
• Standard html layout
• Shop section- change into grid format to view more products at a time. (On phone, products take up entire screen)
• Help button on bottom right corner on phone and page
• Map on cleanups page- Hard to understand purpose except for statement at the bottom, kinda been slapped in the middle or the page.
• Not really eye catching
• Black footer seems out of place. Also another menu.

What can you say about the visual design – layout, colour, and typography? How would you describe the style?

Layout:

The website incorporates and combines a varying range of simple yet effective layout designs, a full screen gif on the homepage and a modern yet simple layout of two columns in a row to display text and images, most other pages use grids as well as headline and thumbnails gallery layouts to display products, team members and other images.

Colour:

The website uses a monochromatic colour palette that consists of mostly cool tones of shades of blue, the primary colour which is used to represent the concept and ideas the website is conveying, blue relates to oceans, etc.

Typography:

The website uses sans serif font that is visually professional and formal and aids the equally professional and formal language used. They incorporate bold and light styled text to use as headings, sub-titles and to highlight important phrases and words. It uses a combination of the fonts; Helvetica, Arial and Monsterrat.

What improvements would you suggest?

While the website works fine in terms of functionality it could use changes to get users more invested in the issue the website is trying to promote. It comes off as a little bland and boring only implementing a generic blue monochromatic colour palette and generic modern layout. There is no consistency within the layouts of each page, they all vary and as a result can cause for unnecessary confusion for users. This could be solved by incorporating the same/similar layout for most pages allowing the user more familiarity and control.

Lack of information:

There feels to be a lack of information on the website regarding the issue they are trying to raise awareness of, could be fixed by adding more information.

Link to the website:

https://4ocean.com/

Alternative layouts

• 

User interface design patterns:

• User interface design is about presenting the user the right tools to accomplish their goals
• user interface is more of a connection between the user and the experience and first impression and lasting impression either makes a website feel familiar & helpful or best invisible or forgettable & annoying
• good UI design should strive for a balance between aesthetics and effortless interactivity
• well in-designed faces should guide the users experience
• the user experience (UX) is the abstract feeling we get from using a website.

Common Navigation Patterns:

Tabs:

• tabs actually comes from the real world example of actual of a actual tabs in a filing cabinet
• can be seen as an example of skeuomorphism, which is the design concept of making items represented the real world counterparts skeuomorphism commonly used in UI, web design, architecture, ceramics, interior design.
• Tabs would be used for when content needs to be separate into sections & accessed using a flat navigation structure that gives a clear indication of current location
• you would use them when there is between 2-9 section of content of content that need a flat navigation mode
• also used when section names are really short
• also when you want to fill the entire width of the page
• The list of the highest available sections or sub sections of the website
• don’t want to show them when using content specific data e.g. a latest article

Dropdown Menu’s:

• used when to navigate among sections of a website
• saves space by organising and concealing information

Search Bar dropdown:

• shortcuts to pages

Big footer:

• used when users need a mechanism that will enable them to quickly access specific sections of a site/app & bypass the navigations structure

Home

Breadcrumbs:

• when the user needs to know their location in websites hierarchical structure in order to browse back to the high level of the hierarchy.

• it informs users of their location and relation to the entires sites hierarchy

• easily understood when laid out as a breadcrumb then if it’s put into a menu

• the name ‘breadcrumb’ is inceptive as it implies the history of how the user got to the page

Carousel:

• used when the user needs to browse through a set of items
• used when there is a large set of items
• used when not enough space

Reflection:

The most important aspect of the lecture pod would have to be the common navigation pattern ‘tabs’ because it is needed when content needs to be separated into sections and accessed through a flat navigation structure which gives the right indication of the current location, this aspect is very important for the users interface & user experience because it provides them a simplistic way to navigate to different pages with ease without having to see a whole bunch of content on one page which can be quite overwhelming for the user, that could lead to them leaving the website.

Scenario:

This scenario will be based of off Jake Poolmann

Jake is a 16 year old student who is currently studying Geography in year 8 at Randwick Boys high school, where he is interested to learn about the ocean’s wildlife. The teacher is focusing on one of the largest warm-blooded mammals in the ocean which is whales. The teacher wants to discuss the impact of whaling in terms of the different species, so he/she has provided are reliable sourced interactive website named ‘Stop Whaling Around!’ where the students can obtain information that can help them in the process of discussing the impact of whaling as a small assessment which the teacher has briefed.

The teacher has informed them to use website during class-time as well as working on it at home in their own time when working on their assessment. I expect the students to enjoy the experience of interacting with my website, with the ocean colour palette to refer it to the ocean, with simple and large typefaces for headings and titles so it is easier to read, with a decent amount of information so they can get an idea for they might cover on their projects. The more interactive side to it will allow them to play a slideshow/video on information about whales and different photos that they can reference in their projects. The video can allow them to pause, fast forward/rewind, and change quality. I will also introduce some moveable features as well as clickable such as moving waves/water, fish going in and out of the page, hover buttons to present information and a interactive map where they are able to click to find located areas where whales are being targeted.