A light Learn/Lessons visual refresh

Hi, as part of some of the Learn visual refresh work the design group has been doing (examples, 1, 2, 3) I was asked by @west7 and @piyopiyofox to explore small improvements to Lessons themselves, such as What is a block? In this post, I provided some review as context, and ultimately for your feedback, some of those explorations and suggestions.

Example of a lesson as they appear today:

This particular lesson is accessed from here. A design for said page exists here, but for now. Another goal of the visual refresh is to introduce a minimal tab-bar so that there’s a section for readers and for instructors.

---

High level suggestions

• Hide the adminbar.
  • If you need to be able to log in, this issue outlines a path forward.
• Replace the classic blue for hyperlinks with blueberry.
• Apply text-wrap: pretty; across all text. Ideally this can exist globally across the entire wp.org website, but it should at least be here.
• Consider setting a 960px max-width on the main column, and centering it in the canvas similar to how it’s done on Developer Resources.

Content suggestions

Some of the content stylings we can hopefully fill in a global sense, across the site, so mentioning them here not to be specific to the learn content, but all content. Code syntax highlighting, for example:

These notices could also use a new style:

General guidelines for creating screenshots would be useful to formulate. For example, this page could benefit from better cropped screenshots, always 2x resolution, ideally one platform, using the modern color scheme to match the WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/ branding, and boxes and sections of the page using colors from the new palette. E.g. it may be better to use light blue a la the notice here, or light gray, if those boxes need to be used at all:

HeaderHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes.

The WordPress logo exists to take you back to the main Learn section. Outside of a larger change to remove the “immersive” view and add the general WordPress.org header and footers, we can change this to be breadcrumb-like:

1px border below, as well.

SidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme.

• Replace the usage of Open Sans with Inter. We should do this across, we should be using only Inter and E.B. Garamond fonts.
• Update the colors to be shades of charcoal.

There will be a mockup at the end tying all these details together, but here’s one snippet:

Main lesson heading

• Remove the left border on “Module 1”, avoid the italic, use Charcoal 5, default font size, default font weight.
• Use charcoal color for both headings and text.
• The font family is correctly set to EB Garamond, but that web-font is not enqueued, so it doesn’t load.
• Body text should be 16px font size, not 18px.

Buttons

The styling is close to the new button style, but could get closer:

A few changes would make it perfect: 1px border, blueberry text, semibold.

Progressbar

If we can keep the gray separator at 1px and overlay a thicker rounded progressbar, that would be ideal:

Tying it all together

What’s most important on this refresh:

• Loading EB Garamond correctly.
• Using correct charcoal colors.
• Using the WP.org Blueberry color.
• Simplifying font sizes, weights, styles across.

A tab-bar

An additional ask was a tab-bar for instructors. It could look like this:

Let me know your thoughts!