I created a quick mockup at how it could look: http://identity.carlschwan.eu/plasma-desktop-new

Mm, nice. As discussed I'm thinking it's best to be straight forward with our description rather than tie ourselves in knots making everyone happy and being very generalist. Making the headline that 'Plasma is the Linux Desktop from KDE' is understandable and true. The small print can expand on that as needed saying how it works on other Unixy things too and as other shells for mobile and proof of concept for tablet/media centre/netbook etc.

One item can say how all Linux apps work great on Plasma including ones from Gnome and third parties like Mozilla and Google and Spotify or whatever. Maybe also point out how it comes with Discover to help find apps from different app stores and repos.

It could point to the Dot article about to be published about using it at the Barcelona synchotron as an example of a large rollout.

It could say how it comes as default with Linux installs from openSUSE and KDE neon and whatever else, but is also available on pretty much all Linux distros.

Mm, nice. As discussed I'm thinking it's best to be straight forward with our description rather than tie ourselves in knots making everyone happy and being very generalist. Making the headline that 'Plasma is the Linux Desktop from KDE' is understandable and true. The small print can expand on that as needed saying how it works on other Unixy things too and as other shells for mobile and proof of concept for tablet/media centre/netbook etc.

Ok :)

One item can say how all Linux apps work great on Plasma including ones from Gnome and third parties like Mozilla and Google and Spotify or whatever. Maybe also point out how it comes with Discover to help find apps from different app stores and repos.

+1 :) We should show that other apps run on Plasma. People unfamiliar with Linux probably don't know that.

It could point to the Dot article about to be published about using it at the Barcelona synchotron as an example of a large rollout.

Do you mean: https://dot.kde.org/2018/10/13/plasma-and-kde-neon-team-visit-deployments-catalunya. In that case, do you have high quality photos with the devices running Plasma?

It could say how it comes as default with Linux installs from openSUSE and KDE neon and whatever else, but is also available on pretty much all Linux distros.

Yes, we need to rework: https://community.kde.org/Distributions and highlight distros that provides KDE out of the box (KDE Neon, Manjaro, OpenSuSe, ...) and say that other distros have Plasma available in their repos.

https://elementary.io has very kool and informative page. In the Plasma page i think need add:

• Info about very important KDE applications (Discover, Dolphin, etc.).
• About the power of Plasma customisation (with screenshot examples).
• Tell about Plasmoids what it is and what opportunities they have.
• Possibly* information about the latest important innovations (for example - rewritten notification system in Plsma 5.16).
• Demo video about Plasma, because these kool animations must see all. But it must necessarily be made in very high quality. Linux Scoop makes very kool videos about linux distributions, maybe ask him to make a video for KDE about Plasma desktop? Example - KDE neon.

Also need to update a KDE neon page, there is too simple.

In T11243#192178, @KonqiDragon wrote:

https://elementary.io has very kool and informative page. In the Plasma page i think need add:

Completely forgot about ElementaryOs, this is a nice source of inspiration ;)

• Info about very important KDE applications (Discover, Dolphin, etc.).

+1

• About the power of Plasma customisation (with screenshot examples).

I already planed to create a kool video with a slideshow of screenshot of plasma with each screenshot having an additional modification than the previous.

• Tell about Plasmoids what it is and what opportunities they have.

Good but we need an easy explanation ;)

• Possibly* information about the latest important innovations (for example - rewritten notification system in Plsma 5.16).

This is already available in my mockup: http://identity.carlschwan.eu/plasma-desktop-new ;)

• Demo video about Plasma, because these kool animations must see all. But it must necessarily be made in very high quality. Linux Scoop makes very kool videos about linux distributions, maybe ask him to make a video for KDE about Plasma desktop? Example - KDE neon.

Interesting we should contact him then we have more ideas how this new page should look.

Also need to update a KDE neon page, there is too simple.

Let's do it one step at a time ;)

Btw if you want to contribute (content, design, video, ...), let me know ;)

Lots of great ideas here! I would just warn you about two things:

1. be careful not to overload this page with too much information. Of course it's great to provide links to additional information for those who want to learn more (and contribute!), but a casual visitor who is not very familiar with Linux must be able to quickly understand what Plasma is from this page. We must be careful not to scare such visitors away with a massive wall of text.

2. linking to static articles on the Dot might not be the best idea because there comes a time when they are no longer "fresh" news. This means we would have to manually update those links whenever a more relevant piece of news comes out, which means we're just creating extra work for ourselves.

Videos and animations are a good way to go, IMHO. People - especially beginners - love to see things in action, and that way we'd be practicing the "show, don't tell" approach. Just don't get lost in trying to fit everything in them 😄 That's what happens to me very often: I want to mention EVERYTHING you can do with an app, and then my articles get way too long. It's better and more helpful to the user to focus on 5-6 points instead of trying to mention every single detail. Otherwise they tend to get confused or think it's "too complicated".

Your mockup looks great. The only thing I would change is the font size, because currently the balance of image size vs text size is off. An increase in font size and maybe in line height/spacing would help a lot with readability in general, I think.

In T11243#192180, @ognarb wrote:

In T11243#192178, @KonqiDragon wrote:

https://elementary.io has very kool and informative page. In the Plasma page i think need add:

Completely forgot about ElementaryOs, this is a nice source of inspiration ;)

• Info about very important KDE applications (Discover, Dolphin, etc.).

+1

• About the power of Plasma customisation (with screenshot examples).

I already planed to create a kool video with a slideshow of screenshot of plasma with each screenshot having an additional modification than the previous.

• Tell about Plasmoids what it is and what opportunities they have.

Good but we need an easy explanation ;)

• Possibly* information about the latest important innovations (for example - rewritten notification system in Plsma 5.16).

This is already available in my mockup: http://identity.carlschwan.eu/plasma-desktop-new ;)

• Demo video about Plasma, because these kool animations must see all. But it must necessarily be made in very high quality. Linux Scoop makes very kool videos about linux distributions, maybe ask him to make a video for KDE about Plasma desktop? Example - KDE neon.

Interesting we should contact him then we have more ideas how this new page should look.

Also need to update a KDE neon page, there is too simple.

Let's do it one step at a time ;)

Btw if you want to contribute (content, design, video, ...), let me know ;)

I think that is how should look the area about new version of Plasma. But it's not perfect and needs to be improved.

In T11243#192184, @KonqiDragon wrote:

I think that is how should look the area about new version of Plasma. But it's not perfect and needs to be improved.
<image>

If you do it this way, then all this text needs to be replaced and updated for every Plasma release.

Now the Discover tabs supports video with autoplaying on click.

In T11243#192275, @ognarb wrote:

Now the Discover tabs supports video with autoplaying on click.

Maybe need to remove this laptop? Discover is too small, can't even read the text.

On Apple page is better, text is clearly to read and the window of program is much bigger.

Look what i did.

It looks better than just all in the center.

When you switching, there must be such an animation. Text and image should become transparent during animation. A new text and images must from transparent becomes to normal.

@KonqiDragon Thanks, this looks really nice. Before I start implementing, how should this design looks on small display? Should I move the text under the image?

Definitely put the text under images - not just on mobile, but on the desktop version as well. It doesn't look good at all when it's offset like that.

What about using small videos (as section background) or gif animations ainstead of static pictures ?
It could be more informative and appealing, special when it comes to show how customizable plasma is.

In T11243#192316, @mmustac wrote:

What about using small videos (as section background) or gif animations ainstead of static pictures ?
It could be more informative and appealing, special when it comes to show how customizable plasma is.

This is already the case for the discover tabs ;)

In T11243#192313, @skadinna wrote:

Definitely put the text under images - not just on mobile, but on the desktop version as well. It doesn't look good at all when it's offset like that.

ElementaryOS site has text on the side in desktop version and under in the mobile.

Sure they do. But their text size to image size ratio is much more balanced than in your example, their text is spaced better, and their page width seems larger than in your example. If you want to do it this way, then the images from your example should be a lot smaller. Ideally it would be 50:50; it looks like the elementary example is pretty close to that.

Or should I find an example of some other project that puts text below images? I mean, we can find a bunch of examples for whatever we want. The point is, the layout of the page should not negatively impact the readability.

In T11243#192343, @skadinna wrote:

Sure they do. But their text size to image size ratio is much more balanced than in your example, their text is spaced better, and their page width seems larger than in your example. If you want to do it this way, then the images from your example should be a lot smaller. Ideally it would be 50:50; it looks like the elementary example is pretty close to that.

Or should I find an example of some other project that puts text below images? I mean, we can find a bunch of examples for whatever we want. The point is, the layout of the page should not negatively impact the readability.

If you put all the text under images, will need to scroll a lot. So need to do it like in ElementaryOS site. Maybe also add icons too?

Thanks @niccolove and @mmustac for the links.

3d models would be nice to show where Plasma run, but will also need a lot of work to create (at least for me).

In T11243#192386, @ognarb wrote:

3d models would be nice to show where Plasma run, but will also need a lot of work to create (at least for me).

I'm trying to do some 3D renders, but I'm not sure I will succeed.

The Plasma page needs more careful planning than this. You want to say enough to get your message across, but not so much as to overwhelm. You want to include videos, slideshows, GIFs and 3D models. You also seem to be inclined towards gradient and textured backgrounds. Altogether it is too much.

Before you continue, answer me this question in one sentence:

What do you want a visitor to do after browsing this page?

You are right, I was a bit too enthusiastic and it's probably going to be too much.

So to answer to your question:

I want a visitor to understand what Plasma is and having him convinced to install a distribution offering Plasma. ;)

I want a visitor to understand what Plasma is and having him convinced to install a distribution offering Plasma. ;)

Of those two things, one leads to the other, so it is really one thing. Your reasoning is: if visitors understands Plasma, they will want to install (and use) Plasma. This is good reasoning, but then your ultimate goals is:

I want visitors to install and start using Plasma.

That makes sense to me too.

Where are the means for the visitor to achieve that goal in your design?

They should be easily accessible for the visitor, the first things they see. They should also be clearly signalled, maybe with something like a "Get Plasma here" button, which links to a list of distros that provide Plasma, and direct downloads of Plasma packages (Snaps, Flatpaks, or whatever).

Around this you can add a graphical element and some text:

• The graphical element can be a slideshow or a video showcasing Plasma's features. Nothing too long or boring.

• The text should be short, four lines maximum, describing what the visitor can do with Plasma.

Note: Do not try and say what it is. The concept of "desktop environment" is very hard to define without using the word "desktop" and "environment" -- and those words don't help. You say what it does for the visitor.

The text could say something like:

Use Plasma to surf the web; keep in touch with colleagues, friends and family; manage your files, enjoy music and videos; and get creative and productive at work. Do it all in a beautiful environment that adapts to your needs, and with the safety, privacy-protection and peace of mind that the best Free Open Source Software has to offer.

... something like that, but with more polish. You want to say what the visitor can do and why it is better than alternatives. The graphical element (video or slideshow) will give the rest of the context.

Notice how elementary does it:

The fast, open, and privacy-respecting replacement for Windows and macOS

They are giving visitors a reference so they know what they are getting, and also telling visitors why elementary is better... And then they have THE BUTTON.

(I did not look at the elementary site before writing this).

Everything else you put on the page will be distracting, so you have to put it under the fold (that is: the visitor must scroll down to see it). Under the fold, you can have a "Find out more" section, with more texts and graphics, highlighting specific features in Plasma.

But what goes under the fold should not be your priority. Concentrate on getting the visitor to your goal first.

@KonqiDragon those mockups look amazing!!

Looks incomprehensible.

In macOS Mojave site there is a thing you can drag and watch how it changes. I think you should do it like there.

Maybe add a icons?

In T11243#193055, @KonqiDragon wrote:

Looks incomprehensible.

Yeah I'm not happy with this image too and I wanted to change it anyway.

In macOS Mojave site there is a thing you can drag and watch how it changes. I think you should do it like there.

If I can find a lightweight Javascript plugin for this, I could try to do it with a slider.

Maybe add a icons?

KRunner doesn't have an icon :(

KRunner doesn't have an icon :(

It can be fixed, we have VDG's dragons, need to find one of them and ask him to draw an KRunner icon.
Or use some icon which we already have.

I started writing/copying texts for the page:
https://notes.kde.org/p/web-plasma-desktop-texts

Feel free to join, edit or discuss!

Thank you @vinzenzv ;)

I don't like the current behaviour of the "Get plasma here." button; especially for people without too much knowledge about the linux world, being redirected to a list with 40 different distributions and almost no way to distinguish between them is not ideal. I think the webpage should try to redirect the user to KDE Neon, unless the user specifically wants for a list of compatible distributions. Furthermore, I would also add the option to see a page with a list of computers with plasma by default ("Buy a computer with plasma").

@niccolove I agree that this page isn't the best, but promoting KDE Neon too much will make a lot of people angry. Maybe we could only promote distro with KDE edition (openSUSE, Kubuntu, Manjaro, and a lot more). A page with "Buy a computer with Plasma" with TUXEDO, Slimbook, Pinebook, ... could be interesting too, but we should determine first if e.V. agree linking to commercial product.

We use plasma-search for KRunner's icon:

Maybe it's not the best, but we do use it pretty consistently.

I added a video for the KDE Connect "send files" feature.

In T11243#193069, @ognarb wrote:

@niccolove I agree that this page isn't the best, but promoting KDE Neon too much will make a lot of people angry. Maybe we could only promote distro with KDE edition (openSUSE, Kubuntu, Manjaro, and a lot more). A page with "Buy a computer with Plasma" with TUXEDO, Slimbook, Pinebook, ... could be interesting too, but we should determine first if e.V. agree linking to commercial product.

We need to promoting one distribution as recommended by KDE. KDE neon has a clean and latest version of Plasma.

We need to not forget about the Linux newbies.
Imagine that you are newbie and you want to choose distro with Plasma:

• 10110 OS
• 01100 OS
• 00100 OS

How to understand what is better for you?

Let's recommend a KDE neon in Plasma page, but also provide the all list of distributions with Plasma.

@KonqiDragon it's not that simple. While I agree with you from a usability perspective, there are political considerations at play. For example: Canonical and SUSE are KDE patrons. Both of them produce or support distros that offer KDE Plasma as an option. They understandably get a bit upset when we promote our own offering over theirs. Sensitivity to our patrons is also why KDE Neon takes great pains to label itself as "not a distro" (even though it obviously is one and is used as such; the Slimbook folks even ship hardware with it).

The whole situation is somewhat awkward. But until and unless it is somehow resolved, we should not explicitly recommend KDE Neon as "The KDE Distro". I agree with @paulb that we should have some objective criteria (e.g. ships Plasma by default; ships reasonably recent versions, etc.) and use those to recommend a few distros. If Neon winds up meeting the criteria, that's fine. But it needs to be rule-based rather than just us promoting Neon because it's ours. My sense is that a final list based on the above will probably wind up consisting of Neon, openSUSE, Kubuntu, and Manjaro (with a link to the full distro list), but I might be missing a few.

In T11243#193111, @KonqiDragon wrote:

We need to not forget about the Linux newbies.
Imagine that you are newbie and you want to choose distro with Plasma:

• 10110 OS
• 01100 OS
• 00100 OS How to understand what is better for you?

Explain it. Even newbies understand what choice means if you explain it in a few words.
And most distributions can be described very basically.

Let's recommend a KDE neon in Plasma page, but also provide the all list of distributions with Plasma.

I'd prefer not doing that. While Neon is a KDE product somehow, it's the freedom of choice (generally speaking) what leads people to Linux a lot. Setting focus just on Neon would narrow this advantage.

The whole situation is somewhat awkward. But until and unless it is somehow resolved, we should not explicitly recommend KDE Neon as "The KDE Distro". I agree with @paulb that we should have some objective criteria (e.g. ships Plasma by default; ships reasonably recent versions, etc.) and use those to recommend a few distros. If Neon winds up meeting the criteria, that's fine. But it needs to be rule-based rather than just us promoting Neon because it's ours. My sense is that a final list based on the above will probably wind up consisting of Neon, openSUSE, Kubuntu, and Manjaro (with a link to the full distro list), but I might be missing a few.

Need only 3 recommended distributions - Neon, openSUSE, Kubuntu, but need to write what is difference between this distros.
For example:

• KDE neon - Most latest versions of KDE software.
• openSUSE - Most stable.
• Kubuntu - Like Ubuntu, but with K.

and full distro list.

Patrons will not be offended, you have a choice and there is my favorite KDE neon.

I updated the diff with all the content and more screenshots. the new preview link is https://kde.carlschwan.eu/plasma-desktop

In T11243#196139, @ognarb wrote:

I updated the diff with all the content and more screenshots. the new preview link is https://kde.carlschwan.eu/plasma-desktop

Laptop still is too small screenshots on screen look very small.

Dark theme i suggested showing in this way:

In T11243#193055, @KonqiDragon wrote:

In macOS Mojave site there is a thing you can drag and watch how it changes. I think you should do it like there.

It looks more better, and makes it possible to compare Light and Dark themes. I think you need to use Dolphin screenshot with Light and Dark themes.

During switching the tabs showings animation - Laptop and screenshot inside transiting with something like flash effect.
How to do it better IMHO:
Variant 1: The laptop will always be static, screenshots inside must switching with Fade transition.
Variant 2: The laptop will always be static, screenshots inside must switching with Push transition like in KDE Main Page. (In XFCE Main Page there is something similar too).
In XFCE Main Page wallpaper and windows is separately, this allows you to change only the wallpapers, and not necessary every time makes new screenshots with new wallpapers.

In T11243#196323, @KonqiDragon wrote:

In T11243#196139, @ognarb wrote:

I updated the diff with all the content and more screenshots. the new preview link is https://kde.carlschwan.eu/plasma-desktop

Laptop still is too small screenshots on screen look very small.

I removed the laptop frame for smaller device. This isn't quite optimal yet, but it's already an improvement.

Dark theme i suggested showing in this way:

In T11243#193055, @KonqiDragon wrote:

In macOS Mojave site there is a thing you can drag and watch how it changes. I think you should do it like there.

It looks more better, and makes it possible to compare Light and Dark themes. I think you need to use Dolphin screenshot with Light and Dark themes.

Could you provide the code for this functionality (without any dependencies to JQuery or another big js framework)?

During switching the tabs showings animation - Laptop and screenshot inside transiting with something like flash effect.
How to do it better IMHO:
Variant 1: The laptop will always be static, screenshots inside must switching with Fade transition.
Variant 2: The laptop will always be static, screenshots inside must switching with Push transition like in KDE Main Page. (In XFCE Main Page there is something similar too).
In XFCE Main Page wallpaper and windows is separately, this allows you to change only the wallpapers, and not necessary every time makes new screenshots with new wallpapers.

I can not make only the laptop always static without writing some custom JavaScript and I would prefer to not have to maintain more JavaScript dependencies.

Could you provide the code for this functionality (without any dependencies to JQuery or another big js framework)?

Can you copy the inspect code from here?

No because the code is not open source.

In T11243#196426, @ognarb wrote:

No because the code is not open source.

Are there alternatives to this?

UPD: I found this

https://github.com/CodyHouse/image-comparison-slider
https://github.com/kavyasukumar/imgSlider
https://github.com/koenoe/cocoen
https://github.com/jotform/before-after.js

First part has landed and got some press coverage: https://www.omgubuntu.co.uk/2019/09/kde-plasma-desktop-new-website

My blog post: https://carlschwan.eu/2019/09/16/plasma-desktop-webpage.html

@KonqiDragon Thanks. From the 4 links, I think cocoen makes the more sense. I will try to add it later next week. :D

I think instead of "Use Plasma to surf the web; keep in touch with colleagues, friends and family; manage your files, enjoy music and videos; and get creative and productive at work. Do it all in a beautiful environment that adapts to your needs, and with the safety, privacy-protection and peace of mind that the best Free Open Source Software has to offer." Need to make like in Zorin OS site "Your computer. + switching text"

In Plasma site i suggest to make something like this:

Below will write a Plasma is a Free and Open-Source desktop environment...

2. Also instead of "Plasma is a Desktop Environment" its better to use just the monochrome Plasma logo and the KDE Plasma/KDE Plasma 5 inscription.

3. Get Plasma Here button it's better to move underneath the laptop.

Also Distributions site we need to make it clearer for the beginners.

4. There's too much text everywhere, make it easier, please.

still needs to add a small section for plasma browser integration