Handbooks Design Comp – Preliminary

Click to enlarge

Last week I presented an initial design comp for the handbooks in IRC [log] and we discussed it there, and I’m posting here to continue the conversation.  This design builds on previous wireframes, but is very much a preliminary design, as we’re still not clear what theme (or themes) we’ll be using to house the various handbooks yet.

What we do know is that at least some of the handbooks will find their home in existing 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/. blogs, so that is what I’ve started with here.

How do you design without a theme?

Legibility, scannability, whitespace, and typography are all things that should serve the content, not the theme, so that is where I’ve focused for now.

I’ve also tried to design with overall flexibility in mind as well; a font change and a few tweaks are all that should be needed for this design to work with most themes.

Here are some highlights:

• Body copy – The body is set in 16px with a 24 px line height for whitespace, about 80 characters per line.  Helvetica Neue is used here to match P2 blogs but can be easily substituted.
• Headings – Beyond varying font sizes, I also outdented h1 headings to make them stand out from the body copy.  For h2-h6 headings, I indented them from the body copy, and added border-left to create an added graphic element.  [See all headings]
• Text Containers –  Content boxes for code, info, alerts, and next steps are color coded to stand out from the body copy.  I’ve used Genericons for the related icons as well.
• TOC – This is generated automatically, based on the headings on the page.  Only h1-h3 headings are represented for now, and the font weight of each has been varied to make this easier to scan as well.   I’m not sure if lesser (h4-h6 headings) even have a place in the TOC.

Feedback?

Since we still need to figure out the theme issue, this is a good stopping point for the design.  Please leave your feedback in the comments so they can be included in the next round! 🙂

EDIT:  For some context, here is what the design looks like mocked up inside a P2 theme.

#devhub, #handbooks