Well designed layout examples of a “step-by-step tutorial” publication

I’m trying to find examples of beautifully designed step-by-step tutorials. As different layouts as possible, to feed my imagination so I can build on that.

I’m particularly interested in page formats and layout grids. And of course great design. Just a mockup of step images with accompanying text is the usual standard but I’m sure some designer have done a better job.

My imagination strives for: tutorial designs that consist of several steps with images each with its own explanation text. Each image represents a certain step in the whole tutorial process. I’m sure there should be some that are creative and excellently designed. Maybe some posh cook book or yoga tutorial or something. I don’t know. I’d just like to see some examples to feed my imagination.

Additional information

I’m particularly interested in tutorials that visually explain production process. I’m trying to create a tutorial step-by-step guide for decorative crafts. Visualising each step is important and since it’s going to be about more posh/artful/sophisticated products I want the design to support that as well. I don’t want some everyday layout/design with outstanding products.

Answer

I’ve always been a fan of the Visual QuickStart Guides from Peach Pit Press, and Adobe’s Classroom in a Book series. Both tackle some fairly deep topics with very different page formats.

The overall designs are very clean and not distracting, individual steps are clearly marked without being obnoxious, and the use of focused, cropped, illustrations (not circles and arrows over whole screens wherever feasible) really helps as well. Personally, I prefer how the QSGs use simple text formatting to differentiate key words and types of objects (i.e., menu paths, key combos) in the text over CIAB, which just uses the same typeface for all text.

This is really diving into instructional design, and perusing your local bookstore will help get ideas of what what works and what doesn’t.

Attribution
Source : Link , Question Author : Robert Koritnik , Answer Author : Philip Regan

Leave a Comment