#864 Update/Modernize SVG templates for badges
Closed: pushed a year ago by riecatnor. Opened 2 years ago by riecatnor.

Overview

The Fedora Badges project was initialized in 2013, which is almost 10 years ago!! It's time to modernize and update the badge template. The Fedora brand has evolved since badges started. This includes a new logo, an updated web presence, new character designs, etc. It makes sense for us to do a Badges refresh to go along with those updates. Also, upon close examination of the current template, the nodes/vectors are not clean and should be corrected.

Recommendation

  1. Research Fedora badges: spend time reading the docs [0], reviewing the style guide [1], and perusing the badge index [2].
  2. Research other badge systems: do a web search for FOSS/badges/systems and spend some time researching what is out there, observing what makes each system unique and how the style of the graphics reflects the brand of the organization using them.
  3. Using the shape of the Fedora logo, create multiple sketches (can be analog or digital) for updated templates. Try to push past your first most obvious ideas, try to come up with 8-10.
  4. Drop your sketches on the ticket in PNG format and wait for review.
  5. Incorporate the feedback you receive, and continue to iterate until the design is complete!

Notes
- If you are new to Fedora, I would recommend spending some time reviewing general Fedora docs [3] to learn more about the community.
- Fedora has a fun, friendly, & cheerful aesthetic, and this should be reflected in the badges system.
- Fedora badges has six categories and the new design should incorporate some way to denote between each category.
- The design should be based on the Fedora logo shape
- Do not use the color black

[0] https://docs.fedoraproject.org/en-US/badges
[1] https://docs.fedoraproject.org/en-US/badges/_attachments/fedora-badges-style-guide.pdf
[2] https://badges.fedoraproject.org/explore/badges
[3] https://docs.fedoraproject.org/en-US/project/


Metadata Update from @riecatnor:
- Custom field artwork adjusted to None
- Custom field concept_review_passed adjusted to None

2 years ago

Metadata Update from @riecatnor:
- Issue tagged with: outreachy-2022

2 years ago

One thing to note: the current ("old") template has a lot of white-space built-in around the image. I the artwork would be more versatile if instead this space was minimal, with the art filling the frame. This would make it easier to use the badges on, for example, discussion.fedoraproject.org.

If the existing badges site needs the whitespace still it's not difficult to programmatically add it, either using a script to export from Inkscape with a border, or after-the-fact with ImageMagick or something.

Metadata Update from @smeragoel:
- Issue assigned to lilina

2 years ago

Metadata Update from @smeragoel:
- Assignee reset

2 years ago

@lilina has volunteered to start working on this. All the best :)

@smeragoel I want to work on this Please

Hi @siddharth9 and @cheeps great! Looking forward to your first drafts :)

@riecatnor I would like to work on this .thank you..

Hi @cheeps thanks for starting work on this task! I like how you have added a description of the changes you made to each concept. I think the directions of the second and fifth concept are working the best.

I would switch to a grey blur for both, playing with how much it is blurred and the pixel size.
Play around with the spacing of the orange lines on both designs to see what other variations might look good.
For the second one, try a different color than white for in between the two orange lines, maybe a light orange?
Try adding in a current badge design as well as the background, to see if it look different/better/worse with more designs on top.

Looking forward to your next drafts!

Hi @madhavidayma the one thing that should stay the same is the Fedora logo shape- beyond that you are free to experiment :) looking forward to your next drafts!

hi @smeragoel i'll like to work on this

Hi, @smeragoel , @riecatnor! I'd like to work on this issue. Thanks!

Hello @smeragoel pls i would like to work on this issue

Hi @falyne @injialiyeva @crisoal - feel free to submit work for this ticket, thank you!

Hi @madhavidayma this is an improvement from the first round! A couple notes:
- I think the first design is looking very similar to the original with an added stroke, I would try pushing this further somehow to make it look more different
- The second is interesting, though I think you will need to test badge artwork with it- I am afraid having the pink border up against the various artworks will clash. Maybe try adding a stroke in between?

Hi folks- thanks for the continued work here! Notes below :)

@cheeps nice work! I am curious which design you like best at this point?
- Make sure you have the comfortaa typeface installed- I see the text in the badges designs have changed from the original designs.
- I prefer the evolution of the "fifth draft", but I am also curious what @smeragoel thinks. I prefer that one because it is a simplification over the old badge template, and I think that is the right direction to go generally.
- Of the options for the fifth variation, I think I like the one with a tighter drop shadow. This is some fine tuning, but I think it would be good to try a version without a drop shadow, and then 3 or 4 incremental increases so we can see which looks best.
- I took a look at the SVG, it is looking pretty neat, which is nice. I did notice that the object you are using for the white line between the outer stroke and the artwork area is itself a stroke. I think we need to separate out these elements, so that when someone clicks on the badge artwork area, they have a defined area to work within. I hope that makes sense!

@injialiyeva lookin good!
- I prefer the first design and I would suggest making some variations on this.
- Try 3-4 variations on color lightness for the area around the ring and artwork area
- Try 3-4 variations on the blur of the drop shadow
- Try adding in actual badge designs for each color category
- Please upload an SVG of the first design so I can take a closer look :)

Hi @falyne thanks for starting work here :)
- I see you are mostly playing around with drop shadows. I think this is an important piece of the template, but I think simpler in this regard is going to be better. The aesthetic of badges is bright and colorful. The drop shadows on top of the artwork would take away from that. We also try to avoid black in badges generally, and the displacement of the shadows are showing as very dark
- I would suggest importing some of the current badge designs to get a feel of what these would look like and then explore what other changes could be made

Hi @madhavidayma your newest design is skewing the Fedora logo again- make sure to keep that shape intact. You can explore other aspects. Thanks!

Thank you very much for the feedback @riecatnor it absolutely does! For the designs. I will say I like the fifth one better. I like minimalism and it works better in that direction for me

Badger_35_II.pngBadger_35_II.svgCommunity_badge.pngCommunity_badge.svgComputer_events.pngComputer_events.svgDear_Fedora_I.svgDear_Fedora_II.png

Hello_I.svgHello_II.png

Above are the examples PNG and SVG as advised.

@madhavidayma:
- Right now, it seems like you have added a ring on top of the existing badge template. It looks muddy, especially with the pink poking out from the bottom. Also, the green border has a bend at the bottom. I'd say to go back to the drawing board and look at the requirements: we need an updated badge template that seems modern and logical evolution of the current template. Don't be afraid to experiment more!

@falyne:
- I'd tell you the same thing as above. It seems that you are only playing around with the drop shadows, and the templates look very close to the existing ones. I'd say to go back to the drawing board and look at the requirements: we need an updated badge template that seems modern and logical evolution of the current template. Don't be afraid to experiment more!

@cheeps:
- I really like how these designs are coming out! I'm wondering how it'd look if we reduced the thickness of the coloured stroke on the outside? Try experimenting with that; it could make the badge feel 'lighter'.
- As for the drop shadows, I'm leaning more towards the no blur/1 px options

Badger_35_II.pngBadger_35_II.svgCommunity_badge.pngCommunity_badge.svgComputer_events.pngComputer_events.svgDear_Fedora_II.pngDear_Fedora_II.svgHello_II.pngHello_II.svg

These are the updated changes in PNG and SVGs

This was completed by @nekonya3 - thank you, Nikita!

Quality_Badge_Template.svgQuality_Badge_Template.pngMiscellaneous_Badge_Template.svgMiscellaneous_Badge_Template.pngEvents_Badge_Template.svgEvents_Badge_Template.pngDevelopment_Badge_Template.svgDevelopment_Badge_Template.pngCommunity_Badge_Template.pngContent_Learning_Badge_Template.pngContent_Learning_Badge_Template.svgCommunity_Badge_Template.svg

Metadata Update from @riecatnor:
- Issue close_status updated to: pushed
- Issue status updated to: Closed (was: Open)

a year ago

Login to comment on this ticket.

Metadata
Attachments 28
Attached 2 years ago View Comment
Attached 2 years ago View Comment
Attached 2 years ago View Comment
Attached 2 years ago View Comment
Attached 2 years ago View Comment
Attached 2 years ago View Comment
Attached 2 years ago View Comment
Attached 2 years ago View Comment
Attached 2 years ago View Comment
Attached 2 years ago View Comment
Attached 2 years ago View Comment
Attached 2 years ago View Comment
Attached 2 years ago View Comment
Attached 2 years ago View Comment
Attached 2 years ago View Comment
Attached 2 years ago View Comment
Attached 2 years ago View Comment
Attached 2 years ago View Comment
Attached 2 years ago View Comment
Attached 2 years ago View Comment
Attached 2 years ago View Comment
Attached 2 years ago View Comment