I’m designing a dark-mode-first desktop website for an online media organization.
One of the key characteristics of the organiation is its community, and how open, friendly, inviting and communical it is.
So, I thought of designing an FAB (floating action buttion) that supports those characteristics that will be used for connecting with the community.
Impelementation wise, it has a “contact us” text with a relevant icon, and should open up into a dialog. However, I’m not sure if an FAB opening into a dialog is in line with the Material Design guidelines. Is it?
Another issue that I have is that the FAB uses the primary accent color I defined, which I think is fine, since it’s small, how would I color the panel while showing that it’s an expansion of the button? I think it’s an issue for the big dialog from to have a fill primary color, which would be too colorful and bright in this color’s case. If it’s not against the Material Design guidelines, how would you advise me to go about designing it?
I thought of making only a border of the same color and treating the rest of the dialog like a regular card but I’m not sure about that layout.
Page with the contact us FAB:
Page with the contact us dialog open, red border, grey fill color:
Page with the contact us dialog open, red fill color:
I also saw a this Codepen that uses the same structure, only uses a menu header (I don’t know what else to call it) that has the FAB’s color. I’m not sure if it’s a good idea, but I’m thinking of having 2 sections in that dialog, which I think would be a good idea for this use case to be implemented as tabs. With 2 sections, one would be links to all the communities, and the other one will be for contacting the organization directly, so that Codepen’s structure with the header might be a good idea.
I’d appreciate thoughts on that structure as well.
Note about a closing option being missing: whichever structure I go with I’d have to choose what kind of closing mechanism I want, so in the meantime I didn’t add this option.
EDIT: I could also implement a contact option via a form, which would make the active role of the dialog a contact us/support dialog, in which case the positioning and the structure (dialog) would be traditional.