Making WordPress.org

Opened 14 months ago

Last modified 11 months ago

#3774 assigned enhancement

Create a Blog Page on WordPress.org

Reported by: chanthaboune Owned by: ryelle
Milestone: Priority: normal
Component: General Keywords: has-patch


The Consumer Growth Council has completed work on the Create a Blog page except for final content review. Can we get the pages + content staged so we can start the final review processes?

Protoype: https://wp.invisionapp.com/d/main/#/console/14344917/305151203/preview
Copy: https://docs.google.com/document/d/1H22LQwMIYWv1sf07a1mDR7HKPorSMNPlf5t-G6F5Jbg/edit?usp=sharing

Attachments (6)

Screen_Shot_on_2018-08-15_at_15_21_50.png (157.8 KB) - added by obenland 14 months ago.
Screen Shot on 2018-08-29 at 13_13_02.png (114.0 KB) - added by cathibosco1 14 months ago.
Latest version as of Aug 29, 2018
Screen Shot on 2018-09-21 at 11_02_45.png (135.2 KB) - added by cathibosco1 13 months ago.
screenshot of prototype - final version
Archive-number-assets.zip (26.9 KB) - added by cathibosco1 13 months ago.
numeric icons - -svg's - could be further optimized I think
how-to-make-a-blog (1).sketch (901.3 KB) - added by cathibosco1 13 months ago.
Sketch File of How to Make a Blog Guides section…
3774-meta.diff (38.7 KB) - added by ryelle 13 months ago.

Download all attachments as: .zip

Change History (19)

#1 @obenland
14 months ago

Is there a public version of the prototype? Or do I need to create an account to see it?

This ticket was mentioned in Slack in #meta by obenland. View the logs.

14 months ago

#3 in reply to: ↑ 2 @obenland
14 months ago

Screen_Shot_on_2018-08-15_at_15_21_50.png is the best mockup I could find in the trello link that was shared in 2.

As I mentioned in Slack, the mockups seem to deviate pretty significantly from the existing design, is that on purpose?

For the site headers I'd welcome it if we could not start prepending dashicons, and continue with the bigger header for the parent page (see Get), and narrow header for child pages (see Source).

Rather than a bordered box, could we pick up the use of a parallelogram again here, something along the lines of the Hosting section on Get? That could also free us from having to include a graphic there. If you do want to use a graphic, we should probably avoid using the marketshare number in that—I'm afraid it'd be outdated in a couple of months.

For the three box'ed subnavigation, could we again pick up existing concepts rather than introducing a new one? Both the host blurbs on Get and the Technology/Details/People trifecta on the About page come to mind for me. I'd also vote for no dashicons here.

Could the heading with a blue background be just a regular heading? We don't have that anywhere else and it doesn't seem to take away much if it was.

I'm not sure how I feel about the six stars, are they supposed to be a reference to the six steps to start a blog? They feel a little disconnected there. Do they have a functionality that I'm missing?

The big footer graphics on the child pages, are they supposed to "stand" on the footer? I like that idea, definitely worth trying out!

#4 @obenland
14 months ago

In 7626:

Main: Add first Guide page templates with content

See #3774.

#5 @obenland
14 months ago

Based on the Google Doc linked in the ticket description I made the content available at


With a setup like this, where they are child pages of a Guides page, I think we can best take advantage of the page header setup on w.org.
It might be worth making https://test.wordpress.org/guides/ (currently blank) a landing page, linking to the various guides that are going to be put up there.

#6 @cathibosco1
14 months ago

This feedback is very helpful - I am implementing the suggestions in the mock up. Thank you

14 months ago

Latest version as of Aug 29, 2018

#8 @cathibosco1
13 months ago

STATUS UPDATE! - We have had major breakthroughs with the presentation of this content - I was able to work with @melchoyce and Josepha at WCNYC - I will be posting the Sketch files in Trello here on the ticket so we can ship it! I am so excited to wrap this one up and get it into the Guides for the people! Yay!!

I have some .svg's for the numeric assets.

The hover states for the main page are an art board in sketch as well.

Eventually we may be able to add a graphic that features a grid of lovely screenshots of awesome websites using WordPress for their blogs too.

Link to the prototype:

Link to the copy https://docs.google.com/document/d/1KJVnQZ8jevDJiMs7UsKGaNt7xBUpUxyKea5l2vEUw2c/edit#


This looks like a copy/paste job to publish... feedback is always welcome.
The SVG's will need to be optimized likely. I think Kelly has a solid understanding of our workflow thus far...


13 months ago

screenshot of prototype - final version

13 months ago

numeric icons - -svg's - could be further optimized I think

13 months ago

Sketch File of How to Make a Blog Guides section...

#9 @melchoyce
13 months ago

@cathibosco1 Thank you for all of your tremendous work on this. It was amazing getting to talk with you in person on it at WordCamp NYC!!

Cathi, @chanthaboune, @ryelle, and I talked about this during the WordCamp NYC Contributor Day, and @ryelle is interested in building out this section.

#10 @chanthaboune
13 months ago

  • Owner set to ryelle
  • Status changed from new to assigned

13 months ago

#11 @ryelle
13 months ago

  • Keywords has-patch added

I've uploaded a patch for wporg-main to create the new design & update the copy on the existing pages. The page structure from a UI perspective is that "Create a Blog" is the first page, and "Adding a Blog", "Moving a Blog", and "First Time" are children of that. The First Time page wasn't created, so I couldn't update that, but it should be a matter of following the other child pages.

You can see full screenshots of these pages here: https://cloudup.com/cZD0vZVTB8m

This ticket was mentioned in Slack in #meta by netweb. View the logs.

11 months ago

Note: See TracTickets for help on using tickets.