emilsedgh wrote:What do you think about the content?

Some brainstorming.

* Home (with news as suggested by kver; access to social media and thumbs-up stuff)
* Screenshots (could be merged with features)
* Features (with alternative or related apps)
* How to get it (aka download or repository access)
* Background (I'd appreciate to read about vision, persona, requirements etc.; could be moved to Dev pages)
* Developer's section (team, contact, link to forum/blogs/discussion)

The content structure needs to apply to all KDE pages, IMHO. I'd rather let a subpage blank than having a different navigation.

neverendingo wrote: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.

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.

If you search for Plasma 5 screenshots, you will notice that Breeze goes in the "flat design" direction in general, though still with a distinctive twist so no, it doesn't look exactly like Apple. We have gotten generally quite positive feedback on that design direction, so following it with the website design sounds like the logical next step.
Of course we always want to transport our unique brand through our websites, so if we'd end up with something that could hardly be distinguished from other brands' websites, that would of course not be ideal.

Excellent excellent feedback. This is what I wanted.

neverendingo wrote: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.

First and foremost; much respect. KDE is a huge, organically grown multifaceted website, and they can be nightmares to maintain. Great work!

And actually... Those specs are not as terrible as I was imagining, but with 10 different systems it would be hard to unify to any sort of singular system. Avoiding going into the realm of the technical, this December I'm taking some vacation time. Depending on how my plate looks, I'd be interested in helping out; But this is outside the scope of this discussion for the time being, there's plenty of time to get to it later.

neverendingo wrote: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.

neverendingo wrote: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.

No offence taken.

In terms of design, I tried to stick closely to the Breeze styling which veers towards flat (even the tabs are just a flipped version of the breeze tabs. That being said, we've been talking and there's a minor consensus that reintroducing some depth would be beneficial. If we template this correctly and use decent CSS I'd personally prefer to keep any theme in lock-step with the default KDE stylings, so if this design was used it would get more depth over time as Breeze accommodates it.

I myself prefer more depth, especially with shadows. Looking over the current design and Breeze, Breeze still does use shadows, so I can introduce those to claim some depth without breaking the widget designs.


Click to Enlarge - more stuff in the screenshot. note: BEYOND ROUGH.

I reintroduced the titlebar gradient into the main navigation, added a shadow to the hero image, removed the flattening gradients in the hero, added some highlights to portraits, and adjusted some fonts.

Heiko Tietze wrote:

emilsedgh wrote:What do you think about the content?

Some brainstorming.

* Home (with news as suggested by kver; access to social media and thumbs-up stuff)
* Screenshots (could be merged with features)
* Features (with alternative or related apps)
* How to get it (aka download or repository access)
* Background (I'd appreciate to read about vision, persona, requirements etc.; could be moved to Dev pages)
* Developer's section (team, contact, link to forum/blogs/discussion)

The content structure needs to apply to all KDE pages, IMHO. I'd rather let a subpage blank than having a different navigation.

The home could serve as a portal to all the other sections; have the first couple news articles, star features, availability, etc. Then each of those would link to their fuller dedicated pages.

I generally dislike sections dedicated to screenshots for screenshots' sake. Generally you show shots sections for a few reasons; 1. To show that the application isn't ugly as sin, 2. to hide all the images of the app because it is ugly as sin, 3. to display its' functionality, or 4. to show it working in different environments. I think there's just better places to show screenshots in more appealing ways.

• For the illustrating the program isn't hideous you simply display the program prominently. Display the app like art everywhere you can, and people will know it's an attractive application. Plus, it gives you visual content to go with text.
• When it comes to illustrating features, I think it's far better to show images in the features section. Currently Okulars screenshot section gives you a tiny thumbnail and one-liner with what it's showing. We can do better; Show large images of the feature - zoomed in - a title of the feature, and a short paragraph of what you're looking at.
• The application running in different environments, to me, is a feature. Does it run on Windows, Mac, and Linux? Have a beautiful image of the Win, Mac, and Linux versions side-by-side in the features section.

With related apps, I think that's a footer thing which would be present on every page; part of a contextual navigation. I would definitely include related apps in there, maybe not in the second level navigation, as applications should really be the star of their own pages methinks.

Kver wrote:I generally dislike sections dedicated to screenshots for screenshots' sake. Generally you show shots sections for a few reasons; 1. To show that the application isn't ugly as sin, 2. to hide all the images of the app because it is ugly as sin, 3. to display its' functionality, or 4. to show it working in different environments. I think there's just better places to show screenshots in more appealing ways.

• For the illustrating the program isn't hideous you simply display the program prominently. Display the app like art everywhere you can, and people will know it's an attractive application. Plus, it gives you visual content to go with text.
• When it comes to illustrating features, I think it's far better to show images in the features section. Currently Okulars screenshot section gives you a tiny thumbnail and one-liner with what it's showing. We can do better; Show large images of the feature - zoomed in - a title of the feature, and a short paragraph of what you're looking at.
• The application running in different environments, to me, is a feature. Does it run on Windows, Mac, and Linux? Have a beautiful image of the Win, Mac, and Linux versions side-by-side in the features section.

With related apps, I think that's a footer thing which would be present on every page; part of a contextual navigation. I would definitely include related apps in there, maybe not in the second level navigation, as applications should really be the star of their own pages methinks.

+1000

Oh and you're totally fine using shadows. Using shadows to communicate depth has been part of the design style goals from quite early on. As you mentioned, the style will get refined over time as it gets applied in it's various incarnations, even this one.

colomar wrote:If you search for Plasma 5 screenshots, you will notice that Breeze goes in the "flat design" direction in general, though still with a distinctive twist so no, it doesn't look exactly like Apple. We have gotten generally quite positive feedback on that design direction, so following it with the website design sounds like the logical next step.
Of course we always want to transport our unique brand through our websites, so if we'd end up with something that could hardly be distinguished from other brands' websites, that would of course not be ideal.

Yes, that is the reason why i mentioned my opinion on flat might be highly irrelevant. If KDE will take the flat route, fine. Then the webspace should reflect that.

Kver wrote:Excellent excellent feedback. This is what I wanted.

neverendingo wrote: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.

First and foremost; much respect. KDE is a huge, organically grown multifaceted website, and they can be nightmares to maintain. Great work!

And actually... Those specs are not as terrible as I was imagining, but with 10 different systems it would be hard to unify to any sort of singular system. Avoiding going into the realm of the technical, this December I'm taking some vacation time. Depending on how my plate looks, I'd be interested in helping out; But this is outside the scope of this discussion for the time being, there's plenty of time to get to it later.

Great! Noted down. Let's get back to that at a later date.

neverendingo wrote: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.

No offence taken.

In terms of design, I tried to stick closely to the Breeze styling which veers towards flat (even the tabs are just a flipped version of the breeze tabs. That being said, we've been talking and there's a minor consensus that reintroducing some depth would be beneficial. If we template this correctly and use decent CSS I'd personally prefer to keep any theme in lock-step with the default KDE stylings, so if this design was used it would get more depth over time as Breeze accommodates it.

See above answer to colomar, if that is breeze, then it should look like that, yes. Personal taste aside.

I myself prefer more depth, especially with shadows. Looking over the current design and Breeze, Breeze still does use shadows, so I can introduce those to claim some depth without breaking the widget designs.


Click to Enlarge - more stuff in the screenshot. note: BEYOND ROUGH.

I reintroduced the titlebar gradient into the main navigation, added a shadow to the hero image, removed the flattening gradients in the hero, added some highlights to portraits, and adjusted some fonts.

Already better in terms of design, but muuuuuch better in terms of promoting a product! To the point and in a language that anybody can understand.

Heiko Tietze wrote:

emilsedgh wrote:What do you think about the content?

Some brainstorming.

* Home (with news as suggested by kver; access to social media and thumbs-up stuff)
* Screenshots (could be merged with features)
* Features (with alternative or related apps)
* How to get it (aka download or repository access)
* Background (I'd appreciate to read about vision, persona, requirements etc.; could be moved to Dev pages)
* Developer's section (team, contact, link to forum/blogs/discussion)

The content structure needs to apply to all KDE pages, IMHO. I'd rather let a subpage blank than having a different navigation.

The home could serve as a portal to all the other sections; have the first couple news articles, star features, availability, etc. Then each of those would link to their fuller dedicated pages.

I generally dislike sections dedicated to screenshots for screenshots' sake. Generally you show shots sections for a few reasons; 1. To show that the application isn't ugly as sin, 2. to hide all the images of the app because it is ugly as sin, 3. to display its' functionality, or 4. to show it working in different environments. I think there's just better places to show screenshots in more appealing ways.

+1

• For the illustrating the program isn't hideous you simply display the program prominently. Display the app like art everywhere you can, and people will know it's an attractive application. Plus, it gives you visual content to go with text.
• When it comes to illustrating features, I think it's far better to show images in the features section. Currently Okulars screenshot section gives you a tiny thumbnail and one-liner with what it's showing. We can do better; Show large images of the feature - zoomed in - a title of the feature, and a short paragraph of what you're looking at.
• The application running in different environments, to me, is a feature. Does it run on Windows, Mac, and Linux? Have a beautiful image of the Win, Mac, and Linux versions side-by-side in the features section.

With related apps, I think that's a footer thing which would be present on every page; part of a contextual navigation. I would definitely include related apps in there, maybe not in the second level navigation, as applications should really be the star of their own pages methinks.

Goodies!
Here's the SVG file for the latest Okular iteration. I had to re-assemble it, so the content is missing; but it was terrible placeholder stuff anyway.

http://kver.ca/misc/okular3.svg

Wow, non-flat version looks far better! Thanks Kver.

I don't really have any more feedback at this point. I really like the header, menu and hero image.

How should we move forward? Should we wait for more updates from you on the content?

Thanks again, this rocks

emilsedgh wrote:Wow, non-flat version looks far better! Thanks Kver.

I don't really have any more feedback at this point. I really like the header, menu and hero image.

How should we move forward? Should we wait for more updates from you on the content?

Thanks again, this rocks

Excellent! Glad to hear it'll do the job. I'll assume since no-one has voiced vehement disgust or alternatives we'll just roll with that design.

I think at this point the next thing we'll want to do is dole out who's going to do what in terms of code-level stuff, then create a functional HTML template. We'll also want to know what libraries/systems the site will be using so we can design individual pages around that (Wordpress, Yii, Joomla, Drupal, SilverStripe, or a hand-coded sites will all have different content structures). I'll also hash out the footer and a menu design to complete the basic design and get final feedback.

I can code out the template and js stuff, but in an ideal world I'd like to see someone keep that off my plate, web design is my 9-5 and I'd like to avoid it if at all possible. Emilsedgh, would you want to tackle the template, leave it to me, or does anybody else want to volunteer?

Note: We had some passionate discussion in the beginning of this thread in regards to tech and CMSs'. I'll reiterate this is just in the scope of the Okular site, and whatever Emilsedgh decides to use for the site we should respect for the final decision. If anyone has ideas or thoughts I personally don't see any problems with recommendations - but once he makes a decision we should consider that dialogue closed - even if he says he'll make it in Microsoft Word, we roll with it.

One thing I did want to ask about CMSs'; do we know whats' powering the current site, or other KDE sites? It might be a good idea to look at what exists and see about using one of the tools we already use if we have any sort of infrastructure.

Hi Kver.
You keep the design rolling, I'll take care of HTML.

About the tools we use, many sites (like current Okular.kde.org) use something we call 'Capacity'.
Its basically a plain-php template layout.

However, its a little bit old and dirty.

As previously stated, we will not use any CMS.
We do have a few of our websites based on Yii and I like that very much.
However, Yii is an overkill for this.

Our current options are:
1) Using Capacity again.
2) Creating something like Capacity, but cleaner.
3) Using a static site generator like DocPad or Jekyll.

Personally, my order of preference is:
#3 (Only if we research about them and find out they suite our possible multi-site needs)
#2 neverendingo already has a working prototype I believe.
#1

Let me know what you guys think.

emilsedgh wrote:Hi Kver.
You keep the design rolling, I'll take care of HTML.

About the tools we use, many sites (like current Okular.kde.org) use something we call 'Capacity'.
Its basically a plain-php template layout.

However, its a little bit old and dirty.

As previously stated, we will not use any CMS.
We do have a few of our websites based on Yii and I like that very much.
However, Yii is an overkill for this.

Our current options are:
1) Using Capacity again.
2) Creating something like Capacity, but cleaner.
3) Using a static site generator like DocPad or Jekyll.

Personally, my order of preference is:
#3 (Only if we research about them and find out they suite our possible multi-site needs)
#2 neverendingo already has a working prototype I believe.
#1

Let me know what you guys think.

Alright, glad to hear I'll be keeping my hands off the code; I love what I do for a living, but I'm not exactly eager to bring it home with me.

Either way it sounds like all the pages which matter (to the VDG) will have a handcrafted touch - or at least the pages which need flexibility. So we'll just leave that in the back-end and not ask questions. I'll continue loading in graphics as usual, and I still encourage others to do so as well. I know I uploaded the SVG, but if you want anything specific broken down let me know.

I don't know when my next round of images will be; I'm a bit swamped at the moment so I'm probably not going to be particularly quick in getting the next group of designs out. If you can hold out for a few days before starting any templates, I may be looking at reorganising the header one last time.

I have a pretty rough schedule at the moment so my updates for the next week are probably going to be spotty.


Click to Enlarge. note: STILL BEYOND ROUGH.



I altered the top, moved the crumb trail to the bottom, and eliminated the 'isolated' header. The font containing the secondary navigation might be made to stick to the top of the page; and would need to fill in a background (in addition to changing colour to stand out a bit from the backdrop). The links along the bottom are kinda sorta placeholders, it's basically all the dropdowns on the kde.org site, albut with a "KDE" category with some extra organization.

Again though, this is just an idea, and the old header style is still linked in this thread if that's preferred.

The menu is just a draft, but the idea is to try using graphical icons for the main links, and posting secondary links in the bottom half of the menu. The icons are placeholders, but for 'applications' it would be the main categories and/or suites. I know it's probably not going to happen, but I'd be interested in seeing those menus display some contextual links - for example, apps has the latest app-related news/release announcements.

Source SVG

I am currently implementing the latest mockup incarnation in some real code.
Some things i noticed:

• for the huge hero unit i have left out the long shadow for the title, as i prefer to implement it as text, and doing a runtime long shadow with css box-shadow does not look that good when the shadow is transparent
• I did the background of the logo separately, this way it could possibly be changed in the future without touching the logo at all. Or the logo could be changed... whatever
• Now i know why the new dropdown seemed so familiar.. It looks like the dropdown in the google bar, the one with google apps inside
  But hey, it looks nice.

The progress so far (at least in the header section):

The content itself is dummy content, so that is not interesting in this shot anyway.

On the technical side, the backend replacement is also ongoing work, and already easily integrates those website repos, which relied on our old backend.
Thanks Kver for the initiative to move this forward.