DailyUI 010 – Social Share

New day, new challenge. This time social sharing. I wanted this one to be big and clear, with visible buttons and actions. Researching what others have done on this one I see that a common thing is doing quotes – Einstein quotes being one of the most common one. I didn’t want to be another quoter, so I decided to use something that I was excited about, Street Fighter V – specifically the steelbook edition, since it was exclusive to Europe.

So first of, since it’s a visual thing the object itself needed to be visible. As there were no images of it standalone, I cut it out of its promotional imagery and gave it a big display on the left side, leaving the entire product visible. After all, it is an image you’re sharing, so it should be completely visible.

The image is also titled, either grabbed from alt text or specified by the user from the item. The lines next to the title were added to further emphasise that this is the title of the item you’re sharing. Alsp, since most of the time you’re  bound to add commentary to what it is you share, a comment field was necessary. I titled this message here, as comment didn’t feel right.

These days, there are way more social networks than fingers on our hands, and there are many times you want to share to multiple at once. So I picked out a selection of common ones, allowing for a multi-select. Greyed out when not picked, circled in the respective brand colour when picked.

At first I was playing around with having a FAB as usual for the final share/send button but I quickly realised it felt out of place in this piece. It didn’t quite fit. So I instead opted for a bigger, squared off button. I left a margin compared to the share box itself as a visual flare.

Fonts used here are Lato for most of the text and Lora for the title. Two typefaces I’ve been using a lot lately. As for icons, only the close button was used, added merely as a way to further emphasise that this is a pop-up.