Project Update: WordPress.org Homepage and Download page mockups

Hi, all! I wanted to share an update on the redesign of these two pages.

First, thank you to everyone who submitted feedback on the project kickoff. These notes and even some feedback from the 2016 redesign were taken into consideration with this work.

As the WordPress brand evolves and changes, our goal is to create something that looks forward to the future of the project. There are still many sections of the site to be updated, but we’ve got a great start with these new designs for two of the most high-traffic pages.

Homepage

Design for the WordPress.org homepage with the following sections:

Header, WordPress editor, Features/benefits, Website showcase, Learning resources, Community contributors, WordPress news, and Footer.

The large headline at the top of the page reads, “WordPress, publish your passion.” Sections on the page rotate through a variety of background colors including white, black, light blue, bright blue, and gray. A large blue footer at the bottom of the page reads, “Get started” with a huge arrow.

The new homepage brings more attention to the benefits and experience of using WordPress, while highlighting the community and the many other aspects that make the WordPress project unique. The design is inspired by the jazzy look & feel the WordPress brand is known for, and builds on many of the visual elements established by the News redesign such as the typography and color palette. 

Download page

Design for the WordPress.org download page with the following sections:

Header, Download options, Features/benefits, Resources, Mobile apps, and Footer.

The large headline at the top of the page reads “Get WordPress,” followed by a section that features options for “Download and install yourself” and  “Set up with a hosting provider” side-by-side.

The design of the download page utilizes the same look & feel as the homepage but leans a bit more towards a “functional” aesthetic with fewer decorative elements. It seems likely that different parts of the site will each land somewhere on the spectrum between jazzy/expressive visuals and minimal/clean visuals, depending on the content of each section.

Based on previous approaches to the order of elements on the page, this design brings the download and hosting options side by side above the fold. These avenues are both common first steps, and giving them equal footing can help people more quickly decide which fits their needs best.

Additional content focused on features and useful resources has also been included. These sections aim to reinforce someone’s decision to download/use WordPress, and to make sure they’re aware of and have access to a variety of support tools as they get started.

Mobile designs

We’ve also designed how these two pages will appear on mobile devices:

Mobile design for the WordPress.org homepage and download pages shown side-by-side. Page sections follow the same order as the desktop designs.

Next steps

Work on implementing these designs in a new 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. theme will begin immediately, and another post will be shared as we draw near to launch — this will be an opportunity to gather additional feedback for future iterations. 

As a reminder, please note that the first priority is going to be continuing to overhaul pieces of 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/ rather than spending too much time perfecting any one piece. This likely means shipping additional updates for these two pages after the design has shipped elsewhere. I’m excited about making continued improvements to these two pages after the initial launch, as well as beginning the process of redesigning new parts of the site!

Props to @beafialho and @javiarce who contributed to the design, and @jpantani and @laurlittle who contributed copy.

+make.wordpress.org/marketing/

+make.wordpress.org/meta/

#homepage #download-page #redesign

Project Kickoff: WordPress.org Homepage and Download page redesign

Hi, everyone! I’m here with help from @critterverse and @priethor to kick off, and collect some feedback for, a project that will hopefully be exciting to everyone.

Back in 2016, several people chipped in and took on a WordPress.org homepage redesign during WordCamp US. That design was launched in December of that year, and has remained largely the same ever since.

Since then, WordPress has seen a lot of changes, including the 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/ editor, Full Site Editor, 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. themes, and more. All of these have revolutionized WordPress in the past few years, and the brand is starting to modernize and evolve as well.

This year, we launched design updates for both WordPress.org/news and the Gutenberg page. With a new design style making an appearance in various places across the site, it seems like a good time to turn our attention to the home and download pages, two of the most-visited pages on 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/ and a well-worn path for those coming to experience WordPress.

Getting involved

The News and Gutenberg page designs are just a glimpse of how the brand could be updated across all our channels and platforms. As we begin to look at other pages, we’d like to gather feedback early and often in this process. Please share your thoughts and feedback. We’re excited to see what you have to say.

Design

The News redesign introduced an exciting new look and feel into the WordPress design language, but it’s just a start.

There’s a ton of room to expand and evolve this look as we turn our attention to other parts of the site. You can watch for future design updates here on +make.wordpress.org/design/

We want to hear from you. How do you envision the WordPress.org homepage looking?

Content

The immediate focus of this redesign is going to be on refreshing the look and feel of the homepage and download page, but there may be opportunities to update the content along the way. You can watch for future content discussion on +make.wordpress.org/marketing/

Tell us, what content would you like to see included on these pages?

Development

When it comes time to implement a new design for these pages, it also provides us with the opportunity to bring these pages into the block editor. Part of the 2016 update was the promise of future iterations, and building the WordPress.org homepage with blocks helps deliver on that promise. Watch for future implementation updates on +make.wordpress.org/meta/

#homepage #download-page #redesign