Search

uicourse

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.”

HTML:

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 >

-Vicky

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

What I learnt week 9? (amol0125)

In week 9, Nik taught us how to create a Hyper Text Mark-up Language (HTML) based webpage, which is one of the very most important and useful tools of UI design.

Although, I knew a little bit about HTML tool theoretically, however since I never got my hands dirty, I had forgotten that. This HTML class was not very hard and complicated, but so fast. I enjoyed it a lot so that after class I tried to use “inspecting element” mode in Google Chrome browser to discover new methods and new elements/features of HTML.

At first, I did not have any idea about the reason why we use <head> section for our HTML page, it did not make any sense to me! Eventually, in one of Nik’s slides I saw the below definition which completely convinced me:

Why 2 sections? Same as with humans really…

  • The head section is invisible
  • The body is what people actually see

or in English:

  • The head section is for the machines
  • The body section is for our peep

Screen Shot 2015-10-05 at 02.15.51

Screen Shot 2015-10-05 at 02.13.52

Another important thing, I learnt, was to be cautious  when using the webpage’s email address:

<a href=“mailto:email@address.com”>Email Dan</a>

In this case, as a protection against bulk/spam emails, we need to use JavaScript to mask the email address.

It was wonderful. I look forward to learning CSS. 😀

What I learnt week 8? (amol0125)

In the week 8 class, I learnt what is Heuristic evaluation including usability inspection methods, the meaning of Heuristic and Heuristics, which are involvement of iterative trial and error experiments with users and instructions.

Also, I learnt how important could be to disign a supporting, self guiding form for a user friendly UI.

I also enjoyed learning how to work in <www.Invisionapp.com> environment to be able to simulate and design required links between the already prepared pages of a website. I never knew that I could learn lots of methods and tools just in one unit of study during only one semester.

Screen Shot 2015-10-04 at 17.17.34

Although, in using these tools, I am a beginner at the moment, however I am very grateful to Nik because of the materials and the UI designing tools he is teaching us.

What I learnt week 7? (amol0125)

example

In week 7, I got kind of familiar with concepts of usability in UI and its materiality. I learnt that Flat Design is the best option nowadays, because “people are comfortable with touch screens and no longer need real world representations”. (Tara HORNOR)

Screen Shot 2015-09-25 at 02.52.51

In Flat Design, everything should be flat and be designed in 2D style such as colours, photographs, icons and so forth. there is no need to extras and non-essential items (minimalism).

I also learnt what Flat Design IS and what it ISN’T. I learnt how to make a form, I realised that colliding Flat and Forms always suffers UXs.(ENDERS J, 2013)

understanding the meaning of negative spaces was a bit hard, however as far as I got, white backgrounds are not negative spaces at all, but useless spaces without any functionalities create negative spaces. Icons and typography are much more important than other things.

At the end of class, Nik came to groups one by one and looked into our projects and ideas as well as our logo and all job we had done till then, he recommended sets of very useful things, especially about our logo and the colours we needed to use in our product. He liked our product’s name (Tagtic) and suggested a slogan for it. All of them were according to this week’s class.

What I learnt week 6? (amol0125)

graphic design

Graphic Design

This week (6), I learnt so many things about Graphic Design, which visually communicates to users of websites. “What set of colours to be used”, “how” and “where”, are very important questions that need to be figured out in a layout of webpage. Fonts and typing are very important things as well, which can change moods of users. Designers should avoid using wrong colours or wrong colour combinations. Also, designers need to use a very reliable, attractive and clear font for their design typography.

A very important event that I had always been dreaming was to learn how to use “Adobe Photoshop” tool. I never knew that it could be one of the most important tools in interface designing. Especially, for designing webpage mockups it looks like a very perfect software. Although it is difficult to learn in one session, but I am very keen on learning this useful tool as soon as possible starting by Nik’s attached tutorial documents . To be honest, the most useful usage of photoshop in my opinion is its ability to create independent layers inside the same file.

Week 08 – What I Learnt This Week – mlai2112

 

~Summary of this week~


Heuristics:

  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,
featured46@wdd2x
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

-Vicky

What I Learnt This Week – Week 8 (mfer5686)

Michele Fernandez

We learnt about heuristics methods and how they are a flexible set of criteria to evaluate interfaces by “trial and error”. It would have been useful to know about this before testing our interfaces. I think the tasks we would have requested from users would have been more thoughtful that way. Maybe that´s Nik´s point… that theory can make your life easier because someone has already thought about possibles issues for you.

I specially liked the one about “Match between system and the real world” I feel that achieving that would really help to make an interface understandable, because users could emulate behaviors they already have.

The one that I would like to understand better is about Aesthetic and minimal Design, Nik said they didn´t mean the same than graphic designers by “minimal design”. I know that´s the way infographics work, by condensing complex data into simple representations, but i´m not sure if that´s what Nielsen implies by that.

Image source: mediamatic

What I Learnt This Week – Week 7 (mfer5686)

Michele Fernandez

I had not realized that pictures and icons were behind some of the “advantages” attributed to flat design. I felt uneasy about noticing that just after the lecture, because many of my designs in the last year were influenced by flat design. It feels bad realizing that you did something as part of a trend instead of looking for some factual basis other than “i read about this on x blog”.

Flat design was an overreaction to Really bad skeuomorphism… the well intended goal of simplifying design, lead to abandoning practices that when well employed made users´ life easier by informing them when some element was clickable or in a different plane through shadow or gradients.

As designers we are supposed to aim for functionality not just trends. I´ll try to remember this.

Image source: williforddesign

Blog at WordPress.com.

Up ↑