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.
[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
Metadata Update from @smeragoel: - Assignee reset
@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.
@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 I would like to work on this.
@smeragoel would like to work on this, thank you!
@smeragoel please I would like to work on this.
<img alt="Fedora_style_guide_template_one.png" src="/fedora-badges/issue/raw/files/edda18bee080303d1cdfbb8a1ea4a062df59ace1509ec6dc01568fd1a3b558a4-Fedora_style_guide_template_one.png" /><img alt="Fedora_style_guide_template_two.png" src="/fedora-badges/issue/raw/files/2161904ed4903348aa0b16bee8ba9c78936ef00fb788f8bcb5423fb07b89e987-Fedora_style_guide_template_two.png" />
Here I did 2 styles for the first two pages on from the current style guide. @smeragoel Kindly help look through it. Thank you very much. Also, I would like to confirm; Is this what was meant by sketches or did I get it wrong?
I redo the intro in two different style and the other style design layout for certain categories I picked randomly and given them different style layout. Hope I was on track on this one. Thanks @smeragoel
<img alt="Fedora_MKup_Style_Guide.png" src="/fedora-badges/issue/raw/files/d1b732744756411ac9d3e2b78df81c6b88f81e315bf9dbfddc681b976c93415e-Fedora_MKup_Style_Guide.png" /><img alt="Front-Page.png" src="/fedora-badges/issue/raw/files/7565d9dc3deb052b4d207e46189cba3b1904686f9be229b16a5a3e8e683ac23c-Front-Page.png" /><img alt="new4.png" src="/fedora-badges/issue/raw/files/ae616ed5266d53c4c24cf521fcf3121fc9d89065a8a6bf3f398da2cfdf2c72e7-new4.png" /><img alt="Style_2.png" src="/fedora-badges/issue/raw/files/3b7067f81ff3964e717ca26646915ed05ad12d5443ffdf2253d47632c2fbc0ce-Style_2.png" /><img alt="Style_3.png" src="/fedora-badges/issue/raw/files/614f5428e4a4ea5fdb483ac3040a9fe23fec4a6cdd3b4448d0b68d8aaf9aedcb-Style_3.png" /><img alt="Style_5.png" src="/fedora-badges/issue/raw/files/e95ae39d0a40c0d02b54c2029fe8d1f52340c31b5002e26c4d96cb2ca66306f1-Style_5.png" /><img alt="Style_6.png" src="/fedora-badges/issue/raw/files/af3ff508f3873b5ff9667d1b8e5623def9d2ffa6fe2071b62d1832928ab66b20-Style_6.png" />
@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§ion=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!
<img alt="Fedora_Badge_Style_Guide_-_Sample_2.png" src="/fedora-badges/issue/raw/files/bd2f92c7e2cc0c20bde2b1ad2bf3e813d25bfa979f302fb9515449295390f886-Fedora_Badge_Style_Guide_-_Sample_2.png" /><img alt="Fedora_Badge_Style_Guide_-_Sample_1.png" src="/fedora-badges/issue/raw/files/9160c346f44cad0d063f0dbfc7ca4a5c457486cfd1de5018c1bdb287f4d4eb13-Fedora_Badge_Style_Guide_-_Sample_1.png" />
I've worked on two samples for the badge style guide. @smeragoel @riecatnor if you could please review. 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!
<img alt="Fedora_Badge_Style_Guide_-_Sample_2.png" src="/fedora-badges/issue/raw/files/a1b733e00dc39788cf3950b8371fcb6f82c2a4b81e8d723bb980565e0d84d177-Fedora_Badge_Style_Guide_-_Sample_2.png" /> <img alt="Fedora_Badge_Style_Guide_-_Sample_1.png" src="/fedora-badges/issue/raw/files/692cc63a9c25bbee7f6a979c75d3b1108b296aa6c131054792011539412704f1-Fedora_Badge_Style_Guide_-_Sample_1.png" />
Hello @smeragoel @riecatnor I've made some corrections to the designs, played around with the shapes, layout, a bit as well. Please let me know what you think. Thanks.
Hi @smeragoel I have sketched out the style layout and please review. Thank you!
<img alt="2022-04-03_20-13.jpeg" src="/fedora-badges/issue/raw/files/216b7dd1e0a1a96ea4de675c802680ec4d5f01f20adba27f940f1997c7f1f7b9-2022-04-03_20-13.jpeg" />
hi @riecatnor i finally fixed the issue with the palette find below sample mockup for the fedora style guide. Hope to get a review soon. <img alt="fedora-style-guide.png" src="/fedora-badges/issue/raw/files/8e4924056758a0759887b5aa3cc17a0e56bc0fd401b3cf1a2afb922ee95c16f8-fedora-style-guide.png" /> <img alt="Fedora-badges-style-guide-one.png" src="/fedora-badges/issue/raw/files/65a5723e94e11952736ed618c4a6b82dd53b0d8ecfb45c9bcd833e9934c0a18d-Fedora-badges-style-guide-one.png" /> <img alt="fedora-badges-style-guide-two.png" src="/fedora-badges/issue/raw/files/cc645cefe3fd2b0a7945987ce0812d332c2fa505fd886007e9703f8a4549395b-fedora-badges-style-guide-two.png" /> <img alt="fedora-style-guide-three_2.png" src="/fedora-badges/issue/raw/files/ceecd5fdc1a4c28bfd720323fd4fbb295e3349a08e4bebe957473d6a719fd60a-fedora-style-guide-three_2.png" /> <img alt="fedors-style-guide-four.png" src="/fedora-badges/issue/raw/files/7f9a6e7946c71a80e38905990696cd851428a78fceeb7a4be4ffe067b2c53fa8-fedors-style-guide-four.png" />
@riecatnor sorry I will be not working on this issue .by mistake I Commented on this ticket
<img alt="fedora-badge-guide-style-by-inji_2.png" src="/fedora-badges/issue/raw/files/d501b0bc95b4828773d04e8d183072ce836a877eec784047908fbbc0eb7ef708-fedora-badge-guide-style-by-inji_2.png" /><img alt="fedora-badge-guide-style-by-inji_3.png" src="/fedora-badges/issue/raw/files/a46e71d70cf921ac60e3689095dff8ebd32b7ad85376f51710b2a665a9b7f2e6-fedora-badge-guide-style-by-inji_3.png" /><img alt="fedora-badge-guide-style-by-inji.png" src="/fedora-badges/issue/raw/files/286e7c6e79c02cb382cf9e7136083b4e486821d65238a5cd315f0f005d777966-fedora-badge-guide-style-by-inji.png" />
Hi @smeragoel , @riecatnor ! I've worked on these samples for the badge style guide. I'd be happy if you could review it. Thank you!
<img alt="fed_2-20220406222554-page1.png" src="/fedora-badges/issue/raw/files/380479ef3803c85631c0e0b15f7f13392778ab676eb800f5a33694950211a99e-fed_2-20220406222554-page1.png" /> <img alt="fed_2-20220406222554-page2.png" src="/fedora-badges/issue/raw/files/553a2f689675300d6478883aefb009668831ccc2b6c75288624a2487990706cc-fed_2-20220406222554-page2.png" /> <img alt="fed_2-20220406222554-page3.png" src="/fedora-badges/issue/raw/files/4daa943ca49bdf0c20a42b87f09add45427c34f5d4d35c5f5f48f7e832c4784a-fed_2-20220406222554-page3.png" /> <img alt="fed_1-20220406222324-page1.png" src="/fedora-badges/issue/raw/files/d1fbbd6015fb8a1c8a222af6fd96a2f952f72770102f8093b293f9dcf0069a85-fed_1-20220406222324-page1.png" /> <img alt="fed_1-20220406222324-page2.png" src="/fedora-badges/issue/raw/files/5e8b66c53b4663d2d6e7abef091f4bc27598971f4befde6f53768cfe41facb72-fed_1-20220406222324-page2.png" /> <img alt="fed_1-20220406222324-page3.png" src="/fedora-badges/issue/raw/files/3657eb7984e101cd8a8c7834d56d89305fe6550ea0218d0d09f6dddbbc033fc5-fed_1-20220406222324-page3.png" />
Please kindly review my updates. Thanks
Hello @smeragoel , @riecatnor. I am Susrita Chatterjee, an outreachy applicant. I have designed first two pages of style guide. Please review my designs. <img alt="Cover_Page.png" src="/fedora-badges/issue/raw/files/5094ed57e15a932d6ba24b5fc10afb7f9bd04411cfe1687168e02b498b8cf7df-Cover_Page.png" /><img alt="Home_Page.png" src="/fedora-badges/issue/raw/files/307a48546f53f61ee75000906562ad573b3d7a1a4eab0608b1d33af0bde27c6f-Home_Page.png" />
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.
Hello @riecatnor , so I made two variants of sample 2 since you mentioned that being your preferred option. I made adjustments to clean it up based on your notes as well. Please let me know what you think.
<img alt="Fedora_style_guide_1a.png" src="/fedora-badges/issue/raw/files/313b5573be088fe5ae161ac142e9e9790d44e1d538d0805bd751e3e66b1621f2-Fedora_style_guide_1a.png" /> <img alt="Fedora_style_guide_1b.png" src="/fedora-badges/issue/raw/files/ea8e51ab1ba7c76eca31b9934c36850091351c5b241d03bc7f9df070426b52d2-Fedora_style_guide_1b.png" />
hi @riecatnor i made some changes based on the recommendations above. let me get what you think. <img alt="style_guide11.png" src="/fedora-badges/issue/raw/files/60c2578d75293c24d8046e4c451dd3921c66c7215e509bb77326488e06b53d75-style_guide11.png" /> <img alt="style_guide4.png" src="/fedora-badges/issue/raw/files/e5c74879fc102f4f1484d33b58596e697454dcd22431394203c960d261766276-style_guide4.png" /> <img alt="style_guide22.png" src="/fedora-badges/issue/raw/files/6c720f9a3033b265f6922967c6878e15bb575409133d386d9b4e41e8b5352c10-style_guide22.png" /> <img alt="formating11.png" src="/fedora-badges/issue/raw/files/e10a4576e312d68c2d40dae074eb3286e3c5523a205ea84e817780215103650b-formating11.png" /> <img alt="categories1.png" src="/fedora-badges/issue/raw/files/37eaffd04988dfa3dfbd83c422f217863ece29c04600fd4620b523aded022a6a-categories1.png" />
Hey @riecatnor, I made this template. Please review it once.
<img alt="1.png" src="/fedora-badges/issue/raw/files/9c8f21efb5646fb1ac5b9ef280dc0f9ddb4d187cd3b6735d08bb1fae52a09b98-1.png" /><img alt="2.png" src="/fedora-badges/issue/raw/files/abbf6e73c10f488cde0c9ee73ca7784e34ee89d8b4a1b0c63e366eff807e0024-2.png" /><img alt="3.png" src="/fedora-badges/issue/raw/files/38b8dd77df2f56a287b9e67a4e8b2a90e6bb715751662696abf2cd19f6c43e3b-3.png" /><img alt="4.png" src="/fedora-badges/issue/raw/files/67e24f8dadebd6a1be7cc4af6c6cabb05ca979fe95061582fa7a8989e1574aca-4.png" /> <img alt="5.png" src="/fedora-badges/issue/raw/files/c6bc4cdb46bb27eedc8c3e7427cd48056101a58843ab086ddb9a3004f1ce7730-5.png" />
Metadata Update from @riecatnor: - Issue untagged with: outreachy-2023
Log in to comment on this ticket.