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!
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:
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:
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.
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):
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.
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.
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.
