let's get interface!



Week 09 – What I Learnt This Week – mlai2112

I think this is a good reminder:

“Always test your design after you are working on it 2- 3 weeks. This is because you become subjective about it as you are the one who build it.”


All parents tags should include or embrace all the child tags!!

For example:

< p >< a >< /p >< /a > —> Bad

< p >< a > < /a >< /p > —> Good

Do not skip levels!

if you want the font size smaller, change it in CSS

A desirable attribute should follow this rule:

< element attributename=“value” > text content < /element >

For example:

< h1 id=“phones” > different type of mobile phones < /h1 >


Learning Materials:

Here are some photos that sum up what we learnt in class:

Scan 01Scan 03Scan 04
Scan 05Scan 06Scan 07

Tutorial exercise:
Tutorial 9 - html


Week 08 – What I Learnt This Week – mlai2112


~Summary of this week~


  1. Visibility of system status: to show what is going on with the system by giving feedback to users (ie “All changes saved in Drive” – Google Drive)
  2. Match between system and the real world
  3. User control and freedom: let users feel in control while using the application or website by supporting undo or redo function (ie back buttons or “history” session of Photoshop).
  4. Consistency and standards: having a consistent theme, colour and layour, across all pages, this allow user to follow and learn
  5. Error prevention: to stop or to eliminate users from performing certain action that lead to occurrence of error (ie use calendar instead of asking user to type in the date. Error might occur when user type in the input in different format to the system)
  6. Recognition over recall: such as using words or icon that user similar with, so user do not need to learn or memorise information and make everything (ie option) visible on page
  7. Flexibility & efficiency of use: having alternative ways that can speed up a process for experience users (ie use shot cut button “command + C” for copy instead of highlighting a word and rick click and press ‘copy’ on Word document)
  8. Aesthetic and minimal Design: such as using symbol or diagram to minimise words that you don’t need (ie to show consumptions of fuel, water and electricity by using symbols and colour. By placing these symbols together to make it more easily to understand and compare these value together.
    Symbols:’fire’ to represent fuel; ‘water’ droplet to represent water; ‘lightning’ to represent electricity )
  9. Help user recognise, diagnose and recover from errors: use different methods, such as colour and words, that can help user from recover error (ie see the photo below – highlight the line that has error and tell user what causing the error in the console)
  10. Screen Shot 2015-09-22 at 1.56.14 pm

  11. Help and documentation: to provide help and documentation for user to search for support more easily

– Vicky

Week 07 – What I Learnt This Week – mlai2112

Flat Design:
  • simple (but you can think of it as bad)
  • trendy and honesty
  • simpler but does not mean more useable
  • no drop shadow
  • use flat colour
  • not for long term benefit
  • tread change quickly

For example,
Image Source: webdesignerdepot

Use white colour font across different flat colours in this photo.

  • people are hard to see the wordings on the light green background
  • bad for contrasting
  • only some colour background would stand out more with white font, such as dark blue background
  • add more colours means adding more complexity
Summary of what I learn this week:
  • icon is good for differentiation
  • Flat Out – deducting design – icon became much more important
  • 3 clicks to get what user wants
  • complex grid could be good
  • expert on user friendly interface – say NO to flat design
  • designer – say YES to flat design


Week 06 – What I Learnt This Week – mlai2112

Summary of this week

This is a brief summary on what I learnt this week.

Constructivism: is about how human able to learn or interpret information based on their knowledge and experience. ie we can use visual to express a message

lect 6

–> The lines and shapes that coming from her mouth, look like a loud speaker to me. I can imagine she is speaking with a loud voice.

In tradition, many people dislike clean geometry presentation of information.
We come down to moderation, we like simple, clean, rational and honesty feeling of presentation and structure.

Example of a good presentation:

lect 6 -02

Here is what I learn from this example above:
– we can see movement by the up and down rectangles.
– Yellow is a very strong colour that can draw out attention -> “caution”
– Alignment created invisible lines, continuation and group things together
– very basic form
– used and arranged surnames to create a smooth curvy line
– grab attention

Common Errors

I also found out the common errors that we might make in our assignment, such as the use of colour.

  • limit the number of colour used, 1 is good, 2 are adventure, more are dangerous. This is because we might not able to use it well. if we used lot of colour, then we have higher chance to use it badly and make it out of place.
  • use colour theory to show why you chose these colour (ie contrast & supplement colours)
  • choose a dominant colour
  • may be use colour palette (provide similar feeling & not too contrasting)v
  • Colour Volume (think carefully about use a certain colour in a large scale because user might get pissed off at it).
  • could try to go off from main colour
  • neighbours (use neighbour colour to create a gradient for a easing feeling)
    ie red fade into orange colour is good. red fade into green is bad.

  • Group & cluster
    • easy to look for information
    • use colour line to group thing together
    • don’t use “border” everywhere (ie too confusing, too confronting and too messy)
  • Layout – don’t try to impress another designer, and consider about what the majority of people think when they interact with an interface design
  • DON’T USE “TIMES NEW ROMAN” – because it is the default and it is not impressive at all.
  • good use of negative space – in the end, we look at what you can drop to create more empty space. I think if we do not have enough negative space, we might lose the impression of being a ‘clean’ design

– Vicky

Week 05 – What I Learnt This Week – mlai2112

I learnt about different structures of site map and its use for various purposes. Site map is similar to flow chat but we can use it to organise the navigation of each information, such as where does the link fall into, is it a link from a submenu, how many steps/clicks user need to find this information.

For example, a straight linear structure is more suitable for installation, where it takes one step at a time to lead user to complete the process.
[a] -> [b] -> [c] -> [d]

I learnt about what structure is too shallow or too deep. If we have all links under homepage, then it is too shallow. If we need user to go through 5 pages to find the information then probably too deep. User could not remember or presented with 4+ information at the same time, and it used to be 7+.

I also find out that it is very important to understand the eye tracking psychology. Eyetracking evaluate how user see a interface design, such as where they look at or what area they would skip. For example, the advertisements always on the right, so we might ignore the right session of content pages unconsciously as to avoid advertisement. The usual eye tracking pattern is ‘F’.

I also pick up the card sort methods. There are two types, one is close card sort and another is open card sort. Close card sort is about someone provide you with all the title for each content page, and you just need to arrange it. Open card sort give you flexibility of what and how you want to group the information together by put into different title that you think of. The one we did in class was close card sort method, where Nik provided all the titles for us.



Week 04 – What I Learnt This Week – mlai2112

I never notice Logo could be that powerful. The use of negative base can create an interesting design. I did not know there is meaning behind Sony’s brand logo. I have seen so many logo design example in the lecture, Sony and The Guild of Food Writers logos are the one I like the most.


Screen Shot 2015-08-28 at 1.09.03 pm

The fountain pen logo with the used of negative base as a spoon actually quite elegant and creative. It would be great if the brand name also written in scribe handwriting.

The logo that I like is Puma. It originates from German and they are famous for sportswear. The logo is a puma. Puma is a type of mountain lion. They can walk for a long distance, such as 40-90 square miles from home to just search for foods. The use of the panther as a logo represents the durability and ground-breaking design for their athletic shoes. The icon is not a resting panther, but a jumping mountain lion. This gives a really athletic impression to their product.


I also learnt about how to create an logo via the use of Illustrator. I did not know the different between Illustrator and Photoshops, is that images would not get pixelated in Illustrator even after you zoom in.


Week 03 – What I Learnt This Week – mlai2112

In this week, I learn more about how to develop a good persona. For example, how to use diagram to show the skills that persona has. These visual presentation gives a lot of information about the persona, so you do not need to read all the description again next time. I never know that we need to include a quote/motto for the persona. I also learn a technique such as moodboard, that I never heard about. Moodboard is a visual presentation that express the theme or feeling that you want to implement for your design. It could be photos of texture, colour and everything you can think of. It is more useful than using words to convert this feeling.

In the lecture, I discovered about user behaviour. For example, you always want to have a back arrow button for mobile application. This helps user to feel secure while exploring the platform. It is similar to escape hatch we talked about in pervious lecture.

I also found that the online shopping cart example for changes in midstream is quite interesting. User do not need to go the shopping cart page to edit the shopping list. User can simply delete the item on the side. I was wondering what if you got a long shopping list. Is it easier to do it on a new page? This was just a question that I thought of at that time.

Here is the persona I created:
Tutorial 03 - persona

Here is the moodboard of the style I want:
Tutorial 03 -My moodboard

Here is the moodboard of the persona, Jane, we created in class:
Tutorial 03 - Moodboard for Jane persona

Week 02 – What I Learnt This Week – mlai2112

I learnt about photoreceptors in human eyes. Both rods and cones contained in retina at the back of our eyes. Rods are highly sensitive to light and we generally use it at the dark. Cones have high vision sharpness and able to tolerate more light. We use it in daytime and it can capable of detecting different colour (wavelengths).

I discovered vision perspectives, cultural, depth of field and especially the use of colour and its arrangement can create visual illusions.  For example, we might able to see reddish grey colour if we place the colour grey next to blue. I also picked up that our brains tend to group thing with similarity together and we focus on movement more than static objects. The matters that we are not focusing on have a tendency to be blur. It is interesting to explore these concepts and adapt them in our design. This might enable us to generate more innovative design.

I also gained some knowledges and techniques on how to develop a good interface platform. The golden rule of outstanding websites always have escape hatch. They generally use logo as a homepage link. This provide a sense of security to user and thus to encourage them to explore the platform. This also have a branding effect every time the logo link is being use. Additionally, it is a default action for internet user that by clicking the logo can always bring them back to their safety net. Global navigation, breadcrumbs and forgiving format are convenient for users to gather information they need. Global navigation is a section that appear in every pages of the website. It commonly includes all the links that lead to the major sections of the web application. Breadcrumbs is about showing the hierarchy of pages all the way from the main page down to where you at. It is alternative way for user to navigate, so they won’t get lost from browsing the website. Forgiving format refers to search system that does not pursue user to follow strict and rigid rules to cooperate with the program. Nowadays, with the technology we have, computer intelligent should able to figure out and take in divergent input and send relevant information back to users. User should be able to simply interact with the program without having a syntax error by adopting various formats. This maintain flexibility and ease for user to get the job done. These design patterns are essential to create a user friendly design.

Week 01 – What I learn this week – mlai2112

I learnt various principles this week.

The Don’s Principle that covered six elements that I can apply to my design process in the future. This is including visibility, good concept model, affordance, mapping, constraint and feedback. These are essential to create a user friendly design.

  • Visibility refers to visible features that make the platform easier for users to comprehend. In contrast, if all the functions are not present distinguishable or clear to users, they are more likely to struggle while interacting with the interface design.
  • Good conceptual model is basically about having similar operation system and visual presentation. This is tremendously important to the design process. If the interface have different interactive system, then it becomes less promising to users and develop into obstacle for them. This is because without consistency, it is difficult for user to learn how this interface work.
  • Affordance means the visual appearance and attribute of an object or design that give user an idea of how to engage with it. For example, a wavy door handle gives an obvious affordance for holding. In other words, it refers to the presentation of the object design given a sense of purpose to user, so they know how it can perform by visually looking at it.
  • Mapping is a relationship between the controls and their outcome, such as the brightness buttons for Mac. The size of the sun icons mimic the illumination of sun. The bigger the sun is, the brighter it is. Another example would be the left and right arrows on the keyboard, that suggest the movements of left and right.Screen Shot 2015-08-07 at 12.15.30 am
  • Constraint is about restricting user to perform certain interaction with the design. For instance, the constraint of USB is purposely constructed that the plug cannot insert into receptacle of the computer if placed upside down.
  • Feedback can be in various forms, such as light, tactile, colour and sound. It could be accomplished by the combination of these forms. It is about an interface design showing information to what action have been achieved by user.

Another principle I learnt is Gestalt Principles. The four components of this principles are emergence, reification, multistability and invariance.

  • Emergence is ability to see or form an visual perception by emerging pattern together often from a noisy background.
  • Reification is a mental process that allow us to complete missing information that given by an incomplete shape. Our eye and brain have power to generate lines to form a closure of a unfinished pattern.
  • Multistability is all about seeing two items alternatively in the same image. For example, we can able to see both front and the back of a cube by switching our perception, but it is difficult to see both at the same time.Screen Shot 2015-08-07 at 1.09.44 am
  • Invariance is ability that we can recognise the same object or imagery even though they are rotated.

Create a free website or blog at

Up ↑