Not Just Pixels

Introduction

Guo Chen (GC): Today, I’m talking to Mike Mai. Mike is currently the Principal UI Designer at Pegasystems primarily working on design systems. He started out with a strong design background, graduating with a BFA in Graphic Design at Massachusetts College of Art & Design. There, he learned all the design fundamentals that helped him become the accomplished designer he is today.

Last spring, he was my mentor when I was a Design Intern on his team at Pega. And if you’ve checked out the thumbnail of this episode, you know this is gonna be a fun one. And can I just say: Mike is a designer with personality and swag, no kidding. We talked about his epic senior design project at MassArt, the importance of code to designers, accessibility, and so much more. I was really excited about this one, and it sure did not disappoint. So without further ado, here’s my conversation with Mike Mai.

Design fundamentals

GC: On your LinkedIn you wrote, “MassArt taught me all the design fundamentals that helped me become the accomplished designer I am today.” What are the design fundamentals you learned that helped you become a good designer?

Mike Mai (MM): I come from a traditional graphic design background. I have a BFA from MassArt where I was taught the fundamentals of design: color, spacing (composition), and typography. You will see these 3 things front and center on the Bolt Design System homepage.

As a designer, this is what you always need to remember. Don’t use a color because you like it; do use a color because it reflects the message in your design. Don’t use a typeface because it is fancy; do use a typeface because it displays the emotion of your design. Don’t use the grid because that’s the default; do use the grid to position your typography and imagery to communicate the information hierarchy clearly. You should put meanings behind your design. Otherwise, you are just making decorations.

Out of the three, I strongly believe typography is the most important one because the web is 99% text. If you have no colors and images to work with, a great designer should still be able to create expressive design with just typography. A designer without typography skills is like a singer who can’t read musical notes, for example, mediocre pop singers.

GC: Yeah, one thing that stuck with me after my internship was the feedback that you gave, that I lack these fundamentals. I do kind of understand how to make things pretty but I don’t understand the meaning behind each of them. Are there specific best practices you recommend?

MM: You just have to take an online course or bootcamp to learn about these things, however, I do recommend traditional college course* from an art school like MassArt. That’s really where you would get the mentorship of people who really know these fundamentals well. They’ve been teaching that for years.

*Post podcast notes: I am bad at thinking on the spot. I don’t think I gave enough info so here’s some more. Learn the characteristics of both classic and modern typefaces. Understand it’s not just text you are designing, it’s typography. Each typeface has a personality, pick the right one that helps to push your message. Same goes for colors. Different colors provoke different emotions, and certain colors have different meanings when you take culture into consideration. As for the grid, it is invisible, but it is also everywhere. Understanding how and when to align things will drastically improve your compositions. The benefits of taking a traditional college course is the IRL daily critiques from peers and mentors with deep knowledge of these fundamentals. That is something you can’t get from an online course (no human interactions) or bootcamp (too short).

Epic design project

GC: Now, I wanted to ask this because this is super interesting. For context, this happened when I was your design intern at Pega. So, one day, I was looking at your profile on LinkedIn. And something rather odd caught my eye. Basically, I saw a website that you created called chinesegangster.com. And on the page, you’re a hardcore DJ/rapper on SoundCloud. So when I saw this, in the back of my mind, I was like, “WOW I didn’t know Mike had this other side to him!” And after talking to you, I finally understood what happened. So, I wanted to share this with the listener, Mike, what was this all about? And are you actually a hardcore DJ? What did you learn from this project?

MM: First thing first, it’s MC not DJ. My rapper name is Emcee Hao. This is an awesome topic because this project is awesome. Let me bring you back to a time when mainstream music was awful AF, around 2008 to 2009. The whole idea of that project was to make fun of mainstream rap. How it was all style over substance. Every rapper was bragging about girls, money, and being gangster.

The concept was to create an alter ego for myself. Through branding and package design, I tried to make people believe I was a Chinese gangster rapper, that I was really big in China.

I composed a song, I created the album design for that song, and I released a website along with official accounts on every single social network. I promoted the hell out of myself: I was exhibiting as an artist in galleries; I was giving talks at local networking events; I was performing in shows and college parties. It was hilarious whenever people fell for the joke. It proved my point that you really don’t need to have talents to be a star. You just need good design. My mentor Brian Lucid was instrumental in this project. He encouraged me to do everything I did, including writing and recording the song Big Ass Booties.

Now if you paid attention to what I just said, I explained the idea, the concept, and the execution. If you can define those 3 things well, you have a good design.

This is not a hot take. I wish my fellow web designers would understand that HTML & CSS is just the modern day letterpress.

Should designers code at all

GC: Instead of delving into how you went into UX, I want to delve more into how you got into development. Because during the Pega internship, you were basically a unicorn. You understand how to code (well too) and communicate effectively with developers. So, looking back at your career, how did you get into and learn coding as a designer?

MM: I’ve always had an interest on the technical side of things. I love to build things. I made my first website back in 2002, with Microsoft FrontPage. I don’t think you were even born back then. I’ve built more websites than you have eaten rice. That is such a Chinese thing to say and no Americans would understand it. I don’t even know if you would understand it. 我做的网站比你吃的饭还要多. It’s a Chinese expression that old people often say to young people, just to brag about how much experience they have.

So I had some knowledge of HTML even before I started designing. I did about 7 years of product design after graduating from MassArt in 2009. My passion for coding grew exponentially during that time, because it is so satisfying to build things exactly the way I designed them.

// CSS is awesome!


.grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(25ch, 1fr));

  gap: 2rem;

}

GC: Million Dollar Question: Should designers code?

MM: No, but great designers should. This is not a hot take. I wish my fellow web designers would understand that HTML & CSS is just the modern day letterpress. It is a design tool. Stop avoiding it. Look at all the design influencers on Twitter, they are all designer coders: Heydon Pickering, Stephanie Eckles, Adam Argyle, just to name a few. They are creating great designs everyday in code. Showing us how to design right in the browser. So do you want to be average or do you want to be great? Up to you.

How to get started with coding as a designer

GC: How would you recommend designers who want to learn how to code to start?

MM: Learn HTML & CSS, that’s all you need to know. HTML is the semantics, CSS is the aesthetics. There is so much to learn that you would not have time to focus on anything else. I am advocating for designers to code, not to program. So you really don’t need to learn any programming languages, that’s for database and backend. But if you got the time, it doesn’t hurt. I try to focus and specialize. I don’t touch backend.

GC: What are some best practices for coding?

MM: Write semantic HTML. Simple as that. Just like design, if you don’t put meanings behind your code, all you have is decorations. Also, accessibility is free with semantic HTML.

Importance of accessibility in design

GC: That’s a great segway. For people who don’t understand what this term is, what is accessibility? And why is it important for designers to know?

MM: It is in the name: ability to access. Generally the concept focuses on enabling access for people with disabilities but accessibility benefits everyone. For example, dark mode is primarily an accessibility feature but anybody can enjoy dark mode. Some people find light text against a dark background much more legible than the opposite. You don’t need to have a disability to have that opinion.

Accessibility is also an important aspect of inclusive design. If you don’t provide access, it means you are excluding. In other words, you are not inclusive. Let’s say a website only works with a mouse, you can’t use it with a keyboard. But many people rely heavily on the keyboard due to disabilities. Are you creating a website just to tell those people off? Come on, now.

GC: When did you realize the importance of accessibility during your career?

MM: When I was doing product design, I realized that if your product is not usable, let alone useful, nobody is going to use it. Makes sense, right? A lot of times companies just design for their CEO or worse the CMO, but they are not even the average user of your product. I’ve worked on many failed products and the key to failure is usually not respecting your users. By the way, don’t be afraid of failing, it’s only gonna make you a better designer. Your future success depends on your past failures.

Anyways, if you understand the importance of cross browser testing, you should understand the importance of accessibility testing*. There are all kinds of people, you can’t just design for a subset of people. For example, why is Slack so successful? Because “a pleasant Slack experience is a ‘need to have’, not a ‘nice to have’.” They make sure “everyone can use Slack, in whatever ways fit them best”. This episode is sponsored by Slack, “transform the way you work”. Nah nah, just kidding. But really, they should pay me.

GC: Haha, that’s the goal. Get sponsored by Slack.

MM: Notion is kinda successful but it is definitely not accessible. That’s why I refused to collaborate with you on Notion. But I sent you a Google Keep note and you couldn’t access that, so I guess Google isn’t accessible either.

*Post podcast notes: accessibility testing involves testing with various screen readers across all operating systems.

Make sure everyone can use your design, in whatever ways fit them best.

GC: How should a designer design more accessible products? What are some best practices?

MM: This is where I plug my latest writing “The Case for Respect”, available free on my blog*. I mean it’s not rocket science. I wouldn’t make anyone pay for an article like this. Here is the tl;dr:

• Respect reduced motion
• Respect browser font-size
• Respect dark mode
• Respect hover and focus
• Respect semantics

The best practice is to respect the user. Make sure everyone can use your design, in whatever ways fit them best. Again, pay me, Slack.

*Post podcast notes: since this is the blog post format, I kept this section brief so you can go read the full article linked above.

GC: What resources would you recommend to people who want to learn more about accessibility in UX?

MM: Other than my blog, there’s really only 1 thing you should read if you care about creating accessible design. That is the writing of Adrian Roselli, go read it. He has demonstrated every accessible design pattern under the sun. You can’t go wrong following him. He’s the best kept secret in the design world. Only 6000 followers on Twitter? Come on, people. You can do better!

He’s a fearless person. You’ll find out that he’s not afraid to call BS on large tech companies about their products’ accessibility. After all, 96.8% of the top million websites have detectable accessibility issues. On trivial things like providing descriptions for images, using sequential heading levels, or strong enough color contrast that people can read. The tech industry is embarrassing, to say the least. That’s all I have to say.

Last question

GC: If you’re now facing yourself but 20 years old, what career/life advice will you give him?

MM: Buy Google stocks? I am a very shallow person. Get rich or die trying. You can do whatever good you want if you are rich.

But seriously, for a young designer like yourself, I already told you what you need: fundamentals of design. Improve yourself, go learn about color theories, the concept of grid, and typography. Be a designer, not a decorator.

Thanks for having me. This is the first podcast I’ve ever done. Hope my takes weren’t too hot and people won’t send death threats to my Twitter DM. Hehe.

Colophon

This article is typeset in IM Fell English because I want that old timey letterpress feel. Remember what I said: “HTML & CSS is just the modern day letterpress”.