Interactive Design, Lecture Notes

Instructional design revolves around a visual hierarchy which teaches the audience how something works or how to do something. Poorly directed instructions affect the user experience greatly which ultimately makes the product undesirable and useless. It is important to account for the cultural differences as well as the targeted audience to successfully create an instructional design.

Continue reading

Standard
Interactive Design, Lecture Notes

Introduction to Design Patterns

Design patterns are a principle which solves common design problems through conventions developed in terms of user interface and page composition. They should be employed in the right situation, not used merely because it’s the norm. How it is received is dependent on the problem and whether it is the correct resolution or not.

The basic design patterns include:

Continue reading

Standard
Classwork, Interactive Design

Wireframes & Mockups

Using the program Adobe Illustrator, creating wireframes and mockups are essential to develop to be able to understand what the final outcome will roughly look like. Through the use of guides, having these foundations are helpful in ways that are powerfully informative to the designer and their team.

Below is a continued example of ‘How to Make Toast’.

Continue reading

Standard
Interactive Design, Lecture Notes

Importance of Design Process and Context

The design process should not be overlooked as it provides the designer with insights to their production. In fact, it is during this progression where they fully develop their existing ideas as well as promoting new ones. Bill Verplank breaks this process down into 8 simple phases.

Error – Idea ­– Metaphor – Scenario – Task – Model – Representation (Prototype) – Manipulation (Interaction)

Through these early developments, it helps the designer to understand, define and frame what needs to be solved and how to overcome it. For example, using a context scenario allows the designer to observe and comprehend the situation, the people and their needs in order to successfully reach their goal.

Continue reading

Standard
Classwork, Interactive Design

First Aid – Red Cross App: Deconstructed

This is a collaborative project based on the First Aid – Red Cross App. As a team, we deconstructed the interactive to understand how all the elements conjoined into one to produce the instructional design.
question_title1

The Red Cross App provides an inbuilt interactive interface that allows users to react in real time to emergency and disaster events.

The app enables users to choose from a multitude of scenarios and provides solutions facilitated through back end flowcharts which narrow down possible cause/effect and solutions. Below is a link to a short video which introduces the general use of the app.

https://www.youtube.com/watch?v=DWlc3Pt5VHI

Continue reading

Standard
Classwork, Interactive Design

UI Flow Diagram

Utilising a UI flow diagram is another useful tool to visualise an interactive product. It maps out all the pages needed to be included as well as important details such as navigation buttons, titles, rough image placements etc. As mentioned before, for a designer, being able to analyse a structured diagram helps them notice what elements are missing.

Below is an example. (‘How To Make Toast’ cont.)

Continue reading

Standard
Classwork, Interactive Design

Back to the Storyboard

Like flowcharts, employing storyboards is an excellent tool for developing an interactive design product. It provides a visual representation of what is envisioned, which allows the designer to realise any complications and improve their idea.

Below is an example of a simple storyboard on ‘How to Make Toast’.

Continue reading

Standard