davidwright wrote:

emilsedgh wrote:
So, we need a balance here IMHO. Sharing colors between different pages, gives them a good identity. But they dont necessarily have to share the same exact layout. Otherwise, we will get to something like https://www.kde.org/applications/system/dolphin/

Do you mean sharing colours between different project websites? Because even that I'm not so sure about, as certain projects might warrant a different colour theme.

There will need to be consistent elements though as colomar rightly states, such as links to git repo, wiki, irc etc. Maybe we should settle those first?

I think this is a good time to point out that Apple is the company to look at when it comes to this; just about every product they have has a different 'personality' yet they've managed to keep it all quite cohesive. I think we should learn by their example and build the new Okular site as a sort of prototype; we'll see how customised we can get it with consistent navigations and recyclable components. If other sites are eventually done in the same way, we would have a head-start to how we want to build it.

Here's the takeaway notes I from Apples' boilerplate componants;

• Consistent top-level navigation. Top level navigation spans product likes; things like mac, watch, etc; ours might be separated by desktop, applications, libraries, etc. I think we should include this.
• Second-level navigtion spans individual products, Macbook, Macbook air, mac mini, mac pro. Doesn't show up when you're actually browsing the products; gets replaced with tertiary navigation.
• Tertiary navigation spans product attributes; What's new, upgrades, specifications, design, etc.
• Post-content product navigation tends to veer towards getting the products, support, comparison. We could look at installation instructions, downloads, help locations, and if the application is requesting it - funding support.
• Category navigation of grouped links; sends the user to similar or complimentary products with headers explaining the grouping.
• Footer navigation contains the usual generic links; languages, copyrights, legal.

Pages themselves tend to be broken down into a few key parts;

• Hero image. Fills the page. Branded to the product.
• Slideshows; sometimes contains the hero image. Usually at the top. Worth noting Apple always tries to group their interactive elements at the top of the pages.
• Columised buckets; contain important rapid-fire points about the core product specifications. Should be above the fold or peking over the lip.
• Sectioned graphics & spiel; other main features. There may be several, always more than one. Graphics alternate positions from section to section, and don't contain more than a paragraph or two.

Not all pages follow that template. Some pages include a jump navigation; many new pages are adding an 'explore' button which opens up the sub-navigation.

Apple also divides their sites into two primary 'themes' dark and light. Light-themed pages are customer-oriented. Black themes are professional oriented. Canonical does the same thing; if we do the Ocular site, I suggest if we want to be forward thinking, we design it in white.

Kver wrote:
Apple also divides their sites into two primary 'themes' dark and light. Light-themed pages are customer-oriented. Black themes are professional oriented. Canonical does the same thing; if we do the Ocular site, I suggest if we want to be forward thinking, we design it in white.

On the subject of colour themes. For the three wikis, userbase, techbase and community, I think those sites should be different colours as it's very hard to tell them apart from a quick glance, especially if you have come from a google search. They also nail down the three major elements of the community as well; developers, community contributors, and users. So if we choose three colours to define those, we can then recycle the colour schemes across the board. For example Okulars site, if we choose blue to be developer for instance, when we reference git or maintainers we could use blue for those parts. If you catch my drift?

There is a lot of discussion on a cohesive design and art style with KDE sites. Is KDE going to be in charge of all of the marketing, outreach, branding, identity for each product that uses KDE? It seems like you guys want to take over the branding for each product. What is the goal of doing this? Is it to help products that don't have enough maintainers? Could this potentially hurt products that do have a more dedicated web team?

I would like to believe that these applications are designed to help people *first*. Not to shout from the mountains that a certain technology is used. Does every PHP site dictate that a "built with PHP" icon be put on the site. If something like that was required, do you think it would hurt PHPs adoption rate?

Technology is just a tool. The knowledge of its existence should be a tertiary thing. A website like Krita.org doesn't blast all of the technologies it uses (small disclaimer: I designed it ). It does communicate in the second panel about how to get involved. Not just from a technical aspect, but potentially from a non-technical aspect.

99% of people that use these programs are NOT software developers. I started helping with open source software about a year ago. The biggest bottleneck I see in open source projects growing is that they focus too much on developers and technology -- and not enough on how their applications can practically help people solve problems.

I just started helping Krita out after a "call for help" was posted. I helped out with the blender.org site before. Blender is open source, but it follows my philosophy. The site focus on the results of the application being developed, not the technology it is built on.

scottpetrovic wrote:There is a lot of discussion on a cohesive design and art style with KDE sites. Is KDE going to be in charge of all of the marketing, outreach, branding, identity for each product that uses KDE? It seems like you guys want to take over the branding for each product. What is the goal of doing this? Is it to help products that don't have enough maintainers? Could this potentially hurt products that do have a more dedicated web team?

I would like to believe that these applications are designed to help people *first*. Not to shout from the mountains that a certain technology is used. Does every PHP site dictate that a "built with PHP" icon be put on the site. If something like that was required, do you think it would hurt PHPs adoption rate?

Technology is just a tool. The knowledge of its existence should be a tertiary thing. A website like Krita.org doesn't blast all of the technologies it uses. It does communicate in the second panel about how to get involved. Not just from a technical aspect, but potentially from a non-technical aspect.

99% of people that use these programs are NOT software developers. I started helping with open source software about a year ago. The biggest bottleneck I see in open source projects growing is that they focus too much on developers and technology -- and not enough on how their applications can practically help people solve problems.

I think the general idea is to just look at improving the sites hosted one kde.org. Sites like Krita (which are massive projects & products in their own right) would be unaffected. It's also worth noting that sites like Krita are maintained by completely different people who have their own slew of specifics and requirements, so even if we did it would simply be impossible.

The way I look at the kde.org sites is that they're the sort of "default" site; you get one it provides all the basics and context to the family of software it belongs to, and it's super-easy to maintain - but if you need more you do what Krita or EDU have done and open other much more custom sites which do better justice to the scope of your projects. kde.org can provide all the basics users would expect a program to have; about, manuals, installation instructions, faqs, developers, screenshots, and other support info. Even Microsoft utilises two websites for app suites like office; one is the motherships' website, and the other is the standalone website.

Sites like Krita and Blender have very specific features like galleries, art-centric design, DVD sales, stores, etc. I personally would keep it that way, and I wouldn't want to touch those sites with a 10-foot-pole. Sites like Okular would potentially be hindered if they had these extra features too, as it would drive up complexity. There's also no reason kde.org sites couldn't link directly to their independent counterparts, either, and vice-versa if wanted.

Generally, anything that falls into the leylines of technical info, documentation, installation instructions, updates, and community support methinks should fall to kde.org to cover, while more fanciful advertising, highly software-specific pages, or commercial interest should fall outside KDE.org. If sites wanted to maintain kde.org features on their own (like an authors section) I'd have kde.org directly link to the external resources. This thread though is focusing on the kde.org sites only; not for all sites in general. And even still, right now, the scope is limited to Okular; we're just trying to think ahead if we hit some sort of home-run and propagate the design.

The original post sounded more specific to how the Okular site looks. It does look like the post evolved into a more system wide KDE change. A system wide discussion might need more people involved than an Okular specific post topic like this. It sounds pretty large in scope.

I know it's important to discuss the overall strategy for all of KDE application websites. But if at all possible, I'd suggest that we get started on pumping out a website design for Okular. If what we learn from that design activity is translatable to other KDE application sites, then it's a win-win. But I don't think we need to solve all of the larger issues to start working on a design for the Okular team who have graciously approached us for our help.

So let's started throwing some designs on the wall.

alake wrote:So let's started throwing some designs on the wall.

Design meet wall?

Click to Enlarge
Note: very, very rough.

Oh, pretty!
I really like it

A few suggesgtions:
1) What do you think about making the 'KDE Bar' at top collapsible (And collapsed by default)? I think its sealing attention from Okular itself.
2) 'A document reader' makes no sense to me personally. How about 'A fast pdf reader', but the pdf part changes every second to other formats?
3) Im not on KF5/Plasma 5. Is that actually a screenshot from Okular or its a mockup? Could we please use real screenshots?

emilsedgh wrote:Oh, pretty!
I really like it

A few suggesgtions:
1) What do you think about making the 'KDE Bar' at top collapsible (And collapsed by default)? I think its sealing attention from Okular itself.
2) 'A document reader' makes no sense to me personally. How about 'A fast pdf reader', but the pdf part changes every second to other formats?
3) Im not on KF5/Plasma 5. Is that actually a screenshot from Okular or its a mockup? Could we please use real screenshots?

It is a bit distracting, but I'm not a superfan of hiding navigation. The mockup below has a revised top-level navigation; There's no more white-space at the top, and the darkness of the bar has been reduced so it's less eye-pulling. It also looks less distracting when viewing it (as if it were a page) since that gap at the top is gone.

For the verbiage, I ripped mostly off the Okular website, which used the term 'document reader'. I'd leave that up to the developer if they wanted to change it since they probably have a pretty good idea of how they'd want it called/advertised. You can consider just about all the text in there as good as lipsum.

I couldn't find a real screenshot (I'm not of KF5 yet, either); so it is a very, very quick mockup. Icons aren't even properly aligns if you look at it. I would probably wouldn't use actual screenshots for things like hero images, just for easier editing later - but I would make whatever final images 100% accurate. Is the image is hand-drawn, it also lets us get more creative later with the hero image.


Click to Enlarge

I won't be able to respond right away, but keep the feedback coming if this design is worth pursuing, or if something else would be more appropriate chime in, too.

Kver, you seriously rock! Me likes. Me likes a ot!

Kver wrote:I couldn't find a real screenshot (I'm not of KF5 yet, either); so it is a very, very quick mockup.

The KF5 version of Okular will be release with KDE Applications 15.08, so almost one year. The current aspect will be current for a while (no discussions about changes there have been started either, so the best thing for now is to kill the current one).

I really like the design.
Are you done with the layout?
What do you think about the content? Could we put some effort there as well?

I personally think a feature list makes sense.
Some examples:
Thunderbird
Firefox
Krita
Opera
Algolia

tosky wrote:

Kver wrote:The KF5 version of Okular will be release with KDE Applications 15.08, so almost one year. The current aspect will be current for a while (no discussions about changes there have been started either, so the best thing for now is to kill the current one).

That explains a lot. I believe qt4 apps do have a breeze theme now (correct me if I'm wrong); If someone could post a screenshot of the app in a few states (sidebar open, closed, etc) I'd like to accurately re-draw the program. Again, I don't want to use screenshots, because with a hand-drawn variant we could do neat animations on the hero (like having the background/contents of the preview occasionally change)

emilsedgh wrote:I really like the design.
Are you done with the layout?
What do you think about the content? Could we put some effort there as well?

I personally think a feature list makes sense.
Some examples:

I personally would make the homepage the features page. I figure on the landing page you'd have the big happy hero image, a description of the application, and then a presentation of key features with links to a secondary features page for a less design-oriented nitty-gritty run-down of details. That way, since primary features rarely change it's not a big maintenance hazard there's no risk for design work when smaller points change.

But if anybody has more purpose for the homepage, or entirely different designs do speak up! I only fired out the first mockup, there's so much room for other designs and concepts. I think there can be more to this conversation before we forge ahead with only one design! I'm not the last word!

Kver wrote:I personally would make the homepage the features page.

+1

Hey there, thought i should chime in.

First, i am one of those responsible for the mess we currently have on kde websites

Let me start by saying that i agree to most points about content reorganisation. And we already thought about it years ago. Partly we succeeded, partly we failed due to the pure amount of material we have. Just to throw some numbers in, kde currently has around 90(!) subdomains, over 10 different systems (cms or custom solution) in the back. So naturally, it takes some time to get everything right.

Now back to this particular case. The mockup shows a promising layout, a frontpage with some prominent teasing and then links to secondary content is unquestionably a very good way for a promotional website (which it is intended to be). That is the good part.
As for the design... i am sorry, i am not and never will be a fan of "flat design" just for the sake of it. This might seem weird from one of the inventors of Neverland (the current main kde theme website engine, like you can see on the forum here), but it was done before "flat design" even became a buzz word
When i came to KDE i was impressed by its wonderful art direction and its details. Something unique you can easily differentiate from others. Today, everything looks like apple... The old theme currently used on okular.kde.org is probably not up to date anymore and indeed needs something fresh and new. But it at least was a design, something you see and say, KDE.
The only thing in the mockup that reminds me of KDE is the icon in upper left and maybe the hero image with the okular screenshot. And - for everyone who knows him - the face of Albert in it

Note, this is no offense, just my personal opinion. And as i have no clue where KDE is going designwise on the desktop, i might even be completely wrong, and this is exactly what KDE will go for. I just wished it would be less like Apple.

As last point, even if it would be this mockup in the end, Neverland already has much of those reusable components, so it should be easy to implement. Only some minor changes needed.