Learn more about these different git repos.
Other Git URLs
The Fedora Council is working on a yearly Fedora contributor survey [1,2]. We want to capture as many responses as possible and one of the ways we want to promote the survey is by adding a banner onto a variety of pages that our contributors frequent. Below is a list of websites that we are thinking about adding this to, give or take, for the duration of the when the survey will be open.
discussion - https://discussion.fedoraproject.org/ community blog - https://communityblog.fedoraproject.org/ mailing list (hyperkitty) - https://lists.fedorahosted.org/archives/ account system - https://accounts.fedoraproject.org/ start.fedoraproject.org - https://start.fedoraproject.org/ docs.fedoraproject.org - https://docs.fedoraproject.org/en-US/docs/ fedora wiki - https://fedoraproject.org/wiki/Fedora_Project_Wiki
[1] https://pagure.io/Fedora-Council/tickets/issue/327 [2] https://hackmd.io/MqPUtYrnSOesig7hJ9RPQg?view#Fedora-Community-Survey
To help assist in making the Fedora contributor survey as successful as possible. To promote the Fedora Design Team's work & skills!
Simple, clean, banner design with the new Fedora logo and the text below(subject to change still). I think it should be short and should not be intrusive to the sites overall. It might be nice to use a Fedora blue for the background to help it stand out? There is also a badge series design in the works for "Survey Takers"[1]. Open to ideas but it should fit the look & feel of the Fedora websites aesthetic(the modern ones, not the wiki lol).
"Help enrich the Fedora community by completing this Contributor Survey. Claim your Survey Taker badge at the end!"
[1] https://pagure.io/fedora-badges/issue/800
Metadata Update from @riecatnor: - Issue tagged with: outreachy-2021
Maybe add some short catchy slogan before that. For example:
Tell us about you! Help enrich the Fedora community by completing this Contributor Survey. Claim your Survey Taker badge at the end!
Here are some drafts I came up with, one uses the slogan @bookwar provided, and one uses the plain text by @riecatnor. I also used the badge design from the Survey Taker Badge ticket.
I've proofed the design colors on colorblindness simulations as well, to make sure it stays legible for all audiences.
<img alt="Survey_Banner_With_Slogan.png" src="/design/issue/raw/files/c1ee8968ec3c624ec776f5cd95e646a2f478a2c125aef573b5f56f4ba584608d-Survey_Banner_With_Slogan.png" /><img alt="Survey_Banner.png" src="/design/issue/raw/files/2b5acf3f6adc6042804f36a28237c58bfb61b3b6a0f7a987370924eec9f05a7b-Survey_Banner.png" />
Hi @leena_harani thanks for starting work on this! A couple notes for this task: - The banner should be very short in height, and wide in width. It shouldn't take up too much space.. I sketched this real quick to give you an idea: <img alt="unnamed_26.jpg" src="/design/issue/raw/files/cd3ef5bb536cc2716ab8006448f8913e03289ed42f6b055b7c6990ac2d22d3ab-unnamed_26.jpg" /> - I don't think the panda is going to fit in here? And the survey taker badge is not complete, so let's leave the panda out for now. Looking forward to the redesign :)
Checking through the list of people it was targeted for and the goal of the survey. The call to action was made clear and legible to make people perform the desired action. Attached are two designs. Noticed the survey taker badge is still being worked on, changes would be effected as soon as it reflect on #800
<img alt="website_banner_1_1.png" src="/design/issue/raw/files/0ff8315de7b99b8fc98bf1b27c340a033c992b74b3ed05b35579c9bb34b22b42-website_banner_1_1.png" /> <img alt="Website_banner_-2_1.png" src="/design/issue/raw/files/8a20628a57d99989f832089ccae2075794505e0425a85753acfaa1700c9f5975-Website_banner_-2_1.png" />
Thank you for the note @riecatnor I get a clearer image of the banner size and placement now, surely the survey taker badge can not fit. Will work on it!
Here are updated images, kindly review. Thanks
<img alt="website_banner_8_2.png" src="/design/issue/raw/files/df4aece2884e5c820cbf69f73c60436ba2acf033990292f0ed33b837ce83da56-website_banner_8_2.png" /> <img alt="website_banner_5.png" src="/design/issue/raw/files/1c107cb6cfc32d2e2d12e7ec5e953f1fdea3eae4598ccb48e1f9f6efcde0b625-website_banner_5.png" />
Here are my revised designs
Let me know which one's dimensions are the best.
<img alt="Survey_Banner_2nd_Draft_V2.png" src="/design/issue/raw/files/894cd8b257894a4406e6f592860551e6e1e8e4410b9b4e4d5609d92addb4daf1-Survey_Banner_2nd_Draft_V2.png" /><img alt="Survey_Banner_2nd_Draft.png" src="/design/issue/raw/files/918304ef3ea32ef284b81d534ba43994c555cb5d5cfbe53869a3ecaf7809d791-Survey_Banner_2nd_Draft.png" />
Hey @riecatnor came up with something for this issue. What do you think?
<img alt="survey_banner.png" src="/design/issue/raw/files/2977c75ccd09eeb9ab65301dffd553785f5ad6c0c552f793b6090b073a1598ec-survey_banner.png" />
Hey @riecatnor I came up with a design for this issue. Please review it. Thanks!
<img alt="The_Annual_Contributor_Survey.png" src="/design/issue/raw/files/27f7d8a97991cc09dc1e804766068272dde9ef19d3a9ff47e1e432bf96bc7ff9-The_Annual_Contributor_Survey.png" /><img alt="The_Annual_Contributor_Survey.svg" src="/design/issue/raw/files/4341d8e5827964f4d2c4460717a7ee6806af51f5d254cc5040a4577debf7322f-The_Annual_Contributor_Survey.svg" />
Hi everyone! @riecatnor I would like to contribute on this issue, is it okay?
Hi @riecatnor ! Based on your wireframe, I chose the 970 x 90 Large Leaderboard size. I hope this works.
<img alt="banner_draft1.png" src="/design/issue/raw/files/d057485834df8a23d713aeceeb7d570d1229d94db74a5c27cfc7c28afce29ed0-banner_draft1.png" />
@jonekls Hey! Welcome, and yeah you can begin contributing on the issue if you're interested
Full laptop screen view
<img alt="20210414_082957.jpg" src="/design/issue/raw/files/d204a5f07f92f98141f46f3531207602a284c9092d0f164b32ce8562a146eec8-20210414_082957.jpg" /> <img alt="20210414_083125.jpg" src="/design/issue/raw/files/e5a78f1b8e86cb3918855548f6beadcbac336961190541966e04ed1f74b66686-20210414_083125.jpg" /> @media(max-width:500px) <img alt="20210414_083258.jpg" src="/design/issue/raw/files/461de9f0cb5d78aeb5bd6157db93f40b522cefbfe4dc4bf638c8287a7eb9db5a-20210414_083258.jpg" /> <img alt="20210414_083505.jpg" src="/design/issue/raw/files/cf4d794e4fff5e294ad58ecc235382fe7bb9e162409c2dd0dedf73dc752b2852-20210414_083505.jpg" /> Please check out my designs
We can also rearrange the text.
<img alt="20210414_085519.jpg" src="/design/issue/raw/files/a8d7b41d4cd731dad5598e83f38ec8b3d0976a753075d96fbb5cf764ea169c50-20210414_085519.jpg" /> @media(max-width:500px)
<img alt="20210414_085432.jpg" src="/design/issue/raw/files/bfad829a96b5074eda3a188ddbe81a437df20832869a5081d17f4123febaf525-20210414_085432.jpg" />
We can also rearrange the text. <img alt="20210414_085519.jpg" src="/design/issue/raw/files/a8d7b41d4cd731dad5598e83f38ec8b3d0976a753075d96fbb5cf764ea169c50-20210414_085519.jpg" />
<img alt="20210414_085519.jpg" src="/design/issue/raw/files/a8d7b41d4cd731dad5598e83f38ec8b3d0976a753075d96fbb5cf764ea169c50-20210414_085519.jpg" />
Hey @benny I like the designs, just a small suggestion to use Montserrat and Open Sans as your fonts, since those are the ones that the Fedora Guidelines suggest.
@leena_harani thank you. I will do that.
Designed with Monsterrat and Open Sans <img alt="20210414_130231.jpg" src="/design/issue/raw/files/0cdd0b766dd78794c4ecc0e3534f99c4e9c0f3bd5bcd275301d9f5e8b3d1e6ff-20210414_130231.jpg" /> <img alt="20210414_130053.jpg" src="/design/issue/raw/files/9dcaa2f7275d2b6ebac210e142b45fc821e90d7ffde9972eaf4d28946fa2b714-20210414_130053.jpg" />
I also suggest that for connectivity of the sentence the
"Help enrich the Fedora community by completing this Contributor Survey." Can be adjusted to: Tell us about you! "By completing this Contributor Survey to help enrich the Fedora community." Claim your Survey Taker badge at the end!
Hi folks! lots of great work happening here, comments below!
@babsbarokah thanks for starting work on this! You have a better idea with the second round of designs, so I will comment on those. - I think version 5 is looking the best to move forward with - Make the height of the overall design a bit shorter, we want this to be a pretty thin banner - Switch the sizes of the text "Tell us about you!" (make that one bigger) and the text right below it (make that smaller) - Adjust typo in "contributor" - Make your typeface sizes consistent ( use 3 sizes for font max) - The fedora logo has been squooshed :( remember to keep the aspect ration the same. I would re-import the logo file. - I like the idea of highlighting the survey taker badge, but it kind of looks like a button that can be clicked.. try a different shape there
@leena_harani nice work, I am enjoying the slimmer version best. Just a few notes: - I like how you have made the "Survey Taker Badge" pop out by using a different color but it is taking all the attention right now. Perhaps give "Contributor Survey" the same treatment? - The orange color looks a bit dull- is it a fedora color? Maybe try the next lightest version of orange or if it isn't a fedora color, try one of those - lengthen the horizontal line to match with the width of the text on the top line
@dhairya15 your first draft is lookin' good! A few recommendations: - The fedora logo looks fuzzy, make sure to use a correct file for this - Remove "the" to make "Annual Contributor Survey" - Otherwise this looks quite simple and nice, you could try to change some colors on the text to help some things pop out - similar to what @leena_harani is doing with their design. Instead of orange you could try the color from the new fedora logo :)
@vanichitkara nice start! I have some recommendations for you: - Use the new logo for sure :) - I like the arrow concept, though I think you can pull it off a bit more simply. I would make the inner white object a bit smaller. I would remove the white stroke/outline object you have and just use the line tool to create an arrow shape on the right side of the white obect. I would also increase the stroke on this line from what you have now. Does that make sense? - Remove "the" to change to "Annual Contributor Survey" - There is an extra space between "by" and "completing", adjust that to have correct spacing - The blue you are using for the "badge" text is clashing a bit with the blue of the background. Blue seems fine, maybe the new fedora logo blue or something from the fedora pallette?
@sunidhikashyap thanks for starting on this! I have a couple notes for you: - Use the new logo :) - Right now the text about taking the survey is a bit small, I think you might have to enlarge and rearrange the text a bit to make sure that is readable. - The logo, the "tell us about you" text, and the stuff on the right side seem to be kind of randomly spaced. What if you group the logo with the "tell us about you text" to help out with that? it could give you more room on the right to play with the other text as well - The orange looks ok here, a little dull. Is this the fedora orange? Try that if not, or try a lighter version of the orange if it is
Hi @benny thanks for beginning work here :) it is kind of hard to review the designs based on these pictures. Are you able to provide exported files or screenshots instead please? One note: - I am not sure where this cute penguin is coming from but we should use the Fedora logo here :)
Thanks for the feedback @riecatnor ! Does this look better?
<img alt="survey_banner_1.png" src="/design/issue/raw/files/45a61608eb0ceb47a88bb143b98630083c6e678ea2ca0a25ca79c6633a124ccd-survey_banner_1.png" />
Hey @riecatnor! Made some changes based on your suggestions and came up with two different versions of it, hoping to get a feedback on these as well.
<img alt="1.png" src="/design/issue/raw/files/64d792f1c710a21e126933dad20039b2ca2f3d2f6caef30c27ff3608276d817d-1.png" /><img alt="2.png" src="/design/issue/raw/files/4613fd66c3a1d27d4761ccba80985f249d940b34ad15aea6c2a03c3a8b59de6f-2.png" /> <img alt="1.svg" src="/design/issue/raw/files/1ed92d8689623f661d14affd0488a8960341c9cd88eb4df7b3ef79f0cc2d0edd-1.svg" /><img alt="2.svg" src="/design/issue/raw/files/353b22d3567f78d7d2923788eeeceaacbb4dc5f76c8b09fb326773bf8bd597a3-2.svg" />
Hey @riecatnor ! Tried getting rid of the lines and added a gradient. How's this looking?
<img alt="survey_banner_2.png" src="/design/issue/raw/files/498c495f4d46c777dba5f4af59c8d4163132818aabbfb1bdac381ddd81ead300-survey_banner_2.png" />
Forgot to mention, I've used a different badge as a placeholder. Sorry for the back-to-back messaging :(
<img alt="banner_survey.png" src="/design/issue/raw/files/bee427bbe27bd01856e815f76dfb2038423e529fe284e42df7bb3ce7035551e6-banner_survey.png" />
Here, I tried a version for the banner. Waiting for the feedback :))
Adjusted the gradient and removed the line based on Duffy's suggestion, and used a lighter orange as per @riecatnor's suggestion. Also, not sure why the previous orange seemed dull, it was a fedora color indeed. Either way, here's the 3rd draft:
<img alt="Survey_Banner_3rd_Draft.png" src="/design/issue/raw/files/c96cb72327c3eedce56dfd5f89503401717d95c56e4b593234afc3fd3cd6e757-Survey_Banner_3rd_Draft.png" />
Good day @riecatnor Here is what I've done so far. Please comment on it and also, how do i contribute?
<img alt="Website_banner.xcf" src="/design/issue/raw/files/4ade1b40c63b27826d46c65e9dd5fd603d2efa17c98ceda733f5e4a61fe85cfa-Website_banner.xcf" />
@yavnikaa we don't really use purple in the main branding (the fedora design team meeting banners do but the main fedora identity uses the colors posted eaerlier: 3c95b4ff 3c6eb4ff
<img alt="bannerdraft1a.png" src="/design/issue/raw/files/b0391d41d66e4a279ad3c8a4b66df73746b4459be6ebd5149e0f06a7f0715b72-bannerdraft1a.png" /><img alt="bannerdraft1b.png" src="/design/issue/raw/files/aecd87859583237ac6b8627d94942dce0c7fd140f0a314e4cb6089a9ad1e8d12-bannerdraft1b.png" />
a few prelim drafts. Thanks for feedback in advance. not sure which color I'm wanting to stick with on these.
Hey @riecatnor and @duffy here is an updated version of what i did. I removes the sharp points and changed the gradient. Is this better? Or should i make any changes? <img alt="Website_banner.xcf" src="/design/issue/raw/files/fe7f0b8beba472fa4e96ff5049d991f1b76262a07eaccdf86142240cfd63be77-Website_banner.xcf" />
<img alt="Website_banner.xcf" src="/design/issue/raw/files/5b1a3968609705bb823d549db8a9fd2d0475204b4f00a58d956bafbe7e970b0e-Website_banner.xcf" />
@duffy I'll keep that in mind next time and won't use purple so predominantly. Really sorry! Here's the updated version for the banner.
<img alt="banner_surveys_fedora.png" src="/design/issue/raw/files/e55149eb1ba23f11fcb97b429c94c6161eb52cae2048db55131bd1e80f2cdc15-banner_surveys_fedora.png" />
@riecatnor, thanks for the comment. Based on you comment I have designed another one. <img alt="20210416_114815.jpg" src="/design/issue/raw/files/3e25576822e49f2d27a3aac1c4c33d56ff74a474bb9804199f17c74ed5cfbee1-20210416_114815.jpg" /> <img alt="20210416_115022.jpg" src="/design/issue/raw/files/14ca5466352ae0eb07b4ce6f6020d40ed7b0283cd6fd3b4983b20467d8f04284-20210416_115022.jpg" />
<img alt="banneriteration1.png" src="/design/issue/raw/files/676f61af011157376521f00930c4f10ec3aa4865ea30289e83aa19b5ed711328-banneriteration1.png" />
I tried my hands on the banner too, waiting for the feedbacks @riecatnor
<img alt="banneriteration1.png" src="/design/issue/raw/files/f6a66efe2d12bb59b9f2b36d49e4f2593adc835210730db562c1d2ed55feca24-banneriteration1.png" /><img alt="banneriteration2.png" src="/design/issue/raw/files/b36fb0e6f2593cd65598705b92f6f49b82d77b868be32ce2ca26f1d66c82aac6-banneriteration2.png" />
I tried cleaning up the badge background a little
Thank you for the review @riecatnor Made an edit, attached below. <img alt="website_banner_9.png" src="/design/issue/raw/files/964ac2643a567f7f1708a6c1e65730790b2d452ce22d30863d56e203a32028ad-website_banner_9.png" />
I made some changes here. @riecatnor I rearranged the text after enlarging it, as you suggested. I also used a brighter version of the orange. Changed the gradient to as given by @duffy . Also, I changed my layout a little bit to make room for the badge. Also increased the font size of the text.
I hope this one works
<img alt="banner_draft_2.png" src="/design/issue/raw/files/133d02fc335de06a2d8ffce2e537bc5364998f7dd05c9adf9339bbd8e19314ff-banner_draft_2.png" />
I made some further improvements, this is my latest draft.
<img alt="banner_draft_3.png" src="/design/issue/raw/files/7750d99c9c09ceec6e8056ff1e7b5dd6de75cf040f5d3d703e494f79c67f5ac6-banner_draft_3.png" />
Hi Everyone! I made some drafts for the website banner.I tried a more rounded border to make it slightly softer so the banner blended more into the website. What do you think? @riecatnor @duffy
<img alt="contributor_survey_1.png" src="/design/issue/raw/files/0da6bc1a039438a0f684adad6deb9195fdd1db3ad1794de4865bd060488aae4c-contributor_survey_1.png" /> <img alt="contributor_survey_3.png" src="/design/issue/raw/files/6de5215fced55400ce903af26cb7d0307477a4f136f1fa1b2bc163f1789a3e85-contributor_survey_3.png" />
Made some design revision according to the suggestions. Please have a look! <img alt="The_Annual_Contributor_Survey.png" src="/design/issue/raw/files/755e3880a91dc9229aeae2133aa097e62fc6c1510c8d6b2720ea214f591240a8-The_Annual_Contributor_Survey.png" /><img alt="The_Annual_Contributor_Survey.svg" src="/design/issue/raw/files/9ea174c605aa1df85c00dc441ca177e87fa889b29fc22fa7da7f7ccf05d054fc-The_Annual_Contributor_Survey.svg" />
What do you think? @riecatnor.
<img alt="Fedora_survey_banner_design.jpg" src="/design/issue/raw/files/ca0248b99ef9f4bb3853997cb3ba1400ecb87f5d2e07ef0eecb57d79af316060-Fedora_survey_banner_design.jpg" />
<img alt="fedora_banner.png" src="/design/issue/raw/files/0c9bb2702d6dd07debc8fb1a219951de535b606c8cdd66e8f891332014df7a5b-fedora_survey_banner.png" /> This is blue.
I recently got the fedora gradient by @duffy and realised I was doing the gradient all wrong! here's an iteration with the new gradient and some changed structure of the banner:
<img alt="banner.png" src="/design/issue/raw/files/b6d2f05cf7ca8ca91c14c2d6ecabfbbd867979840cb6860fd0f95eb1dfe8070d-banner.png" />
<img alt="banneriteration1.png" src="/design/issue/raw/files/c25966e99e58834d8b40f4828f5b65a08b8f75672acd039ff35b17c5a75df670-banneriteration1.png" />
I added it to the website to show how it will look on it. Looking forward to your feedbacks and iterations <3 , Take care!!
Here's my take on this from the new Fedora logo design POV... I was really inspired by @sunidhikashyap 's approach. I wanted to get out of the business of making a custom logo for the survey, bc I think that complicates things with branding. So this uses a plain Fedora logo, uses the orange lozenge for the call to action of taking the survey, and has a Fedora-style slug at the top to make the whole point clear (make fedora better, together)
<img alt="contributor-survey.png" src="/design/issue/raw/files/9073a2548c72da71a9a15daeda63e3c75d55a2a7d25c4ce692feae2ee8aa6bb4-contributor-survey.png" />
source
<img alt="contributor-survey_logo-scrubbed.svg" src="/design/issue/raw/files/da76a50127507c4706e73329c48379db23939eb8e62e0a97f1443c2609340c34-contributor-survey_logo-scrubbed.svg" />
Thank you @duffy and everyone else who contributed to this ticket! Closing as complete
Metadata Update from @riecatnor: - Issue close_status updated to: Fixed - Issue status updated to: Closed (was: Open)
Log in to comment on this ticket.