I would like to start taking down notes on UI/UX but I do not know how to categorise them. Take UI for example, there are so many UI elements. And should I separate UI from UX? But then again, it is hard to draw a line between them.

I would like to have this sort out before taking down my notes so that I won't need to spend time arranging them next time.

Please share with me any suggestions or advice you have!

2 Answers 2


TL;DR: There are many options. It depends on what you are trying to achieve. Choose what works best for you

Since you specifically mentioned UI and UX, two possible use cases immediately came to my mind:

  • Heuristic evaluation
  • Design system/Styleguide

Heuristic Evaluation

In a Heuristic Evaluation, you analyse the UI based on a set of usability guidelines. You could use Nielsen's heuristics or find others that are more suitable for your purposes. You could even come up with your own heuristics.

In case of a heuristic evaluation, you would likely organize your notes per page/screen and could categorize them by:

  • violated heuristic(s)
  • severity rating

Additionally, you should also add an explanation of the violation and suggestions for improvement. You could use one of the many templates you can find on the internet (like this excel-sheet), but make sure that it suits your purpose.

Design system / Styleguide

A Design system is used as a common set of standards that you, your fellow designers, developers etc. can refer to. It can help to avoid inconsistencies and reduce redundant design discussions/decisions, by having a clear specification of all your (UI) buildings blocks.

You would likely organize your design system by UI elements. Categories could be (but are certainly not limited to):

  • Buttons
  • Form fields
  • Typography
  • Colors
  • ...


There are several other methods in the UX process and many of them come with their specific strategy of note taking and organizing. Another one I would like to point out is an Affinity diagram. This might not apply to your situation because it is less tied to specific UI-elements, but a neat way to organize and prioritize UX findings from qualitative studies (e.g. interviews) or unstructured ideas.

In conclusion

There is no "golden rule" of what is best. Consider your situation and make sure you know what you want/need. Then figure out what works best for you to achieve that goal. And don't be afraid to adapt common practices or even invent a new approach. After all, there is no "one size fits all" in life.

  • Hi, thank you so much for your suggestion. I really appreciate you taking your time out to type this out for me. I think categorising my UX notes based on heuristic evaluation sounds like a feasible way, maybe i'll try just that!
    – Cassie Ho
    May 26, 2021 at 8:36
  • You're welcome! Please let me know if you have further questions and feel free to upvote and/or accept this answer if it was helpful :) May 26, 2021 at 13:45

Although there are some standardish names for bits of a website or software, I resorted to using an appendix with annotated screenshots of screens with made up logical names for the bits of the screen (side menu; top menu etc). This meant that anyone reading the report later had a visual guide to the names of bits of screen I was referring to.

  • Hi PhillipW, thank you for your suggestion. So something like a log where you record all the notes that you've taken down and just give them headers/tags? If you don't mind, could you kindly share a visual about it? Thanks again!
    – Cassie Ho
    Jul 5, 2021 at 5:46

Not the answer you're looking for? Browse other questions tagged or ask your own question.