Toast – interactive app wireframe



Lecture notes – week 7

UI visual design patterns.

  • mistakenly mixed up with the visual design itself they way the graphics looks
  • rather its about presenting the user with tools to achieve the goals or purpose they desire.
  • it is much more than just buttons to click and navigation to go through

it about the relationship between the user and the interface it is matched with.

A good design is matched with good aesthetics and effortless user interactivity.

  • well designed should guide users through the experiemce
  • the interface is what they interactive with
  • you want your users to enjoy your app or interface

from buttons, to menus, graphics and any extras should all be put to meticulous plan to achieve the “look, feel and usability” as part of the user experince.

common navigation patterns

  • tabs
    • navigation tabs
    • module tabs
  • menus
    • horizontal drop down menus
    • vertical drop down menus
    • accordion menus
  • jumping in hierarchy
    • shortcut dropdown
    • fat footer
    • home link
    • breadcrumbs
  • content
    • carousel
    • event calendar
    • article list

tabs are extremely common navigation patterns that are literally taken from the real-world examples from files in a filing cabinet.

you use tabs when content needs to be split in to sections. it opens into a flat navigation mode.

dropdown hides information, you use it when their are 2 to 9 sections placed in hierarchy. space saving and allows users to access all main section of the apps.

search bars with drop downs. used as shortcut to other sections, meaning the user has less clicks in order to receive the information allowing for ease of use.

Big footer allows user to access specific information in a quicker way, by passing the navigation layout you have set for them.


Lecture notes – week 6

User scenarios

  • personas
  • they are the stories you act out
  • represent artificially about how users would interact with you design.
  • even if your persona fails at the scenario you at least shows you where you need to pick up on and improve

user scenarios navigation

Lux website navigation scenario

  • the user navigates and browsers through the site for a video with a winter theme
  • after settling on a video they like they place it in the online shopping basket and set out to check out to hire the video
  • the user scenario indicates a users thought process and interaction with the website

persona’s is created via extensive research. this enable developers to have a clearer indication of what user wants and needs.

out of this information you can create personas that have similar issues, concerns and goals that people in the real world would have.

After creating your persona’s you would need to create a scenario that the persona would react in the scenario and the way they would interact with their surrounds.

Examples would include that of the persona of angela

after gaining an understanding of the persona, we develop a scenario in which the persona would interact with. aka angela “angela like being on time” so the scenario she is placed in is finding a coffee shop in an unfamiliar airport with a 30 min layover. Using a airport map, that lists a number of coffee shops as well as their walking distance from her current position, it also shows her a map of how to get there. using this information and interaction from the design of the airport map, angela is able to get her coffee as well as arrive back at her gate in time for her next flight.

Domino’s Pizza App


  • the interactive was about an app that allowed users to order pizza from their mobile device or personal computer.
  • Designed for income earners, and on the go users. The “quick order” allows users to order when they are very limited in time in their lifestyle.
  • its digital literacy is standard. the format is legible and can be read easily on mobile screens to PC screens.
  • The user has three main buttons to interact with; “order online”, “quick order”, “pickup”. these buttons lead the user through pages of selection of what pizza, and any additional orders before proceeding to a checkout and tracking page.
  • visual the design seems basic. the type is bold and strong, with it tone of voice being more directive to the user, aided along side bold colours across a dark background. Visual it helps aid users to know what to press. the style is basic but i would say it is user friendly.
  • even though it does display tracking on their order. and allows users to quick order their last order. i would suggest that they place in a “save favourites” section, where users can select a set order that they have saved to process and deliver quicker to the user.

About me

What drove me to become a graphic designer was my love for the visual arts as well as the procedure and refinement of ideas through processes and practices. Creating things in such a way that i could send more of a message through my design refinement rather than creating works with only a singular meaning or interpretation.