E-learning made human

Sharpen your Sketch skills with PatternFly’s new online Sketch trainings

Pressing play on design learning: one video, quiz, and exercise at a time

Alana Fialkoff
PatternFly

--

Pressing play on the first e-learning video: The PatternFly logo zooms and fades past the title: “Sketch design training”

If you work in UX or open source, hearing “wireframe” or “prototype” might give you the tingles: good or bad, depending on your experience.

We all bring different design experience to the table. Some designers are seasoned mockup pros. Some know their way around a wireframe, but prefer to work from templates. And then there’s me: a writer who barely knew what lo-fi or hi-fi prototypes were, let alone how to spot the difference.

Before I pressed play on my own Sketch learning, I learned more about the program’s origin, architecture, and goals.

Whether you’re a senior designer or a complete Sketch newbie, PatternFly’s new Sketch Training invites us to hone, develop, and deepen our Sketch skills.

The PatternFly library is expansive, so this online opportunity can teach even PatternFly and Sketch pros valuable application behaviors, patterns, and overrides to elevate the ways they use the design system.

Sketching a lesson plan: course content design

Open sourcing e-learning meant reshaping internal presentations into external resources.

To craft the course, Red Hat’s UX Design team modified slides used to teach Sketch in person. Presentations used to be tailored to each location’s level of Sketch comfort. Now, the PatternFly e-training offers a level playing field from which designers of all backgrounds can pull new knowledge. The course creation process, like any design process, went through several iterations. Each video, module, quiz, and exercise were modified for optimal online distribution and retention.

Once the team finalized content design and recorded informational videos, it was time to construct the course itself.

The team decided to host the course on Thinkific, where custom CSS creates a more cohesive and inviting brand experience. Designer and educational lead Mary Shakshober migrated the material — and the PatternFly Sketch Training sparked to life. Learners can download practice files from the PatternFly Cloud, expanding the training to both verbal and hands-on instruction.

Thinkific allowed the team to build a usable learning environment; the training site provides easy-to-find course materials and ample benchmarks to measure your progress.

A screenshot of the progress panel, which shows your completed course percentage and checks off each module as you go
The progress panel updates as you complete each module.

The design of PatternFly’s Sketch Training encourages a human connection between instructors and learners. Let’s observe these interactive experiences in action.

Laughter, food, and fun: comic relief cuts information overwhelm

Humor is sprinkled throughout the course, offering a moment’s exhale from module material. Banter often added to live presentations proves more difficult to fold into an online learning structure — but PatternFly’s e-trainers got several chuckles from me along the way.

Engaging and educational: Sketch mechanics are likened to knife mechanics, with silly animations to boot.

Interactive quizzes reinforce key concepts — and if you miss a question, they explain why you’re wrong.

These coaching opportunities parallel in-person instruction and resonate like the real-time feedback you’d expect from a live instructor. After answering incorrectly, learners have the option to continue the quiz or click retry to give the question another go.

The quiz interface indicates when you’re wrong and slides to a second panel with an explanation
The quiz interface indicates when you get a question right and slides to a second screen that confirms why you’re right
As you answer questions, the quiz interface grades your response and explains why you’re right or wrong,

The course’s content architecture makes sense: Sketch learners are guided through concepts from the ground up. Each module lays brickwork for subsequent material and the exercises build on one another accordingly. The purpose, goals, and skills developed by each section are clearly defined and effectively delivered.

With logical trajectory and concrete purpose behind each module, the PatternFly e-training makes its value known. Students know exactly how a module or exercise benefits them, so they spend less time wondering and more time doing. Accessible reasoning makes course experiences more usable, too.

Usability: From course making to course taking, it’s all smooth sailing.

PatternFly strives for accessible and usable design, and its Sketch course does, too. Even the course construction itself is optimized for easy updates, edits, and expansions. On either end, content creators and consumers enjoy an accessible experience. Thinkific’s UI helps establish the PatternFly Sketch course as a lasting resource that can be reshaped and redesigned to meet community needs.

While most of the course can be edited efficiently through Thinkific itself, video updates will need manual attention — Mary anticipated this by saving the animations that open and close each module into a reusable video template.

Easily built, easily maintained, easily learned: PatternFly’s Sketch Training aims to be a straightforward, navigable, and inviting learning experience.

And on these promises, it delivers.

Sketch in action: my learning experience

Prior to taking this Sketch course, my design experience included casual Canva designs and doodles traced on Microsoft Paint . To say I was intimidated by Sketch would be an understatement. But as I worked through each module, I watched that hesitance fade. If you’re looking to get comfortable with design, PatternFly’s exercise files are key: they break down barriers between Sketch and new users by walking them through skill-building activities.

Course activities don’t hang you out to dry: in-document instructions explain key Sketch functions so you can learn by doing.

Friendly instructions guide learners through scrolling across their Sketch page, jumping through artboards, and zooming on specific artboard items.

A visual demonstration of PatternFly’s Sketch exercises: clicking and dragging to navigate across the workspace
A visual demonstration of PatternFly’s Sketch exercises: jumping between artboards using keyboard commands
I had no trouble learning the basics: with in-exercise text as my guide, I was able to navigate across my Sketch view and between artboards with ease.

For me, the basics of getting around were a piece of cake — but when it came to more advanced functions like selecting multiple layers with fancy selection? …Yikes. Talk about humble beginnings.

My exercise task was simple: select only the gray bars in the practice artboard and change them to a new color. But no matter how many times I held down the proper keys, clicked, and dragged, I just couldn’t seem to recolor the correct items.

A visual demonstration of failed fancy selection: instead of turning just the bars red, I colored all elements on Artboard 2
A visual demonstration of failed fancy selection: instead of turning just the bars blue, I dragged their background away
Ah, a true designer in her natural habitat… 🙈 😰 Nothing fancy about these flops.

After several sorry attempts, I was finally able to color just the bars. Then came recoloring the ovals beside them, which I maneuvered by manually selecting layers with “oval” in their title through Sketch’s search layers feature.

Animation: using “search layers” to manually select layers with “oval” in their title and change them to PatternFly blue
Success at last! Search layers to the rescue.

I won’t sugarcoat it: I struggled to use fancy selection. But the Sketch Training files are a judgment-free environment. Learners can take as much time as they need to complete each task. This safe space helped me feel comfortable experimenting. My mistakes were funny — something I’m not sure I’d feel if I were learning in a live, in-person setup.

My skirmish with Sketch’s fancy select function taught me patience: creating with Sketch isn’t a sprint. Details are important and patience is key. I found myself slowing my pace to make sure I absorbed each course concept fully. Repeating even simple tasks like duplicating artboards helped me retain that information going forward.

A visual demonstration of PatternFly’s Sketch exercises: copy and pasting artboard copies into a set of 4
The more, the merrier! Copy/pasting artboards came easy after my fancy selection fiasco…

Working in an individualized setting allows you to customize your online learning culture.

For me, this meant encouraging risks by keeping my exercise completion low-stakes. I didn’t set time constraints or due dates. Instead, I allowed myself to find fun in unexpected places.

To reinforce fundamentals, I Humpty-Dumptied designs to piece them back together again. I tried to recreate instructional artboards from scratch, experimenting with PatternFly’s text styles and color system. I even experimented with how quickly and precisely I could resize layers with keyboard shortcuts. I used the arrow keys to extend gray bars to a blue line, staging what looked like my own professional bar races.

A visual demonstration of PatternFly’s Sketch exercises: using keyboard arrows to extend width
”In a race to the finish, which gray bar will win?!” Kentucky Derby, I’m open for work and awaiting your call.

In customizing my Sketch experience, I learned more about how I engage with design work and what learning patterns best suit me.

Working through each activity set myself was almost like adding a keyboard shortcut for learning: with PatternFly’s online content as my guide, I was able to tailor my course syllabus to my needs.

A visual demonstration of PatternFly’s Sketch exercises: creating custom keyboard shortcuts in Apple’s “Keyboard” settings
Creating keyboard shortcuts for Sketch in my system’s keyboard settings.

I finished my training this past week, but my learning experience doesn’t stop here.

When it comes to Sketch, I still have a lot to learn. While I did complete each task, I used PatternFly templates to guide me — in the coming weeks, I’ll challenge myself by completing each exercise prompt from scratch.

Maybe it won’t pan out — but I’m excited to try.

That’s the true value I’ve found through taking this training as a content creator: I can keep on supplementing and adding dimension to my design skills. I’m by no means an expert, but I’m now able to meaningfully engage with the UX designs I write for and maybe even build some designs of my own.

E-learning made experiential; remote content made human.

Covid-19 sparked a surge of online conferences, events, and courses in place of in-person ones, but it’s nearly impossible to replace the real thing. As we temporarily lose out on face-to-face instruction, though, there is a silver lining:

We get to fashion and reimagine online learning into something more connective, interactive, and human.

Whether you’re brushing up those Sketch skills or developing them from scratch, PatternFly’s Sketch Training is the perfect resource for you.

Create your free Thinkific account and dive in — we’ve got learning to do.

Have a story of your own? Write with us! Our community thrives on diverse voices — let’s hear yours.

--

--

Alana Fialkoff
PatternFly

From pixels to pages, stories make me tick. Spearheading UX content design and user-driven experiences at Match.