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:
(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 https://fedoraproject.org/workstation.
- 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
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.
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.
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.
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.
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:
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: Getting Started with Podman
BUILT BY YOU + TRY IT NOW
This is two sections in one.
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.
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:
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!