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?

The front of the persona card shows a large portrait with a banner underneath giving the persona's name and title, along with a quote from a typical user. The back of the persona card includes options for text areas, key/value pairs, progress bars, and sliding scales.

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
A scenario comic of six panels. A woman discovers she has no paper towels, asks Siri to remind her to buy them when she's at the story. Siri (from a HomePod)responds that she will remind her. At the store, a Ding sounds and the woman looks at her watch to see a reminder. A longer scenario comic with 11 panels. A young man considers getting a part-time job, looks for places online to search for a job, and applies for a job from his phone while riding a bus.

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
A landscape print out with a header containing a generic company logo and space for the project and designer name along with the date. The majority of the page is three large iPhone X mockups with a lined grid in the screen area. Below each mockup are three lines for adding notes. A portrait print out with a header containing a generic logo and space for the project name, designer name, and date. There are six boxes below with a line under each for notes.

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
A style tile in landscape orientation for display on screens. It contains a logo, color swatches, typography samples, adjectives to describe the style, sample elements, and examples of graphics and icons. At the bottom is a footer containing the project name, client name, designer name, and variation name. A style tile in portrait orientation for print. It contains a logo, color swatches, typography samples, adjectives to describe the style, sample elements, and examples of graphics and icons. At the bottom is a footer containing the project name, client name, designer name, and variation name.

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
A wireframe of a landing page. At the top is a navigation bar with a left-aligned title, and right-aligned links followed by a hero block a video icon and heading at the bottom. Below is a carousel with a summary to the right of it, then three centered feature blocks with different icons (a lock, a chart, and a check mark), followed by a longer paragraph with a small video block to the right of it. A wireframe of a dashboard. It contains a header bar with a centered title and icons to the left and right ends, a series of graphs and charts (a donut graph, a vertical bar graph, and a horizontal stacked bar chart), another horizontal bar full of filter dropdowns, then a list of titles and subtitles, a numerically ordered table, and a line graph.

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
A mockup of the general flowchart for using a typical social media photo sharing app, with branches for creating a new account, browsing a stream, viewing a profile, and sharing a new photo. A mockup of notes added to an individual mobile app screen. To the left of the app are individual numbered notes that correspond to numbered dots above the screen. To the right are sections denote what interactions are possible in each portion of the app along with graphical icons showing those actions.

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