#865 Update Fedora Badges style guide
Opened 11 months ago by riecatnor. Modified 10 months ago

Overview

The Fedora Badges style guide was last updated in 2014, oof! It's time to update the style guide with a look & feel refresh and make sure that all the info is up to date and accurate.

Recommendation

  1. Research Fedora badges: spend time reading the docs [0], reviewing the style guide [1], and perusing the badge index [2].
  2. Sketch 5-10 mockups for a style guide layout. Do not reproduce the entire style guide until a design has been approved to do so, though you are not limited to recreating the same page for all 5-10 mockups.
  3. Drop your sketches on the ticket in PNG format and wait for review.
  4. Incorporate the feedback you receive, and continue to iterate until the design is complete!

[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


Metadata Update from @smeragoel:
- Custom field artwork adjusted to None
- Custom field concept_review_passed adjusted to None
- Issue assigned to lilina

11 months ago

Metadata Update from @smeragoel:
- Assignee reset

11 months ago

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

@smeragoel I'll like to work on this task please.

@smeragoel I would like to work on this task please

@smeragoel i'd like to work on this. thanks

hi @coref @cheeps @siddharth9 @falyne - thanks for your interest on this task, you are all welcome to get started. Looking forward to your drafts!

Hello, where do I drop the sketch of the style guidelines layout? Because it's already in PNG format?
Thanks

@smeragoel would like to work on this, thank you!

@smeragoel please I would like to work on this.

@smeragoel please I would like to work on this issue.

i have been working on the sketching mockups for style guide layout, i am having difficulty importing the fedora color palette. i have created a file with the extension .gpl and saved in the palette folder and have restarted inkscape but still can't find the Color palette. Any help please

@smeragoel please I would like to work on this issue. Waiting for response

Anyone who is waiting for a response, feel free to begin work on this task!

Hi @cheeps and @coref thanks for starting work here. One suggestion I would make for anyone working on this is to take a look at the updated brand that is being worked on for Fedora here:
https://discussion.fedoraproject.org/t/fedora-workstation-front-page-revamp-first-cut-looking-for-feedback/37169
https://design.penpot.app/#/view/d24b8550-780f-11ec-b805-69e39b8fc2b7?page-id=d994e860-780f-11ec-b805-69e39b8fc2b7&section=interactions&index=0&share-id=7959a5c0-94c1-11ec-bd38-efdb6fa63305
I think it would great to align this style guide that are at least reminiscent of those new designs.

@cheeps you are correct this is what we mean by sketches- though I would suggest exploring more design concepts and layouts! A couple notes:
- Make sure to use the new fedora logo
- Your table of contents pages feel like the text is randomly placed. Play around with that, add some graphic elements, move things around etc
- The idea of using title pages in between is nice, but I am not sure it is doing much now. Maybe you could add in a short description of what will be covered and also a badge design?
- The welcome page has a similar feeling with the text- try playing around with it

Hi @coref A couple notes for you:
- Make sure to use the new fedora logo throughout. I don't think the watermark logos are working as they are, though I am not opposed to the idea entirely. Try playing with placement and sizes.
- I think we can avoid black in this design- the old style guide was designed with solely Fedora colors. Make sure to stick to those colors for all your design elements.
- I like the different shapes you are playing with through out, but I think you could push them towards the new Fedora brand stuff I shared earlier in this comment.

Thanks and I look forward to seeing your next versions :D

@falyne let us know if you are still having issue with the palette files in the Badges chat, we can provide quicker/easier support in that channel. Thanks!

@smeragoel , @riecatnor would like to work on this, thank you!

Hello @ifeanyinoel! This is a very good start. I think you have a very good grip on the direction of the visual aesthetic.
- I like the page numbering style in the second option more, because it's more readable. In the first option, you can experiment with different shapes/size/colour to improve readability of the numbers.
- I think only the white/new fedora blue logo should be used.
- I'd suggest you to experiment more with different layouts just to push the envelope a bit.

Thanks to @riecatnor for inputs :D

Excited to see your next iteration!

Please can someone help me understand what is supposed to be done on this issue?

Hello @ifeanyinoel! This is a very good start. I think you have a very good grip on the direction of the visual aesthetic.
- I like the page numbering style in the second option more, because it's more readable. In the first option, you can experiment with different shapes/size/colour to improve readability of the numbers.
- I think only the white/new fedora blue logo should be used.
- I'd suggest you to experiment more with different layouts just to push the envelope a bit.

Thanks to @riecatnor for inputs :D

Excited to see your next iteration!

Thanks so much for your feedback, I know it's a lot to deal with from all of us so I appreciate the time taken. I'm glad you liked the design direction, I really enjoyed working on this and trying to put a modern spin on it. I'll make the corrections/adjustments and revert as soon as possible.

Best Regards.

@riecatnor @smeragoel Could you please tell me how can I take pictures (e.g. on 2.a, 2.b pages) from the original style guide (pdf file) to use on Inkscape? Thanks!

@riecatnor sorry I will be not working on this issue .by mistake I Commented on this ticket

Please kindly review my updates. Thanks

Hi everyone, thank you for all the work here! I will provide reviews below.

@ifeanyinoel nice work :) Some notes:
- I think I am leaning towards sample 2. I like how you've used the new Fedora blue and the aesthetic as well with the gradients.
- The first page - I think the watermark, mixed with the badges, mixed with the gradient mark in the background is getting a little confusing. I would suggest removing one of those elements or playing our with the placement to help make that less confusing
- For the in between pages, I would recommend playing with the colors/size of the number/logo object you have. Try using a white with a blue three. Try a version where you remove the logo object and just use the number as well. Line it up with the other text on the page somehow to make it feel grounded.
- I see you are using that dark blue throughout for the page numbering. When that is the darkest thing on the page, it sticks out. Try a different color/solution for this.

Hi @lilina I think this is a great start! I would try drafting some of these in a vector graphics program and uploading them here.

Hi @falyne Some recommendations:
- Make sure you aren't skewing the text, logos, or badge art. I can see that the text is condensed in some places and not in others.
- Add more space in between things. Right now your pages are very crowded with information.

Hi @injialiyeva Nice start! Some recommendations:
- I like that you are playing with gradients, but I think they might be piling up, especially on the formatting page- try simplifying.
- You are using a mix of formatting, some things are center, some are left aligned. Make sure that your text falls into sort of a grid, where things are lining up and you use the same "rules" throughout.

Hi @coref nice improvements! Some notes:
- Make sure you are using the fedora logo as is, it should not be edited beyond changing the color. Do not add strokes and only use white or the Fedora logo color for this.
- Try to align your text and objects throughout. Things seem to be floating randomly
- The honeycomb shape isn't bad, but I think since we are using the logo for the badge designs, you could use the fedora logo shape for this.. I would use less of them as well, making variations on the sizes and placement.
- for the darker concepts, I would probably tone that down some, the elements are blending together. For example on the "outlines" page the blue titles are blending into the background

Hi @susrita thanks for starting work here. Recommendations:
- What typeface are you using? For badges we can use comfortaa, but we try to use Montserrat or Open sans for our Fedora designs
- I like how you are playing with shapes on the cover, but I think it is a bit busy. I would try simplifying this some. I would recommend similar for your "hello!" page as well- maybe try using the fedora logo as a motif throughout

Looking forward to the next drafts!

Hi everyone, thank you for all the work here! I will provide reviews below.

@ifeanyinoel nice work :) Some notes:
- I think I am leaning towards sample 2. I like how you've used the new Fedora blue and the aesthetic as well with the gradients.
- The first page - I think the watermark, mixed with the badges, mixed with the gradient mark in the background is getting a little confusing. I would suggest removing one of those elements or playing our with the placement to help make that less confusing
- For the in between pages, I would recommend playing with the colors/size of the number/logo object you have. Try using a white with a blue three. Try a version where you remove the logo object and just use the number as well. Line it up with the other text on the page somehow to make it feel grounded.
- I see you are using that dark blue throughout for the page numbering. When that is the darkest thing on the page, it sticks out. Try a different color/solution for this.

Hi @lilina I think this is a great start! I would try drafting some of these in a vector graphics program and uploading them here.

Hi @falyne Some recommendations:
- Make sure you aren't skewing the text, logos, or badge art. I can see that the text is condensed in some places and not in others.
- Add more space in between things. Right now your pages are very crowded with information.

Hi @injialiyeva Nice start! Some recommendations:
- I like that you are playing with gradients, but I think they might be piling up, especially on the formatting page- try simplifying.
- You are using a mix of formatting, some things are center, some are left aligned. Make sure that your text falls into sort of a grid, where things are lining up and you use the same "rules" throughout.

Hi @coref nice improvements! Some notes:
- Make sure you are using the fedora logo as is, it should not be edited beyond changing the color. Do not add strokes and only use white or the Fedora logo color for this.
- Try to align your text and objects throughout. Things seem to be floating randomly
- The honeycomb shape isn't bad, but I think since we are using the logo for the badge designs, you could use the fedora logo shape for this.. I would use less of them as well, making variations on the sizes and placement.
- for the darker concepts, I would probably tone that down some, the elements are blending together. For example on the "outlines" page the blue titles are blending into the background

Hi @susrita thanks for starting work here. Recommendations:
- What typeface are you using? For badges we can use comfortaa, but we try to use Montserrat or Open sans for our Fedora designs
- I like how you are playing with shapes on the cover, but I think it is a bit busy. I would try simplifying this some. I would recommend similar for your "hello!" page as well- maybe try using the fedora logo as a motif throughout

Looking forward to the next drafts!

Hi, thank you for the recommendations, @riecatnor. I have some questions about them.
- What do you mean by gradients piling up? Do you mean they increase in intensity?
- Can you please show centered things? Because I tried to make all of them left-aligned, and don't know which ones you refer as centered.
I see on the formatting page the grid issue. Thank you for pointing that out.

Hi @riecatnor I love the direction the design guide update has been taking, and how we are adding to the previous style guide for revamp. I was doing some research about how style guides are made and I saw how the guides have been upgraded by addition of more functional components. Examples of some would be - hyperlinking inside the guide at say contents or even links added to external pages for easy navigation, interactive guides deployed via web apps that permit exploring designs and palettes, dark, light and color blindness friendly palettes, QR codes to resource repositories and tutorials, dynamic components that allow guide updates at developer level. I particularly liked the concepts I enlisted, and linking pages so that contents are clickable is a super easy implementation. If you like any of these concepts or in case they are relevant, perhaps we can do more than layout updation. Links can be added on Adobe itself, and a functional prototype can be deployed on Figma. Not sure if this is relevant to the style guide at Fedora, but wanted to share some interesting concepts I came across.
This is fairly secondary to designing in the first place, so apologies :D

Hi @injialiyeva I sent some messages to you on Element to help, please let me know if you have further questions!

Hi @anoushkad thank you for sharing your research! I really like this idea, and I have been discussing with @smeragoel about making a design library on the Fedora Design teams penpot. Maybe you would like to look into that tool some more to see what we can do? I am not sure how Figma is licensed, but we don't use Adobe products to design in Fedora. There is an exception for applicants to show off their current skill sets, we will teach people how to use inkscape and other open source tools during the internship- but we are also open to teaching anyone who wants to learn :)

@riecatnor thanks so much for the review. Making adjustments right now. Will re-upload shortly.

Login to comment on this ticket.

Metadata
Attachments 28
Attached 11 months ago View Comment
Attached 10 months ago View Comment
Attached 10 months ago View Comment
Attached 10 months ago View Comment
Attached 10 months ago View Comment
Attached 10 months ago View Comment
Attached 10 months ago View Comment
Attached 10 months ago View Comment
Attached 10 months ago View Comment
Attached 10 months ago View Comment
Attached 10 months ago View Comment
Attached 10 months ago View Comment
Attached 10 months ago View Comment
Attached 10 months ago View Comment