Design Share: Nov 7 – Nov 18

Hi, all! Here are a few projects the Design Team has contributed to over the past couple of weeks.

Style variations for blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. types

Block style variations are preset block designs. These mockups explore a way to edit them in one place, as well as create new ones. Issue.

Drop shadow tools

Editing and applying drop shadows to blocks, locally and globally, should be possible. These mockups explore how. Issue.

Developers redesign

Work was started on a redesign of the developer section of 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/ support pages. Figma file

Enterprise redesign

A mockup for a redesign of the Enterprise page of wordpress.org to follow the new style from News. Figma file.

Updating the Padding control

A follow-up design evolution of the preset padding control in GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/.


If you have updates you’d like to include in the next Design Share, please drop a note in the Design channel on the Making WordPress SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..

#design, #design-share

Design Share: Oct 10-Oct 21

Hi, all! Here are a few projects the Design Team has contributed to over the past couple of weeks.

Brushes Collection

Marko is looking at expanding brushes collection while improving their style.

Browse mode

Jay is working on the finer details of Browse mode, which will elevate the content editing experience in the Site Editor. Check out the PR here.

Top Toolbar

Jay is exploring how we might update the Top Toolbar option in the Editor so that it occupies less space, with one eye on smaller applications of the blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. editor.

Font pairs & management

Joen is exploring font management features. 


If you have updates you’d like to include in the next Design Share, please drop a note in the Design channel on the Making WordPress SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..

#design, #design-share

Design Share: Sep 26–Oct 7

Hi, all! Here are a few projects the Design Team has contributed to over the past couple of weeks.

Selection style refresh

The visual appearance of selecting text and blocks has been updated to be clearer. Partial selections remain the native indicator, but when the selection starts to include a blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. that can’t be merged, the multi-selection now shows an overlay color across every block selected.

Navigation overlay as a block

Revisited and updated an issue for moving the navigation overlay into a separate block, allowing global styles customization and custom inner blocks. The issue could use your feedback!

Resizing images to snap to wide and full alignments

If you resize an image to be larger than the main content column, you’ll and up with a badly aligned image that stops being responsive. So perhaps we could snap you to wide and full alignments, when you near those? Mockups here.

Removing layout shifts from Quote and Image

Most on-select layout shifts have been removed from the editor, but the image caption and quote citation fields still cause a jump. This mockup explores moving those fields into a toolbar button.

Cover margin bugfix

From the department of details that matter, the focus style for a Cover block was a couple of pixels too tall, surfacing a gap at the bottom. We fixed it


If you have updates you’d like to include in the next Design Share, please drop a note in the Design channel on the Making WordPress SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..

#design, #design-share

Design Share: Aug 15-26

Hi, all! Here are a few projects the Design Team has contributed to over the past couple of weeks.

New Homepage and Download pages for 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/

New designs for two of the most high-traffic pages on the WordPress.org site — the Homepage and Download page. The new look & feel builds on the updates that rolled out to the News section last year, putting a more modern and jazzy spin on the WordPress brand.

Making the Site Editor feel more like a design tool

Inspired by the style variation video we’ve been looking at ways to elevate key site editing features (styles specially) in the overall experience, so that the site editor feels more like a holistic design tool rather than a template editor.

Rethinking WordPress.org Navigation

Inspired by some discussion on the Make Meta blog, we’ve been exploring how to clean up and simplify the navigation on the WordPress.org site.

Copy improvements in Openverse

As a quick win in the openverse search experience, we shared a design idea to improve the copy on some pages and make Openverse more clear. Having the search engine inside the WordPress site makes it difficult to convey what is about.

Styles update in Openverse

In the current version of Openverse, text styles are defined per component and differ when placed together. We started exploring a style update to clean and centralize all styles to make the search more consistent.

Placeholders

A literal placeholder style with a dashed line has been used in a few places to indicate the ability to add a featured imageFeatured image A featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts. or a a site logo. This style has been expanded to the Image blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience., which now visualizes an inherited duotone filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output.. The placeholder also features a blurred background to set it apart in stacked contexts. Tickets/PRs: ImageSite Logo/Featured ImageImage radius and duotone + more

Inspector grid

With ongoing component work and cleanup, here’s a visualization of how inspector components should naturally lay themselves out.

Pre-publish 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. summary section

We continued exploring the pre-publish sidebar with a version that improves the readability of the sidebar by integrating the suggestions inside the main summary section.


If you have updates you’d like to include in the next Design Share, please drop a note in the Design channel on the Making WordPress SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..

#design, #design-share

Design Share: Aug 1–12

Hi, all! Here are a few projects the Design Team has contributed to over the past couple of weeks.

Twenty Twenty-Three default theme kickoff

An experimental new process was kicked off for designing the style variation-focused Twenty Twenty-Three theme with a post on the Make Design blog. Join us in the Making WordPress SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. channel: coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.-themes-projects.

Visual template building

A number of recent / upcoming developments present an opportunity to implement a more visual, and flexible template creation experience. @jameskoster explored more here.

Pre-publish 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. summary section

@javiarce published a proposal to improve the pre-publish sidebar with a summary section that includes the document title, excerptExcerpt An excerpt is the description of the blog post or page that will by default show on the blog archive page, in search results (SERPs), and on social media. With an SEO plugin, the excerpt may also be in that plugin’s metabox., featured imageFeatured image A featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts., tags, and categories. 

Editor welcome guide with setup

We have a number of useful appearance and accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) options in the Editor. To enable folks to customize their editing experience from the get-go, @jameskoster has been exploring a way to surface these options as a part of the on-boarding process. He recently shared a post on the Make Design blog requesting feedback on the proposal.

Openverse 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.

@fcoveram continued with the Openverse header, this new version proposes shifting the content type and filtering on a popover without leaving the page.

Global Styles previews

When customizing blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. defaults (in Global Styles → Blocks), there isn’t always an in-canvas preview present for the block you’re customizing. By including a preview in the inspector, you can nevertheless get a sense of your changes. @joen explored this in a ticket.

Stepped Slider

The stepped slider is a new UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. control that lets users take advantage of preset spacing values. The effort unearthed some interesting challenges around how to present indeterminate states, and the control is likely to evolve further in the future. Dive into the conversation on the ticket.


If you have updates you’d like to include in the next Design Share, please drop a note in the Design channel on the Making WordPress Slack.

#design, #design-share

Design Share: Mar 14–25

Hi, all! Here are a few projects the Design Team has contributed to over the past couple of weeks.

Status & visibility panel improvements

@javiarce shared some explorations to improve the ‘Status & visibility’ panel in the inspector 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. on this issue. You can also use this prototype to learn about its context and interact with the solution.

Adding post categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. templates

@jameskoster has been looking at how we might enable the creation of post category templates for GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ issue #37407

Page start options

@jameskoster is also exploring a pattern-centric view of edit mode for PR #39147.

Style variation hover animation

Gutenberg PR #39322 introduced a hover frame containing extra information about individual style variations. @critterverse and @joen have been helping to explore designs for the secondary frame as well as animation options in issue #39700.

Group, Row and Stack icons

@joen worked on new icons for “Row” and the incoming “Stack” blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience., as well as how those group block variations could show up in the multi-select toolbar and inspector.

Comments query loopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop., default design mockups

@joen mocked up a default style for the comments query loop block.


If you have updates you’d like to include in the next Design Share, please drop a note in the Design channel on the Making WordPress SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. or message @critterverse.

#design, #design-share

Design Share: Feb 28–Mar 11

Hi, all! Here are a few projects the Design Team has contributed to over the past couple of weeks.

Backgrounds & Overlays

@javiarce and @joen discuss the background and overlay properties of the Cover blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience., and how they might be simplified so they can apply across other blocks as well (Figma file). These explorations have been shared on GitHub, and are related to to recent discussions around background block support.

Openverse 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.

@fcoveram has been working on a second iteration of the Openverse header. This time, he’s exploring two navigational layouts and adding a profile area for future features.

Process improvements

@fcoveram shared some ideas for improving current practices around the contribution process in a new blog post: Design contribution process

If you have updates you’d like to include in the next Design Share, please drop a note in the Design channel on the Making WordPress SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. or message @critterverse.

#design, #design-share

Design Share: Feb 14–25

Hey all 👋 Here are a few projects the Design Team has contributed to over the past couple of weeks.

Site Editor navigation

@joen is tinkering with @jameskoster on wild ideas for GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ issue #36667: a dedicated space for navigation.

Cover blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience.

@javiarce and @joen started collaborating on improving the Cover Block to support multiple overlays.

Block locking

@critterverse shared a modal design and flow for user-level block locking.

Documentation update

@estelaris has been working on an update to the hashtag and its future use in documentation articles.

As part of the redesign of end user documentation, the docs team is looking into changing the hashtag # used at the end of the headlines in the articles. The hashtag nowadays has a different connotation but mainly because it is not accessible. The aria label applied to the hashtag makes screen readers duplicate the headline without warning or explanation.

The purpose is to remove the character # but not the functionality of an anchor link.

3D model icon

@fcoveram started exploring an icon for the 3D models content type Openverse is discussing displaying in a separated result.

WordPress Design Library

@javiarce started improving the WordPress Design Library. He upgraded the containers used to showcase the components and the examples, added descriptions, cleaned up some components, and refined the information blocks. He also analyzed the state of the components and variants, wrote a to-do list to highlight the pending work, and drafted a plan to deprecate the old components.

If you have updates you’d like to include in the next Design Share, please drop a note in the Design channel on the Making WordPress SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. or message @critterverse.

#design, #design-share

Design Share

Hey all 👋 I’m sharing a handful of “snapshot” style updates from the Design team from the past couple of weeks. I’d like to try sharing these updates for a couple of months and see if it’s useful!

Here are a few things that have been worked on recently:

Advanced template creation

@jameskoster explored how we might expand the template creation UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. to accommodate more advanced templates. Discussion is ongoing in GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ issue #37407.

@joen mocked up how it might look if you could assign your featured image in any block that supports media.

Pattern fills in overlays

@joen also mocked up how it might look if you could use a pixelated pattern fill as an overlay in the Cover block.

Designing the State of the WordState of the Word This is the annual report given by Matt Mullenweg, founder of WordPress at WordCamp US. It looks at what we’ve done, what we’re doing, and the future of WordPress. https://wordpress.tv/tag/state-of-the-word/.

@javiarce and @beafialho wrote a blog post about the design of the State of the Word presentation.

Openverse — New 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. design

@fcoveram explored a new header idea to solve usability, internationalization, and consistency problems, and also designed a new version of reporting content popover considering usability and a11yAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) concerns.

These projects are just a small sample of recent design work happening in the WordPress community. Have you contributed to the Design team lately? The Make blog is a great place to share process and updates! Feel free to use the comments section below to share your work ⬇️

#design, #design-share

Redesign of Openverse

A few weeks ago, we introduced the new Openverse identity as the beginning of a redesign journey, where we placed the search engine within the WordPress ecosystem. Since then, we have been working on a new interface that consolidates the new brand and puts consistency with WordPress at the forefront.

You may have heard about Openverse during State of the Word 2021, which is perfect timing to dive into what’s coming next for Openverse.

Audio. The new content type

The goal of Openverse is to catalog all openly-licensed content, not just images. To start this journey, we decided to include audio results as a new content type that many creators use for various purposes. This integration demanded designing an interactive audio player component with multiple variants and accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) as a primary concern. Even when Openverse spans a simple flow, the audio browsing experience is completely different from searching for an image.

We wanted to keep the interface as clean as possible, but the vibrance of the brand colors also excited us. For this reason, we used our brand yellow for the active, ‘playing’ state. Its boldness really shines when interacting with the component.

At the same time, we wanted to highlight the artwork that creators added to their audio, whether album artwork, a podcast logo, or an image taken during a field recording, for example. For audio tracks without artwork, we plan to design a default image that uses the spectral data of the audio file to add randomness.

We will post about that in the following weeks.

Audio and images were mentioned as relevant content types by our users during the interviews we ran. For that reason, we explored the idea of having a gallery showing all content results to exhibit the strength and flexibility of Openverse. There aren’t many search engines, to our knowledge, that integrate results from different media types, and we’re excited by future possibilities like multimedia user collections.

Imagine a biology teacher making a collection of images of crows; audio files of crow calls; and 3D models of the skeletal structure of a crow’s wing!

The resulting gallery challenged us to make a simple yet interactive page to preview audio and dig into the content details.

Browsing results without leaving

Since time ago, we have been hesitant about the idea of seeing the content details as a modal. The page view provides a straightforward navigation and interaction experience when opening the source site and copying the attribution info. However, it felt as leaving the search results page and splitting the browsing experience into separated moments.

The new modal looks clean, and the main content is even more predominant. On images, the showcase space is modest, whereas audio fills the modal width to allow a seamless experience. The result details are clustered in sections, and the vertical lecture is flexible to varying heights. 

Next steps

I would love to dive into other changes like the new 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 symbol animation when loading content, and all the accessibility challenges when designing the audio states. But for now, this snap summarizes the essence of the new Openverse.

We are looking forward to putting this redesign online and seeing what people come with. This step, after the brand work, is a solid one towards a future where Openverse offers a space for creators to use openly-licensed content.

In the meantime, see the Releases file for the audio integration mockups and the Design Library for the components used.

#design #openverse