Design Opengraph/Social/Twitter card image

[rugk]

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]

Hello @rugk i'd like to take up this issue. Have made a sample

[SuperSandro2000]

@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.

[rugk]

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.

[SuperSandro2000]

Oh nvm. I thought I was on the main mastodon repo. Sorry about that.

[bull500]

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

[rugk]

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??

[bull500]

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

[rugk]

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?

[bull500]

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:

[paulo-roger]

I loved the type 1, the other reminds me of amazon ):

[rugk]

Indeed, that's also my favourite. @bull500 do you still have source files (svg) of that?

[rugk]

@bull500 would really love to get the SVG files for that, if you still have them.