Skip the blank page.

A cohesive set of Sketch templates and libraries to round out your design process beyond the UI

There’s more to UX than the UI.

Clarity. Consistency. Aesthetics. Agility. Empathy. We expect so much of the modern designer. On any given day, you’re facilitating design studios, running team critiques, moderating research sessions, and creating wireframes, prototypes, or high fidelity graphics. All while trying to convey the needs and goals of your users to your team, planning out the end-to-end experience of using the latest feature, or rethinking the architecture of your content.

You don’t have time to focus on the experience of using your own artifacts so they end up less effective, less engaging, and harder to create and maintain.

That’s where the UX Compendium comes in. With these tools, your deliverables will be:

  • more inclusive, with illustrations and tools to consider broader audiences and respect human uniqueness;
  • more agile, so you can quickly get ideas out of your head and test them with users, clients, stakeholders, and team members;
  • more functional, to help you expand your skills and use new tools and techniques.
  • more appealing, so your artifacts don’t look like a Powerpoint template from the 90s, and;
  • more consistent, with templates designed to look great together;

The UX Compendium is a collection of templates and tools to speed up your design process so you can focus on creating a great experience.

So what’s in it?

Persona Cards

  • Place your own persona photos or export diverse illustrations from the Scenario Comics toolkit
  • Add a variety of text blocks like quotes, long content like goals and needs, or short text
  • Show skill level, progress, or interest levels using easily configurable progress bars and ranges
  • Export, print, and share with clients, teammates, and stakeholders so everyone has your users in mind
Learn more

Scenario Comics

  • Tell sequential stories through comics and storyboards with reusable, versatile symbols
  • Capture touch points with a wide array of devices from phones to voice assistants
  • Create a diverse range of characters imbued with tons of emotion and style options
  • Add your own mockups or wireframes to device symbols to show potential user interfaces
Learn more

Sketching Templates

  • Print and sketch on a wide variety of templates, including devices from watches to phones to browsers
  • Add your logo to header symbols for branded materials with space to add project-specific details
  • Select from several different grid options to help guide your sketches
  • Choose to include space for notes, how many boxes or screens per page, and more
Learn more

Style Tiles

  • Explore and refine different visual styles for a project before committing to specific layouts or content
  • Generate style tiles for either screen presentation or print with landscape and portrait options
  • Customize style tiles for your own projects and clients using pre-built layouts
  • Update the footer symbol to change project, client, variation, and designer details
Learn more

Wireframe Tiles

  • Explore responsive layouts and prioritize content types without committing to specific visual styles
  • Customize each tile by changing borders, colors, contents, icons, and more
  • Build with a wide array of flexible tiles, from basic paragraphs and lists to social feeds and graphs
  • Add your own icons and brand colors by duplicating or modifying existing symbols to insert your own
Learn more

Flows & Notes

  • Capture user flows and sitemaps with easy to use, flexible symbols for arrows, nodes, and labels
  • Add notes alongside mockups to explain interaction details or important non-visual information
  • Indicate gestures within notes to help developers understand functionality
  • Customize with your own styles quickly by changing and updating layer styles
Learn more

And Even More …

The UX Compendium will continue to grow and improve over time. Everyone who purchases from day one onward will be able to download free updates, both to existing tools as well as all new ones that are added.

I have tons of ideas for further tools to add and updates to make, but I am also excited to see what tools and updates would improve the UX Compendium for you. So let me know what you’d love to see! (I will prioritize requests from people who have already purchased.)

As I add new tools to the UX Compendium, the price will go up incrementally so the earlier you buy, the more you’ll get for less.

Share an idea or suggestion

Made with these in mind

Icon: The Sketch logo - a faceted diamond.
Built for Sketch

Made using Sketch’s best-in-class symbols so you can reuse, remix, and resize them.

Icon: A neatly organized suitcase
						with everything in its proper place.
Organized

Symbols, artboards, and pages are all organized and named to keep things tidy.

Icon: A hand stamp tilted
						slightly as if it has freshly pressed ink to paper.
Brandable

Choose your own colors, set your own type styles, and add your own branding.

7 Sketch files
100+ Printable templates
600+ Versatile symbols
Ideas

Get it again soon.

With licenses that are perfect for you or your team. The UX Compendium is currently being reworked for Figma and newer versions of Sketch.

Solo

for the talented team of one

Unlimited projects
for 1 person

Band

for small but rockin’ studios

Unlimited projects
for up to 5 people

Orchestra

for big, balanced teams

Unlimited projects
for the whole team

Who is this for?

  • Illustration: A male visual designer with a pink mohawk and a grey hoodie grins with his eyes shut in glee.
    Visual Designers

    Explore visual styles & add design notes

  • Illustration: A female product manager wearing glasses and a purple shirt smiles and rolls her eyes.
    Product Managers

    Communicate the product story to your team

  • Illustration: A male UX designer wearing a yellow shirt and navy vest winks and smiles.
    UX Designers

    Mock up wireframes & user flows

  • Illustration: A dark-haired female freelancer wearing an aqua zipper jacket is wide-eyed with excitement.
    Freelancers

    Save time and effort without skimping on quality

  • Illustration: A balding male user researcher with a goatee and a green polo smiles mischievously while looking down.
    User Researchers

    Tell user stories & create engaging personas

  • Illustration: A front end developer wearing a purple hijab and salmon shirt smiles and blushes.
    Front End Devs

    Contribute & share layouts and design ideas

Explore the UX Compendium

Made with care

Hi, I’m Ste Grainer! I’ve been making things on the web as a developer and designer for over two decades.

Over the last few years, I have immersed myself in the world of personas, scenarios, wireframes, user flows, and more as a user experience designer at startups, agencies, and large companies. I made due with templates I either managed to scrounge up or create haphazardly, but I always wanted something a bit more intentional.

Over the last year and a half, I built the UX Compendium to help me get ideas out faster, and hopefully they’ll help you as well!

I write about UX, front end development, and more on UXcellence.

A copy of the Persona Card with a photo of Ste Grainer, creator of UXcellence and the UX Compendium