Our vision is to be the go-to resource for design for other teams across the WordPress open sourceOpen SourceOpen Source denotes software for which the original source code is made freely available and may be redistributed and modified. Open Source **must be** delivered via a licensing model, see GPL. project.
Every WordPress release has an About page. It is shown to users after they finish updating to the new version, and it tells them what the new features are and who contributed to making them.
This is a great marketing opportunity as lots of people get to see this page. It would be fun to have each major About page customized by one of the designers in the WordPress community (otherwise we fall back on an existing design).
Know your deadline: ideally, have this all lined up so the page is ready for RCRelease CandidateA beta version of software with the potential to be a final product, which is ready to release unless significant bugs emerge., as once in RC, the text may not be changed anymore.
Coordinate between release leads and either marketing or a copywriter, to draft initial page copy.
Draft in a google doc so multiple people can write and suggest edits.
Check-in with release leads to headline features.
Check-in with any feature leads if you’re unclear about details.
Go through BetaBetaA pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. posts on /news/ to populate features and find copy inspiration.
Go through dev notes on make/coreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress. to populate the developer happiness section.
Make sure to go through features of GutenbergGutenbergThe 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/ and create a section to call it out with “new editor feature this release”.
Create images — could be illustrations, icons, or screenshots.
Finalize copy (after release leadRelease LeadThe community member ultimately responsible for the Release. last review).
Get the page made up.
Test the page in various browsers, checking for image quality.
Release Post (for those leading a release).
Draft a new post on wordpress.orgWordPress.orgThe 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//news.
Copy content over from the About page.
Add images, changing size, alignment, or positioning to fit the blog layout.
Pass off to release lead to include credits shortcodeShortcodeA shortcode is a placeholder used within a WordPress post, page, or widget to insert a form or function generated by a plugin in a specific location on your site. and release name.
Get the musician’s name from the release squad lead.
The About Page has a set framework and it is not meant to be redesigned from scratch each release.
Layout should be thought of as a stack of containers, which can be 1-4 columns. The content in the columns can be anything — text, video, images, embeds, etc. These containers can have no background color, a “subtle” background color, or “accent” background color (these change with each About page using colors from the headerHeaderThe 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. feature). Columns can also have one of these background colors. Containers are stacked on top of each other to create the page.
Wondering why the About Page is not done in the blockBlockBlock 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? The biggest blocker is translations. Every string on the page is wrapped in a translation function, with additional translation notes as needed. We’d need to find a way to do that with Gutenberg as well.
Some items to watch for:
The header has the most freedom. It can have a design element background or text effect. Check that is accessible.
Images, illustrations, and videos are allowed in the content.
There can be 1, 2, 3, or 4 columns and have a colored background.
For accessibilityAccessibilityAccessibility (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), if the video has voice audio, a text equivalent needs to be provided. If the video just shows a flow or action being performed, then the process needs to be described in text. Key thing is remembering the target audience for the description, and that they need to get the same level of information from the description as a sighted audience gets from watching. It is important that the description of the video is clearly associated with the video.
The figcaption should be connected to the figure using aria-labelledby; this is required to support IE11.