I’m actually a developer so I don’t know a lot about design. this is the first web-app I’m developing and designing. it’s for writing topic-journals and each item in the list is a text file.
I tried to make the web-app look simple using only black, white and grey. it’s almost like twitter but without the blue.
the list is the most important thing, so I made the top bar to be narrow. this way it doesn’t get the attention more than necessary. in this page the user most often scrolls the list but not so often creates a new one. so the button for creating a new file, which is a FAB with a ‘+’ icon, shouldn’t stand out that much. but the shadow is making it bold, to stand out and taking the attention of the user.
If I remove the shadow from the button, it looks somehow confusing and ugly. if I change the color of the circle to black(or grey) and the plus to white, aka switching the colors, it’s no longer confusing and ugly, but it becomes even bolder.
Is there any other way to have an action button other than a floating action button? I thought about putting it in the top bar, but that makes it hard to use since the top bar is narrow and since the user is not used to using action buttons being in the top.
another way could be to put the button in the list, and hide it unless the user scrolls from the top(showing it once when the user opens the page then hiding it with an animation so the user knows it’s there) but I’m not sure if I’m implementing incorrectly or if it’s just a bad idea:
The app will have a grid view of the list too. in the grid, the FAB will cover one file’s name.
I’m sorry for the low quality pictures.
Thanks for any help you are able to provide.