#667 [docs] Add Fedora Badges design resources / how to design a badge
Merged 3 years ago by sayanchowdhury. Opened 3 years ago by jflory7.

file modified
+33 -25
@@ -1,20 +1,19 @@ 

  fedora-badges

  =============

  

- [Fedora Badges](https://badges.fedoraproject.org/about "About Fedora Badges")

- discussion / planning and assets (PNGs, SVGs, STLs, etc.)

+ Everything [Fedora Badges](https://badges.fedoraproject.org/about "About Fedora Badges"): discussion, planning, artwork, design, docs

  

  

  ## What is this?

  

- This project is used for two things:

+ This Pagure project is used for the following:

  

- * **Requesting / working on new badges**

- * **Storing assets for created badges (PNGs, SVGs, STLs)**

+ * Discussion / planning (via issue tickets)

+ * Requesting / working on new badges

+ * Storing assets for created badges (PNGs, SVGs, STLs)

+ * Documentation ([docs.fedoraproject.org/en-US/badges/](https://docs.fedoraproject.org/en-US/badges/ "Fedora Badges :: Fedora Docs"))

  

- To learn more about Fedora Badges, you can read more on the

- [About page](https://badges.fedoraproject.org/about "About Fedora Badges").

- This project repo is only used by Fedora Badges contributors and designers.

+ Learn more about Fedora Badges (high-level overview) on the [About page](https://badges.fedoraproject.org/about "About Fedora Badges").

  

  

  ## What can I do here?
@@ -23,38 +22,47 @@ 

  

  * Submit new badge ideas

  * Contribute badge designs and artwork

+ * Add or change documentation on [docs.fedoraproject.org/en-US/badges/](https://docs.fedoraproject.org/en-US/badges/ "Fedora Badges :: Fedora Docs")

  

- To get started on designing Fedora Badges, visit the

- [wiki page](https://fedoraproject.org/wiki/Open_Badges) or take a look at this

- [How To](https://mashaleonova.wordpress.com/2017/01/20/fedora-badges-how-to/)

- by mleonova. Find the resources you need in this

- [issue](https://pagure.io/fedora-badges/issue/528).

+ 

+ ### How do I design new badges?

+ 

+ Want to design a badge?

+ Awesome!

+ **Start with the [official guide on making badges](https://docs.fedoraproject.org/en-US/badges/design-badges/) on the Fedora Docs website.**

+ The official guide provides the style guide, template assets, color palettes, and more.

+ 

+ If you want to read more, see these blog posts from Badges contributors:

+ 

+ * [Fedora Badges Official Style Guide](https://riecatnor.wordpress.com/2014/02/24/fedora-badges-official-style-guide/ "Fedora Badges Official Style Guide") (riecatnor, 2014)

+ * [Fedora badges: how to](https://mashaleonova.wordpress.com/2017/01/20/fedora-badges-how-to/ "Fedora badges: how to - Masha Leonova") (mleonova, 2017)

  

  

  ## Where do I…

  

- * **[Request a new badge](https://pagure.io/Fedora-Badges/new_issue)**

+ * **Get in touch with Fedora Badges team?**

+   * `#fedora-badges` on Freenode IRC ([webchat](https://webchat.freenode.net/?channels=fedora-badges))

+   * [@fedorabadges](https://t.me/fedorabadges) on Telegram (bridged to IRC)

+   * [badges@lists.fp.o mailing list](https://lists.fedoraproject.org/admin/lists/badges.lists.fedoraproject.org/ "Fedora Badges mailing list on lists.fedoraproject.org")

+ * **[Request a new badge](https://pagure.io/fedora-badges/new_issue)**

  * **[View existing artwork / assets](https://pagure.io/fedora-badges/tree/master)**

- * **[Download badge design resources](https://pagure.io/fedora-badges/issue/raw/66de8abf46b1a554666d4ddb3ff20253d40350afbfe8801acca300e121364a35-FedoraBadgesResources.zip)**

+ <!-- UNCOMMENT WHEN RESOURCES ARE PUSHED TO THIS GIT REPOSITORY: * **[Download badge design resources](https://pagure.io/fedora-badges/issue/raw/66de8abf46b1a554666d4ddb3ff20253d40350afbfe8801acca300e121364a35-FedoraBadgesResources.zip)** -->

  * **[Find the code for the badges web app, Tahrir](https://github.com/fedora-infra/tahrir)**

  

  

  ## Note about ticket response time

  

- Fedora Badges is only staffed by volunteers, so we can't guarantee to handle

- all tickets. If a ticket needs attention, contact the owner and see if they're

- working on it. You can also stop by `#fedora-design` on Freenode to ask.

+ Fedora Badges is staffed by volunteers, so we can't guarantee fast responses to all tickets.

+ If a ticket needs attention, contact the owner and see if they're working on it.

+ If you don't hear from them in a week, you can take the ticket over.

  

- If you don't hear from them in a week, you can take the ticket over. If you

- want to have a longer conversation with the team, please join our

- [mailing list](https://lists.fedoraproject.org/admin/lists/badges.lists.fedoraproject.org/)!

+ Need a quick turnaround?

+ Have a question about an existing ticket?

+ Get in touch with the Fedora Badges team by using any of the options listed above.

  

  

  ## Legal

  

  ![Creative Commons Attribution-ShareAlike 4.0 International License](https://i.creativecommons.org/l/by-sa/4.0/88x31.png)

  

- All artwork, images, or otherwise non-programmatic content in this repo fall

- under the

- [Creative Commons Attribution-ShareAlike 4.0 International](https://creativecommons.org/licenses/by-sa/4.0/)

- unless otherwise stated.

+ All artwork, images, documentation, or otherwise non-code content are licensed under the [Creative Commons Attribution-ShareAlike 4.0 International](https://creativecommons.org/licenses/by-sa/4.0/).

The added file is too large to be shown here, see it at: docs/modules/ROOT/assets/attachments/content/pandas.svg
@@ -0,0 +1,28 @@ 

+ GIMP Palette

+ Name: badges_extended_palette

+ #

+   0   6 255 #0006FF

+  15 116 178 #0F74B2

+  30 221  30 #1EDD1E

+  41  65 114 #294172

+  60 110 180 #3C6EB4

+  72  55  41 #483729

+  76  93  12 #4C5D0C

+  78 154   6 #4E9A06

+  93  56 122 #5D387A

+ 100 162 142 #64A28E

+ 117 142  19 #758E13

+ 120 103  33 #786721

+ 124  95  71 #7C5F47

+ 126 192 170 #7EC0AA

+ 137  45 197 #892DC5

+ 158  41  43 #9E292B

+ 160 206 220 #A0CEDC

+ 190 121  23 #BE7917

+ 197 166  43 #C5A62B

+ 227 229 153 #E3E599

+ 233 221 175 #E9DDAF

+ 247 225 193 #F7E1C1

+ 255   0   0 #FF0000

+ 255 139   0 #FF8B00

+ 255 255   0 #FFFF00

@@ -0,0 +1,27 @@ 

+ GIMP Palette

+ Name: badges_fedora_palette

+ #

+  41  65 114 #294172

+  60 110 180 #3C6EB4

+  83  89  97 #535961

+ 111 129 166 #6F81A6

+ 121 129 139 #79818B

+ 121 219  50 #79DB32

+ 143 174 217 #8FAED9

+ 154 159 166 #9A9FA6

+ 160 124 188 #A07CBC

+ 187 237 151 #BBED97

+ 196 199 204 #C4C7CC

+ 207 189 221 #CFBDDD

+ 216 225 238 #D8E1EE

+ 219  50 121 #DB3279

+ 223 224 227 #DFE0E3

+ 229 151  40 #E59728

+ 232 239 248 #E8EFF8

+ 233 249 221 #E9F9DD

+ 236 229 241 #ECE5F1

+ 237 151 187 #ED97BB

+ 239 240 241 #EFF0F1

+ 242 202 146 #F2CA92

+ 249 221 233 #F9DDE9

+ 251 238 219 #FBEEDB

file modified
+1 -2
@@ -1,2 +1,1 @@ 

- * Design assets (coming soon)

- * How-to guides (coming soon)

+ * xref:how-to-design-badges.adoc[How to design a Fedora Badge]

@@ -0,0 +1,103 @@ 

+ include::{partialsdir}/attributes.adoc[]

+ 

+ = How to design a Fedora Badge

+ 

+ This page explains how to design and create new Fedora Badges.

+ This guide walks through the following:

+ 

+ * Review guidelines for creating a Badge

+ * Set up Inkscape for Fedora Badges

+ * Get badge template files

+ 

+ 

+ [[style-guide]]

+ == Review Badges style guide

+ 

+ Refer to the Fedora Badges style guide for how Badges are designed.

+ The style guide provides explanations and suggestions for shapes, colors, and other requirements to design good badges.

+ Refer to this often while designing new badges.

+ Following this guide makes new badge submissions easier to review and less time reworking a badge from feedback.

+ 

+ link:{attachmentsdir}/fedora-badges-style-guide.pdf[Fedora Badges Style Guide] (_last revised_: January 2014)

+ 

+ 

+ [[set-up-inkscape]]

+ == Set up Inkscape

+ 

+ Inkscape is recommended for designing Fedora Badges.

+ Other Badge designers use Inkscape.

+ Providing help and support is easier if you use the same tools.

+ 

+ [[install-inkscape]]

+ === Install Inkscape

+ 

+ Using Fedora?

+ Reference the Fedora Magazine's https://fedoramagazine.org/getting-started-inkscape-fedora/[Getting started with Inkscape on Fedora] article for help.

+ For other operating systems, see Inkscape's https://inkscape.org/release/[downloads portal] for help installing it.

+ 

+ [[install-color-palettes]]

+ === Download and install color palettes

+ 

+ Common color schemes are recommended for Fedora Badges.

+ The following palettes provide the recommended colors for Inkscape.

+ With these palettes, common colors will appear in the color toolbar of Inkscape.

+ These palettes may work with other design programs, but they are not officially supported.

+ 

+ * link:{attachmentsdir}/palettes/badges_fedora_palette.gpl[Basic color palette]: Required

+ * link:{attachmentsdir}/palettes/badges_extended_palette.gpl[Extended color palette]: Optional (gives you extra choices to work with)

+ 

+ [[install-typeface]]

+ === Install Comfortaa typeface

+ 

+ Badges with text use the Comfortaa typeface.

+ The Comfortaa typeface is used across the Fedora community.

+ Install the typeface so it is available in your design program.

+ _Note_: If you use Fedora, the font may already be installed.

+ 

+ * link:{attachmentsdir}/typeface/comfortaa.zip[Comfortaa typeface]

+ 

+ 

+ [[badge-template-assets]]

+ == Download Badge template assets

+ 

+ Different Fedora Badges templates are available to choose from.

+ Templates are organized in different categories below.

+ 

+ [[badge-shapes]]

+ === Badge shapes

+ 

+ All Fedora Badges have a common shape.

+ Some have different color rings depending on the type of badge (see link:{attachmentsdir}/fedora-badges-style-guide.pdf[Fedora Badges Style Guide]).

+ Not sure what template to use?

+ Ask for help in a Fedora Badges ticket and a designer will help you choose.

+ 

+ * link:{attachmentsdir}/templates/community-template.svg[Community template]

+ * link:{attachmentsdir}/templates/content-learning-template.svg[Content template]

+ * link:{attachmentsdir}/templates/development-template.svg[Development template]

+ * link:{attachmentsdir}/templates/events-template.svg[Events template]

+ * link:{attachmentsdir}/templates/miscellaneous-template.svg[Miscellaneous template]

+ * link:{attachmentsdir}/templates/quality-template.svg[Quality Assurance template]

+ 

+ [[content-templates]]

+ === Content templates

+ 

+ Content templates are common patterns or content used across many badges.

+ The Badges team encourages using these templates where possible.

+ It helps maintain a consistent theme across the Badges site.

+ 

+ * link:{attachmentsdir}/content/backgrounds.svg[Backgrounds template]: Different backgrounds to use for badge designs

+ * link:{attachmentsdir}/content/badge_graphics.svg[Misc. graphics]: Random icons and patterns

+ * link:{attachmentsdir}/content/badgers.svg[Badger templates]: Example badgers to reuse

+ * link:{attachmentsdir}/content/pandas.svg[Panda templates]: Example pandas to reuse

+ 

+ [[tutorial-content]]

+ === Tutorial content

+ 

+ Tutorial content are pre-created, individual designs to help you design a Fedora Badge.

+ Tutorial content was created for other badges, but can be reused in future designs.

+ If you want to try out a new design, try using these to create your ideas!

+ 

+ * link:{attachmentsdir}/tutorial-content/bike.svg[Bicycle] (with no rider)

+ * link:{attachmentsdir}/tutorial-content/hatchling.svg[Package hatching from egg]

+ * link:{attachmentsdir}/tutorial-content/package.svg[Package icon]

+ * link:{attachmentsdir}/tutorial-content/panda.svg[Full-sized panda] (from panda riding bike)

Summary

Add design assets to this Pagure repository, add new doc page explaining how to make a Fedora Badge

Background

Design templates and resources are hard to find. There is not a clear, single source of information on how to design a Fedora Badge. Many new designers reuse patterns or designs from other badges, some of which don't meet current standards. This PR addresses the need for more documentation in the design part of Badges and also revives some of the existing templates and resources to make them more visible.

Details

This PR adds new documentation to the docs.fp.o site about how to design a badge. It makes the existing design resources and @riecatnor's style guide in #528 available on the docs site. Additionally, it adds context to some of the existing resources with specific instructions on how to use them. The README also gets an update and links out to these new resources too.

A screenshot of what the page says / renders like is at the bottom.

Outcome

More badges by other designers that meet standards and more visibility of existing resources to create consistent themes / messaging around Badges design

Screenshot_of_How_to_make_a_Fedora_badge_docs_page.png

Pull-Request has been merged by sayanchowdhury

3 years ago

@jflory7 Also looks good to me. I think it would likely be good to have something that describes the onboarding process for new designers as well (e.g. signing up for all the accounts, where to find tickets, what the timeline for response is, etc...)

Maybe that's for something different or to do later, but it would be helpful I think.

Also, is there a definitive list of badges that exist and are still awarded (the svg files and what they are) anywhere? That would also be a helpful resource.

@riecatnor 's anatomy of a badge is wonderful!

Metadata
Changes Summary 21
+33 -25
file changed
README.md
+5244
file added
docs/modules/ROOT/assets/attachments/content/backgrounds.svg
+9941
file added
docs/modules/ROOT/assets/attachments/content/badge_graphics.svg
+3540
file added
docs/modules/ROOT/assets/attachments/content/badgers.svg
+2862
file added
docs/modules/ROOT/assets/attachments/content/pandas.svg
+0
file added
docs/modules/ROOT/assets/attachments/fedora-badges-style-guide.pdf
+28
file added
docs/modules/ROOT/assets/attachments/palettes/badges_extended_palette.gpl
+27
file added
docs/modules/ROOT/assets/attachments/palettes/badges_fedora_palette.gpl
+1763
file added
docs/modules/ROOT/assets/attachments/templates/community-template.svg
+1578
file added
docs/modules/ROOT/assets/attachments/templates/content-learning-template.svg
+2183
file added
docs/modules/ROOT/assets/attachments/templates/development-template.svg
+1578
file added
docs/modules/ROOT/assets/attachments/templates/events-template.svg
+1578
file added
docs/modules/ROOT/assets/attachments/templates/miscellaneous-template.svg
+1578
file added
docs/modules/ROOT/assets/attachments/templates/quality-template.svg
+10189
file added
docs/modules/ROOT/assets/attachments/tutorial-content/bike.svg
+17958
file added
docs/modules/ROOT/assets/attachments/tutorial-content/hatchling.svg
+10030
file added
docs/modules/ROOT/assets/attachments/tutorial-content/package.svg
+9900
file added
docs/modules/ROOT/assets/attachments/tutorial-content/panda.svg
+0
file added
docs/modules/ROOT/assets/attachments/typeface/comfortaa.zip
+1 -2
file changed
docs/modules/ROOT/nav.adoc
+103
file added
docs/modules/ROOT/pages/design-badges.adoc