Fedora Workstation Front Page Revamp (first cut, looking for feedback!)

Please click the provided link. It’s the foreground/background color combination that’s the problem. It doesn’t matter if it’s SVG, HTML, or a PNG.

You can adjust the colors in the test with the provided sliders to see what changes are needed to meet different accessibility tests for small and large text.

Hi Hanku, I am somewhat restricted in what GNOME’s UI offers - the two choices I had here was to take a screenshot of a few top languages, or many languages in alpha order. I opted for the latter thinking a longer list would better make the point than a shorter one. Do you think it would be better to have a shorter list of languages that are perhaps more commonly used (or have better translation %, I don’t know the metric. It may even be geo location based?) or better to have a longer list in alpha order?

1 Like

Hey, cool thanks. As posted elsewhere (and noted in OP) there’s contrast issues and we’re iterating on addressing them. Thanks!

1 Like

Hello Máirín, ok, understood it is set by the GNOME. It may not be something we have to change for the sake of revamping. Probably I need to offer my feedback during i18n test week with a focus on testing internationalization features.

Playing devil’s advocate :slight_smile: , my point is;
I’m more inclined to alpha order, which is straightforward. If it is so, it should start with A, so Afrikaans. But it is kind of mixed now. The list shows mixed results;

  • languages shown in alphabetic characters from D (Deutsch) to F (Francais): I guess it is geocoded? It is kind of makes sense for someone who set up the system in Europe. Much better than other OS where I have to scroll down indefinitely from A.
  • non-Indo European language groups, which appear (not sure) in order of most used languages as they can’t be sorted in alpha order. Just curious how it is sorted.

In an answer to the length of lists, I see no problem with listed values, currently 9. Thanks!

1 Like

I confess I have not read all the comments here. So sorry if I repeat what was already said.

First of all: This looks fantastic. Consider my further comments nit-picks.


Suggestion: make that window actually use the dark/night style?


Fedora OS

Confusion: This says Fedora OS but mentions DNF. It confuses me. First of all, we don’t really use the term Fedora OS anywhere else. But even if this said Fedora Linux or something else, the relation with dnf seems odd here. What is the message this is trying to tell?

1 Like

The OS thing is my awkward phrasing… the thing I was going for with that block of three… DNF => Boxes => Podman was to highlight the layer at which the tool operated => Base OS => Virt Machine => Container - Maybe just drop the OS. It on first cut said “Fedora / Operating System Level” but I thought the text was too long.

What do you think with that context?

1 Like

I’ve also changed the repeated text on the button, but consider the exact wording just a placeholder.

1 Like

Thanks for working on this, Máirín! It looks really good, and does a good job of leading a visitor through the content. Now that we’ve got a first draft I’m happy to help with the text as we get more feedback.

Regarding the page design, I wonder if it could do with some stronger visual differentiation between the different sections. Right now the page structure blurs into one a bit, as you scroll.

One challenge with the page design is the different styles of the logos - they don’t look great next to each other in all cases. That might require some thought.

We’ll need to update a bunch of the screenshots - some of those are out of date. I can help with that.

2 Likes

I actually would prefer this go to a landing split page with two paths: a path to get hardware with Fedora pre-installed and another path to download to put on your own machines.

Offhand, I know that we have a few OEMs preloading Fedora Linux on their machines. Notably, we have Lenovo and Slimbook doing it, and I would imagine more would do so if we built in a path to promoting them on our website.

1 Like

I wonder, to split the the general features / developer features sections, we had a suggestion here to make the dev section dark. I actually mocked it up that way to start (see quick screenshot from that earlier version) but pulled it because I was worried it’d interfere with the ability to do a dark mode. But I was looking around when the topic came up here, and I think we probably could still have a good differentiation in dark mode while keeping this section dark. What do you think?

1 Like

Yes! The split landing page was what I was thinking. But I know people would scan for the “Download” keyphrase too I think. But I think a download link could still point to the landing page that includes HW purchases.

1 Like

Thank you it really helps to see this visually :slight_smile: I flipped the logos to go under the headers so they are closer to the text of the app they belong to, and I messed with the button text :slight_smile: WDYT?

3 Likes

Hey, it looks pretty good.

I do think there are two extra pieces of information that could be useful here.

Something like a “Try before you install” section, that section should mention how it’s possible to use Fedora before installing with the liveCD/liveUSB on their own hardware and how it’s possible to use virtualization (like VirtualBox) to try it from whatever OS the user is already using.

Second, it would be useful to have a section that tells a bit about system requirements and hardware support, most likely showing a table with minimum and recommended specs and some info about some of the drivers.
Not sure on the name, but maybe something like “Support for old and new hardware”

2 Likes

Thank you for sharing. :slight_smile:

I don’t have any feedback for the content structure. I’m not sure we’re at “alignment” yet, but my eye catches a lot of negative space in the sections with screenshots next to descriptive text:

(I want to doodle in the margin!)

2 Likes

Making the developer section dark is interesting - definitely worth considering. There are other changes that could make the sections clearer, like sizing the headings to reflect their place in the page hierarchy, using different colours and backgrounds for each section, and so on.

It would also help if the developers section were rationalized. Currently it has 5 small subsections, each of which have their own layouts, and some of the content is repeated (it talks about Boxes and containers twice over). A simpler structure would help you to know where you are as you scroll through.

Attached below is a kind of sketch to show what I mean by some of this. The original design is on the left. On the right I’ve modified it to try and illustrate some of these ideas - bigger headings for the sections, different text colour for some sections, a simpler developers section.

4 Likes

@aday I like that approach, I’ll update the mockup accordingly. You’re ok dropping the smooth feature at the top? What do you think about @mateusrodcosta 's suggestions?

1 Like

Cool! I’m not entirely convinced about the visual treatment there - it was mostly to illustrate the general idea of differentiating the sections.

Yep. I removed that one because 6 items seemed a bit much, and it was the only one that didn’t have a screenshot.

Those are both interesting points. For “try before you install” it’s probably just a question of where on the page to put it. Will think about that. I’ll also ask the Workstation Working Group about hardware requirements.

Here’s an updated mockup - I hope I got everything here. I tried to incorporate everyone’s suggestions.

2 Likes