How To Make Toast – Storyboard

How To Make Toast – Storyboard



Week 7: UI Visual Design Patterns

Week 7: UI Visual Design Patterns

Screen Shot 2017-04-11 at 4.20.17 pm





Image retrieved from

UX (User Experience):


  • User stories
  • User Research
  • Usability Testing

UI (User Interface):

  • Layout
  • Visual Design
  • Branding

Common Navigation Patterns:

  • Tabs: navigation tabs, module tabs
  • Menu: Horizontal and Vertical dropdown menu, Accordion Menu
  • Hierarchy: Shortcut dropdown, home link, breadcrumbs
  • Content: carousel, event calendar, article list


  • They are an example of “skeuomorphism”, which is the design concept of making items represented and resembled by their real world counterparts.
  • Skeuomorphism is used in many design fields, including user interface, web design, architecture, ceramics and interior design.
  • When will you use tabs? When your content needs to be separated in sections and using a flat navigation structure, that gives a clear indication of current location.

Drop Down Menu:

  • Used when the user needs to navigate amongst sections of a website, but space for navigation is limited.
  • They save space by organising and concealing information.
  • However, they can often be difficult to use.
  • You will use a dropdown menu when there are between 2-9 sections of content that need a hierarchical navigation structure.

Drawer Menus:

  • Main benefit of these is space saving, and quick access to all key menu items at once.

Search Bar with Dropdown:

  • Adding a shortcut to the most frequently used functionality, the path can be lessened, and the confusion can be decreased.
  • You will need these as a shortcut to an otherwise hierarchical structure.
  • You will use it when there are specific functionality or pages that are more frequently used than other parts of the website.

Big Footer:

  • Use these when the user needs a mechanism that will enable them to quickly access specific sections of a site or application, and bypass the navigational structure set up for the user at the top.
  • Use this as a shortcut to an otherwise hierarchical structure.


  • Site’s logo is always link to the site’s starting location, normally the front page of a site.
  • Site’s logo or link to “Home” must be on every single page of your site.


  • Inform users of their location in relation to the entire site hierarchy.
  • The site is easier to understand when it is laid out in a breadcrumb, than if it is put into a menu.
  • Breadcrumbs take up minimal space, and even though not all users, use them, they still hint at the structure of the website and the current location of the page in question.
  • The term, ‘breadcrumb’, is quite deceptive as it implies the history of how the user got to the page. A more correct term will be to describe the current locations place in the hierarchy of the website.
  • You will use these when the structure of the website follows a strict hierarchical structure, of similar format and content.


  • You will use this when the user needs to browse through a set of items and possibly select one of them.
  • Use it when there is a large set of items to show, but you want to let the user concentrate his/her attention only on a set few items at a time.
  • You would use this when you will like to tease the user by letting him/her know that there are more items available than what is currently shown.
  • Use it when there is not enough space to show all the items at once.
  • You will use it when you have highly visual items to display such as movie posters, album covers, products, designs etc.
  • You will not use it when the items are not visual, such as links to text articles or PDF documents.


Good UI design should strive for a balance between aesthetics and effortless interactivity.
Your UX (User Experience) needs to be as efficient as possible. This is determined by the quality of the UI. It is important to include a homepage link on every page of a site.  The link may be embedded within a logo or simply in the text ‘Home’.

Week 6: User Scenarios

Week 6: User Scenarios

Image retrieved from
  • User scenarios are the stories your person acts out. Basically user scenarios are thought out exercises, although they are usually represented visually, in which you predict how certain types of users, represented by your persona’s, will interact with your website in order to complete a given goal.
  • User scenarios help us understand what your future users will look for when trying to complete tasks on your site. Even if your persona’s fail at the task, at least you now have a visual representation of your problem and can go back and solve it easily.
  • User scenarios allow you to test your site and isolate problems before they become problems.
  • User scenarios should outline the who, what, when, where, why and how of the usage.
  • A persona is a fictional user of your product and a scenario is the context in which they use it.


A scenario is a narrative describing foreseeable interactions of types of users (characters) and the system. Scenarios include information about goals, expectations, motivations, actions and reactions. Scenarios are neither predictions or forecasts, but rather attempts to reflect on or portray the way in which a system is used in the context of daily activity.

Persona and Scenario Example:

  • Cooper PDA airport guide
  • User: Angela
  • Angela is a PR consultant and frequent traveller.
  • Her goals are to: always be on time for client meetings, travel without a hassle and don’t feel stupid.
  • Scenario for Angela:
  • Angela has a short 30-minute layover in an unfamiliar airport. She really wants to grab a cup of coffee before she heads to her connecting flight, but doesn’t know where to go.
  • Breakdown into steps:
  1. Looks up how far a coffee shop is from her present location.
  2. Map locates coffee shop and she follows the map to it.
  3. Angela follows directions the airport guide provided her and successfully finds the coffee shop and purchases her coffee.
  4. Now she needs to find her way back to the gate, she uses the airport guide once again to look up the gate she needs to be at. She follows the directions the airport guide gives her.
  5. She arrives at her gate.
  • Airport Guide:
  • The airport guide only uses two screens, the list and the map. (after selecting the service, Angela sees the map screen to her destination).
  • The airport guide was made to be simple and quick, using two screens, to help users such as Angela travel with as little hassle as possible. The airport guide has reliable information and directions, to ensure Angela never feel lost or confused, the airport guide provides an easy and simple EDM as well as visual and text directions.


User scenarios are short stories that tell us about our users motivation, their goals and actions on our website. When writing a user scenario, keep it short and to the point. The four w-questions who? what? how? why? can be used as checklist for the most relevant information to include in a user scenario.

Week 5: Personas

Week 5: Personas

Image result for blank user persona

Image retrieved from

User Personas: How you set up a persona:

  • Age
  • Sex
  • Occupation
  • Hobbies
  • Likes/dislikes
  • Other details germane to the product such as: behaviour patterns, goals, skills, attitudes, their environment (or context)
  • Large vs. small audience
  • EBay site; larger audience
  • Dora the Explorer website; smaller audience
  • What
  • Netflix across platforms; iPad, iPhone, computer.
  • How
  • Users who want to browse vs. users who want specific content
  • Mental Models
  • Mental models are what thoughts people form around an idea, or activity, and these vary from person to person. E.g. A 16-year-old mental model of taking a note may include using a smartphone app, which is very different to an elderly person’s mental model of using a post-it note.
  • Mental models are incredibly important user experience, because they illustrate how your user approaches a particular problem.
  • Artefact Personas
  • Another approach is to apply the personas to the artefact; the project of product, not the user. This can be most useful for client meetings, where often the discussion collapses into subjective assertions like: “I don’t like green”. By having a developed and great personality for your project will give everyone a context to objectively evaluate the visual design and lets you get the discussion back on track if it veers off into subjectively or personal likes and/or dislikes, it takes it away from the visual design.
  • Product Personality Questions:
  • If the interface were a person, what would she or he be like?
  • How would you expect uses to react when they first view the product?
  • How would you describe this product to a friend?
  • How is the product different from competitive products?
  • Which celebrity (or car, movie etc.) is the product like?
  • Why?
  • E.g. A medical device to help elderly patients manage their healthcare in their homes:
  • For this, it was learnt by stakeholders that the elderly were more likely to accept the product if it had a similar personality to that of a visiting nurse. This knowledge helped them shape a visual appearance that presented itself as caring, conscientious and trustworthy in tone and style.
  • The first step they did was develop experience key words, and during this process they listed and grouped any descriptive words or concepts that occurred during stakeholder and user interviews. These groupings formed the foundation for a set of experience key words that would define and govern the visual strategy.


Although one persona is solely the focus of a product, many personas are also implemented. It’s important to develop personas in the beginning of your design process, in order for everything to develop as you like, with the user base fresh in mind.


Precedent Presentation – Pianu.

Precedent Presentation – Pianu.

Screen Shot 2017-03-21 at 10.42.12 pm.pngReceived from

What is the Pianu?

Pianu is an online interactive that somewhat informs and teaches the user on how to play the piano. It runs entirely in your computer’s browser, without any software. The site provides different levels of teaching, purely based on the user’s requirements.


Target Audience.

Pianu isn’t solely based towards a particular audience, in fact, due to the sites versatility in terms of difficulty/levels and the use of either your keyboard or a real instrument, it’s really focussed towards any audience with an interest in learning piano. Pianu offers a song directory, which is a list of songs ranging in difficulty from beginner to expert, progressing in difficulty. There’s also a service called Pianu Academy, this is where they offer interactive lessons, and a lesson plan that begins with the basics of the piano all the way up to playing complex pieces, step by step, in order for users to learn at their own pace.


What knowledge did they assume of target audience?

Pianu assumes that the users have at least an extremely basic knowledge of a piano, and how to play. The site accommodates for users of all levels, beginner to expert, if you know how a piano should be played (by pressing the keys), everything should be straight forward from there.


User Interactivity.

Screen Shot 2017-03-21 at 10.36.11 pm.pngRetrieved from

This site offers an abundance of interactivity, including menus, buttons and sound. The main interaction within the site arises through the tutorials.  The tutorials act like a, in the fact that the keys you should press come down from the top of your screen and when they land on the key, you should press it and hold until the next note comes down. During the tutorials there are also pop-up menu’s located towards the left of the screen, in which are used to toggle and therefore customise the site to suit the user.

Visual Design, Layout, Colour and Typography.

Screen Shot 2017-03-21 at 10.40.50 pm.pngRetrieved from

The site’s design is minimalistic, yet engaging. The graphics included in Pianu, are mostly flat design, with the exception of a couple of photographs. The layout is simple and easy to navigate, which is aided by the limited colour palette as well as the easily identifiable graphics.


  • higher contrast between typography and background colour
Week 4: Instructional Design

Week 4: Instructional Design

Instructional design: informing someone on how to do something or to explain how something works.

In our daily life we commonly interact with instructions on many different levels. Whether it be audio instructions from an automated phone system, using a ticket meter, or installing toner in a printer, we depend on well designed instruction to perform these tasks.

Ineffective designs:

  • Too simple designs with no text or context
  • Split – Attention effect – when text instructions are apart from graphics
  • Too much text


Image retrieved from

Effective designs: 

  • Medical Diagrams on how to do
  • Marry both graphic and text together
  • Straight forward instructions
  • isolate the important elements of the design (try avoid photography)


Kinds of Interaction:

Instruction – user tells program to do something like pushing a button.

Conversation – back and forth dialog.

Manipulation – drag and drop elements.

Exploration – open, game-like, playful.

Instructional design is evident in everyday life.
Efficient designs are easy to follow.

Week 3: Design Patterns

Week 3: Design Patterns

  • screen design basics & design patterns for screen
  • user interaction and page composition – differentiation between mobile, tablet, laptop and desktop screens

“Mobile First”

  • “mobile first” is new buzz word in the screen design sector
  • designing for mobile first is a more effective design approach
  • process begins for smaller screens then adapted to larger screens
  • movement forces you to prioritise information, and to alter mental structure which is accustomed to larger screens

UI Pattern Proliferation

  • many similar UI designs
  • example: WordPress and their theme sites
  • common UI design patterns are easy to navigate and use
  • design patterns have matured and there is also no real reason to reinvent UI patterns and little innovation for UI patterns.

9 popular design patterns/trends:

  • Hamburger Button (menu)
  • On scrolling
  • Account registration
  • Card layouts
  • Hero Images
  • Scrolling and background animation
  • Material design
  • Flat design

Hamburger button

Screen Shot 2017-03-12 at 22.09.00.png
Image retrieved from
Screen Shot 2017-03-12 at 22.12.04.pngImage retrieved from


Design Patterns represent excellent practice, but trends should not always be followed. Design patterns represent popular techniques, but make sure it’s suitable. For instance, a ‘single page infinite scroll’ concept may be not the best use for an e-commerce website, as it is typically used for a less complicated layout.