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