search

WordPress / Learn

WordPress.org Learn - The canonical source for the code and content behind https://learn.WordPress.org
263 stars 89 forks source link

Single Lesson: Polish the design #2638

Closed jasmussen closed 1 week ago

jasmussen commented 2 months ago

There’s some design work for the full-screen lessons that lives in Figma here, that could be worth looking at. I realize it may be limited what you can do here, but there are some things about icons, positioning, sizes, etc, that could benefit from small tweaks.

Image

fcoveram commented 3 weeks ago

Do we have room now to revisit the design of lessons @renintw @adamwoodnz?

I noticed a few inconsistencies and room for improvement in terms of spacing and text styles that also relate to #2809

renintw commented 2 weeks ago

image

Hi @fcoveram 👋 regarding #2809, I noticed that there isn't a related design presented in Figma (or am I missing it?). #2809 refers to the "Lesson Completed" indicator, which appears after clicking "Complete Lesson." It was removed in #2806 due to the reasons @ryelle mentioned below. Could we consider redesigning it based on Kelly's or my ideas? Thanks!

From Kelly https://github.com/WordPress/Learn/pull/2806#issuecomment-2263389133

I disagree with this. Part of the original feedback in the a11y issue was that "the second button is an interactive control that is not disabled, but does not do anything. This is confusing for all users. It should just be text, and not be an interactive element."

It is not really a disabled button, it's meant to convey information to the user. There's a suggestion that we could add the "completed" label to the main lesson title, and I think that would be better - maybe something like this

Mine https://github.com/WordPress/Learn/pull/2806#issuecomment-2263672121

I was originally thinking about adding a green label somewhere to make it more obvious, for example like adding an icon like you did and making the entire title green. Also, the "completed" status icon in the sidebar should probably be green as well, to make it more consistent with other places.

renintw commented 2 weeks ago
I also noticed that the progress bar in the design is still blue, are we aiming to change it back to blue as it's green at the moment in the production. I feel green is more consistent. Design Prod
image image
fcoveram commented 2 weeks ago

…I noticed that there isn't a related design presented in Figma (or am I missing it?)

You are right. Sorry for that. I've been busy with the designs for Five for the Future.

2809 refers to the "Lesson Completed" indicator, which appears after clicking "Complete Lesson." It was removed in #2806 due to the reasons @ryelle mentioned below. Could we consider redesigning it based on Kelly's or my ideas?

Absolutely. I have in my notes that change.

I also noticed that the progress bar in the design is still blue, are we aiming to change it back to blue as it's green at the moment in the production. I feel green is more consistent.

Green is definitely more consistent.

Sorry for not addressing the changes timely. The mockups are outdated so please wait for my ping to make sure I delivery the correct designs. Thanks