Ok, so I am a programmer and a complete disaster at web design. Untill now I have been able to produce “acceptable” looks with the help of frameworks like bootstrap, but I am stuck with a little side menu. The best thing I was able to come up with is the following:
It is a little side menu on a page where you have an in-browser RDP-client, so the main requirement is that it is VERY slim and preferably floating on the left side of the screen (changing it to horizontal and sticking it to the top of the screen is not an option). It should also be visible AT ALL times, so no appearing when hovering in the right area with your mouse. It contains three clickable buttons (MENU, KEYS, CLOSE). And as a side note: the button keys is kind of solution-specific and is a clear description in the context of the user.
My question is: how can I make this menu meet the criteria above so slim -> ~20px wide always visible and still make it look professional and not distracting? I would really appreciate any form of advice and tips!
Answer
Consider using established UI patterns like the burger menu icon or an arrow to show that there is a draw or menu. The icon is enough for people to know there is navigation / settings to be clicked.
This is just a quick sketch, but you can get icons like this from Bootstraps library.
Attribution
Source : Link , Question Author : larzz11 , Answer Author : Consume Coffee