Week 7: UI Visual Design Patterns


UX vs UI.png

Image: Waterson, S. (2016) UX vs. UI  [Screenshot]. Retrieved from https://vimeo.com/161435877


In this weeks lecture it focuses on introducing, the common UI element navigation patterns. Web and User Interface (UI) design is sometimes mistaken with how the website looks, the graphic design. But interface design is not just about the colours and shapes, but also about presenting the user with the right tools to accomplish their goals.

User Interfaces are just more than about buttons, menus and forms for users to fill out. It is the connection between the users and the experience, the first impression and the lasting impression that either makes a website feel familiar and helpful or at best invisible, forgettable or annoying.

Continue reading “Week 7: UI Visual Design Patterns”


Week 4: Class Work

Assessment 2 Text Description, Sitemap and User Interface Flow Diagram Activity

In today’s tutorial session, we started planning the elements of text description; site mapping and user interface flow diagrams of our assessment 2 prototype idea.

User Interface.png

Image: N, A. (2016). User Interface [Image]. Retrieved from https://www.quozr.com/webs/web.aspx?p=815

As a class activity we had to make up all the step by step text of our interactive how to idea, as well as draw a sitemap of what our website/app will look like and finally using that site map to plan out our user interface flow and how our interactive design will be used.

Continue reading “Week 4: Class Work”

Week 2: Class Work Part 2

Introduction to Site Maps, UI Flows, Wireframes and Compositions.

In todays tutorial session, we continued with the process of making toast and we were asked to map out a user flow diagram for “How to Make Toast”.

Below is an image of the user flow diagram of “How to Make Toast” that I had a go at sketching.

User Flow- Making Toast .png

As you can see above, each screen is different and therefore demonstrates a quick overview of what may happen in each slide when users use the interactive design.

Continue reading “Week 2: Class Work Part 2”