Design Opengraph/Social/Twitter card image
rugk opened this issue · 12 comments
To be used for GitHub and AMO. (shown when you share a link to them on Twitter or so)
Similar to the ones from my other add-ons:
- https://github.com/rugk/awesome-emoji-picker/blob/master/assets/repo-card-opengraph.png
- https://github.com/rugk/offline-qr-code/blob/master/assets/repo-card-opengraph.png
Requirements
- to be saved and design via SVG (e.g. Inkscape). Use this template (template based on official GitHub template.) https://github.com/rugk/opengraph-template/
- show logo and/or screenshots (if it fits), some kind of indication that it is an Firefox add-on (i.e. Firefox logo) and some kind of indicator that it is on GitHub/FLOSS (GitHub logo)
- few text, big text, great background, don't overwhelm the user
- looks good! 😊
@bull500 The Firefox logo is quite big compared to the mastodon logo. Mastodon also works in all other major browers and the floss thing looks totally out of place.
So first of all thanks for creating this and trying something.
Some feedback I'd give:
- The GitHub badge should be inverted, i.e. white, so it can be read on the dark background.
- I'd remove the FLOSS thing. The GitHub icon is enough to show it's FLOSS.
- there seem to be a lot of fonts in the image, which is quite confusing. Maybe we can try to reduce those? (Would be great to get the SVG source file, so I can have a look at which fonts you've used.)
- I'd place the name of the extension, i.e. "mastodon simplified federation" on one line, if possible
- also, somewhere the extension logo should be placed hmm… I know difficult if we also want to display the original logo
Apart from this I like this idea.
@SuperSandro2000 Yes, Mastodon works in other browsers, but this add-on (currently¹) does not.
So the Firefox logo is all fine. It also was a requirement.
¹ please create an issue if you want this to be changed.
Oh nvm. I thought I was on the main mastodon repo. Sorry about that.
I've redone the image with the changes requested
i had only used a single font(Free Sans) in different variations.
The other two come from the logo's of the respective softwares.
mastofinal-template.svg.2020_09_03_22_44_33.0.zip
Okay, great!
The only thing that is problematic now, but I don't know how to solve is that we have two very similar icons now that may be confusing:
- the mastodon icon
- and the add-on icon
Some ideas:
- make the mastodon icon a small subscript (i.e. ¹) So Mastodon¹, where "¹" is the icon? Just like the Fedora icon does it?
- show them stacked somehow, so you don't see the whole icon?
- somehow indicate that the mastodon icon" changes/moves/… into the mastodon icon?
- any other ideas??
Thank you for response @rugk
im not sure if modifying logo's of those OSS projects would create problems.
The other option is to use the text+logo of both github and mastodon.
Masto's types are available here - https://joinmastodon.org/press-kit.zip
GitHub we mostly have to combine the text and the logo
Awesome! IMHO this looks great and totally fine for an add-on like this.
Indeed the idea with using the text makes it less confusing.
I also like that the Firefox logo is the biggest here – it's indeed the most important thing and thus this fits perfectly.
Some slight things I may modify myself are: the add-on logo is quite small now (maybe we can increase it again) or(?) include the redirect arrow (the blue one) in the background somehow (maybe as a pattern?) – available in the screenshots dir or in the logo itself (it's copied from there). Because then this image displays what this add-on essentially does: redirects things.
And maybe increase the space between the GitHub icon and logo text.
@SuperSandro2000 How do you like this version/style? Anything else to improve?
i tried a bunch with the arrow in the back ground.
Hard to get it right for now.
Increasing icon kinda loses the balance of the title next to it
Type 1:
Type 2:
I loved the type 1, the other reminds me of amazon ):