Why You Should Speak At Events As An Early-Career Professional

 Many talented professionals hold back from speaking at tech events, believing they need years of experience or expert status first. Drawing from her experience as a first-time speaker at WordPress Accessibility Day 2024, Victoria Nduka discusses how speaking at events benefits both individuals and the tech community.

On Thursday, October 10, 2024, I gave my first talk at an international event, the WordPress Accessibility Day (WPAD) 2024. Just a few months before, I was a newcomer to the world of web accessibility. Yet here I was, speaking to an audience of accessibility specialists and advocates, and they were genuinely interested in what I had to share. How did I get here? Most importantly, how can you get here?

My Journey To Web Accessibility And Public Speaking

I first learned about web accessibility from contributing to caMicroscope as an Outreachy intern. Outreachy offers internships in open source and open science to people underrepresented in tech within their home countries. caMicroscope is basically an open-source tool for studying and analyzing digital images of body tissues.

During my three-month internship, I worked on enhancing the caMicroscope’s accessibility. I conducted accessibility audits to identify areas for improvement and fixed several technical issues to make the web app more accessible. Since this was my first exposure to accessibility, I spent a lot of time researching and learning, gradually building a knowledge base that would later inspire my first talk.

The more I learned about accessibility, the more I realized how important it is to digital product design and user experience, yet few people seemed to be talking about it. Just before my internship ended, I began searching for accessibility events that I could attend to connect with people in the field. That was how I stumbled on the Call for Proposals (CFP) for WordPress Accessibility Day 2024.

Initially, I was hesitant to apply. I wondered,

What do I know about accessibility that people would care to listen to me?

But I also thought,

How often do you find a UX designer not only testing for accessibility but actually implementing technical fixes for the first time?

This was my experience, my story, and no one could tell it better than me. The CFP also encouraged first-time speakers to submit a proposal. That was an additional motivation. I figured,

What’s the worst that could happen?

So, I pushed through my doubts, did extensive research to choose a topic, and finally submitted my proposal.

When I received the email that my proposal was accepted, I was thrilled. But then came the next hurdle — preparing the presentation itself. Now, I had to think deeply about my audience: what message I wanted to convey and how to make it engaging and informative. After all, people were going to spend their time listening to me. I wanted to make it worth their while.

I reworked my slides at least four times. Even the night before my talk, I was still making edits (something I don’t recommend!). Watching the sessions of speakers who presented before me helped me learn some last-minute tips, but it also led to comparing my slides to theirs, wondering if I was missing something. Up until my talk began, I struggled with imposter syndrome. What if I forgot what I was supposed to say? Or don’t know how to answer a question that an attendee asks?

Finally, the moment came. I spent 40 minutes sharing with attendees the importance of manual accessibility testing. Not long into my presentation, I felt my initial anxiety melt away. I was calm and enthusiastic throughout the rest of my talk. It was an amazing experience, one that I’m grateful for.

Since then, I’ve submitted another talk proposal to speak at a different conference. While I still have some doubts, they’re no longer about whether or not I’m qualified to speak but rather about whether or not my talk will be accepted. I’ve grown since my first talk, and if you’re considering a similar path, you can too.

Why We Hold Back

At every tech event I attend, when the hosts introduce the speakers, the introductions typically go something like the following:

“John Doe is the Senior Product Designer at XYZ Company, bringing over seven years of expertise to his role. He serves as Chairman of the Technical Steering Committee for the ABC Community, contributing to its strategic direction and growth. As the founder of LMNOP, John has driven a startup that has generated over $XXXX in revenue and created over 500 jobs, making a substantial impact on the African tech ecosystem.”

Impressive. Inspiring. And for a newbie, maybe even intimidating.

When they’re giving their talk, I often catch myself thinking:

With so many years of experience, no wonder they know so much. When will I ever reach this level?

I was subconsciously beginning to associate “speaker” with “expert.” I started believing that to qualify as a speaker, I needed an impressive title, years of experience, or some remarkable achievement under my belt. And I know I’m not the only one who feels this way.

How To Deal With Impostor Syndrome

When I first saw the call for speakers for WordPress Accessibility Day, my immediate reaction was to scroll past it. After all, I had only been working with web accessibility for a short time. Surely, they were looking for seasoned professionals with years of experience, right? Wrong. Had I given in to this misconception, I would have robbed myself of an incredible opportunity for growth.

If you’ve ever held back from submitting a talk proposal because you feel you’re not qualified enough to talk on a subject, here are some tips to help you deal with the imposter syndrome:

Embrace Your Newbie Status #

The reason you feel like an imposter is probably because you’re cosplaying as an expert that you’re not (yet), and you’re afraid people might see through the facade. So, the fear of failing and the pressure to meet expectations weigh you down. Be proud of your novice status. And who said experts make the best speakers? Even the so-called experts get nervous to speak.

Practice, Practice, Practice

Another reason you may hold back is because you don’t have speaking experience. But how do you gain speaking experience? You guessed right — by speaking. So, speak. Or at least practice speaking. The more prepared you are, the more confident you’ll feel. Start by presenting to your rubber duck, your pet, a friend, or a family member. Each time you practice, you’ll discover ways to explain concepts more clearly and identify areas where you need to strengthen your understanding. Record yourself and watch it back. Yes, it’s uncomfortable, but it’s one of the best ways to improve your delivery and body language.

Focus On Your Journey

Your recent learning experience is actually an advantage. You still remember what it’s like to struggle with concepts that experts take for granted. This makes you qualified to help others who are just starting. Think about it: Who better to explain the challenges of learning a new technology than someone who just overcame them?

Focus On Sharing, Not Proving

Shift your mindset from “I need to prove I’m an expert” to “I want to share what I’ve learned.” This subtle change removes the pressure of perfection and places the focus where it belongs — on helping others. Share your mistakes, your “aha” moments, the resources that helped you. These are often more valuable than polished theory from someone who’s forgotten what it’s like to be a beginner.

Share Your Experience #

I’m not the first UX designer to dive into accessibility, but out of many contributors who applied to the project, I was the one selected to improve caMicroscope’s accessibility. That’s my unique angle. Your background and experience bring a perspective that others can learn from. Don’t try to compete with comprehensive tutorials or documentation. Instead, share your practical, real-world experience. Focus on sharing:

• Specific problems you encountered and how you solved them;
• Lessons learned from failed approaches;
• Real-world trade-offs and decisions you had to make;
• Insights that surprised you along the way;
• Practical tips that aren’t found in standard documentation.

Remember That The Audience Wants You To Succeed

Conference attendees (and organizers) aren’t there to judge you or catch you making mistakes. They’re there to learn, and they want you to succeed. Many will be grateful to hear from someone who can relate to their current experience level. Your vulnerability and openness about being new to the field can actually make your talk more approachable and engaging.

Why Newbie Voices Matter

You Bring A Fresh Perspective

As an early-career professional, you bring a fresh, unencumbered viewpoint to the table. The questions you ask and the solutions you propose aren’t constrained by the “way things have always been done.”

This reminds me of the story about the truck that got stuck under a bridge. Experts spent hours trying complex maneuvers to free it until a schoolboy suggested a simple solution — deflating the tires. Your recent learning experiences make you uniquely positioned to see solutions that seasoned professionals overlook.

You see, innovation often arises from those not bound by conventional thinking. As a newcomer, you’re more likely to draw parallels from other industries or suggest unconventional approaches that could lead to breakthroughs.

You Inspire Others Like You

Whenever I see a call for speakers for an event, I have a habit of checking the speakers’ lineup from past events to see if there’s anyone like me — Nigerian, female, relatively new to tech, young. If I don’t find anyone similar, I often feel hesitant about submitting a proposal. But if I do, I’m immediately encouraged to apply.

Your Story Has Power

Your story, your ideas, your fresh take — they could be the solution to someone’s problem, ignite a new area of exploration, or simply give another budding professional the confidence to pursue their goals. Your journey could be exactly what someone in the audience needs to hear. So, don’t let imposter syndrome hold you back. The tech community needs your voice.

When you speak at events, you’re not just sharing your own knowledge. You’re inspiring other newcomers to step up and share their voices, too. Representation matters, and you’re contributing to the diversity of perspectives, which is necessary for progress and innovation.

“

Benefits Of Speaking As A Newcomer

Besides the anxiety that comes with speaking, are there benefits that you gain from being a first-time speaker at an event? Short answer: Yes. What are they?

Your Knowledge Grows #

You know what they say: If you want to master something, teach it.

When I started preparing for my accessibility talk, I extensively researched not just my topic but also how best to deliver it. I read articles on creating accessible presentations. I was speaking at an accessibility event, after all, so my slides and delivery had to be accessible to all in the audience. The questions from the audience also challenged me to think about accessibility from angles I hadn’t considered before. Trust me, you’ll learn more preparing for a 30-minute talk than you would in months of regular work.

You Become More Confident

Remember that shaky feeling when you first pushed code to production? Speaking at an event is similar — terrifying at first but incredibly empowering once you’ve done it. After my first talk, I found that I became more confident in team meetings, more willing to share ideas, and more comfortable with challenging assumptions. There’s something powerful about standing in front of a room (virtual or physical) and sharing your knowledge that makes other professional challenges seem less daunting.

The Quality And Quantity Of Your Network Increases

Networking hits differently when you’re a speaker. Before my talk, I was just another attendee sending connection requests. After? Industry leaders were reaching out to ME. I remember checking my LinkedIn notifications after my accessibility talk and seeing connection requests from people I’d only dreamed of connecting with.

Now, instead of trying to start conversations at networking sessions (which, let’s be honest, can be awkward), your talk becomes the conversation starter. People approach you with genuine interest in your perspective, and suddenly, you’re having meaningful discussions about your passion with folks who share it.

It Gives Your Career A Significant Boost

Want to know what sets you apart from other candidates with similar years of experience? Speaking credentials. Imagine listing “Speaker at WordPress Accessibility Day” on my resume. It shows initiative and expertise that goes beyond day-to-day work activities.

Plus, conferences often give speakers free or discounted tickets to future events; that’s premium access to learning and networking opportunities that might otherwise be out of reach for early-career professionals. That’s how you get to “that level”.

You Contribute To The Tech Knowledge Base

Often, especially with virtual conferences, a recording of the event is uploaded on YouTube. That means anyone searching the web for a topic related to your talk will find your talk in the search results. Your 30-minute presentation becomes a permanent resource in the vast library of tech knowledge. I can’t count the number of times a conference video addressed a concern I had or served as a resource for a talk or an article I was working on. Now, I get to be on the other side, helping someone else figure things out.

And here’s another bonus: those YouTube videos also work as a portfolio of sorts. So, not only are you contributing to the community, but you’re also building a body of work that showcases your expertise and speaking skills.

You Just Might Get Paid

Here’s something people don’t talk about enough: many conferences pay their speakers or at least cover travel expenses. Not only are you learning and growing, but you might also get paid for it! Even if the event doesn’t offer payment, the experience itself is invaluable for your portfolio.

You Build Your Personal Brand

Every time you speak, you’re building your personal brand. Your talks become content you can share on social media, add to your portfolio, and reference in job interviews. Imagine a recruiter saying to you, “I remember you from your talk at a so-and-so conference.” In an industry as competitive as tech, this kind of recognition is invaluable.

Tips For First-Time Speakers

I found this article by Andy Budd on how to become a better speaker at conferences very helpful when I was preparing for my talk. In addition to his expert advice, here are a few tips I’d like to share from my own experience as a first-time speaker:

Choose A Topic You’re Passionate About

When selecting a topic, pick something you’re genuinely passionate about. Your enthusiasm will shine through your presentation and captivate the audience.

• Recently learned a new skill that simplified your workflow?
• Participated in a workshop that changed how you approach a problem?
• Discovered a clever workaround to a common problem?

Topics like these, drawn from your personal experiences, make for compelling talk ideas.

Here’s a hack I’ve used to uncover potential speaking ideas: instead of racking your brain when a call for proposals goes out, stay alert for inspiration in your day-to-day activities. As you go about your work or scroll through social media, jot down any concepts that pique your curiosity. That seemingly mundane task you were performing when the idea struck could serve as a fascinating hook for your presentation.

Prepare Thoroughly

Once you’ve settled on a topic, it’s time to dive deep into research and practice. Spend time mastering the subject matter from every angle so you can speak with authority. If you followed tip no. 1 (choose a topic you’re passionate about and are drawing from your personal experience), you are already halfway prepared.

But don’t stop there. Rehearse your talk multiple times, refining your delivery and transitions until you feel confident. Watch recordings of similar presentations and critically analyze what worked well and where there’s room for improvement. How did the speakers engage the audience? Were there any areas that could have been explained better? Studying successful talks will help you identify ways to elevate your own performance.

Engage With Your Audience

A speaking engagement is a conversation, not a monologue. Encourage questions and discussion throughout your talk. Be responsive to the audience’s needs and interests. If you notice puzzled expressions or hesitant body language, pause to clarify or rephrase. Making that personal connection will keep people invested and eager to learn from you.

Start With A Virtual Event

If the prospect of speaking in front of a live audience makes you nervous, consider starting with a virtual event. The online format can feel more approachable since you’ll be delivering the talk from the comfort of your home, and you’ll have the flexibility to reference notes or prompts without the audience noticing.

Connect With Other First-Time Speakers

When I was preparing my talk, I spent hours on YouTube searching for talks by people who shared my background. I was particularly interested in their early speaking appearances, so I’d scroll through their video history to find their first-ever talks.

These speakers weren’t polished professionals at the time, and that’s exactly what made their talks valuable to me. Watching them helped me realize that perfection isn’t the goal. I studied their presentations carefully, noted what worked well and what could be improved, and used these insights to strengthen my own talk.

If you’re more outgoing than I am, consider reaching out directly to other new speakers in your community. You can find them on Twitter, LinkedIn, or at local tech meetups. Building a support system of people who understand exactly what you’re going through can be incredibly reassuring. You can practice your talks together and provide feedback to each other.

Be Authentic #

Finally, don’t be afraid to let your authentic self shine through. Share personal anecdotes, tell jokes, discuss the challenges you faced, and be vulnerable about your own learning journey.

Your honesty and humility will resonate far more than a polished, impersonal presentation. Remember, the audience wants to connect with you, not just your expertise.

Conclusion #

In retrospect, I’m glad that I pushed past my initial doubts and applied to speak at WordPress Accessibility Day. It was a transformative experience that has accelerated my growth in the field and connected me with an incredible community.

To all the newcomers reading this:

Your voice matters. Your perspective is valuable. The tech community needs fresh voices and perspectives. Your “I just learned this” enthusiasm can be infectious and inspiring.

“

So, the next time you see a call for speakers, don’t scroll past it. Take that leap. Apply to speak. Share your knowledge. You never know who you might inspire or what doors you might open for yourself and for others.

Remember, every expert was once a beginner. I hope you’re inspired to take the stage and let your voice be heard.

Further Resources

• “Getting Started in Public Speaking: Global Diversity CFP Day,” Rachel Andrew
• “Complete Guide to Giving Your First Conference Talk,” Gwendolyn Faraday
• “How to Prepare for Your First Conference Talk,” Lisa Wentz M.A.
• “How to Write a Conference Talk Abstract That Will Get Accepted,” Linda Ikechukwu

AI’s Transformative Impact On Web Design: Supercharging Productivity Across The Industry

 Discover how AI is reshaping web design, boosting productivity in design, coding, UX, and copywriting while amplifying human creativity

As I sit down to write this article, I can’t help but marvel at the incredible changes sweeping through our industry. For the first time in my career, I feel like we’re no longer limited by our technology but by our imagination. Well, almost. Artificial Intelligence (AI) is reshaping the web design landscape in ways we could only dream of a few years ago, and I’m excited to share with you how it’s supercharging our productivity across various aspects of our work.

AI Is A Partner, Not A Competitor #

Now, before we dive in, let me assure you: AI isn’t here to replace us. At least, not for a while yet. There are still crucial areas where human expertise reigns supreme. AI struggles with strategic planning that considers the nuances of human behavior and market trends. It can’t match our emotional intelligence when navigating client relationships and team dynamics. And when it comes to creative thinking that pushes boundaries and creates truly innovative solutions, we humans still have the upper hand.

But here’s the exciting part: AI is becoming an invaluable tool that’s supercharging our productivity. Think of it as having a highly capable intern at your disposal. As the Nielsen Norman Group aptly put it in their article “AI as an Intern,” we need to approach AI tools with the right mindset. Double-check their work, use them for initial drafts rather than final products, and provide specific instructions and relevant context.

The key to harnessing AI’s power lies in working with it collaboratively.

“

Don’t expect perfect results on the first try. Instead, engage in a back-and-forth conversation, refining the AI output through iteration. This process of continuous improvement is where AI truly shines, dramatically speeding up our workflow.

Let’s explore how AI is reshaping different areas of our industry, looking at some of the many tools available to us.

AI In Design: Unleashing Creativity And Efficiency #

In the realm of design, AI is proving to be a game-changer. It’s particularly adept at:

• Collaborating on layout;
• Generating the perfect image;
• Refining and adapting existing imagery.

Take AI in Figma, for instance. It’s become my go-to for generating dummy content and tidying up my layers. The time saved on these mundane tasks allows me to focus more on the creative aspects of design.

Generative imagery tools like Krea, which uses Flux, have revolutionized how we source visuals. Gone are the days of endlessly scrolling through stock libraries. Now, we can describe exactly what we need, and AI will create it for us. This level of customization and specificity is a game changer for creating unique, on-brand visuals.

Relume is another tool I’ve found incredibly useful. It’s great for a collaborative back-and-forth over designs or for quickly putting together designs for smaller sites. The ability to iterate rapidly with AI assistance has significantly sped up my design process.

Relume and other AI website designers are perfect for creating initial drafts or handling web design projects on a tight budget. (Large preview)

And let’s not forget about Adobe. Their upcoming tools, such as lighting matching for composite images, are set to take our design capabilities to new heights. If you want to see more of what’s on the horizon, I highly recommend checking out the latest Adobe Max presentations.

AI In Coding: Boosting Developer Productivity #

The impact of AI on coding is nothing short of revolutionary. According to a McKinsey study, developers using AI tools performed coding tasks like code generation, refactoring, and documentation 20%-50% faster on average compared to those not using AI tools. That’s a significant productivity boost!

AI is helping developers in several key areas:

• Coding faster;
• Debugging more efficiently;
• Automatically generating code comments;
• Writing basic code.

To put this into perspective, AI now writes 25% of the code at Google. That’s a staggering figure from one of the world’s leading tech companies.

Cursor AI and GitHub Copilot have significantly sped up how fast developers can deliver code. (Large preview)

Tools like Cursor AI and GitHub Copilot are at the forefront of this revolution, offering features such as:

• AI pair programming with predictive code edits;
• Natural language code editing;
• Chat interfaces for asking questions and getting help.

I’ve personally been amazed by what ChatGPT 01-Preview can do. I’ve used it to build simple WordPress plugins in minutes, tasks that would have taken me significantly longer in the past.

AI In UX: Enhancing User Research And Analysis #

In the field of User Experience (UX), AI is opening up new possibilities for research and analysis. It’s allowing us to:

• Conduct user research at scale;
• Analyze open-ended qualitative feedback;
• Query analytic data using natural language;
• Predict user behavior.

I’ve found ChatGPT to be an invaluable tool for data analysis, particularly when it comes to making sense of analytics and survey responses. It can quickly identify patterns and insights that might take us hours to uncover manually.

Tools like Strella are pushing the boundaries of what’s possible in user research. AI can now perform user interviews at scale, allowing us to gather insights from a much larger pool of users than ever before.

Attention Insight is another fascinating tool. It uses AI to predict where people will look on a page, providing valuable data for optimizing layouts and user interfaces.

Attention Insight uses AI to accurately predict where people will look on a website. (Large preview)

Microsoft Clarity has also upped its game, allowing us to ask questions about our analytic insights, heatmaps, and session recordings. This natural language interface makes it easier than ever to extract meaningful insights from our data.

• 
  Leverage robust data-fetching and optimized bundle size with the KendoReact Server Data Grid
  Try now

AI In Copywriting: Elevating Content Quality And Efficiency #

When it comes to copywriting, AI is proving to be a powerful ally. It’s helping us:

• Transform poor-quality stakeholder content into web-optimized copy;
• Brainstorm value propositions and create high-converting copy;
• Craft compelling business cases and strategy documentation;
• Write standard operating procedures.

Notion AI has become one of my go-to tools for content creation. It combines the best of ChatGPT and Claude, allowing it to draw upon a wide range of provided source material to write detailed documentation, articles, and reports.

Notion AI has created one of the most versatile AI tools on the market by combining ChatGPT and Claude. (Large preview)

ChatGPT has been a game-changer for improving the quality of website copy. It can take user questions and bullet-point answers from subject specialists and transform them into web-optimized content. I’ve found it particularly useful for defining value propositions and writing high-converting copy.

For refining existing content, the Hemingway Editor is invaluable. It can take the existing copy and make it clearer, more concise, and easier to scan — essential qualities for effective web content.

AI In Administration: Streamlining Mundane Tasks #

AI isn’t just transforming the technical aspects of our work; it’s also making a significant impact on those mundane administrative tasks that often eat up our time. By leveraging AI, we can streamline various aspects of our daily workflow, allowing us to focus more on high-value activities.

Here are some ways AI is helping us tackle administrative tasks more efficiently:

• Getting our thoughts down faster;
• Writing better emails;
• Summarizing long emails or Slack threads;
• Speeding up research;
• Backing up arguments with relevant data.

Let me share some personal experiences with AI tools that have transformed my administrative workflow:

I’ve dramatically increased my writing speed using Flow. This tool has taken me from typing at 49 words per minute to dictating at over 95 words per minute. Not only does it allow me to dictate, but it also tidies up my words to ensure they read well and are grammatically correct.

Flow has finally made my dream of dictation a reality. Now, I can get my thoughts out of my head as quickly as I can express them. (Large preview)

For email writing, I’ve found Fixkey to be invaluable. It helps me rewrite or reformat copy quickly. I’ve even set up a prompt that tones down my emails when I’m feeling particularly irritable, ensuring they sound reasonable and professional.

Dealing with long email threads or Slack conversations can be time-consuming. That’s where Spark comes in handy. It summarizes lengthy threads, saving me valuable time. Interestingly, this feature is now built into iOS for all notifications, making it even more accessible.

When it comes to research, Google Notebook LLM has been a game-changer. I can feed it large amounts of data on a subject and quickly extract valuable insights. This tool has significantly sped up my research process.

Lastly, if I need to back up an argument with a statistic or quote, Perplexity has become my go-to resource. It quickly finds relevant sources I can quote, adding credibility to my work without the need for extensive manual searches.

Conclusion: Embracing AI For A More Productive Future #

As I wrap up this article, I realize I’ve only scratched the surface of what AI can do for our industry. The real challenge isn’t in the technology itself but in breaking out of our established routines and taking the time to experiment with what’s possible.

I believe we need to cultivate a new habit: pausing before each new task to consider how AI could help us approach it differently. The winners in this new reality will be those who can best integrate this technology into their workflow.

“

AI isn’t replacing us — it’s empowering us to work smarter and more efficiently. By embracing these tools and learning to collaborate effectively with AI, we can focus more on the aspects of our work that truly require human creativity, empathy, and strategic thinking.

If you’re feeling overwhelmed by the rapid pace of change, don’t worry. We’re all learning and adapting together. Remember, the goal isn’t to become an AI expert overnight but to gradually incorporate these tools into your work in ways that make sense for you and your projects.

Open-Source Meets Design Tooling With Penpot

 Penpot helps designers and developers work better together by offering a free, open-source design tool based on open web standards. Today, let’s explore its newly released Penpot Plugin System. So now, if there’s a functionality missing, you don’t need to jump into the code base straight away; you can create a plugin to achieve what you need. And you can even serve it from localhost!

Penpot is a free, open-source design tool that allows true collaboration between designers and developers. Designers can create interactive prototypes and design systems at scale, while developers enjoy ready-to-use code and make their workflow easy and fast because it’s built with web technologies, works in the browser, and has already passed 33K starts on GitHub.

The UI feels intuitive and makes it easy to get things done, even for someone who’s not a designer (guilty as charged!). You can get things done in the same way and with the same quality as with other more popular and closed-source tools like Figma.

Why Open-Source Is Important #

As someone who works with commercial open-source on my day-to-day, I strongly believe in it as a way to be closer to your users and unlock the next level of delivery. Being open-source creates a whole new level of accountability and flexibility for a tool.

Developers are a different breed of user. When we hit a quirk or a gap in the UX, our first instinct is to play detective and figure out why that pattern stuck out as a sore thumb to what we’ve been doing. When the code is open-source, it’s not unusual for us to jump into the source and create an issue with a proposal on how to solve it already. At least, that’s the dream.

On top of that, being open-source allows you and your team to self-host, giving you that extra layer of privacy and control, or at least a more cost-effective solution if you have the time and skills to DYI it all.

When the cards are played right, and the team is able to afford the long-term benefits, commercial open-source is a win-win strategy.

Introducing: Penpot Plugin System #

Talking about the extensibility of open-source, Penpot has the PenpotHub the home for open-source templates and the newly released plugin gallery. So now, if there’s a functionality missing, you don’t need to jump into the code-base straightaway — you can create a plugin to achieve what you need. And you can even serve it from localhost!

Creating Penpot Plugins #

When it comes to the plugins, creating one is extremely ergonomic. First, there are already set templates for a few frameworks, and I created one for SolidJS in this PR — the power of open-source!

When using Vite, plugins are Single-Page Applications; if you have ever built a Hello World app with Vite, you have what it takes to create a plugin. On top of that, the Penpot team has a few packages that can give you a headstart in the process:

npm install @penpot/plugin-styles

That will allow you to import with a CSS loader or a CSS import from @penpot/plugin-styles/styles.css. The JavaScript API is available through the window object, but if your plugin is in TypeScript, you need to teach it:

npm add -D @penpot/plugin-types

With those types in your node_modules, you can pop-up the tsconfig.json and add the types to the compilerOptions.

{
  "compilerOptions": {
    "types": ["@penpot/plugin-types"]
  }
}

And there you are, now, the Language Service Provider in your editor and the TypeScript Compiler will accept that penpot is a valid namespace, and you’ll have auto-completion for the Penpot APIs throughout your entire project. For example, defining your plugin will look like the following:

penpot.ui.open("Your Plugin Name", "", {
  width: 500,
  height: 600
})

The last step is to define a plugin manifest in a manifest.json file and make sure it’s in the outpot directory from Vite. The manifest will indicate where each asset is and what permissions your plugin requires to work:

{
  "name": "Your Plugin Name",
  "description": "A Super plugin that will win Penpot Plugin Contest",
  "code": "/plugin.js",
  "icon": "/icon.png",
  "permissions": [
    "content:read",
    "content:write",
    "library:read",
    "library:write",
    "user:read",
    "comment:read",
    "comment:write",
    "allow:downloads"
  ]
}

Once the initial setup is done, the communication between the Penpot API and the plugin interface is done with a bidirectional messaging system, not so different than what you’d do with a Web-Worker.

So, to send a message from your plugin to the Penpot API, you can do the following:

penpot.ui.sendMessage("Hello from my Plugin");

And to receive it back, you need to add an event listener to the window object (the top-level scope) of your plugin:

window.addEventListener("message", event => {
  console.log("Received from Pendpot::: ", event.data);
})

A quick performance tip: If you’re creating a more complex plugin with different views and perhaps even routes, you need to have a cleanup logic. Most frameworks provide decent ergonomics to do that; for example, React does it via their return statements.

useEffect(() => {
  function handleMessage(e) {
    console.log("Received from Pendpot::: ", event.data);
  }
  window.addEventListener('message', handleMessage);
  
  return () => window.removeEventListener('message', handleMessage);
}, []);

And Solid has onMount and onCleanup helpers for it:

onMount(() => {
  function handleMessage(e) {
    console.log("Received from Penpot::: ", event.data);
  }
  window.addEventListener('message', handleMessage);
})

onCleanup(() => {
  window.removeEventListener('message', handleMessage);
})

Or with the @solid-primitive/event-listener helper library, so it will be automatically disposed:

import { makeEventListener } from "@solid-primitives/event-listener";

function Component() {
  
  const clear = makeEventListener(window, "message", handleMessage);
  
  // ...
  return (<span>Hello!</span>)
}

In the official documentation, there’s a step-by-step guide that will walk you through the process of creating, testing, and publishing your plugin. It will even help you out.

So, what are you waiting for?

Plugin Contest: Imagine, Build, Win #

Well, maybe you’re waiting for a push of motivation. The Penpot team thought of that, which is why they’re starting a Plugin Contest!

(Large preview)

For this contest, they want a fully functional plugin; it must be open-source and include comprehensive documentation. Detailing its features, installation, and usage. The first prize is US$ 1000, and the criteria are innovation, functionality, usability, performance, and code quality. The contest will run from November 15th to December 15th.

Final Thoughts #

If you decide to build a plugin, I’d love to know what you’re building and what stack you chose. Please let me know in the comments below

 

 

Alternatives To Typical Technical Illustrations And Data Visualisations

 ethinks technical illustrations and data visualizations, sharing interesting and uncommon examples of how to present data and information. Bar graphs and pie charts are great, but there’s so much more to explore!

Good technical illustrations and data visualisations allow users and clients to, in a manner of speaking, take time out, ponder and look at the information in a really accessible and engaging way. It can obviously also help you communicate certain categories of information and data.

The aim of the article is to inspire and show you how, by using different technical illustrations and data visualisations, you can really engage and communicate with your users and do much more good for the surrounding content.

Below are interesting and not commonly seen examples of technical illustration and data visualisation, that show data and information. As you know, more commonly seen examples are bar graphs and pie charts, but there is so much more than that!

So, keep reading and looking at the following examples, and I will show you some really cool stuff.

Technology #

Typically, technical illustration and data visualisations were done using paper, pens, pencils, compasses, and rulers. But now everything is possible — you can do analog and digital. Since the mainstream introduction of the internet, around 1997, data (text, numerical, symbol) has flourished, and it has become the current day gold currency. It is easy for anyone to learn who has the software or knows the coding language. And it is much easier to do technical illustrations and data visualisation than in previous years. But that does not always mean that what is done today is better than what was done before.

What Makes Data And Information Good #

• It must be aesthetically pleasing, interesting, and stimulating to look at.
• It must be of value and worth the effort to read and digest the information.
• It must be easy to understand and logical.
• To convey ideas effectively, both aesthetic form and functionality need to go hand in hand, as Vitaly Friedman in his article “Data Visualization and Infographics” has pointed out.
• It must be legible and have well-named and easy-to-understand axes and labels.
• It should help explain and show data and information in a more interesting way than if it were presented in tabular form.
• It should help explain or unpack what is written in any surrounding text and make it come to life in an unusual and useful way.
• It must be easy to compare and contrast the data against the other data.

The Importance Of Knowing About Different Audiences #

There are some common categories of audiences:

• Expert,
• Intermediate,
• Beginner,
• Member of the public,
• Child,
• Teenager,
• Middle-aged,
• Ageing,
• Has some prior knowledge,
• Does not have any prior knowledge,
• Person with some kind of disability (vision, physical, hearing, mobility).

Sara Dholakia in her article “A Guide To Getting Data Visualization Right” points out the following considerations:

• The audience’s familiarity with the subject matter of your data;
• How much context they already have versus what you should provide;
• Their familiarity with various methods of data visualisation.

Just look at what we are more often than not presented with.

(Large preview)

So, let us dive into some cool examples that you can understand and start using today that will also give your work and content a really cool edge and help it stand out and communicate better.

3D Flow Diagram #

It provides a great way to show relationships and connections between items and different components, and the 3D style adds a lot to the diagram.

(Large preview)

Card Diagram #

It’s an effective way to highlight and select information or data in relation to its surrounding data and information.

(Large preview)

Pyramid Graph #

Being great at showing two categories of information and comparing them horizontally, they are an alternative to typical horizontal or vertical bar graphs.

(Large preview)

3D Examples Of Common Graphs #

They are an excellent way to enliven overused 2D pie and bar graphs. 3D examples of common graphs give a real sense of quality and depth whilst enhancing the data and information much more than 2D versions.

(Large preview)

• 
  Leverage robust data-fetching and optimized bundle size with the KendoReact Server Data Grid
  Try now

Sankey Flow Diagram #

This diagram is a good way to show the progression and the journey of information and data and how they are connected in relation to their data value. It’s not often seen, but it’s really cool.

(Large preview)

Stream Graph #

A stream graph is a great way to show the data and how it relates to the other data — much more interesting than just using lines as is typically seen.

(Large preview)

3D Map #

It provides an excellent way to show a map in a different and more interesting form than the typically seen 2D version. It really gives the map a sense of environment, depth, and atmosphere.

(Large preview)

Tree Map #

It’s a great way to show the data spatially and how the data value relates, in terms of size, to the rest of the data.

(Large preview)

Waterfall Chart #

A waterfall chart is helpful in showing the data and how it relates in a vertical manner to the range of data values.

(Large preview)

Doughnut Chart #

It shows the data against the other data segments and also as a value within a range of data.

(Large preview)

Lollipop Chart #

A lollipop chart is an excellent method to demonstrate percentage values in a horizontal manner that also integrates the label and data value well.

(Large preview)

Bubble Chart #

It’s an effective way to illustrate data values in terms of size and sub-classification in relation to the surrounding data.

(Large preview)

How To Start Doing Technical Illustration And Data Visualisation #

There are many options available, including specialized software like Flourish, Tableau, and Klipfolio; familiar tools like Microsoft Word, Excel, or PowerPoint (with redrawing in software like Adobe Illustrator, Affinity Designer, or CorelDRAW); or learning coding languages such as D3, Three.js, P5.js, WebGL, or the Web Audio API, as Frederick O’Brien discusses in his article “Web Design Done Well: Delightful Data Visualization Examples.”

But there is one essential ingredient that you will always need, and that is a mind and vision for technical illustration and data visualisation.

Worthwhile Practitioners And Links To Look At #

• Stefanie Posavec
• Yuri Engelhardt
• Giorgia Lupi
• Edward Tufte
• Information is Beautiful Awards

 

Designing For Gen Z: Expectations And UX Guidelines

 here are many myths revolving around Gen Z and how they use tech. Time to take a look at actual behavior patterns that go beyond heavy use of social media.

Every generation is different in very unique ways, with different habits, views, standards, and expectations. So when designing for Gen Z, what do we need to keep in mind? Let’s take a closer look at Gen Z, how they use tech, and why it might be a good idea to ignore common design advice and do the opposite of what is usually recommended instead.

Gen Z: Most Diverse And Most Inclusive

When we talk about Generation Z, we usually refer to people born between 1995 and 2010. Of course making universal statements about a cohort where some are adults in their late 20s and others are school students is at best ineffective and at worst wrong — yet there are some attributes that stand out compared to earlier generations.

Gen Z is the most diverse generation in terms of race, ethnicity, and identity. Research shows that young people today are caring and proactive, and far from being “slow, passive and mindless” as they are often described. In fact, they are willing to take a stand and break their habits if they deeply believe in a specific purpose and goal. Surely there are many distractions along that way, but the belief in fairness and sense of purpose has enormous value.

Accessibility is at the heart of Gen Z’s views and beliefs — and that’s a great thing! From Building Accessibility Research by Booking.com. (Large preview)

Their values reflect that: accessibility, inclusivity, sustainability, and work/life balance are top priorities for Gen Zs, and they value experiences, principles, and social stand over possessions.

What Gen Z Deeply Cares About

Gen Z grew up with technology, so unsurprisingly digital experiences are very familiar and understood by them. On the other hand, digital experiences are often suboptimal at best — slow, inaccessible, confusing, and frustrating. Plus, the web is filled with exaggerations and generic but fluffy statements. So it’s not a big revelation that Gen Zs are highly skeptical of brands and advertising by default (rightfully so!), and rely almost exclusively on social circles, influencers, and peers as main research channels.

A striking high-contrast colour palette with bold typography, with a clean straightforward design layout structure. From “Designing For Gen Z,” a case study by Clearleft. (Large preview)

They might sometimes struggle to spot what’s real and what’s not, but they are highly selective about their sources. They are always connected and used to following events live as they unfold, so unsurprisingly, Gen Z tends to have little patience.

And sure enough, Gen Z loves short-form content, but that doesn’t necessarily equate to a short attention span. Attention span is context-dependent, as documentaries and literature are among Gen Z’s favorites.

Designing For Gen Z

Most design advice on Gen Z focuses on producing “short form, snackable, bite-sized” content. That content is optimized for very short attention spans, TikTok-alike content consumption, and simplified to the core messaging. I would strongly encourage us to do the opposite.

We shouldn’t discount Gen Z as a generation with poor attention spans and urgent needs for instant gratification. Gen Zs have very strong beliefs and values, but they are also inherently curious and want to reshape the world. We can tell a damn good story. Captivate and engage. Make people think. Many Gen Zs are highly ambitious and motivated, and they want to be challenged and to succeed. So let’s support that. And to do that, we need to remain genuine and authentic.

Remain Genuine And Authentic

As Michelle Winchester noted, Gen Zs have very diverse perspectives and opinions, and they possess a discerning ability to detect disingenuous content. That’s also where mistrust towards AI comes into play, along with AI fatigue. As Nilay Patel mentioned on Ezra Klein Show, today when somebody says that something is “AI-generated”, usually it’s not a praise, but rather a testament how poor and untrustworthy it actually is.

Gen Z expects better. Hence brands that value sincerity, honesty, and authenticity are perceived as more trustworthy compared to brands that don’t have an opinion, don’t take a stand, don’t act for their beliefs and principles. For example, the “Keep Beauty Real” campaign by Dove (shown below) showcases the value of genuine human beauty, which is so often missed and so often exaggerated to extremes by AI.

So whenever you can, aim for the opposite of perfect. Say what you think and do what you promise. Reflect the real world with real people using real products, however imperfect they are. That’s how you build a strong relationship and trust with Gen Z.

Accessibility First

Because Gen Z are so incredibly diverse, their needs are extremely diverse and demanding as well. This doesn’t necessarily mean customization of features or adapting the layout entirely based on custom settings or preferences. But it does mean providing an accessible experience out of the box.

Simple things matter. High enough color contrast. Links that look like links. Buttons that look like buttons. Forms that are broken down into simple steps to follow. Diverse gender and identity options. Proper tab order. Keyboard accessibility. Reduced motion for people who opt in for reduced motion sickness. Dark mode and light mode.

It’s nothing groundbreaking really. Just basic things that help focus and get things done. In fact, accessibility is better for everyone — not just for Gen Z (who expect and demand it) but also for absolutely everybody around the world.

Mobile-Only, Not Mobile First

Many design mock-ups that we are creating today are typically designed and presented on large screens first. However, depending on your user base, a vast majority of users (and that’s especially true for Gen Zs), will use almost exclusively mobile devices to access your products and services. This surely will be different for enterprise software, but consumer products are much less likely to be used on desktop devices by younger Gen Zs.

Get into the habit of presenting your design mock-ups in mobile views only first. Help people read better. Content design has never been more important — especially when designing for mobile screens. Here are a few guidelines to keep in mind:

• Avoid long walls of text → max. 50 words per paragraph.
• Avoid long sentences → max. 20 words per sentence.
• Write for mobile first: brief, clear, and concise.
• Include a plain language summary, even for legal docs.
• Use Inverted Pyramid: key insights first, details below.
• Nothing is more effective than removing waste and fluff.

Subtitles On By Default

Many people, and especially Gen Z, turn on closed captioning by default these days. Perhaps the spoken language isn’t their native language, or perhaps they aren’t quite familiar with the accent of some speakers, or maybe they don’t have headphones nearby, don’t want to use them, or can’t use them. In short, closed captions are better for everybody and they increase ROI and audience.

Gareth Ford Williams has put together a visual language of closed captions and has kindly provided a PDF cheatsheet that is commonly used by professional captioners. There are some generally established rules about captioning, and here are some that I found quite useful when working on captioning for my own video course:

• Divide your sentences into two relatively equal parts like a pyramid (40ch per line for the top line, a bit less for the bottom line);
• Always keep an average of 20 to 30 characters per second;
• A sequence should only last between 1 and 8 seconds;
• Always keep a person’s name or title together;
• Do not break a line after conjunction;
• Consider aligning multi-lined captions to the left.

On YouTube, users can select a font used for subtitles and choose between monospaced and proportional serif and sans-serif, casual, cursive, and small-caps. But perhaps, in addition to stylistic details, we could provide a careful selection of fonts to help audiences with different needs. This could include a dyslexic font or a hyper-legible font, for example.

Additionally, we could display presets for various high contrast options for subtitles. This gives users a faster selection, requiring less effort to configure just the right combination of colors and transparency. Still, it would be useful to provide more sophisticated options just in case users need them.

Support Intrinsic Motivation

On the other hand, in times of instant gratification with likes, reposts, and leaderboards, people often learn that a feeling of achievement comes from extrinsic signals, like reach or attention from other people. The more important it is to support intrinsic motivation.

As Paula Gomes noted, intrinsic motivation is characterized by engaging in behaviors just for their own sake. People do something because they enjoy it. It is when they care deeply for an activity and enjoy it without needing any external rewards or pressure to do it.

For Gen Z, authenticity matters — but also the feeling of relatedness, autonomy, and competence. Every person can only benefit from supported intrinsic motivation. (Large preview)

Typically this requires 3 components:

• Competence involves the need to feel capable of achieving a desired outcome.
• Autonomy is about the need to feel in control of your own actions, behaviors, and goals.
• Relatedness reflects the need to feel a sense of belonging and attachment to other people.

In practical terms, that means setting people up for success. Preparing the knowledge and documents and skills they need ahead of time. Building knowledge up without necessarily rewarding them with points. It also means allowing people to have a strong sense of ownership of the decisions and the work they are doing. And adding collaborative goals that would require cooperation with team members and colleagues.

Encourage Critical Thinking

The younger people are, the more difficult it is to distinguish between what’s real and what isn’t. Whenever possible, show sources or at least explain where to find specific details that back up claims that you are making. Encourage people to make up their mind, and design content to support that — with scientific papers, trustworthy reviews, vetted feedback, and diverse opinions.

And: you don’t have to shy away from technical details. Don’t make them mandatory to read and understand, but make them accessible and available in case readers or viewers are interested.

In times where there is so much fake, exaggerated, dishonest, and AI-generated content, it might be just enough to be perceived as authentic, trustworthy, and attention-worthy by the highly selective and very demanding Gen Z.

Good Design Is For Everyone

I keep repeating myself like a broken record, but better accessibility is better for everyone. As you hopefully have noticed, many attributes and expectations that we see in Gen Z are beneficial for all other generations, too. It’s just good, honest, authentic design. And that’s the very heart of good UX.

What I haven’t mentioned is that Gen Z genuinely appreciates feedback and values platforms that listen to their opinions and make changes based on their feedback. So the best thing we can do, as designers, is to actively involve Gen Z in the design process. Designing with them, rather than designing for them.

And, most importantly: with Gen Z, perhaps for the first time ever, inclusion and accessibility is becoming a default expectation for all digital products. With it comes the sense of fairness, diversity, and respect. And, personally, I strongly believe that it’s a great thing — and a testament how remarkable Gen Zs actually are.

Wrapping Up

• Large parts of Gen Z aren’t mobile-first, but mobile-only.
• To some, the main search engine is YouTube, not Google.
• Some don’t know and have never heard of Internet Explorer.
• Trust only verified customer reviews, influencers, friends.
• Used to follow events live as they unfold → little patience.
• Sustainability, reuse, work/life balance are top priorities.
• Prefer social login as the fastest authentication method.
• Typically ignore or close cookie banners, without consent.
• Rely on social proof, honest reviews/photos, authenticity.
• Most likely generation to provide a referral to a product.
• Typically turn on subtitles for videos by default.

Useful Resources

• Designing for Gen Z, by Designlab
• Designing For Gen Z (Case Study), by Michelle Winchester
• Intrinsic vs. Extrinsic Motivation, by Paula Gomes
• Shopping Habits For Gen Z, by Sara Karlovitch
• 10 Gen Z Insights To Improve Your CX, by Telus
• Millennials vs. Gen Z Expectations, by Zendesk