A Wireframe for Handbooks

Handbook-wireframe-01During the IRC meetupMeetup All local/regional gatherings that are officially a part of the WordPress world but are not WordCamps are organized through https://www.meetup.com/. A meetup is typically a chance for local WordPress users to get together and share new ideas and seek help from one another. Searching for ‘WordPress’ on meetup.com will help you find options in your area. today (read the log) @siobhan shared the Handbooks Style and Formatting Guide that she has been working on; it’s purpose is to unify the tone and style of all the (awesome!) WordPress handbooks projects that have started popping up recently.

Also discussed in the meetup was the need for a better design for the handbooks, starting with wireframing. As I already toyed with a quick wireframe for the User Manual project, which has similar goals as the handbooks, to help jumpstart the discussion I thought I would post it up here.

Notes about the wireframe

It’s a bit early yet to know what the final home of the various handbooks will be. Some may live on dotorg P2P2 P2 or O2 is the term people use to refer to the Make WordPress blog. It can be found at https://make.wordpress.org/. sites, and others may use different themes instead.  For that reason, no sidebars, site navigation, and other theme-related features are shown in this wireframe; this is focused on the content column only for now.

  • Breadcrumbs – Nothing fancy, just lets the reader know where they are, based on the parent/child relationship of the page.
  • TOC box – Displayed at top of article is a table of contents. A lot of dotorg P2 blogs already feature this in an unstyled form, and it is generated automatically from the headings on the page.
  • Headings – Ideally, as mentioned in the style guide, only one topic or step will be used per heading. Generous top/bottom margins add whitespace between these “sections” of content, to keep the information easily scannable and digestible.
  • Body Copy – As with the headings, good whitespace between paragraph elements.  There should not be more than a paragraph or two per heading.
  • Images/Videos – These are always displayed at full width, which is helpful for detailed screenshots.  Can be linked to a larger image,  displayed in a lightbox or other modal window (not shown) so the reader does not have to navigate away from the current page when getting a closer look.
  • Image Captions – Descriptive captions help explain the image, and are also named (Fig. 1, Fig. 2, etc.) with matching footnotes in the text, to help readers link the instruction text to the related illustration.
  • Alert Boxes – These will likely use the blockquote HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. tag with an added class for styling and possibly adding an icon. Boxes for “tips” and “warnings” are represented, but others can use a similar format.

That’s pretty much it.  Leave you thoughts/feedback in the comments below, so we can start building a home for all these great new handbooks.