#438 Redesign Anaconda install banners
Closed: Fixed 5 years ago Opened 7 years ago by pidgornyy.

  • Deadline / Release milestone: none

  • Description:
    The Anaconda banners are almost the first thing a new user sees when he decides to try Fedora. Currently the banners don't look very welcoming, but rather ugly compared to the rest of Fedora's beautiful artwork (and compared to banners from other distributions). No offence against their creator(s), but the following things should really be improved:

  • No overuse of the Fedora logo font, Comfortaa. Comfortaa may look good for headings, but it's used for all the text on the banners, which looks unprofessional and simply ugly.
  • No sudden colour change in the middle of the text, like on the make-fedora-better banner. Either add outline or shadows to the text, or don't allow text to overlap with pictures.
  • No inconsistent distances between lines of text (present on all banners).
  • No inconsistent placing of images (compare the LibreOffice logo and the Rhythmbox loudspeaker).
  • No URLs starting with a capital letter.
  • Replace Beefy with something (the current release's logo?).
  • (Maybe generate the banners programmatically depending on locale? Currently the text is embedded into the images, which makes it a bit difficult to edit it for inexperienced contributors).

Ever since these banners appeared in Anaconda in Fedora 19, I was hoping they'd be changed soon, but see no progress yet. Other distributions make good use of the banners in their installation, informing the user about new features in the release, what software is being installed onto the new system, how to navigate the desktop environment (the banners appear at the very end of the installation process, when we already know what desktop environment was selected for installation), where to get help (this we have already) and other little tips regarding the distribution. I will be attaching installer banners from Ubuntu and Xubuntu.

We should agree on a design pattern that is used in all banners. It includes a fixed font, font size, line distance and margins. I will attach my proposal, but keep in mind that I am not a designer. Please suggest something, too.

Another consideration would be to make the banners larger. There is a lot of wasted space on the installation progress screen. Larger banners (similar to *buntu) would allow us to put more information into them, for example screenshots of some popular software that is bundled with the Fedora image that is currently being installed.

Steps to Reproduce:
1. Start the Fedora installation process
2. Complete all required steps and hit "Begin installation"
3. The banners start to appear at the bottom of the screen

Benefit for Fedora:
Improve aesthetics of Fedora, pleasing the eyes of all users. Newcomers are more likely to like Fedora when they are greeted with beautiful banners in the first few minutes they spend with Fedora.


A screenshot of current Anaconda banners
rnotes.png

Additional info:
The sources for the banners can be found [https://git.fedorahosted.org/cgit/fedora-logos.git/tree/rnotes/en here].

A fair critique but before anybody picks this ticket up I want to check in / coordinate with the anaconda team.

time for F24 is gone for this, but we should do for F25. But it need definitely a contentual rework. We might not forget that Anaconda is also used for other DE to install and there might be no rythmbox and libreoffice.

I'd be happy to help here. Do we have the source files of the current banners somewhere?

i'm going to assign this one to Mary because it's a good project for her to work on - she is colocated with the anaconda team (sorry elioqoshi, i think this will be more efficient, apologies)

@maryshak1996 & @mizmo, can we do this right for F26.

The first thing would be to find out with the Anaconda team, if they would be willing to make there plain text, that would make it translatable.

the second thing would be take into consideration, that some of the current banners make no sense, like Rythmbox or LibreOffice, we use it also for installing the flavors and I dont think that the server one has it, same with some spins like KDE I think the install Calligra instead of LO.

I would be more for an solution like Centos is doing it, they market their project with it, see attachment.

So we should consider that carefully with other words, make a ticket for Marketing Team. Maybe we should consider make it an regularly task for each release and tell some news, but that is an combined effort Marketing and Design Team

Here's what I've got so far for the banner
[[Image(ticket #438_attempt 1.png)]]

much stronger design right here:
[[Image(ticket #438_attempt 1.1.png)]]

... this is my try , is not finish yet , but you can take a look.

-the image is resize up to 320px , try to use resize

{{{
[[Image(438-test.svg, 320px)]]
}}}

[[Image(438-test.svg, 320px)]]

@mythcat, interesting idea with the pen/ brush across the top but I would try to stay away from serif fonts (like what the "need to DO SOME WORK" is in) as it strays from the overall Fedora feel

tweaked the center icons on my previous design, but I'm not sure which I like better (the previous black and white icons or these new gradiented ones)
[[Image(ticket #438_attempt 1.2.png)]]

We got a request for another banner - to advertise Fedora Magazine. Let's talk about the design too, I think we might want to tweak the background textures a bit and maybe less drop shadows. Ping me when you get a chance!

and less black & white contrast to!

@maryshak please have a look at the centos 7 anaconda banners I attached 2 months ago, they are good. Steal with your eyes and learn from them

Thanks for the feedback guys! I tried a somewhat different route than what I had before... maybe a bit cleaner, simpler, and flatter in design to fit in with Fedora's look a bit better. here's what I've been toying around with for the passed few days
[[Image(ticket #438_attempt 2.1.png)]]

Good job, maryshak1996! The new banners fit the Fedora design better. In my opinion they are a little too flat, Fedora's general design is not that flat. I like how CentOS' banners (attached in this ticket) have some more detail to their icons, they're not too flat. Or maybe I'm wrong and should be more open-minded towards flat design, I don't know.

Also, this new design is more adaptive for RTL languages. In your previous design the RTL text would've started next to the >, which would've looked weird.

What I applaud is that all banners follow the same scheme: Icon at the left, text at the right, arrow stretching from left to right. They look like a single entity. Way better than [https://fedorahosted.org/design-team/attachment/ticket/438/rnotes.png] where every banner looks completely different, the text and icons are in completely different places, different font sizes, different icon sizes, as if they were designed by different people who did not communicate with each other while working on them (except for having the requirement of using Comfortaa).

Added a bit more dimension to the icons on the left side of each of the banners to try to make them a little bit less flat but kept the rest a bit more on the flat side
[[Image(ticket #438_attempt 2.2.png)]]

I've been adding more detailed imagery to each of the banners; here's the most recent progress I've made on this project!
[[Image(ticket_#438_attempt_2.4.png)]]

attachment
ticket_#438.svg

Mary's latest design, inline:
f144de94ee9dcf47e3d2df4b1bb5b3fde068b36ffd35a32e22cfdb6fbbdbd2a5-ticket_438_attempt_2.4.png

Mary, this looks amazing. I think the next step would be to contact the workstation working group (https://lists.fedoraproject.org/archives/list/desktop@lists.fedoraproject.org/) and ask if the banner content is ok, or if they'd like additional banners or edits or to remove some. I think it also might make sense to contact the server woring group (https://lists.fedoraproject.org/archives/list/server@lists.fedoraproject.org/) Be sure to send them a link to the mockup so they can see what they would look like!

I'd like to point out that we also have one server-specific one that is carried in the fedora-productimg-server package: http://pkgs.fedoraproject.org/cgit/rpms/fedora-productimg-server.git/plain/Cockpit.svg
(It doesn't seem to display right in Firefox or Chrome for me, but if you save it, the GNOME Image Viewer displays it properly).

This one we included because it was very important to let people know how they can reach the Cockpit admin console after installing Server. If we are updating the others, this one may need a little attention as well.

We should also consider reducing the number of banners that are included as part of the default package set to things that are universally applicable to all installations of Fedora (both with and without a graphical environment). I think applications that are only for use within a graphical DE should probably be limited to Workstation and Spin installers. (Today, the Server media ends up with banners for LibreOffice and RhythmBox, which muddles our message).

So I think the ask.fpo and the join.fpo ones are edition-agnostic. Some ideas for other edition agnostic topics:

  • Fedora Magazine
    -- Be connected and informed. => Read up on the latest news and cool stuff at Fedora Magazine. fedoramagazine.org
  • docs.fpo
    -- Read the docs. => Learn more about using Fedora. docs.fedoraproject.org
  • common bugs (https://fedoraproject.org/wiki/Common_bugs)
    -- Get a head's up. => Review workarounds and tips for issues we've found with this release. (create short url for https://fedoraproject.org/wiki/Common_bugs)
  • developer.fpo
    -- Develop using Fedora. => Our developer site provides developer guides and information on open source development using Fedora. developer.fedoraproject.org

@sgallagh Are there other server-specific ones you'd like to see?

Good question... given how much we're starting to focus on integrating with Ansible, it might be in our best interests to call that out as well.

"Manage your fleet of Fedora Servers with Ansible!" or something like that.

(I posted this on the desktop list but not in the ticket; reposting it here now....)

I like the design overall. For content, we should interface with Marketing. I think there are three broad categories of messaging we could include. No, wait, four.

  1. Tips for the flavor of Fedora you are in the process of installing.
    (Plugs for LibreOffice, Rhythmbox, etc.)

  2. Pointers to user-community resources, like Fedora Magazine and Ask, as well as @fedora on twitter.

  3. "There's more to Fedora!" — promote other Editions and Spins, as well as ARM and etc.

  4. You can get involved! — invite people to participate in the project in ways they might not be aware of.

I'd definitely like to see #1 vary for the Editions (and for the
Spins too, if the relevant SIGs participate). If I'm installing Fedora
Server, I should get tips about Cockpit and available roles rather than
music players and productivity software. The rest could be common
(although I guess for #3, they could be a bit tailored).

I posed the question on the Server SIG list. We have the following suggestions thus far:

  • Cockpit, including the URL to access it (already covered, needs a visual update)
  • Ansible for management
  • Link to the Server SIG, similar to what CentOS does with its SIG banners.

Workstation is going to replace Rhythmbox with GNOME Music sooner or later. We're not going to remember to remove this banner when we do that, so we should probably remove that banner now.

Also, I'm not sure how relevant the CD/DVD banner is today. I expect very few people are installing Fedora with CDs/DVDs.

Also, I'm not sure how relevant the CD/DVD banner is today. I expect very few people are installing Fedora with CDs/DVDs.

I agree; this one should probably be reworked to include a (Fedora-branded?) USB stick in the imagery.

Also, I'm not sure how relevant the CD/DVD banner is today. I expect very few people are installing Fedora with CDs/DVDs.

I agree; this one should probably be reworked to include a (Fedora-branded?) USB stick in the imagery.

I dunno. USB sticks are more expensive than CDs/DVDs, and are also reusable. They're not something you'd generally give away. They also have a habit of picking up nasty firmware viruses, so a used stick is not something you want to receive as a gift either. I would probably just drop this banner.

I dunno. USB sticks are more expensive than CDs/DVDs, and are also reusable. They're not something you'd generally give away. They also have a habit of picking up nasty firmware viruses, so a used stick is not something you want to receive as a gift either. I would probably just drop this banner.

It doesn't say "give it to a friend", it says "share it with a friend". I'm not sure the firmware virus risk is sufficiently high to give up this banner. There's real value in reminding people that Fedora is meant to be shared around.

@duffy We discussed this at today's Server SIG meeting. We decided that we want the following three banners for Server-specific media:

  • An updated Cockpit banner - Dominik Perpeet and Andreas Schneider will consult with the Design Team
  • A banner promoting the use of Ansible for managing Fedora Server - We don't yet have any copy for it.
  • A banner promoting the Server SIG itself in a similar style to the CentOS SIG design shown above, with the copy:
Fedora Server SIG
Help design the future, today
https://fedoraproject.org/wiki/Server

Additionally, it was noted that it might be useful to have a banner talking about OpenShift, but we decided that wasn't appropriate for Server Edition, but might be for Atomic Edition.

Thanks for all of the feedback everyone! So before I dive into iterating this more, I just want to make sure I'm understanding correctly. @sgallagh , you suggested above three banners... do you want this in addition to any of the pre-existing ones ("Have a Question", "Using a CD"... "Have Music to Sync") or is the consensus that the three you posted ("Cockpit", "Ansible", and "Fedora Server SIG") are the only three needed?
Since you have copy for me to work with for Fedora Server SIG, I'll go ahead and work on that banner this week, and post that to see if the overall look fits the vision!

I tried to raise this on the fedora-desktop-list, but I didn't get a reply from you, @maryshak1996 , so trying here instead.

The Libreoffice banner advertise you to install Libreoffice, but Libreoffice is already installed by default in Fedora Workstation, and it's pretty easy to find once the system is installed (one can even find it by typing "Word" in the shell overview). So maybe it needs to go?

@sgallagh , you suggested above three banners... do you want this in addition to any of the pre-existing ones ("Have a Question", "Using a CD"... "Have Music to Sync") or is the consensus that the three you posted ("Cockpit", "Ansible", and "Fedora Server SIG") are the only three needed?

Those are the three Server-specific ones that we would like to be present in addition to any that are generally decided to be applicable to all Editions. So the "Have a question" or "Using a CD" ones would be perfectly acceptable as well.

With regards to the CD/DVD banner. The Workstation image is 1.3 GB [1], so it doesn't fit on a CD-ROM with a max capacity of 900 MB [2]

  1. https://getfedora.org/en/workstation/download/
  2. https://en.wikipedia.org/wiki/CD-ROM#Capacity

Yes, as discussed above, the CD one should be reworked to USB media.

Sorry for missing that part, scrolled through the thread a bit too quickly.

It seems the earlier attachments in the thread are broken somehow (?) but with regards to the style, I think these feel very heavy on the gradients compared to something like https://getfedora.org/ that is very sharp and flat. This clashes, especially in the "MAKE FEDORA BETTER" banner, where every single object has a gradient.

Or am I looking at the wrong Fedora things for reference?

Here's an exhaustive list of the banners:

Banners common to all editions

  • magazine
  • docs.fpo
  • common bugs
  • developer.fpo
  • have a question? / ask.fpo
  • using a usb stick to install fedora / share
  • want to make fedora better? join.fpo

Server Edition banners

  • cockpit
  • ansible
  • server sig

Desktop Edition Banners

  • LibreOffice
  • GNOME Online Accounts
  • GNOME Software

Text for All Banners

1. Fedora Magazine

Headline:
Be connected and informed.

Body:
Read up on the latest news and cool stuff at Fedora Magazine.

Link:
fedoramagazine.org

2. docs.fpo

Headline:
Read the docs.

Body:
Learn more about using Fedora.

Link:
docs.fedoraproject.org

3. Common Bugs

Headline:
Get a head's up!

Body:
Review workarounds and tips for issues we've found with this release.

Link:
https://fedoraproject.org/wiki/Common_bugs
(Please create a shorturl for this. You can use http://ur1.ca)

4. developer.fpo

Headline:
Develop using Fedora.

Body:
Our developer site provides developer guides and information on open source development using Fedora.

Link:
developer.fedoraproject.org

5. ask.fpo

Headline:
Have a question?

Body:
We have answers.

Link:
ask.fedoraproject.org

6. Share Fedora (USB Stick)

Headline:
Using a USB stick to install Fedora?

Body:
Share it with a friend when you are done.

7. Join

Headline:
Want to make Fedora better?

Body:
We can help you help us.

Link:
join.fedoraproject.org

8. Cockpit (Server)

Headline:
Easily manage this server after install.

Body:
Browse to http://yourserver:9090 to use the Cockpit web-based management GUI.

9. Ansible

Headline:
Agentless automation.

Body:
Ansible makes it easy to automate and deploy with your Fedora Server.

10. Server SIG

Headline:
Fedora Server SIG

Body:
We design and build Fedora Server. Come join us!

Link:
fedoraproject.org/wiki/Server

11. Libre Office

Headline:
Need to do some work?

Body:
Try LibreOffice to edit documents, spreadsheets, and more.

12. GNOME Online Accounts

Headline:
Sync your cloud to your desktop.

Body:
Online Accounts allows you to sync with Facebook, Google, Owncloud,Flickr, Exchange, and more!

13. GNOME Software

Headline:
Get more Fedora!

Body:
From digital painting apps to digital planetariums, Fedora's Software app is full of free software goodness.

Hey everyone, sorry for the delay on getting some applications of the feedback back to you. I did a round of banners (the ones common to all editions for) to see what everyone thinks of the new feel. I took much more inspiration from the Centos banners and significantly reduced the use of gradients. Let me know what you think of these so far! Then I'll move forward with the rest of the server and desktop specific editions

ticket_438_common_banners1.png
ticket_438_common_banners.svg

"Heads-up", not "head's up" :)

Let's avoid "a USB", too. I know several people for whom that is a particular pet peeve. Technically, it's "USB flash drive", although that's a little long. "USB stick" or "USB drive" would shorter and maybe a little less formal-sounding.

That said, I like the look. Even if the one with flies kind of grosses me out. :)

"Heads up" doesn't have a hyphen.

These are great Mary! You've established a good style here. Can't wait to see the rest!

"Heads up" doesn't have a hyphen.
These are great Mary! You've established a good style here. Can't wait to see the rest!

If you're yelling "heads up!" as a warning to someone, no hyphen. But it has one in the noun form, as in "get a heads-up". https://www.merriam-webster.com/dictionary/heads-up

Interesting. It looks really foreign and weird to me. shrug

http://grammarist.com/usage/heads-up/

Interesting. It looks really foreign and weird to me. shrug
http://grammarist.com/usage/heads-up/

Says Heads up is an interjection used when you need to warn someone to look out. A heads-up is the actual warning you gave the individual. While the correct spelling includes the hyphen, actual usage suggests that it will become obsolete some day.

I say we stay on the side of correct, for now at least. :)

I think we should change that wording entirely. It's very idiomatic and likely won't translate particularly well (if that's a thing we're considering doing...)

Perhaps "keep up with the latest tips and tricks"?

@sgallagh yeh, I agree. It's about known issues / bugs, though not general tips/tricks, so the wording needs be careful -

"Watch out for these known Issues"

@duffy I don't think that sends the message we want in our installer though. Software is always buggy, but we don't want our first impression to be announcing that. We should figure out a more positive way to say this, focusing on that page as solutions (or at least workarounds) rather than a list of shortcomings.

@sgallagh I'm open to language suggestions, but the draft text for these banners was available for editing + nitpicking 2 weeks now, and I don't want to drag this out in an uncertain state and block Mary. I am also afraid of making Mary redo work when it's unnecessary and want to respect her time. I am taking ownership for the text here to make sure we come to a conclusion so she can proceed.

Here's my draft for the slide with your feedback noted and taken into account:

HEADING:
Found a Bug?

COPY:
It happens. Review workarounds and tips for issues we've found with this release.

@sgallagh I'm open to language suggestions, but the draft text for these banners was available for editing + nitpicking 2 weeks now, and I don't want to drag this out in an uncertain state and block Mary. I am also afraid of making Mary redo work when it's unnecessary and want to respect her time. I am taking ownership for the text here to make sure we come to a conclusion so she can proceed.
Here's my draft for the slide with your feedback noted and taken into account:

Sorry, two weeks ago I kind of just skimmed them and paid most attention to the Server-specific ones. That's my fault.

HEADING:
Found a Bug?
COPY:
It happens. Review workarounds and tips for issues we've found with this release.

I like this, it's helpful and humble without being negative or frightening.

@sgallagh awesome. Yeh admitting they happen came from your idea, then I think spinning it into "Found a bug?" makes it more proactive rather than saying that we screwed up.

@maryshak1996 Here's some detailed feedback. Don't be afraid of all the marks :) This is really just nits and fine-tuning. I am really impressed with what you've done here in establishing a template / system for the banners and coming up with visuals for sometimes pretty abstract concepts in the tickets.

MaryFeedback.png

@maryshak1996 These banners are fantastic! Great work.
- I absolutely agree with @duffy on the kerning and scaling of much of the texts on the banners. The letters are too far away from each other and often too small.
- The two web browser windows are at different heights, which looks weird in the "Have a question" banner, part of the URL bar is cut away by the top border of the banner. (I am also a little concerned about the iOS style of the browser, but maybe that's just me.)
- Removing the outline on the Fedora logo is critical.
- I strongly disagree with @duffy about using an URL shortener for the banners. It gives them a really unprofessional look. The banners should only contain domains that we control. Sending our users to third-party sites is a no no. What if ur1.ca shuts down or decides to redirect our short URL to another site with potentially illegal content? We should use something among the lines of bugs.fedoraproject.org or fedoraproject.org/bugs; or just leave the URL as it is, in my opinion it isn't really that long.
- Let's have a consistent placing of the links. Right now they're in different positions on each banner. Also, should we include https:// in the links? Either include it in each link or leave it out completely.

@pidgornyy appreciate the feedback, we'll take it into consideration!

  • I strongly disagree with @duffy about using an URL shortener for the banners. It gives them a really unprofessional look.

I know QR codes are ugly, and I don't know how they'd fit into these designs, but that's a way to present URLs to people in a way that they can browse to on their phones while the system is installing. Just throwing that out there :)

Hi all! Thanks for the feedback, I applied much of the above suggestions to the attached iteration. I tried using the URL shortener and when I generate the new URL and tried browsing to that URL, it didn't bring me to the intended website so held off on that for now and just went with the full URLs but dropped the "http://" from them all to make it a little less clunky.

Hi all! Thanks for the feedback, I applied much of the above suggestions to the attached iteration. I tried using the URL shortener and when I generate the new URL and tried browsing to that URL, it didn't bring me to the intended website so held off on that for now and just went with the full URLs but dropped the "http://" from them all to make it a little less clunky.

ticket_438_common_banners2.png

@maryshak1996
Minor nitpick: "Workarounds" has a stray "d" in it.
Otherwise, these are looking good to me :)

... oh thanks, good catch! *updating that now

I'm starting to work on the Desktop edition specific banners, and I was wondering if anyone knew if we have access to the LibreOffice logo and/or the GNOME ones, and if so where I can find them? I was hoping to try to do something like the screenshot graphics I have on the above banners, but was hoping to use the real logos if I can. If not, I can work around it :)

To use the GNOME logo you need to mail licensing@gnome.org to ask for permission. I guess it will probably be granted, but maybe the folks there will want to approve the final banner.

Anyway, the sources are at the bottom of this page: https://www.gnome.org/logo-and-trademarks/

Hi, sorry if this is already covered, but what will be the process to translate this?

@jibecfed Not sure yet. We have a couple of options, one is murkier than the other -

option 1: the strings are entities in the Inkscape SVGs. We can probably generate po files for the strings and write up a make script to autogenerate the translated PNGs using the SVG and pos.

option 2: Talk to the anaconda devs and see if there's a way to render the text using anaconda so the strings are in anaconda and translated via the usual anaconda translation process.

We use option 1 for Fedora's website banner graphics so I know it'll work, I am less sure about option 2. We will make sure these banners are translatable though.

@maryshak1996 so @catanzaro already gave you info on the GNOME logo - the LibreOffice one is available here:

https://wiki.documentfoundation.org/Marketing/Branding#Logos

It appears these banners are a permitted use of the logos and do not require specific approval. See
https://wiki.documentfoundation.org/TDF/Policies/Trademark_Policy#Permitted_Use

Hey, as a suggestion, could we maybe use whatcanidoforfedora.org instead of join.fedoraproject.org for the last banner? I think this would be a more helpful resource to point people at than a really long wiki page. :smiley:

@duffy do you think that the graphics that I used are okay for the GNOME and LibreOffice banners? Or should I give it a try with their logos?
@jflory7 thanks for that suggestion! That site seems a lot more user friendly and would be a good resource I think, so I made that switch
Here's that updated iteration (with a fixed typo as well) and the server-specific banner set is almost done too, so I'll be posting those soon

ticket_438_common_banners5.png

ticket_438_common_banners.svg

Looking good, @maryshak1996 !

Minor request: can you clean up the kerning in the URIs for the Cockpit and Server SIG banners? It looks like there are spaces that shouldn't be there.

@maryshak1996 exactly what I was looking for. Thanks!

Metadata Update from @gnokii:
- Issue close_status updated to: Fixed
- Issue status updated to: Closed (was: Open)

5 years ago

Login to comment on this ticket.

Metadata