Nicer Badge Icons / Images

Meta
1

Current badge icons and images are a bit unexciting:

Could we start using the icon versions of local and working group logos?

Also what about creating iconography for other badges?

Other badges (non WG / LG)

  • President’s Medal: Bronze, Silver, Gold, Platinum (?) - maybe “stars” e.g. 1 star, 2 star, 3 star
  • Labs stuff - see Badges - Open Knowledge Labs (may be relevant to many projects)
2 Likes
2

@rufuspollock Is this what you had in mind?

2276×868 148 KB

We could copy and crop the logos in GitHub (which have a transparent background) and link to them from the Badge Icon setting.

1446×516 47.2 KB

Thoughts?

3

Great, @Stephen, after a recent update to Discourse, really beautiful big icons are supported. Unfortunately, Firefox users will see something like this until the next release.

This has been fixed, but not yet rolled into a release.

4

Not super legible on user cards though…

1386×604 175 KB

Still worth pursuing or needs a re-think?

We could use a simplified logo e.g.

But colours need to be sorted to work on backgrounds

1186×404 106 KB

730×276 35.6 KB

So trying a red version gives a marginally better result but still needs work in my opinion…


1148×592 433 KB

5

Neat logo options!

The Firefox issue has been fixed in the latest release (which we are now running), so I think this would be a really cool thing to have. I’m not too bothered (for now) by the illegibility on the user cards especially since the title is displayed anyway.

6

OK. Running with this…

I have increased the font size a little (104pt). I tried adding more space between the “spokes” but it didn’t look great, so I left is as in the current OK logo.

I plan to do a UK badge for both Scotland and England as there is no 2 character country code. (@rufuspollock @ewan_klein - any other suggestions?)

I’ll need to add an England directory to the okfn/ok-media GitHub repository. Is “England” the write title?

7

Bringing in my main comments from PR at Badges for Local Groups in OK Forum by Stephen-Gates · Pull Request #3 · okfn/ok-media · GitHub

  • I think the original design using the standard logo is best i.e. this one. That way we have consistency from this site to elsewhere.
    • If we do want to tweak my change would be to make red part solid and large (i.e. take up entire interior of the green circle or almost all of it)

Side comment: it would be cool if we could use font-awesome or similar stuff as we do on labs to generate the more interesting badges. Perhaps we could even automate generation that way.

8

The “this one” link is broken but I’ve implemented Australia’s badge using the logo.

If you’re happy with this, I’ll do the rest and submit a pull request in GitHub.

708×262 32.1 KB

9

@Stephen I think this the way to go - we may not even need to create new logos we can just use what we already have (for local groups) :smile: - that was in fact my original intention when I wrote:

So, suggest:

  • Update discourse badges to use the icons we have for local groups and working groups
  • Create a list of the new badges we want
  • Plan and implement icons for new badges (and existing other badges that do not have an icon)
10

The logos have the words Open Knowledge {country} to the right of the logo. I’m just cropping that off.

11

@Stephen got you - and we should do that and commit in the LG directories in ok-media.

Oddly it looks like this is done for WG icons with naming “ICON” in the name e.g.

PS: I’m on gitter right now okfn/chat - Gitter

12

Shiny new badges for everyone.

Local and Working Groups done. Next, Global Open Data Index Contributor and to make sure everyone is happy with the England / Scotland “hack”.

@Mor how about this for the Global Open Data Index Contributor yearly badge?

2 Likes
13

Nice work @Stephen!

Badges in Discourse do map to font-awesome classes.

1 Like
14

You can use fa-trophy to do a gold, silver, bronze version of a President’s Medal.

(or choose from other font awesome icons).

15

Is there any way to use two font-awesome icons? I imagine not …

I wonder if there is a generic way that we could “hack” discourse to layer a font-awesome icon on top of a general (e.g. OK style logo) background.

This is nice but maybe a bit generic - i wonder how we could do better in awarding stuff.

I also think we probably want to think about “role” badges vs “achivement” badges - is there any design way we could use to distinguish them (on labs we use different colours for the badges …)

1 Like
17
  • You can stack font awesome icons.
  • Fort Awesome allows you to use your own icons for a price.
  • If you turn OK on it’s side, adjust the kerning, add some olympic colours, it looks like a medal…

2 Likes
18

@Stephen - I love it! Thanks for helping with this!

2 Likes
19

@Stephen the medal is very cool.

I also wonder: can we layer a font-awesome icon on an image or is that not allowed by discourse?

Main point: Before we design we should probably try and draw up a list of what we want and then implement. What are people’s thoughts here on what we want (and behind that what are our user stories)?

Example user stories

As “President” I want to acknowledge people for making an outstanding contribution and for others to know about that so that they are acknowledged

As a Community Member I want to know how many members a given local group has and who is in it so I can get in contact with them and have a sense of their size

PS: @danfowler I wonder if we could dig out and post in a separate thread some of the user stories we had last summer when designing the community directory.

20

Hi @Stephen

Sorry for not following up sooner.

I’ve not followed this thread sufficiently to understand the reasons for the alpha-2 constraint. Can you clarify?

As background, there were a number of reasons initially why we didn’t just create one UK Local Group. E.g., open data is so-called devolved matter in Scotland and Scotland has a separate FOI law. At present, the England and Scotland Open Knowledge Local Groups are independent of each other for all practical purposes, and although it would be great to have more collaboration between the two, the timeframe for that to happen is up in the air.

21

Hi @ewan_klein
The character constraint is based on using the two letter country code in the logos (see the other badges).

I didn’t know what letters to use for England and Scotland has they don’t appear in the ISO3166 standard nor in the gov.uk country register.

If you do have two groups within the UK then perhaps a English Rose and Scottish Thistle may be an alternative?

@rufuspollock do you have a suggestion here?