Hi,
Do you mind if I forward everything below to web@?
Thanks for all the feedback, I disagree with some of it but I generally welcome the proposals. But we need to discuss this in the right list. Some of the points you mention as problematic were not in the original design I did and were added after.
Also, some changes are larger than just the web design. For instance, adding "Free Software Foundation Europe" under the logo is something we never do in our "branding". While I think it's a mistake, it's not something that I addressed here, as I tried to have as few changes as possible in order to roll out the new design first.
I hope that gives a bit of background ;-)
Best, Hugo
+ 2014-02-21 Fri 13:44, Matthias Kirschner mk@fsfe.org:
Hi Hugo,
here the thread. Don't understand why it was done on designers@.
Regards, Matthias
-- Matthias Kirschner - Vice President FSFE Schönhauser Allee 6/7, 10119 Berlin, t +49-30-27595290 Weblog (blogs.fsfe.org/mk) - Contact (fsfe.org/about/kirschner) Receive monthly Free Software news (fsfe.org/news/newsletter.html) Your donation enables our work (fsfe.org/donate)
Date: Sun, 16 Feb 2014 00:59:34 +0100 From: Franz Gratzer franz.gratzer@fsfe.org To: designers designers@fsfeurope.org Message-ID: 1392508774.4408.83.camel@mim.ext Subject: Transition to the new web design
Sorry for being harsh in this mail, but I feel like I need to be very clear on this in order to get across of what I feel about the new design.
I would love to read some feedback from other designers on this. If I'm the only one having issues with some aspects of the new FSFE web design, then it might be in fact the best to just ignore my ranting, but if I'm not the only one, we should do something to improve it. (I would be glad to help improving things. In my opinion there isn't much to do to get much better results.)
I'm very, very unhappy with the fellowship-logo-structured background. Because of it it's nearly unbearable to me to visit the new web page. This might be hard to understand for most people, but as a graphic designer such things are very important to me.
There is no good reason to use such a clear big structure behind the menu text. It's just in the way. As well the logo looks completely lost, because it sits just somewhere. I assume the person positioning it wanted to have it somewhere up on the left side and with enough space around. The problem with this is, that it's position should at least in any direction correspond to the positioning of other elements. At the moment its just thrown in without any consideration of correlation. (I know technically this isn't exactly true since it's bottom-aligned with the menu, but optically this isn't the case since the background of menu elements is only displayed on mouse over.)
Yes there are large pics on the front page. But this is by far not enough if you consider, that normally people just surf on sub pages when they read any content. And I assume we want people to enjoy reading on our page. The texts are easy to read. That's generally good, but they should appear clearly structured with an understandable concept as well.
If the only thing users get to see is just text pages they should be designed excellent. Otherwise I very much doubt reading them is very tempting. At the moment the start page is the worst since the text there looks completely chaotic. Different font variations, sizes and line spaces.
If elements should look different for good reasons, they need to be clearly different in order to do not look chaotic.
"Free Software, Free Society!" is a great claim but design wise it's just in the way - at least if the image slider is directly underneath it.
The only ok image of three slider images on the home page, which I would consider using as a display image, is the ilovefs image. And even that could be much improved by adjusting colours and contrasts. The other two images just look like they have been done by an amateur. They might be ok for a private page, but not for an international organisation the representatives of the European parliament should take serious. The same is valid for the background with the grey fellowship logos. And I believe we want the FSFE web page to transport a professional look and feel.
The testimonials are a pain as well since I found no way of stopping or going back if I didn't have enough time to read the sometimes quite long texts.
The many little imperfections like missing alignment or random spaces between elements destroy the beauty of the whole design concept which I generally find very well done.
For example: Even if there is a logical/technical reason why the press page has not the same margins than the other main pages from the menu: this is not at all obvious to the visitor. There is just no understandable reason for one page being different suddenly.
It's nice to have at least the decoration of the green waves, but they should never get in the way of the text or looking like fighting against it because they are too close to it...
So I hope who ever involved in the rebuild of the web page doesn't feel attacked by my criticism personally. I'm sure the rebuilding process was a huge amount of work and a big step forward concerning many practical reasons. Even if I prefer the old design for aesthetic reasons I do understand, that a mobile friendly solution is important.
I just think we can do much better with a little more love to details and consideration of usability.
Best regards, Franz
Designers mailing list Designers@fsfeurope.org https://mail.fsfeurope.org/mailman/listinfo/designers
Date: Sun, 16 Feb 2014 12:12:10 +0100 From: Robert Martinez mail@mray.de To: designers@fsfeurope.org Message-ID: 53009D0A.5030007@mray.de Subject: Re: Transition to the new web design
Hello Franz
On 16/02/14 00:59, Franz Gratzer wrote:
I would love to read some feedback from other designers on this. If I'm the only one having issues with some aspects of the new FSFE web design, then it might be in fact the best to just ignore my ranting, but if I'm not the only one, we should do something to improve it.
I tend to agree with most of the issues you raise. In order to facilitate things maybe you want to provide mockups of solutions to the problems in your eyes?
Here is my opinion:
@background the readability of the menu really suffers from the background, otherwise I think the background itself is ok. (maybe a subtle white glow in the menu already reduces the effect enough)
@slogan "Free Software Free Society" is more problematic on the background. I propose to merge it into the slides.
@logo the free psoitioning does not bother me at all - in my eyes it could even be placed more disruptive to even intentionally jump out of the grid.
@typo the site indeed lacks a consistent hierarchical, well balanced typographic order.
@slider images imho they don't matching the style of the surrounding site, they could be less saturated and not repeat using the same plussy-background as the main page.
@press page margin i think this is just a design bug.
@footer background waves i think it is more problematic that they are inconsistent: the front page uses another background that does not fit the page style at all.
These issues should be regarded as improvements to a great new site. It's just as Franz said: It could be much better very easily.
Robert
Designers mailing list Designers@fsfeurope.org https://mail.fsfeurope.org/mailman/listinfo/designers
Date: Sun, 16 Feb 2014 21:45:16 +0100 From: Franz Gratzer franz.gratzer@fsfe.org To: designers@fsfeurope.org Message-ID: 1392583516.4438.95.camel@mim.ext Subject: Re: Transition to the new web design
Hi,
thanks for your feedback, Robert. I'm glad that I am not the only one seeing potential for improvement. I did mock-ups like you suggested (with the font face already used on the web page).
I argued we should use more images, but I didn't want to force anybody to take care of getting pictures for new content all the time. Therefore I didn't include any additional imagery.
Home page: http://www.veganmania.at/div/web-mockup.png
I wanted to change as little as possible. I mainly tried to clearly separate different blocks with enough space and careful styling. I didn't want to add any new elements.
I kept the waves from the sub pages (deliberately not those from the home page). Further more I positioned them on the bottom of the content area instead of above the last item.
The footer is complicated. It contains several floating columns with variable width, but fixed height. This way the columns behave like words in a text line and will adapt to every screen width. But I wouldn't put that many links in this complex structure. In my opinion it would work much better if we just showed a link to a complete hierarchical site map.
Sub-pages: http://www.veganmania.at/div/web-mockup-sub.png
I strongly suggest getting rid of the multi-column layout on the sub pages. More than one column containing the same content type makes it impossible to conveniently scan through the content of a page if the columns contain more than just single word lists. Therefore it's very frustrating on normal sized monitors. (I guess multi-column layouts are popular because they are a fast/cheap solution if people optimise designs for small screens without enough patience to do the same for workstation displays. But disregarding design/usability flaws on larger screens is not less problematic than ignoring mobile devices.)
Since the FSFE web site has quite a deep structure people can get completely lost without a breadcrumb navigation. Therefore I added it on top of the content area on my sub page layout.
Please tell me what you think of my proposals!
Best Regards Franz
On Sun, 2014-02-16 at 12:12 +0100, Robert Martinez wrote:
Hello Franz
On 16/02/14 00:59, Franz Gratzer wrote:
I would love to read some feedback from other designers on this. If I'm the only one having issues with some aspects of the new FSFE web design, then it might be in fact the best to just ignore my ranting, but if I'm not the only one, we should do something to improve it.
I tend to agree with most of the issues you raise. In order to facilitate things maybe you want to provide mockups of solutions to the problems in your eyes?
Here is my opinion:
@background the readability of the menu really suffers from the background, otherwise I think the background itself is ok. (maybe a subtle white glow in the menu already reduces the effect enough)
@slogan "Free Software Free Society" is more problematic on the background. I propose to merge it into the slides.
@logo the free psoitioning does not bother me at all - in my eyes it could even be placed more disruptive to even intentionally jump out of the grid.
@typo the site indeed lacks a consistent hierarchical, well balanced typographic order.
@slider images imho they don't matching the style of the surrounding site, they could be less saturated and not repeat using the same plussy-background as the main page.
@press page margin i think this is just a design bug.
@footer background waves i think it is more problematic that they are inconsistent: the front page uses another background that does not fit the page style at all.
These issues should be regarded as improvements to a great new site. It's just as Franz said: It could be much better very easily.
Robert
Designers mailing list Designers@fsfeurope.org https://mail.fsfeurope.org/mailman/listinfo/designers
Designers mailing list Designers@fsfeurope.org https://mail.fsfeurope.org/mailman/listinfo/designers
Date: Mon, 17 Feb 2014 00:10:57 +0100 From: Robert Martinez mail@mray.de To: designers@fsfeurope.org Message-ID: 53014581.6060203@mray.de Subject: Re: Transition to the new web design
Hi,
I'm glad to throw in my opinion here, but want to stress that I'm not a contributor in the website team. So my opinions are just what they are:
On 16/02/14 21:45, Franz Gratzer wrote:
Hi,
thanks for your feedback, Robert. I'm glad that I am not the only one seeing potential for improvement. I did mock-ups like you suggested (with the font face already used on the web page).
I argued we should use more images, but I didn't want to force anybody to take care of getting pictures for new content all the time. Therefore I didn't include any additional imagery.
@image slider Everybody seems to favor images, and they're part of the design - so don't avoid them. Using them just for typo is a cheap way out and a bad hack. If it turns out to be too much of a challenge you should probably get rid of the slider altogether. coming up with a interesting, unique and consistent way to alter images (colorization, effects.) might pave the way for easier content maintenance. The background has too few contrast to that particular slider image, too imho.
Home page: http://www.veganmania.at/div/web-mockup.png
I wanted to change as little as possible. I mainly tried to clearly separate different blocks with enough space and careful styling. I didn't want to add any new elements.
@typography why do you abandon roboto in the headline? my main problem was the wrong use of font weights: the original mixes light and heavy weights at almost the same sizes in headline and copy text - creating visual confusion. adding a new font does not help here inmho. i suggest just using roboto at font-weight 300 most of the time in this context.
@color I think you changed way too much with introducing a new background and type color. They're not part of the styleguide: https://fsfe.org/contribute/designers/styleguide.en.html and also do not contribute to the "fresh" feeling it establishes. I'd stick to white and bright gray in the background.
I kept the waves from the sub pages (deliberately not those from the home page). Further more I positioned them on the bottom of the content area instead of above the last item.
works better that way indeed.
The footer is complicated. It contains several floating columns with variable width, but fixed height. This way the columns behave like words in a text line and will adapt to every screen width. But I wouldn't put that many links in this complex structure. In my opinion it would work much better if we just showed a link to a complete hierarchical site map.
you're right. the footer seems to actually *be* a sitemap. if this is intentional it should be complete. Otherwise it seems overloaded to me as well. Linking to a proper sitemap sounds like a good idea.
Sub-pages: http://www.veganmania.at/div/web-mockup-sub.png
I strongly suggest getting rid of the multi-column layout on the sub pages. More than one column containing the same content type makes it impossible to conveniently scan through the content of a page if the columns contain more than just single word lists. Therefore it's very frustrating on normal sized monitors. (I guess multi-column layouts are popular because they are a fast/cheap solution if people optimise designs for small screens without enough patience to do the same for workstation displays. But disregarding design/usability flaws on larger screens is not less problematic than ignoring mobile devices.)
Lines with too many characters aren't nice to read. So I actually embrace the three column approach. the first column isn't used much at all and the others are mostly filled with short text units.
Since the FSFE web site has quite a deep structure people can get completely lost without a breadcrumb navigation. Therefore I added it on top of the content area on my sub page layout.
i ahve the feeling that one of the advances of the new design was to hide the deep content structure from unnecessary confusion. the main menu does a great job in that, i don't see much of a need for a breadcrumb for most of the people (espacially because deeper links are placed at the bottom - not the top) but this might be just my dislike for breadcrumbs in general.
Please tell me what you think of my proposals!
I think you raised some valid concerns but think your proposals head in a wrong direction.
In suggest keeping it to minor corrections like the small css changes i introduced to the "Our Work" page in the attachment
- added 4x border radius to the corners of the background and headline
background shape 2. changed weight and shadow color of headline 3. shortened the "home" & "language" buttons on the top left 4. added (maybe too much) transparent white background glow to the main menu 5. changed copy text weight to 300, too.
treating the front page the same way and adding "better" slider images would be good enough for me. actually i think the site looks way better than fsf already ;)
Robert
Designers mailing list Designers@fsfeurope.org https://mail.fsfeurope.org/mailman/listinfo/designers
Date: Mon, 17 Feb 2014 12:37:31 +0100 From: Franz Gratzer franz.gratzer@fsfe.org To: designers@fsfeurope.org Message-ID: 1392637051.4438.75.camel@mim.ext Subject: Re: Transition to the new web design
Hi again,
the home link on the top right hand side is redundant since it's a very well established custom to just click on the logo to get back to the home page.
I don't feel, that your proposal solves much of the problems I have identified.
The whole web page at the moment leaves the style guide aside by using a different font face than Nimbus. I just stuck with Roboto since it was already used on the web page and it offers more font variation than Nimbus.
As well the bright blue boxes around the side headers with drop shadows are completely unprecedented in the style guide. Even the colour is new. Yes, I use very bold text for headlines my proposal, but it still is closer to the look and feel of the style guide, than the actual design online.
I didn't use a plain grey since the yellowish shade makes it much friendlier. The style guide doesn't define any grey at all. Actually there is no mentioning of any background. Presumably because it only considers print layouts. Nothing contradicts the style guide more, than the background structure in the background at present.
Despite of this I made an other proposal incorporating some of your feedback: http://www.veganmania.at/div/web-mockup2.png
Concerning the slider image you made a fair point. My proposal isn't very good in that regard. I didn't focus on the slider image since it's only temporary and will be replaced. I originally used a different font in the slider image because it looks like the t-shirts with the same words, the FSFE is selling. Obviously large slider images depend on good pictures even more than news thumbs you would normally use on the page. I don't think we can use poor quality images and expect to make them attractive by applying any effects.
I strongly feel we need to use heavier weights for headlines in order to make them stick out. Thin headlines only work with a lot of space and huge font size variations.
The problem of too long lines can easily be solved by limiting the possible content container width to a maximum value of for example 1000 pixels. On larger screens the content area can be centred. This way we do not sacrifice anything and could provide an easy and comfortably to grasp web page.
It's great that the web team has managed to provide a sticky menu. This is much better than on most organisation pages and shows the FSFEs ability to understand what is important. But there is obviously still a lot work to do with the footer and the myriads of badly structured sub pages. (Of course this is no failure of the web team since it's mainly something which has been piling up in years without an established way to structure content and it's obviously an incredible amount of work to adapt so many pages afterwards.)
I don't get why anybody would want to hide the site structure by keeping people in the dark on where they actually are in the whole structure. How should they find the provided information again, if they forgot the exact link or history of followed links? For me a breadcrumb navigation is a very minimal and still extremely useful tool to stay oriented on a large web page. - Especially if the menu doesn't show more than the main sections only.
The FSF web page clearly isn't a good design reference, but I still think it's in some aspects easier to use than the new FSFE page (at least on a workstation screen), since the content is much easier to scan, if you want to understand, what information is in front of you. Even the monstrous footer section is easier to grasp.
Only now I realised, that there actually is a practical side column with interresting additional information and links on the right hand side of many sub pages, but it isn't used in a reliable manner. Therefore I just didn't get it until now...
Best regards Franz
On Mon, 2014-02-17 at 00:10 +0100, Robert Martinez wrote:
Hi,
I'm glad to throw in my opinion here, but want to stress that I'm not a contributor in the website team. So my opinions are just what they are:
On 16/02/14 21:45, Franz Gratzer wrote:
Hi,
thanks for your feedback, Robert. I'm glad that I am not the only one seeing potential for improvement. I did mock-ups like you suggested (with the font face already used on the web page).
I argued we should use more images, but I didn't want to force anybody to take care of getting pictures for new content all the time. Therefore I didn't include any additional imagery.
@image slider Everybody seems to favor images, and they're part of the design - so don't avoid them. Using them just for typo is a cheap way out and a bad hack. If it turns out to be too much of a challenge you should probably get rid of the slider altogether. coming up with a interesting, unique and consistent way to alter images (colorization, effects.) might pave the way for easier content maintenance. The background has too few contrast to that particular slider image, too imho.
Home page: http://www.veganmania.at/div/web-mockup.png
I wanted to change as little as possible. I mainly tried to clearly separate different blocks with enough space and careful styling. I didn't want to add any new elements.
@typography why do you abandon roboto in the headline? my main problem was the wrong use of font weights: the original mixes light and heavy weights at almost the same sizes in headline and copy text - creating visual confusion. adding a new font does not help here inmho. i suggest just using roboto at font-weight 300 most of the time in this context.
@color I think you changed way too much with introducing a new background and type color. They're not part of the styleguide: https://fsfe.org/contribute/designers/styleguide.en.html and also do not contribute to the "fresh" feeling it establishes. I'd stick to white and bright gray in the background.
I kept the waves from the sub pages (deliberately not those from the home page). Further more I positioned them on the bottom of the content area instead of above the last item.
works better that way indeed.
The footer is complicated. It contains several floating columns with variable width, but fixed height. This way the columns behave like words in a text line and will adapt to every screen width. But I wouldn't put that many links in this complex structure. In my opinion it would work much better if we just showed a link to a complete hierarchical site map.
you're right. the footer seems to actually *be* a sitemap. if this is intentional it should be complete. Otherwise it seems overloaded to me as well. Linking to a proper sitemap sounds like a good idea.
Sub-pages: http://www.veganmania.at/div/web-mockup-sub.png
I strongly suggest getting rid of the multi-column layout on the sub pages. More than one column containing the same content type makes it impossible to conveniently scan through the content of a page if the columns contain more than just single word lists. Therefore it's very frustrating on normal sized monitors. (I guess multi-column layouts are popular because they are a fast/cheap solution if people optimise designs for small screens without enough patience to do the same for workstation displays. But disregarding design/usability flaws on larger screens is not less problematic than ignoring mobile devices.)
Lines with too many characters aren't nice to read. So I actually embrace the three column approach. the first column isn't used much at all and the others are mostly filled with short text units.
Since the FSFE web site has quite a deep structure people can get completely lost without a breadcrumb navigation. Therefore I added it on top of the content area on my sub page layout.
i ahve the feeling that one of the advances of the new design was to hide the deep content structure from unnecessary confusion. the main menu does a great job in that, i don't see much of a need for a breadcrumb for most of the people (espacially because deeper links are placed at the bottom - not the top) but this might be just my dislike for breadcrumbs in general.
Please tell me what you think of my proposals!
I think you raised some valid concerns but think your proposals head in a wrong direction.
In suggest keeping it to minor corrections like the small css changes i introduced to the "Our Work" page in the attachment
- added 4x border radius to the corners of the background and headline
background shape 2. changed weight and shadow color of headline 3. shortened the "home" & "language" buttons on the top left 4. added (maybe too much) transparent white background glow to the main menu 5. changed copy text weight to 300, too.
treating the front page the same way and adding "better" slider images would be good enough for me. actually i think the site looks way better than fsf already ;)
Robert _______________________________________________ Designers mailing list Designers@fsfeurope.org https://mail.fsfeurope.org/mailman/listinfo/designers
Designers mailing list Designers@fsfeurope.org https://mail.fsfeurope.org/mailman/listinfo/designers
Date: Mon, 17 Feb 2014 14:54:22 +0100 From: Robert Martinez mail@mray.de To: designers@fsfeurope.org Message-ID: 5302148E.6000807@mray.de Subject: Re: Transition to the new web design
Hi there!
On 17/02/14 12:37, Franz Gratzer wrote:
Hi again,
the home link on the top right hand side is redundant since it's a very well established custom to just click on the logo to get back to the home page.
You're right. It could as well just be removed completely.
I don't feel, that your proposal solves much of the problems I have identified.
It wasn't meant to do that. It is just one page and I don't share all concerns about the current design. It should give more of an idea what degree of "fixing" would be sufficient in my eyes.
The whole web page at the moment leaves the style guide aside by using a different font face than Nimbus. I just stuck with Roboto since it was already used on the web page and it offers more font variation than Nimbus.
Introducing new inconsistencies isn't a good idea, even if some things get partly more guideline conform. Maybe try Nimbus on the complete page and see how it works?
As well the bright blue boxes around the side headers with drop shadows are completely unprecedented in the style guide. Even the colour is new.
If I'm not mistaken it is a blue directly taken from the logo.
Yes, I use very bold text for headlines my proposal, but it still is closer to the look and feel of the style guide, than the actual design online.
Your proposal doesn't adhere to the guidelines either, but adds a new inconsistency. Imho Nimbus headlines font don't fit to the rest. I suggest sticking to Roboto which indeed comes with good variations.
I didn't use a plain grey since the yellowish shade makes it much friendlier. The style guide doesn't define any grey at all. Actually there is no mentioning of any background. Presumably because it only considers print layouts. Nothing contradicts the style guide more, than the background structure in the background at present.
I think the neutral bright gray supports the colorful elements and therefore needs not to be mentioned in the guidelines. The yellowish tone has a huge impact on the general coloring and is not part of the guidelines.
Despite of this I made an other proposal incorporating some of your feedback: http://www.veganmania.at/div/web-mockup2.png
@background much better but not better than it is now. it misses vividness, appears too flat and plain.
@colors I really regard the heavy use of black type as problematic. It is contrary to all effort to make the site bright and colorful. Why not stick to the guides and use the font color from the logo for headlines and menus?
@newsletter box As sam pointed out it really is much better and groups elements in a sensible matter
Concerning the slider image you made a fair point. My proposal isn't very good in that regard. I didn't focus on the slider image since it's only temporary and will be replaced. I originally used a different font in the slider image because it looks like the t-shirts with the same words, the FSFE is selling. Obviously large slider images depend on good pictures even more than news thumbs you would normally use on the page. I don't think we can use poor quality images and expect to make them attractive by applying any effects.
Completely agree. And I see your point that they're not you primary concern right now.
I strongly feel we need to use heavier weights for headlines in order to make them stick out. Thin headlines only work with a lot of space and huge font size variations.
While I generally agree, I don't see that this is the only solution. Lowering the weight of copy text has the same effect as raising the headline weight. that way you end up with much more "air" between the lines and throughout the whole design, which - as you stated - is important.
I prefer not to discuss the site structure here, since we don't even have feedback from any website team member about our thoughts so far.
Cheers, Robert
Designers mailing list Designers@fsfeurope.org https://mail.fsfeurope.org/mailman/listinfo/designers
Best,