Priority guides and HTML prototypes

Andy Bell is documenting the (re-)design process of the piccalil.li site.

Notes:

  1. Andy´s agency, Set Studio, starts with priority guides, which have been described by Heleen van Nues and Lennart Overkamp in the 2018 A List Apart article Priority Guides: A Content-First Alternative to Wireframes. Andy strongly recommends reading the text and I fully agree. I´m a fan of priority guides too. Advantages of this technique over wireframes:
    • more user centered,
    • more team engagement,
    • suitable for responsive design,
    • the process is content first and therefore you do not waste time with aesthetics and layout,
    • visual designer creativity is facilitated,
    • a priority guide is similar to HTML and might even be created early on with HTML.
  2. The process Andy and team are using is in itself part of a web-based system that is a deployable, accessible website which houses all the deliverables.
  3. Figma is used for ideation and design research, but not to do the complete design. They jump quickly from Figma to HTML-based prototypes. In Figma, they do:
    • mood boards for inspiration and possible conceptual directions,
    • typography (fonts for headings, sub-headings, and body text, typographic scales, leading, spacing) and color exploration,
    • loose look and feel concepts that could feel like pages, but are not page designs, it´s with a focus on visuals.
  4. After ideation they start with HTML and CSS prototypes, which are 100% disposable, but use already semantic HTML.
Comments