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

[duffy (Máirín Duffy)]

Hi everyone,

As per the Fedora Website Revamp project, I have an initial first-cut (read: still very much open to change and feedback and ideas) draft of the Fedora Workstation front page that will reside within the revamped Fedora website.

This work started out thanks to @aday 's work in drafting up the initial textual content and rough layout for this page, which you will see here in pretty much its original form (the main difference is that I added a section for contributors, which I’ll talk more about below.)

You can view the full mockup here:

Penpot | Design Freedom for Teams

(Note right now this is a static mockup, but as the various pages are mocked up and as I add in all the links stuff will start being clickable and navigable, thanks to the new FLOSS tool we are using for this, Penpot!)

I’d like to walk you through it below using snippets of the mockup from top-to-bottom to provide some context.

Some upfront notes:

• The current working thought is that this page would reside at The leading Linux desktop | The Fedora Project.
• There’s a few ways the content could be chunked out / represented. I’ll talk about alternative ways of doing this below.
• It is the intention we would have a dark-mode version of this page and various elements have been designed with that possibility in mind, but I don’t have a complete working version of that mocked up yet.
• These screenshots are taken at 75% to help with file size / loading time. To see at 100%, view the full mockup linked above directly on the Penpot website.
• The screenshots have grey around the borders because that’s the background color for Penpot… that grey is not intended to be part of the page design.

TOP HEADER / HERO AREA

Logo:
We have the Fedora workstation logo in the upper left. The Fedora logotype here may shift to white; the intention (not yet mocked up) is as you scroll down the page past the hero, the navbar turns white with a slight drop shadow and which point the logo would be its primary blue color. I might play with the green in the background to see if I can get better contrast and keep it blue, but I think we’ll need to have a mechanism to white out the logo anyway for a dark mode version.

Background graphic:

Fedora Workstation’s color has been green for a long time, so we have a green and blue gradient here to represent that, and the buttons also represent that green.

Navbar:
The items here are subject to change (and I know the alignment’s off, sigh, just noticing that now), but this reveals my current thinking for Fedora Workstation’s nav.

To get back up to the main Fedora website, I had been thinking you’d just click on the Fedora part of the logo in the upper left, or use the footer. But maybe there should be a specific nav item to the main project here.

This area is definitely quite a bit in flux.

The thinking with the Download item: Workstation will have its own download page. The main Fedora website at https://fedoraproject.org/download will have its own project-wide download page which will also include Workstation.

The Community item - we might drop that because of the community section at the bottom of this page or use it to jump to that.

Latest Version:

This was a suggestion we’ve had a few times, to highlight what the current stable version is. Here we have the current latest stable version number highlighted with a link to the release notes.

Laptop hero:

The laptop here is a photo of the Framework laptop on which Fedora is fully-supported. There are also a number of laptops in the Lenovo lineup that are fully-supported and ship with Fedora on them. The image we use here could rotate between the two vendors. The Downloads page will have a section about where you can buy laptops that support Fedora and ship with Fedora.

Note that the screen is intended to be a small animated demo of the Fedora desktop. We are looking at using a very slim webp animted image for this purpose.

Other hero content:

Watch the latest reviews I am hoping is something we can put here to link to a playlist of various video reviews of Fedora. I think oftentimes when people are evaluating a technology or tool, they look for video reviews, so many exist and we should highlight the most helpful ones for those prospective Fedora users taking a look on this page.

See this topic here on the discussion board about which reviews / reviewers we might want to highlight:

Seen any great Fedora video reviews lately?

Hey, I am working with the group of folks who are revamping the Fedora website. This is a little snippet of the current mockup for the workstation front page: [Screenshot from 2022-02-18 10-10-24] You can see there’s a link to “watch the latest reviews” and also a primary button link to a specific review (with filler text now.) I suspect that oftentimes folks evaluating new tech and products now do look for video reviews of those things before they commit to trying them out. I don’t think Fe…

The “Get started” button will point to the download page.

The “Reviewed by $Reviewer” will point to a single specific video review we think provides the best overview of the release. (It could also point to our own demo if we’d prefer.)

WHY FEDORA WORKSTATION?

This section is really just the points Allan developed. Note the diagonal of the hero / header background is continuing here.

(FEATURES) FOR EVERYONE

This section is long so I’m going to post it here in chunks. A few notes:

• The headline has the workstation green icon next to it, something that continues with each major headline down the page. I’m not 100% happy with how it looks, open to ideas. I just wanted to make sure it was represented.
• These are basic features that apply to all Fedora users
• The smoother & seamless item has a mashup of upstream GNOME artwork and I think an animation would serve better here.
• The rest of the items just have screenshots of the relative features, and we’re 100% open to better suggestions for visuals / things to screenshot.
• Any / all of these items could be super short, low bandwidth animations (hoping to nail down a good webp animation workflow.)

(FEATURES) GREAT FOR DEVELOPERS

This section is also the points Allan developed. Some more notes:

• I’m not happy with the green rounded divider but didn’t want to play with it and delay this post.
• I know the workstation icon is messed up here, will be fixed.
• There is a missing icon in the “all the tools” section in the lower right, it’s meant to be the GNOME Boxes icon.
• The icons shown in the “All the Tools” section are developer-oriented tools / IDEs / utilities / etc that are available in the Fedora repos or via Flatpak.

Screenshots posted here as chunks as well.

(GET STARTED) GREAT FOR DEVELOPERS

This is a little section at the end of the “Great for developers” section that talks about getting started.

If I’m honest - I threw this together really quickly to get this post out. I think it’s too busy and needs a lot of cutting but providing it here so we have something to look and talk about.

Some things to note:

• We start with a pointer to Fedora Developer. I do not know the current status of this website - it promotes DevAssistant and I don’t know the status of that either right now. However - the theme / goal, structure, and type of content on this website I think is fantastic and would be of great help supporting developers using Fedora as their workstation. I think the theme of the site will need a revamp to match the new logo / new style we’re going with on the main website revamp. It looks like there are some content holes that need to be addressed too (for example, no Podman or GNOME Boxes quickstart guides.)
• Then there are three items which are intended to point to respective quickstart guides listed below - DNF, GNOME Boxes, Podman. From the OS level to VMs and containers, these are important fundamental technologies developers using Fedora should be aware of and the main tools we support and recommend for each.
• DNF: DNF :: Fedora Docs
• GNOME Boxes: Boxes
• Podman: https://podman.io/getting-started/

BUILT BY YOU + TRY IT NOW

This is two sections in one.

Community:

The top half is the “community” section for Fedora Workstation. One of the goals we have with the website revamp is to make it way more obvious how to contribute to Fedora / how to join Fedora with very specific, low-level and relevant contextual hints on how to do so. So for example - if you’re looking at the Fedora Workstation page, the path we provide you in potentially joining the Fedora project is going to be specific to joining / getting involved with the Fedora Workstation Working Group - that is the most relevant way to join given the content you’re viewing and what you probably most likely have an interest in. As opposed to dumping you to a generic “join Fedora” top level page where you’d have to hunt down what is relevant to you down a complex hierarchy.

So here we emphasize in the community section, how Workstation is built, and how to enage with that team.

I drafted this on my own (mostly based on the Workstation Working Group page) so this content is the roughest here.

Try it now:

Here we have the full Fedora Workstation logo wtih a big get started button. That button links over to the download page.

FOOTER

This will apply to the entire website and is a work-in-progress. Take a look at the following topic here if you’d like to get the details on this and provide feedback:

How would you sort/categories all the goodies in the Fedora ecosystem?

What we call this exercise in interaction / ux design practice is a “card sort.” Card sort Fedora with me! You might have seen this conceptual model I drew up for Fedora: [Screenshot-from-2021-10-14-16-30-46] I’m working with the team of folks working on the website revamp project. I’m looking at coming up with a category / sort system for all the “end user focused” stuff Fedora produces - not the infrastructure apps/tools/etc., but the stuff users come to our site to download…

FEEDBACK WELCOME!

So here you have a little update on how things are going for the Workstation page. My next step besides sharing this with you here and evaluating your feedback and rolling it back into this to iterate and improve, is to start framing out the workstation-specific downloads page and trying to nail down the navigation.

Looking forward to hearing your thoughts on this!

[duffy (Máirín Duffy)]

(We talked about some elements on this page on screenshare today already at the weekly Fedora Design meeting, see Design Team Sessions Live Episode #24 (23 February 2022) - LinuxRocks PeerTube )

[bcotton (Ben Cotton)]

I really like the general direction here. The main thing that stood out to me was…

@duffy

The “Get started” button will point to the download page.

I completely missed that this was the download button on first scroll. At the risk of getting too bikesheddy too early in the process “Download now!” might be better text for that button? Or something else along those lines.

I like the marketing approach to the content. It really makes the case for why Workstation. My only thought here is that it might be good to have the “For everyone” and “for developers” be tabs instead of one long scroll. I’m not fully convinced of that, though.

[daveharas (David Haras)]

This looks good very nice, there is plenty of information for newcomers, I agree it is a long scroll to the bottom so maybe, however, I do not think that will deter many people. What it does do is put an emphasis on the user friendly interface of the Gnome desktop, also a nice little touch putting a laptop as the obvious usage medium. I do note that the links to spins, alternative downloads, emerging editions, labs are no longer prominent and hidden down the bottom of the page.

Overall I really like the fresh look.

[duffy (Máirín Duffy)]

Note that this is the Workstation specific page, not the “all of Fedora” page, so the spins/alt/emerging/etc wouldn’t be featured on here. This page is kind of the equivalent of Fedora Workstation which doesn’t feature those things either. (Hopefully this is more clear!)

[duffy (Máirín Duffy)]

My initial instinct was to tab them but I figured for the purposes of the mockup one long scroll at least lays everything out and it’s easy enough to chunk the content and tab later if need be. (We could also have each section be one “slide” tall and have them be horizontally scrolling slides or whatnot. that would make the page much shorter.)

For the “Get started” button - I was thinking if the page in the nav is called “download” then people would just click the download button up top. We could have a little subtitle/caption below the get started button that mentions the term “download” to let people know that’s where they’ll go as well?

[hankuoffroad (hank)]

Looks awesome and I like the value propositions by user persona I have a few suggestions.

1. How about keeping the same color theme per each user persona? For example,
   Default GNOME for (FEATURES) FOR EVERYONE: already matched.
   Adwaite dark for developers

2. Among three value props for developers, the first one ‘Fedora OS’ can be dnf package manager. Why not highlight strong points of dnf that stand out?

[leah]

looks good! on the whole I like the fresh look, and I like how you actually highlighted reasons “normal people” might want to install it. the old site wasn’t great at doing that, to the point where most of the people I showed it to thought it was made exclusively for devs.

here’s some of my (100% correct and valid) feedback:

• having a photograph of a laptop seems like unnecessary visual clutter, when a simple illustration would probably do just fine. also, the photo is shot at a bit of a weird angle, so the screenshot doesn’t actually fit onto the frame. If you want to show off what hardware the OS can run on, why not just have a section with some of the hardware it can run on.

• The typography seems a bit off in places:

  • The first section uses blue for body text, but then the second section switches to grey, and then switches back to blue for the next section. From a readability standpoint, It’d probably be best to use grey everywhere.
  • I do not vibe with the blue headers.
  • I think it could be better to use Red Hat {Display, Text} (or any other font) instead of Montserrat and Open Sans.

• this is the old GNOME Boxes logo.

• Some screenshots have drop shadows while others do not,

• The ‘Built by you’ section has a very complex picture as its background, which makes the text quite hard to read. Maybe have it above, or to the side?

• I’m not sure a link to a review as the first thing you see is a great idea. It seems a bit insecure, like the site doesn’t think it’ll be able to sell the product to its visitors, so it needs to bring in a third party just so everyone knows it’s good.

• I agree that it’s a pretty big scroll to the bottom, perhaps it’d be good to have a list of anchors to each section? (github does this pretty well:
  

  
  
  )

• 
  I think it’d be better to use a monochrome logo here.

[duffy (Máirín Duffy)]

Hi Hanku, thanks for the feedback!

Re: developer in dark mode… that was actually how it was mocked up initially but we got the request to be able to place the entire page in dark mode which throws a bit of a wrench into that. The everyone / dev sections could go a few different ways tho… they could go across two tabs, or could be individual slide shows, or a number of other possibilities.

Re: DNF - I dont think we really have the space at this level (I’m thinking about cutting back the text there more) to go int details on DNF, Boxes, or Podman. The referenced links go in great depth - does it make sense to you to lean on that? It’s sort of a “get started” or “next steps” area so it’s less about selling and more about preparing.

[duffy (Máirín Duffy)]

Hi Leah, thanks for the detailed feedback! I really appreciate you taking the time!

1. Re: the laptop photograph - I’ve heard this feedback once before (except slightly different - to use a fake / vector laptop instead of a real photo.) I’ve presented that top header of the mockups quite a few times and had more feedback that folks actually quite like having a laptop visible, bc it makes clear from the go what that version of Fedora is and what it is for. (The other versions are IoT - which features a development board in the same area - and Server.) Someone clicking between the major editions of Fedora would have better clarity on the intended role of the edition visually this way. In the interest of keeping bandwidth low and the demo animation size as small as possible, I actually prefer to frame that in a way that allows it to be smaller relative to the page width. We also generally like the ability to promote our hardware partners and it is a relatively recent triumph to have Fedora shipping on hardware OOTB for us (and we’d love to encourage more of that

2. Thanks for pointing out the type color inconsistency - my styles in Penpot are a bit of a wreck, I need to clean them up so all of the text objects are consistently linked to the same style for its hierarchy level.

What issue do you have with the blue headers - you not vibing with them unfortunately is not actionable.

Re: the fonts - Montserrat and Open Sans are the Fedora standard. We have a separate brand from Red Hat and do not use their font nor design guidelines as we have our own. Montserrat is pretty important in our brand identity.

3. The GNOME Boxes logo is from the GNOME Boxes docs, do you have a link to a new one for light bgs? (I have one from /usr/share/pixmaps but it doesnt work on white, so I dropped that one in real quick.)

4. Thanks for noting the screenshot inconsistency. We’ll take a look at adjusting that.

5. Thanks for the feedback on the communuty section. We talked about this in-depth on the Fedora Design video linked above. The section was thrown together quickly (like the one immediately above it) to get this post out so it’s a bit cluttered and the copy needs a lot of editing down. But we talked about different potential treatments there.

6. Fedora has a lot of baggage in terms of perception on the desktop. It has an old and at this point undeserved reputation for being too difficult to use and unreliable for mere mortal use (“bleeding edge.”) You make a good point about a potential perception around insecurity - but Fedora is old enough in my judgment that I’m not too worried about that potential take from having a review up front.

7. Agreed, and I like how GitHub handles anchors, thanks for that pointer. There’s a number of ways to handle the length also discussed in the video and in the commdment above this

8. See the “Logo” section at the top of the OP.

Thanks again

[leah]

Thanks for taking the time to respond!

@duffy

The GNOME Boxes logo is from the GNOME Boxes docs, do you have a link to a new one for light bgs? (I have one from /usr/share/pixmaps but it doesnt work on white, so I dropped that one in real quick.)

Here’s the SVG from the git repo It should work “okay” on white if you apply a minimal drop shadow. The new guidelines advise against applying drop shadow on the actual image source as Gnome shell & company will apply it automatically depending on where it’s used, so when using them on a webpage you need to add it in manually.

@duffy

What issue do you have with the blue headers - you not vibing with them unfortunately is not actionable.

I’m honestly not sure why I brought them up, there’s nothing wrong with them really. I think they reminded me of the default templates in Microsoft FrontPage, so I subconsciously linked them to the same dated web design as was in those templates, but that’s definitely just a me problem.

@duffy

See the “Logo” section at the top of the OP.

Ah right, I didn’t notice that part, sorry.

[t0xic0der (Akashdeep Dhar)]

Time to add my two 1.4976108 INR,

1. Like @thunderbirdtr mentioned back then in the weekly meeting of the Fedora Websites and Apps Engineering team, the hero part has the potential to lead to some illegibility issues - which, of course, can be solved by the introduction of a parallax effect but I am documenting the same here for our reference and probably, a revision at a later date, should the inclusion of parallax effect does not end up being feasible and/or viable.

2. Personally speaking, I would prefer a darker shade of the green used to colour in the elements like “Watch the latest reviews ->” text and the “[>] Reviewed by $REVIEWER” button. Please note that it does not seem to be affecting those elements much, which has that colour as the background colour - take, for instance, the elements like “Get Started” button so a mixture of similar shades and/or used as a background colour can be of help.

3. From the section about “WHY FEDORA WORKSTATION?” - I would bring to your notice, a small nitpick (which might not even be a design thing, to be honest). Some of the phrases here are not complete sentences (No, that is not an issue) so they are better off not having full stops in the end. You could use a “hyphen” to separate two conjunctive phrases, take for instance - the subtitle for the “Trusted” text.

4. From the section about “(FEATURES) For everyone”, the second and third screenshots look “bound” while the first screenshot does not. Now, what exactly do I mean by “bound” - these screenshots have a certain place where their scope ends but I could not probably say the same for the first screenshot. Is there a way that you could probably fix that (or maybe look into an alternative screenshot) for a more uniform and consistent look?

5. From the section about “(FEATURES) Great for Developers”, the section looks very limited to virtualization - software-based and hardware-based - which, of course, is something we would want to promote but maybe we should add some more stuff to promote Fedora Workstation to say, people who write code, document stuff or people who design things. How about we add some screenshot sections of Krita, GIMP, GTK Editor, LibreOffice etc.?

6. From the section about “Get started developing with Fedora”, I cannot emphasize how glad I am to see Developer Docs mentioned here - owing to the fact that documentation is probably one of the easiest ways to get started with contributing to the project and Developer Docs does not even have strong prerequisites or criteria to even start with the contributions. Kudos for adding that and the other three sections also seem fit to me.

7. From the section about “Built By You”, I would bring to your notice, so more nitpicks (that have to do more with the language and less with the design but well, it’s better to document them here anyway so as to keep it in the record) - some sentences might require rephrasing. Phrases like “decision-making powers” and “other contributors” can be seen as being exclusive to someone who is checking waters before starting to commit time.

P.S. Also, I am not there in that watermark photograph. Sigh.

@duffy, thanks for sharing the updates on the progress made so far. With every suggestion added by the community folks on the screenshots that you posted and addressed thereupon, we are inching close to the outcome of the website revamp stakeholders team. Awesome work, @duffy and @ekidney!

[glb (Gregory Lee Bartholomew)]

@duffy

The rest of the items just have screenshots of the relative features, and we’re 100% open to better suggestions for visuals / things to screenshot.

I think it looks great. The only suggestion that I can come up with would be to “doctor” the fantastic apps screenshot so that more popular apps are highlighted. I think Steam is a great choice for the main app. But I think I’d cheat a little with the screenshot and overlay different thumbnails in the “Editor’s choice” section. Pick apps that people are more likely to want to try out. I’m thinking of things like LibreOffice, Firefox, GIMP, InkScape, Kria, etc. I wouldn’t waste the space with two email applications or a sticky note application. Just my 2¢.

[daveharas (David Haras)]

Hi,

I did not wish to appear to critical, overall I really like the new direction and look that the the page may be taking.

And yes this is nice and clear

[duffy (Máirín Duffy)]

Oh no worries I think I didnt set the context appropriately

[noda (Daniel Aleksandersen)]

You need to increase the contrast on the white-on-green text. It fails every accessibility test for legibility!

[noda (Daniel Aleksandersen)]

What will it look like on narrow-screens/mobile?

[duffy (Máirín Duffy)]

It’s not a web page, it’s an SVG embedded in a web page. I’d be surprised if automated tools like that work on it.

[hankuoffroad (hank)]

In ‘workstation speaks your language’ tagline, I wonder if you can change the top languages in settings and represent them in order of significance or statistically relevant criteria such as.

• top 9 -10 spoken languages in the world
• for fairness, let’s consider one main language group, not the variant: instead of British English, Hindi may be more representative in the top 9 segments. Why is the Portuguese missing out?

In India, they have to learn Linux as the main OS. Every school/college computer uses Linux as the default one. If combined with Bengali/Urdu (both are top 10 languages), they deserve their place.

[abitrolly (Anatoli Babenia)]

I don’t know how to provide positive feedback. So everything below is just critics - feel free to skip if you don’t like it.

For me “The leading Linux desktop.” text looks desperate without some solid prooflinks. At least that content would be problematic on Wikipedia. Fedora is currently 9th on Distrowatch, but the point is that bragging about being the leader is kind of unfriendly to me. I use at least Fedora (GNOME) and Ubuntu (i3) daily and not because it is “leading” or something. It is because they are free and fast enough to run the browser with some sources. If the goal of this page is to sell Fedora to business people, then I would just directly market this as “Fedora Workstation. Ready for business. Open to the core.”.

I would say the page looks like pretty much like standard bootstrap design, like any other standard marketing landing. I am not saying it is good or bad. Maybe there should be a distro with such landing pages. In the end it is not some crypto project with to the moon design budgets .

The part about reviews is also dubious. Very consumer like. Maybe I am mixing the project and the product, but I don’t see how they are separated either.

Being a maker is more important than being a consumer.

Some quick comments.

should definitely carry functional button to change to night mode. Just to demonstrate that it is all open and customizable.

I fell strange that personal productivity is mixed with hardware productivity. Saving energy and being environmental friendly seems more important.

Then it feels kind of awkward mixing recreational Steam and workrelated Boxes in one block. Maybe I am missing familiar UX roles or activities. Or maybe I want to see a mix of them. Turning off fantasy blocker I would probably place a character generator on the front page, and after people describe what they want to do daily, suggest them how to play that business with Fedora.

To end up with procrastination I should thank you for the pleasure. Somebody told me that it is important to dilute critics with positive feedback.