Badges Revamp And Template Showcase

Project Discussion
,
1

Introduction

Hello, my name is Chris, and I am currently an Outreachy intern along with my fellow intern Roland (@rolandixor). We are currently working on the design aspect of the Fedora Badges revamp. The overall revamp of the Badges system is an effort to refresh the user experience, fix bugs that have accumulated over the years, and overhaul the website design. The design revamp is focused on modernizing the template and updating the art to fit the badge style guidelines. This will make the badges more visually appealing and easier to use, while also improving the overall look and feel of the website.

Things We have learned

During our time as interns, We have learned a lot about the Fedora community and the process of designing badges, a great deal about design and working on a remote team across different time zones.

We have also learned new styles and methods of design and how to maintain consistency when working with a design team.

Easy fixes
There are a number of easy fixes that we have encountered:

  • Colors: While the overall color palette of the badges remains the same, we have made some minor adjustments to ensure that the badges are consistent with the Fedora branding guidelines. For example, we have updated the colors of some of the badges that were previously using incorrect colors. These changes will make the badges more consistent with the overall look and feel of Fedora.
  • Typography: Fixes for typography and sizing are also notable easy fixes.
  • Old-style characters: Some of the characters in Badges were created before there was a solid aesthetic established, so we’ve reworked those badges to include more modern versions.

Challenges

As with any project, we’ve encountered some challenges along the way.

  • Learning new styles: One of the biggest challenges we have faced is making sure that the badges are in line with the Fedora design ethos. However, this gives us an opportunity to hone our skills and learn new methods of design.
  • Personal challenges: We’ve faced various challenges in our personal lives, such as power outages cutting into available time, but this teaches us to be flexible and adaptable.

Improvements we are proud of

We are really proud of the improvements made to the Fedora badges, including having an opportunity to set new precedents for the future. We believe the new badge template has created a more modern and visually appealing Badge aesthetic.

Images

1920×1080 389 KB

1920×1080 299 KB

1920×1080 378 KB

1920×1080 485 KB

1920×1080 321 KB

1920×1080 424 KB

1920×1080 345 KB

Conclusion

We are really enjoying our time as Fedora interns, and learning a lot. It will be exciting to see the new badges go live, and we are confident that they will be a valuable addition to the Fedora community. We both intend to stick around after the Outreachy internship is complete and continue to contribute to the Fedora Badges project.

11 Likes
2

Thank you @chris and @rolandixor[1] for all the work put into the badge design revamp. I think the result is something to be proud of. The new badges look refreshing and modern. I’m looking forward to seeing them up on the website.

One question: the old badges had drop shadows, giving them depth. I find that very appealing, because it lifts them from the background. Will this be implemented in the new Badges website by some CSS? Or will we use them as is?

  1. And of course a big thank you to your mentors in the design team as well. ↩︎

1 Like
3

Hello :wave: @gui1ty

The old badges did have a drop shadow, which gave them a sense of depth. However, this also created extra white space around the badges, which could be problematic for a frontend UI with dark mode. Additionally the removal of the white space was also a way to place more emphasis on the badge graphics

1 Like
4

Hi @gui1ty ! Thank you for your feedback and your question! I see that @chris has covered this one :slight_smile: .

5

Thanks for the explanation. That makes perfect sense. We can have a look what we can do with CSS to make the badges stand out a bit.

1 Like
6

There’s a possible solution I can think of:

Use the drop-shadow filter in CSS, which would avoid having to add extra white space to the actual badge files, and allow us to change the shadow in dark mode.

7

I’m glad to see the white-space removed – it makes them appear extra tiny on this site (see Fedora Discussion). @gui1ty if you do come up with a CSS solution we can implement that here too.