fedora-badges

#667 [docs] Add Fedora Badges design resources / how to design a badge

Merged 5 years ago by sayanchowdhury. Opened 5 years ago by jflory7.

add/badges-resources into master

Update README with more repo context, add links to important resources

Justin W. Flory • 5 years ago

6b902d5

[docs] Add Fedora Badges design resources / how to design a badge

Justin W. Flory • 5 years ago

cecbcc9

README.md

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/).`

docs/modules/ROOT/assets/attachments/content/backgrounds.svg

file added

+5244

The added file is too large to be shown here, see it at: docs/modules/ROOT/assets/attachments/content/backgrounds.svg

docs/modules/ROOT/assets/attachments/content/badge_graphics.svg

file added

+9941

The added file is too large to be shown here, see it at: docs/modules/ROOT/assets/attachments/content/badge_graphics.svg

docs/modules/ROOT/assets/attachments/content/badgers.svg

file added

+3540

The added file is too large to be shown here, see it at: docs/modules/ROOT/assets/attachments/content/badgers.svg

docs/modules/ROOT/assets/attachments/content/pandas.svg

file added

+2862

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

docs/modules/ROOT/assets/attachments/fedora-badges-style-guide.pdf

file added

empty or binary file added

docs/modules/ROOT/assets/attachments/palettes/badges_extended_palette.gpl

file added

+28

		`@@ -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`

docs/modules/ROOT/assets/attachments/palettes/badges_fedora_palette.gpl

file added

+27

		`@@ -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`

docs/modules/ROOT/assets/attachments/templates/community-template.svg

file added

+1763

The added file is too large to be shown here, see it at: docs/modules/ROOT/assets/attachments/templates/community-template.svg

docs/modules/ROOT/assets/attachments/templates/content-learning-template.svg

file added

+1578

The added file is too large to be shown here, see it at: docs/modules/ROOT/assets/attachments/templates/content-learning-template.svg

docs/modules/ROOT/assets/attachments/templates/development-template.svg

file added

+2183

The added file is too large to be shown here, see it at: docs/modules/ROOT/assets/attachments/templates/development-template.svg

docs/modules/ROOT/assets/attachments/templates/events-template.svg

file added

+1578

The added file is too large to be shown here, see it at: docs/modules/ROOT/assets/attachments/templates/events-template.svg

docs/modules/ROOT/assets/attachments/templates/miscellaneous-template.svg

file added

+1578

The added file is too large to be shown here, see it at: docs/modules/ROOT/assets/attachments/templates/miscellaneous-template.svg

docs/modules/ROOT/assets/attachments/templates/quality-template.svg

file added

+1578

The added file is too large to be shown here, see it at: docs/modules/ROOT/assets/attachments/templates/quality-template.svg

docs/modules/ROOT/assets/attachments/tutorial-content/bike.svg

file added

+10189

The added file is too large to be shown here, see it at: docs/modules/ROOT/assets/attachments/tutorial-content/bike.svg

docs/modules/ROOT/assets/attachments/tutorial-content/hatchling.svg

file added

+17958

The added file is too large to be shown here, see it at: docs/modules/ROOT/assets/attachments/tutorial-content/hatchling.svg

docs/modules/ROOT/assets/attachments/tutorial-content/package.svg

file added

+10030

The added file is too large to be shown here, see it at: docs/modules/ROOT/assets/attachments/tutorial-content/package.svg

docs/modules/ROOT/assets/attachments/tutorial-content/panda.svg

file added

+9900

The added file is too large to be shown here, see it at: docs/modules/ROOT/assets/attachments/tutorial-content/panda.svg

docs/modules/ROOT/assets/attachments/typeface/comfortaa.zip

file added

empty or binary file added

docs/modules/ROOT/nav.adoc

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]`

docs/modules/ROOT/pages/design-badges.adoc

file added

+103

		`@@ -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)`

jflory7 commented 5 years ago

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

sayanchowdhury commented 5 years ago

Looks good to me.

Pull-Request has been merged by sayanchowdhury

5 years ago

kylerconway commented 5 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!