Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Design Opengraph/Social/Twitter card image #29

Open
rugk opened this issue May 22, 2019 · 12 comments
Open

Design Opengraph/Social/Twitter card image #29

rugk opened this issue May 22, 2019 · 12 comments
Labels
good first issue Good for newcomers hacktoberfest Hacktoberfest 2020, https://hacktoberfest.digitalocean.com UI/UX

Comments

@rugk
Copy link
Owner

rugk commented May 22, 2019

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:

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! 😊
@rugk rugk added good first issue Good for newcomers UI/UX labels May 22, 2019
@rugk rugk pinned this issue Jun 6, 2019
@rugk rugk added the hacktoberfest Hacktoberfest 2020, https://hacktoberfest.digitalocean.com label Sep 25, 2019
@rugk rugk removed the hacktoberfest Hacktoberfest 2020, https://hacktoberfest.digitalocean.com label Nov 7, 2019
@bull500
Copy link

bull500 commented Sep 3, 2020

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

@SuperSandro2000
Copy link

@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
Copy link
Owner Author

rugk commented Sep 3, 2020

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
Copy link

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

@bull500
Copy link

bull500 commented Sep 3, 2020

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.
rect502
mastofinal-template.svg.2020_09_03_22_44_33.0.zip

@rugk
Copy link
Owner Author

rugk commented Sep 8, 2020

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
Copy link

bull500 commented Sep 8, 2020

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

rect503

@rugk
Copy link
Owner Author

rugk commented Sep 9, 2020

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
Copy link

bull500 commented Sep 15, 2020

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:
path2-36

Type 2:
g3808

@rugk rugk added the hacktoberfest Hacktoberfest 2020, https://hacktoberfest.digitalocean.com label Sep 29, 2020
@paulo-roger
Copy link
Contributor

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

@rugk
Copy link
Owner Author

rugk commented May 4, 2022

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

@rugk
Copy link
Owner Author

rugk commented Jul 31, 2023

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
good first issue Good for newcomers hacktoberfest Hacktoberfest 2020, https://hacktoberfest.digitalocean.com UI/UX
Projects
None yet
Development

No branches or pull requests

4 participants