Sisyphus revision or changes made until the New Site is Built:Part 1

[Reqrefusion]

I carried out this study, aware that there was a new site study. Even though it doesn't involve much, it's a pretty big improvement. The new image format is now avif: An important development to increase loading speeds, especially on mobile. Avif format reduces file size by up to 90%. Background retouches: The background is now darker and the corners are softer. Soft corners are always more attractive. The backgrounds of the pictures are no longer there: I cleared the backgrounds of most of the pictures, but I was suspicious about some of them. You can help. Texts now have backgrounds: This change was made to increase the readability of the texts and to make them not appear to float in the air. The same was done for the models. And a few more corrections.

Warning: The final version of the work is as here. Please disregard the images that are different.

Screenshots

   

[kadet1090]

While this aims to be readability improvement it introduces some design flaws:

Containers must have more vertical padding, letters or any items placed in container like buttons etc should never touch borders. They must always have proper empty space.

Mobile version contains some artifacts resulting from from border radii close to each other:

Empty space after paragraph should be avoided, it would be better to have the content centered to the centerline:

Spacing between image and text is too narrow (but this is also an issue in current design):

The idea is good, but it requires a better execution as now it greatly highlights problems with current design. IMHO should not be merged in that state.

[Reqrefusion]

I'm glad you liked it so much. The background looks like it wasn't exposed to too much bleach anymore xD. I like both of them when it comes to their touch, but let me change it the way you want.

Most importantly @yorikvanhavre , translucent text backgrounds were used because the page background was not a single color. It also prevents the texts from appearing to float in the air. So it definitely needs to stay. But maybe I can reduce the intensity. But this defeats the purpose of making it easier to read. If you look at the text on the current site where the two colors are intertwined in the background of the site, you will understand what I mean. Also, I have a different idea. Interactive animations! I leave an example here: https://codepen.io/turan-furkan-topak/full/eYwzRYB I'm sure you'll like this specific example more, @yorikvanhavre . https://codepen.io/turan-furkan-topak/full/poXbrJd The changes you requested have been made. When the screen size changes, the text backgrounds become lighter. To avoid confusion, the final screenshots are in the first post.

[Reqrefusion]

I updated the Bootstrap version. Maybe even some new features can be used. I tried for a one-to-one change, but I kept the changes I liked. You can go here to see the change in full.

[yorikvanhavre]

Hmm I liked it more before I guess... Only the shadow is a bit weird, no?

[Reqrefusion]

Hmm I liked it more before I guess... Only the shadow is a bit weird, no?

@yorikvanhavre, is it the implementation of Shadow or its existence? I like Shadow, it adds a dimension. It is currently using Bootstrap's own class. I may make some changes for this. In the meantime, you can see the entire modified version of the site here.

[yorikvanhavre]

In the meantime, you can see the entire modified version of the site here.

This is really good, I like it. The shadows are ok there I think... I'd only suggest these little improvements maybe:

• Make all images 430px high
• Add to for ex. .text-background:

  min-height: 430px;
  padding: 10px;

(maybe only for desktop version) so the text boxes and images match heights... Although it works for the "features" page, even with images if different heights, don't know how you did it :)

[Reqrefusion]

(maybe only for desktop version) so the text boxes and images match heights... Although it works for the "features" page, even with images if different heights, don't know how you did it :)

No, you did it @yorikvanhavre (Guernica reference). Actually, I did it on purpose, which is something I like. The align-items-center class is what makes this possible. Below I am showing the state of this class when added to the features page and when removed from the homepage. There is also d-flex on the features page, which is what makes the magic happen. I would prefer them all to be like they are on the homepage now. But the final decision is yours. You can compare the images below with their current state.

Screenshots

 

[yorikvanhavre]

Ok the last one looks pretty good to me. The last thing I'd ask is as @kadet1090 said, more padding between the text and the box borders...

[Reqrefusion]

Ok the last one looks pretty good to me. The last thing I'd ask is as @kadet1090 said, more padding between the text and the box borders...

What do you mean by last one, @yorikvanhavre? So should I change it to be the same height? I really like the different heights for the home page. I think this one is better. It breaks the routine and achieves a nice image.

For the second thing, it is enough to remove the mt-lg-0 class in the titles. The removed version is below.

Screenshots


[yorikvanhavre]

Yes, last one is good to me.

Any other opinion, @FreeCAD/design-working-group ?

[obelisk79]

-The padding in text frames now seems to be ok. -I would reduce the opacity of the frames by 10% or 15%. -The frames for images need the same padding as text frames. Currently some images touch the borders and others do not. This creates visual inconsistency.

Otherwise, this is a reasonably good improvement.

[Reqrefusion]

-The padding in text frames now seems to be ok. -I would reduce the opacity of the frames by 10% or 15%. -The frames for images need the same padding as text frames. Currently some images touch the borders and others do not. This creates visual inconsistency.

Otherwise, this is a reasonably good improvement.

I gave the images a nice padding. But I disagree about the opacity.

[obelisk79]

I would request you at least lets us look at a variant with the decreased opacity for comparison.

Another alternative variation would be to remove the shadow effect from the text frames. The shadow plus high opacity destroys edge definition for the frames making them appear irregular visually. The blurred shadow is also not consistent with image frames.

[Reqrefusion]

I would request you at least lets us look at a variant with the decreased opacity for comparison.

Another alternative variation would be to remove the shadow effect from the text frames. The shadow plus high opacity destroys edge definition for the frames making them appear irregular visually. The blurred shadow is also not consistent with image frames.

Of course, you can see the example with reduced opacity below. I deliberately kept the shadow for the text, I think it looks better. I did not keep it in the model. Also, I do not agree that it disrupts consistency. Models and texts are separate after all. You can still see the removed version below.

Screenshots

 

[obelisk79]

The compression artifacts in the image make it hard to discern the differences, but I can see the removal of the shadow is a distinct improvement. The frame edges much be well defined. I still believe the opacity is too high from a UX perspective, more than just an artistic impact, there is improved readability by increasing the contrast. The opacity allows visitors to still see the background, the tradeoff is that you have text with irregular lightness/darkness and color behind it. The frame being a little darker compensates for this effect. So while it may feel nicer in terms of general aesthetics, it becomes visually distracting while trying to read the actual content.

We want people to read, not ponder art.

[Reqrefusion]

The compression artifacts in the image make it hard to discern the differences, but I can see the removal of the shadow is a distinct improvement. The frame edges much be well defined. I still believe the opacity is too high from a UX perspective, more than just an artistic impact, there is improved readability by increasing the contrast. The opacity allows visitors to still see the background, the tradeoff is that you have text with irregular lightness/darkness and color behind it. The frame being a little darker compensates for this effect. So while it may feel nicer in terms of general aesthetics, it becomes visually distracting while trying to read the actual content.

We want people to read, not ponder art.

If we want to make it easier to read, shouldn't we increase the opacity? Do you mean the opposite? Shouldn't it be darker? I don't get it.

I disagree about the shadow. Removing it is not an improvement. Its presence is not an improvement, of course, from a utilitarian perspective.

[obelisk79]

Perhaps we are getting mixed up on terminology. Yes, my suggestions is for the frames to be darker from the original by at least 10 or 15 percent. It may even need to be slightly more aggressive, but it is hard to guess how much darker it needs to be without experimenting and seeing.

[Reqrefusion]

Perhaps we are getting mixed up on terminology. Yes, my suggestions is for the frames to be darker from the original by at least 10 or 15 percent. It may even need to be slightly more aggressive, but it is hard to guess how much darker it needs to be without experimenting and seeing.

Opacity decreases in desktop mode and increases when mobile. It was as you wanted before. This change was made at @yorikvanhavre 's request.

In fact, it was darker before. Like you, I was aiming to increase readability. Later, it was gradually lightened in line with requests. Many comments even said that it should be removed completely.

[yorikvanhavre]

I like the version without shadows better.

Sorry about all the requests going in all directions @Reqrefusion designing a website for a community project is definitely a complex thing, I hope you are patient :sweat_smile:

[Reqrefusion]

I like the version without shadows better.

Sorry about all the requests going in all directions @Reqrefusion designing a website for a community project is definitely a complex thing, I hope you are patient 😅

Of course, every job has its own problems. There is nothing wrong with your request. There is nothing that makes your previous request less right or wrong. I like shadow, it gives the text an extra dimension. That's why I think it should stop. I made the adjustment regarding Opacity. More accurately, I returned it to its original state. You can find the relevant images in the first post or you can look at the site.

[obelisk79]

If you notice here, the frame seems to disappear against the background. This is poor contrast still. The cause is either the shadow, making the edge less defined, or frame still not being dark enough. Possibly a combination of both.

[obelisk79]

Also, did you only make text frames darker? Image frames seem lighter and the effect feels abnormal.

[Reqrefusion]

Yes, I only darkened the text backgrounds. Because there is no problem with the models being readable anyway. The disappearance of the corners in places where the background is dark is not related to opacity, but to the fact that the color used is the same as the dark background color. And I don't think it's a problem. It doesn't affect readability.

[obelisk79]

No, it doesn't affect readability. However visual consistency is important. Shadows on text frames, but not image frames, even when they are side-by-side. Different color backgrounds, disappearing corners making some appear visually inconsistent while scrolling. They are distractions for the eyes and pull attention away from content for people who are attentive to details.

It is a similar concept to music, when everything fits together correctly, no one really notices. However play one wrong note and it stands out like thunder on a quiet day. If we are going to publish an update to the website then it should be better than the current one. Until these inconsistencies are resolved I cannot comfortably give a thumbs-up on this.

This will be a nice improvement to the FreeCAD website once we get these small details fixed.

[Reqrefusion]

I disagree with you. The texts are consistent among themselves, the visuals are consistent among themselves. The music example is very nice, similarly a monotonous piece is more annoying. Also I don't see anything "wrong" here. There are only preferences and this does not only suit your preferences. Therefore I believe that this should be accepted. Also even if it does not suit your personal preferences, it is an improvement and much better than the current site. There is nothing included in the readability of the current site.

Ultimately the problem is related to personal preferences, so it is difficult to find a solution. In order not to prolong the subject, I find it right to leave the decision to @yorikvanhavre . I will act accordingly. But this does not change the fact that your objections are related to personal preferences.

[obelisk79]

Perhaps we can get more feedback from the @FreeCAD/design-working-group on the matter. I disagree on this being a purely matter of opinion, perhaps other voices can maybe provide better insight, beyond a disagreement between two people.

[bgbsww]

Just a user's opinion here (from a design perspective): my theatre background says if you make a choice, make sure that it is clearly intentional. The shadows on the text and not on the visuals seems to be in an uncanny valley to me: either the distinction needs to be more aggressive and obvious, or it needs to go away; right now the choice feels fuzzy - dare I say "a compromise" and that can ruin the perception.

Applying that rule in this case might be to greatly increase the opacity on the text blocks (darken the background) to the point that they are in clear counterpoint to the visuals and nobody would mistake them for trying to be the same. I don't know if that works visually.

That's $0.02 from a completely different discipline, so feel free to discard it and carry on.

[marcuspollio]

Hi there !

It's great to give the current website some tweaks, particularly in regard to the pending release of version 1.0, while the more in-depth rework and unification with the blog that will come later carries on.

I find the added "box-backgrounds" and specifically the transparency in the illustrations a big plus in term of readability and content structure.

Opinion/Criticism about the current site, which this proposed revision revision here does not address: I find the background "zig-zag" distracting. I suppose its purpose is to make the read more fluid by guiding you from one section to another. The rhythm with the content works relatively well on the Homepage on a Desktop screen, but not so much on the Features and Download pages. On the mobile version I find it even worse. Maybe it's too much of a change, but I would do a simple plain or light gradient background instead.

Regarding the proposed revision here, I would just tweak how the background boxes work on the mobile version, adding in the breakpoint the Background and Rounded classes on the Section in place of their inner Divs (without the Shadow class) :

Illustration

Currently :  Tweak : 

IMHO, some slight refreshing of the content, in particular "old" images that do not reflect the current state of the project anymore, would help. They could potentially also re-serve for the future website. But that's for other PRs anyways.

[Reqrefusion]

I removed Shadow. I made all the background colors the same, I used the semi-transparent color used in the navbar. In other words, I used the most consistent color possible. As @marcuspollio said, I provided a different look on mobile. However, I do not agree with the bad of the zigzag background. It has its own problems. But in the end, it is its own thing. Even with its problems, being unique is a very valuable thing in my opinion. Thanks for the feedback @bgbsww , it was mostly as you said. I guess you can now approve it easily, @obelisk79 .

You can see the final version from the pictures in the first post or from the site.

[yorikvanhavre]

At yesterday's developers meeting we thing it would be good to merge this to have a revamped website ready for 1.0 release, also giving @marcuspollio's version more time to cook and no pressure. I propose we merge this as is, then we can all submit further PRs to iron out the remaining issues. Is that OK for you @obelisk79 ?

[marcuspollio]

Fix #180

[obelisk79]

Sounds like a plan to me Yorik

[yorikvanhavre]

Ok then! Ready for you, @Reqrefusion ?

[Reqrefusion]

Ok then! Ready for you, @Reqrefusion ?

Yes, it's ready. The changes were made as @obelisk79 wanted, so I don't think there will be a problem.

[yorikvanhavre]

But I can ´t merge... Not sure why... Could you rebase, @Reqrefusion ? And maybe run the pre-commit command in the repo?

[Reqrefusion]

But I can ´t merge... Not sure why... Could you rebase, @Reqrefusion ? And maybe run the pre-commit command in the repo?

Ah yes, it should be fixed now. I didn't quite understand the problem either.

[yorikvanhavre]

Okay it's merged! Pushing to https://freecad.org now...

Ok it's live! Apparently everything works OK!