search

fedora-silverblue / silverblue-site

Historic website for Fedora Silverblue. Now at https://gitlab.com/fedora/websites-apps/fedora-websites/fedora-websites-3.0
Other
45 stars 27 forks source link

Revamp website design #114

Closed felipeborges closed 1 year ago

felipeborges commented 2 years ago

Our webpage has been stagnant for quite some time now and it feels to me in much need of a visual revamp that can highlight better the advantages of Silverblue and its technologies to a general (non-technical) audience while giving clues where experts can dig for more information.

@cassidyjames has some lovely prototype that I think should be considered as future for our visual identity. Check https://cassidyjames.com/silverblue/

Thoughts?

garrett commented 2 years ago

I'd like to point out that Kinoite, which is basically Silverblue but with KDE, is quite nice. It might make sense to have the ostree sibling sites be based on each other (with some things changed for obvious differences):

https://kinoite.fedoraproject.org/

TheEvilSkeleton commented 2 years ago

I completely agree!

We've been working on fedora-websites-3.0 to improve the backend and the frontend. I brought up in the meetings that we should ask you about making your sites consistent with the revamp, and integrate with our infrastructure.

Right now, Kinoite and Silverblue's websites look completely different. When we look at other Fedora websites, they look different and inconsistent together. Having a unified and consistent interface should address that.

What do you think?

travier commented 2 years ago

Whoah, the test page at https://fedora.gitlab.io/websites-apps/fedora-websites/fedora-websites-3.0/editions/workstation looks awesome. I'll see if I can update the Kinoite site to match it.

nikodunk commented 2 years ago

@travier Feel free to re-use any of the nuxt/vue components that are built so far (we're working on making them generally accessible) - they're built to be easily re-used and repurposed and will be refactored into a lib at some point. Also open to feedback on them as they're heavily WIP. Example of workstation page: https://gitlab.com/fedora/websites-apps/fedora-websites/fedora-websites-3.0/-/blob/develop/pages/editions/workstation/index.vue

Also feel free to open an MR straight on that project and add Kinoite as a page there if you prefer/it's easier than matching the design - benefit would be to piggyback on the CMS/i18n pipeline/Fedora hosting that's being donated for the new static site, etc.

Or you can of course wait till we're a little further along, and then use if you like :) Just a contributor and not the lead, but thought I'd offer as I know we've been meaning to reach out :)

cassidyjames commented 2 years ago

Hey all, thanks for the motion here, and thanks for filing this @felipeborges. There's a lot of good and interesting stuff happening here, and I'd be happy to pitch in wherever is most helpful. :smile:

allanday commented 2 years ago

A refresh sounds good to me. The news section without much news feels quite sad, and the sidebar links that lead to external pages are surprising.

Important question: what can we realistically expect to do in terms of maintenance, particularly for content?

We're probably looking at something really simple: a page or two of content, with links to external resources.

Basing the site on an existing template, using a framework that developers can easily work with, makes sense to me. Perhaps @jimmac could advise.

travier commented 2 years ago

@allanday Have you seen the work from the websites team in https://gitlab.com/fedora/websites-apps/fedora-websites/fedora-websites-3.0? This seems to match most of your comments. We should also share the screenshot between workstation & silverblue.

jimmac commented 2 years ago

I have mixed feelings about building the Silverblue brand. I am an absolute believer in the model of tested and supported base OS and separated apps (and all the development and services in containers). But I feel like the branding efforts should focus on this being Fedora.

I think the existing Silverblue website should focus on the technical aspects of Silverblue, rather than building another hub for getting your OS, duplicating the functionality of getfedora.org, where silverblue downloads should be featured. This view of course comes from someone who doesn't consider Silverblue to be a "spin" of Fedora, but the inevitable future of Fedora.

We have a couple of OS component websites that are very low key -- Pipewire, Tracker, Toolbx, Fleet Commander. The mantra for those sites is that the content is mostly markdown, as easy to edit as a wiki, but looking more polished and free from spam maintenance. It doesn't rely on much framework maintenance either, but getting markdown to be the canonical source meant parting from what a website should be built with, ie html & css, but relying on jekyll, that is luckily very easy to deploy on github or gitlab instances.

I've created a template for these microsites so getting one off the ground should be easy.

allanday commented 2 years ago

@allanday Have you seen the work from the websites team in https://gitlab.com/fedora/websites-apps/fedora-websites/fedora-websites-3.0?

I have now!

This seems to match most of your comments. We should also share the screenshot between workstation & silverblue.

I'm with @jimmac on this one: I'd keep it simple for now. Silverblue isn't a product in my mind - it's more like a next-gen development programme.

TheEvilSkeleton commented 2 years ago

I think the existing Silverblue website should focus on the technical aspects of Silverblue, rather than building another hub for getting your OS, duplicating the functionality of getfedora.org, where silverblue downloads should be featured. This view of course comes from someone who doesn't consider Silverblue to be a "spin" of Fedora, but the inevitable future of Fedora.

I agree! Though, personally, I propose to keep the looks and feel uniform with fedora-websites-3.0 (and do the same with Kinoite's website). There's fragmentation in Fedora where websites look and feel completely different. I personally believe it's time to unify and make things as consistent as possible.

cassidyjames commented 2 years ago

I am on board with a simpler page using that template from @jimmac as well; it does feel more akin to a technical README than a full-fledged marketing website, and I think that's actually good for the reasons @jimmac and @allanday laid out. It doesn't make sense to reproduce all the same marketing materials as on the main Fedora website when what's actually different/unique is very technical under-the-hood, and nothing visual.

TheEvilSkeleton commented 2 years ago

This makes sense. Personally I'm not really a fan of it because the interface looks entirely different from the Workstation website, IoT, etc. It makes me feel like it's a completely separate project that happens to use Fedora's name and logo rather being a Fedora project. It's very simple in the sense that it doesn't look attractive and is made for smaller projects; it won't scale well, as READMEs are meant to be brief, whereas Fedora Silverblue and Workstation have major differences internally. It's going to be really difficult to make it look appealing for users.

Instead of marketing GNOME, like the new Workstation website does, we could market OSTree, rpm-ostree and Flatpak. We could also market promoting newer and safer paradigms through developing with containers, immutability, etc. That way, it should look attractive for many people.

allanday commented 2 years ago

Perhaps there's a way to have a simple page that is easy to maintain, which doesn't come with all the baggage you get when presenting a brand/product, and which is still positioned as part of the Fedora ecosystem?

The obvious thing would be to just put the information on the docs, and point to that. Or perhaps we could do a microsite that uses elements from the Fedora brand for its styling?

jimmac commented 2 years ago

Here's a hand-wavy first kick off of the technology website that I think could work --

https://jimmac.github.io/silverblue.fedoraproject.org/

Some obvious fuzzy bits --

TheEvilSkeleton commented 2 years ago

My main critique is that this layout can only be brief, but being brief can make a massive project, like Fedora Silverblue, look like it's not worth it. If I was an outsider and I'd look at this page, it wouldn't interest me, as it'd feel like it's "Fedora Workstation with extra steps". Images and small GIFs/videos can help preview Silverblue, which can give a much better impression to the user without needing to install it, but the current layout is unfriendly with images and GIFs.

However, I think we could improve it, but I don't think we can go as far as making it really appealing for newcomers, as this layout has the same limitations as READMEs. (Btw, I love the pixel art!)

The future of computing, today.

Designed from the core to be stable, easy to use, and modern—oh, and excellent for developers.

I feel like this says nothing to me. It sounds like something any distro's website would say. I suggest to remove this, or elaborate.

If we elaborate, then the paradigm shift should be mentioned. We should mention that containers are heavily encouraged, especially toolbx and Flatpak. The page currently does not show it as such. If someone switches from Fedora Workstation to Silverblue, then it'd be really unclear of the paradigm shift and they'd likely think that all apps are installed through dnf (like I did at the beginning).

Kinoite's website does an amazing job at that:

image

Silverblue uses an “immutable” design—that is, the core of every install of the same version is identical, and it never changes as your computer is used. That makes Silverblue more stable than other OSes, but also excellent for developers using containers.

This doesn't really explain how it's "excellent for developers using containers". Containers are useful practically everywhere, but people benefit them the most on immutable distros, as they provide mutable containers that you can use in immutable distros. We could say something like this: "[...] but also excellent for developers using containers, as these containers allow developers to deploy fully mutable containers from various distribution and experiment, without needing to change the base install." Of course, this could be improved.

Updated fast. Fast to update.

There’s a new major version twice a year with refinements to the core apps, desktop experience, and underlying technologies. Bug fixes and improvements are released nearly every day. And installing updates is fast—just continue using your computer, and they’re applied the next time you restart.

This doesn't really tell me anything and may give the wrong impression that we are sugarcoating:

just continue using your computer, and they’re applied the next time you restart.

Many people don't like restarting their system for a simple update. I feel like this is troublesome. I suggest to remove this entirely.

My apologies for being pedantic and irritating with wording. Avoiding the risk of people saying "ackchyually" would greatly benefit interest to this project from a newcomer's perspective.

travier commented 2 years ago

There is a massive effort to combine all variants of Fedora into a single website to showcase them better. I'm planning on moving the Kinoite site to this format. I would find it strange to not move the Silverblue website along too.

If you think the new design has issues then we can probably help and improve it. I don't think that moving from a custom design to another custom design would help Silverblue, especially regarding the integration with the Fedora brand.

Edit: We'll likely move Fedora CoreOS there too.

TheEvilSkeleton commented 2 years ago

I'm planning on moving the Kinoite site to this format.

Please let us know when you do it. :)

nikodunk commented 1 year ago

FYI featured more prominently now in new WIP navbar on Gitlab Pages deploy.

nikodunk commented 1 year ago

We just posted an initial WIP template, strongly inspired by the excellent Kinoite benefits @travier (most lifted word for word - hope you don't mind), to https://fedoraproject.org/sericea/. Those benefits/selling-points were very concise and well-put IMO so we copied mostly unchanged so as to not lose the clarity for now.

We will probably still need a hero image, and we will definitely still need some wordsmithing around what an immutable vs. an emerging vs. a spin vs. a lab vs. an atomic edition is, but that's the project leaders' problem :)

travier commented 1 year ago

Awesome, I'll copy that for Kinoite! 😅

travier commented 1 year ago

If someone is interested in making that happen for Silverblue, the steps are:

Dvlv commented 1 year ago

https://gitlab.com/fedora/websites-apps/fedora-websites/fedora-websites-3.0/-/merge_requests/716

I've done an MR for Silverblue - mostly copied from the Sericea page.

If people are happy with it, I don't mind doing the same for Kinoite afterwards.

nikodunk commented 1 year ago

Looks great @Dvlv thanks so much for building that! Your page is looking good at https://fedora.gitlab.io/websites-apps/fedora-websites/fedora-websites-3.0/silverblue/

Couple thoughts in general:

Dvlv commented 1 year ago

Thanks for doing all of the reviewing and merging for me @nikodunk! I've put in an MR for the community page now.

Re: /elsewhere - It looks like that hasn't been updated for 3 years, so I'm guessing it's not really needed. I'm not sure it's my place to make that decision, though.

If there's anything on there that people don't want to "lose", and it's specifically related to the Immuntability aspect of Silverblue, I can perhaps link it on https://github.com/castrojo/awesome-immutable

travier commented 1 year ago

Note that the content of this repo here (current website) won't be deleted so we can always pull things back as needed.

travier commented 1 year ago

Some notes looking at the current version at https://fedora.gitlab.io/websites-apps/fedora-websites/fedora-websites-3.0/silverblue/:

Great work! Thanks for working on this!

travier commented 1 year ago

Help with the Kinoite one is also very much appreciated 😉

nikodunk commented 1 year ago

I added the F37 arm image as a fallback, added links to Related Projects, added the Matrix Silverblue link.

I think the official mailing list is still the Workstation SIG one which is linked here, but see https://discussion.fedoraproject.org/t/proposing-a-silverblue-sig/82925? Can remove if you like.

With that, are you okay if we ship @Dvlv 's work to fedoraproject.org @travier ?

travier commented 1 year ago

This looks really good. Let's have a couple of other folks take a look to see if I missed something obvious. @tpopela @miabbott

nikodunk commented 1 year ago

OK! We'll be shipping https://stg.fedoraproject.org/silverblue to main in the next few days, and can improve further from there - nothing is set in stone. We can then also request that silverblue.fp.o is rerouted to the new one. Thanks for all your hard work @Dvlv !

miabbott commented 1 year ago

Great work here! It's awesome to see the Silverblue site get a fresh and modern look. I would definitely ship this to production as is.

As a follow up, I think it would be smart to discuss if we want to share the general layout/format across Silverblue, Kinoite, Sericea for a more unified look and feel across the variants.

JamesBelchamber commented 1 year ago

126 will redirect everything to the new site, allowing us to close off this ticket (and, I guess, archive the repository?)

tpopela commented 1 year ago

@travier I will defer to @allanday on this one.

travier commented 1 year ago

The new website is now live at https://fedoraproject.org/silverblue/. The redirection will happen with https://pagure.io/fedora-infrastructure/issue/11335. We can iterate on the new page to improve it as needed.

Pasting my comment from https://github.com/fedora-silverblue/silverblue-site/pull/126#issuecomment-1560697514 here:

I'd say that we are not in a rush to move. Let's wait until the redirection is in place in the Fedora infra for a week, and then we'll just decommission the old website and archive this repo. This keeps things neatly working and ready if for whatever reason something happens.

allanday commented 1 year ago

Thanks @Dvlv and @nikodunk for working on this! It's definitely good to see the website get an update - it's something we've needed for a long time.

Some small bits of feedback about the new site:

If there's opportunity, I'd also like to revisit the copy on the page. Three important goals there:

Ideally we'd do this before the new site replaces the old one, since it will likely get the most attention when it first launches.

Finally, is there a plan for what to do with the content from the old website? For example, it would be good to have a replacement for the contributor guide, and it would be a shame to completely lose the list of talks and blogs.

JamesBelchamber commented 1 year ago

While I think these are valid things to work on (I'd actually be interested in hacking on the copy myself), the site is already launched - it's what people get when they select "Silverblue" on the Fedora site. It's already replaced the old one, at least partially.

Are you proposing we revert that change, or that we keep them both running in parallel while working through these issues @allanday?

nikodunk commented 1 year ago

An update from @Dvlv and @JamesBelchamber addressing a few of @allanday points: https://fedora.gitlab.io/websites-apps/fedora-websites/fedora-websites-3.0/silverblue/

nikodunk commented 1 year ago 
"Get Started" should read "Download" in my book!
Various issues with the community link:
    It's not very obvious and is easy to miss (at least, it took me a while to find it)
    The link itself is ambiguous, and it's not immediately obvious whether this is a Silverblue-specific link.
    When you get through to the community page, text! And noise. Hard to know what's going on there.
    The desktop mailing list isn't a good place to direct users.
    Would it be possible to drop the community link and add a short community section to the main page, with links to Discourse and Matrix?

PS above points and wording suggestions are simply taken from http://fedoraproject.org/workstation @allanday so they'd apply there and to all other edition websites too?

Pitch Silverblue as more of an emerging technology as a opposed to a finished product.

This used to be an Emerging Edition, but then CoreOS was promoted to an Edition so it was alone, and Sericea and Kinoite are not Emerging Editions but also not Spins. So after much deliberation we changed with the help of various members (you were pinged too) to Immutable Desktops, as we needed a 4th container to hold Sericea, Silverblue, Kinoite.

If you have any suggestions on how to bucket things in navbar we're all ears, but they need to take all editions into account and not leave any orphans.

allanday commented 1 year ago

Are you proposing we revert that change, or that we keep them both running in parallel while working through these issues @allanday?

@JamesBelchamber - I would have preferred to have reviewed the text before the new site replaced the old one, but I hesitate to say that we should revert the changes...

An update from @Dvlv and @JamesBelchamber addressing a few of @allanday points: https://fedora.gitlab.io/websites-apps/fedora-websites/fedora-websites-3.0/silverblue/

@nikodunk Great! Looks better. I've turned my list into check boxes so we can keep track of what's been done.

PS above points and wording suggestions are simply taken from http://fedoraproject.org/workstation @allanday so they'd apply there and to all other edition websites too?

I hadn't noticed that Workstation has this page too - which speaks to my first point! I think you're right that this is a problem with the template.

Pitch Silverblue as more of an emerging technology as a opposed to a finished product.

This used to be an Emerging Edition, but then CoreOS was promoted to an Edition so it was alone, and Sericea and Kinoite are not Emerging Editions but also not Spins. So after much deliberation we changed with the help of various members (you were pinged too) to Immutable Desktops

The point I was making was largely about the text on the web page. I think we can amend the description without needing to reclassify what Silverblue is.

(That said, I have some concerns about "Immutable Desktops" as a user facing term. It's a term for people who are already in the know, and I can imagine those who are not in the know being confused by it.)

jimmac commented 1 year ago

Happy to see the momentum. One thing I'd like to add to the discussion is to really lean into the Fedora subbrand and just remove the out-of-place Silverblue logo at the bottom of the page.

image looks decent as is, however having it side by side with Workstation, I'd even remove the last link to the old logo and drop Overpass and also go with Monstserrat.

image

fedora-silverblue

nikodunk commented 1 year ago

Awesome feedback and pointers everyone! I hear you on the copy edits @allanday - let’s do it! Thank you!

@jimmac thank you for the constructive logo improvement! Any chance you could attach that asset with the improved font please? Or even better make a PR or insert it in the CMS directly?

Dvlv commented 1 year ago

Thanks for the feedback everyone!

The descender of the "y" in "Why Go Immutable?" is clipped

This should be fixed on the dev build https://fedora.gitlab.io/websites-apps/fedora-websites/fedora-websites-3.0/silverblue/

It would be better if the "Documentation" button was labelled "User Guide" "Get Started" should read "Download" in my book!

These buttons are consistent with the rest of the site, so IMO they would need to change everywhere. Not sure it's my place to change the rest of the site.

Various issues with the community link:

I agree that the Community template doesn't feel particularly relevant so Silverblue itself. Maybe I should try and make a bespoke "Get Involved" / "Contributing" page for SB (or maybe a shared one relevant to all the immutable distros).

Clarify the relationship between Silverblue and Workstation.

Do we have a concrete answer for this? I know @JamesBelchamber has been investigating it recently.

Avoid silently assuming knowledge (the existing text assumes that the reader is familiar with how Linux distros work). This can be done by either framing the text in terms of the intended audience, or explaining the concepts in a more accessible way.

I wonder if it would be easier to keep the description beginner-friendly if we moved the "Why Go Immutable" section to be bullet-points, like on the Workstation page, as opposed to paragraphs.

(That said, I have some concerns about "Immutable Desktops" as a user facing term. It's a term for people who are already in the know, and I can imagine those who are not in the know being confused by it.)

Also not a fan of the term, but it seems to be slowly entering the Linux-vocabulary. Open to any suggestions of a replacement - "Image-Based" maybe?

One thing I'd like to add to the discussion is to really lean into the Fedora subbrand and just remove the out-of-place Silverblue logo at the bottom of the page.

IMO we need something there for consistency. If we're dropping the SB logo itself (which I'm not opposed to, but I don't know who would actually authorise that) then we could just use the Fedora logo with the words "Fedora Silverblue" next to it, like at the bottom of the Sericea page: https://fedoraproject.org/sericea/

I would need someone to make this for me though, as I don't have any design skills.

travier commented 1 year ago

I'd go the reverse route: Make sure the Silverblue logo is used everywhere on the Silverblue pages. That'd be my preferred option for Kinoite as well. We already have "Fedora" mentioned in "Fedora Silverblue" and other editions have their own logos too.

JamesBelchamber commented 1 year ago

The redirect has now been put in place by the infrastructure team, so this repository is no longer the silverblue site.

I would encourage us to close this ticket and open some tickets against the new Gitlab project (possibly one per issue, to stop them from blocking each other.

(the site looks so much better now - well done)

travier commented 1 year ago

Alright, I'll archive this repo. Please files issues in https://gitlab.com/fedora/websites-apps/fedora-websites/fedora-websites-3.0/-/issues for remaining issues with the new website. I've already started with one for the logo.