Indicating Interactive Change

Task Description

We were asked to implement our user interactive into a hypothetical website about toast and demonstrate the interactions the user would have within the site demonstrated by change between two images. We had to create a wireframe of the site and then refine it from there.


Wireframe for hypothetical toast website
Continue reading “Indicating Interactive Change”

Hypothetical Toast Website


The Instructions page will act as the home page/landing page as it serves as the main purpose of the site. The other tabs that branch off from this are all extras that might need to be addressed separately on their own page such as the safety aspects behind making toast or if you’re unsure of what cooked toast looks like (is it cooked?).

The layout of pages within the website

Interface sketch

For my interface sketch, I have chosen to have my interface within the “Safety” page as it’s based on the safety protocols enacted when making toast.

Continue reading “Hypothetical Toast Website”

Assessment 2 – Peer Feedback

Task Description

We were asked to review each other’s project ideas in groups of three and provide opinions on the positives and negatives while offering useful suggestions.

Project Idea (summarised)

To create an instructional interactive website that educates users about the cause and effect overfishing has on the marine environment (areas include decline in commercial/non commercial species’ population, unbalanced ecosystem & fishing industry) for adults ranging from the ages of 20-40. This would be done via an interactive that showcases a simulated marine environment where users can engage by clicking any section that represent a key area overfishing affects, prompting a pop-up that provides an in-depth explanation about said area, for e.g. clicking on the boat will prompt a pop up explaining how overfishing effects the fishing industry or clicking on the net below the boat would prompt a pop-up informing users about commercial and non-commercial species’ population/treatment.

Continue reading “Assessment 2 – Peer Feedback”

Week 3 – Design Patterns


  • Provided a brief introduction to screen design basics and design pattern
  • Christopher Alexander states that design patterns and interactive design go beyond style and are more than just visual repetition, they’re similar and reusable solutions that have a working function often seen in interface and software design
  • There are nine types of design patterns commonly used as described below:
    • 1. The Hamburger Menu: 3 parallel horizontal bars, used as a button, usually displayed on the top left or top right of a website and typically results in a menu of pages or options. They’re favoured for saving space on the screen.
    • 2. Account Registration: A pattern for registering an account which might include either a form fill out or social account button to sign up. People are more likely to start a small process when presented with a small step rather than engage in a long list of steps presented all at once.
    • 3. Long Scroll: A technique that works well for sites that want to lure users with storytelling as the entire site is laid out through one continuous scroll. You can mimic multipage site layouts by breaking the scroll into clear sections.
    • 4. Card Layouts: A site layout using only cards, pioneered by Pinterest. Cards are everywhere on the web because they provide information in bite-sized chunks and they each represent one unified concept, usually including a title, a username, a picture and various icons. These are useful for responsive layouts as their rectangular container makes it easy to rearrange on different devices.
    • 5. Hero Images: A large banner image used to grab the user’s attention. Often used above the scroll followed by either a zig zagging section or card spaced arrangement.
    • 6. Animation: Split between large scale and small scale animations used to enhance a site’s storytelling. Large scale animations are primarily used as an attraction tool and have more impact on the user e.g. parallax scrolling and pop up notifications. Small scale animations are used to entertain users during tedious processes and include spinners, hover tools and loading bars which don’t require any user input. Check out this article about websites utilising parallax scrolling:
    • 7. Material Design: In 2015, Google launched it’s new style language, “material design”, utilising shadow effects, and the concepts of movement and depth to create designs that appear more realistic to the user. The goal was to create a clean design that will focus on user experience.
    • 8. Responsive Design: Can easily restructure to fit any breakpoint or screen size. Great to work with cards.
    • 9. Flat Design: The absence of 3-Dimensional effects such as drop shadows to create a user interface that only uses simple 2-Dimensional elements and bright colours. Check out this article about websites utilising flat design:
Continue reading “Week 3 – Design Patterns”