Nice Saturday

It’s still 2020 and everything is terrible and none of my family is here but I managed to have a relaxing day. It was rainy this morning so I listened to music while I finished a book and started a new one. Then I watched a beautiful film. And six weeks of flower farming in Animal Crossing finally paid off with a blue rose.

My Animal Crossing avatar smiles at the appearance of a blue rose bud among a bunch of red roses.

The rain gave way to a clear, cool (for San Antonio) evening that was perfect for looking at the sky and I managed to get this shot of a waxing crescent moon.

Waxing crescent moon


I’ve been trying to get decent picture of Comet NEOWISE but it’s too light-polluted here downtown. You need binoculars to even see it at all and it’s not as bright as it is in either of these long exposure photos.


I just got a magic keyboard for my iPad and wanted to give LumaFusion a good try. It’s pretty capable and the keyboard made things better. I’d really love some better audio editing tools though. All in all I had a fun afternoon looking back at clips from the last few years.


  • Double Dare by Bauhaus from the Peter Murphy and David J show at Paper Tiger, San Antonio, Texas
  • Somewhere in the Caribbean
  • Zion National Park, Utah
  • Big Bend National Park, Texas
  • Burger King
  • Art Institute of Chicago
  • Southwest Airlines
  • Rosie the cat at home
  • Din Tai Fung, Taipei, Taiwan
  • Spurs vs. Clippers at the AT&T Center
  • Marienplatz, Munich, Germany
  • Rooftop in Taipei, Taiwan
  • Dylan & Emmie at home 
  • Aftermath of Obliteration of Eternity (2009) by Yayoi Kusama at the McNay in San Antonio, Texas
  • NorthPark Center, Dallas, Texas
  • Jupiter from my telescope at home
  • SpaceX launch from Orlando, Florida
  • Lauren’s graduation at Texas State University
  • Dylan & Lauren’s birthday 
  • Apogee by Piñata Protest from the Dia De Los Muertos show at the Arneson River Theater, San Antonio, Texas
  • Millennium Park, Chicago, Illinois
  • Paris, France
  • Maui, Hawaii
  • Turtles in Austin, Texas
  • Cow in Luray, Virginia 
  • Tony Bennet, San Antonio, Texas
  • St. Vincent, Austin, Texas

Critiquing Design

A man in a white leotard holding a large yoga ball on a small stage.

This is me about 25 years ago, dancing with a yoga ball. I was part of a theater company where I first learned Liz Lerman’s Critical Response Process. We used this extensively—it was an integral part of our company dynamic. We used it to develop company work, we used it in our education programs and we even used it to redesign our company structure. It was a formative part of my development as an artist, a teacher, and later, as a user-centered designer.

What I love about this process is that works by embedding all the things we strive for in a critique into a deceptively simple, step-by-step process. You don’t have to try to remember everything the next time you’re knee-deep in a critique session. It’s knowledge in the world for critique sessions.

So a while back I started thinking about how I could adapt this to critiquing design and I introduced the process to the Firefox UX team. We’ve been practicing and refining it since last summer and we’ve really found it helpful. Recently I’ve been getting requests to share our adapted version with other design teams so I’ve collected my notes and the cheat sheet we use to keep us on track over at Please feel free to try it out. Let me know if you have questions or ideas to make it better. I’ve also started a GitHub repo for it so you can file an issue or make pull request if you want.

The other great part about this is that it changes critique from something like:

To a time that I look forward to and that leaves me inspired by the smart, creative people I work with.

Originally posted on the Firefox UX blog.

My Favorite Albums of the Decade

  1. When I get Home – Solange
  2. St. Vincent – St. Vincent
  3. Pure Comedy – Father John Misty
  4. Blackstar – David Bowie
  5. The Idler Wheel… – Fiona Apple
  6. Let England Shake – PJ Harvey
  7. Be The Cowboy – Mitski
  8. Tell Me How You Really Feel – Courtney Barnett
  9. Lux Prima – Karen O & Danger Mouse
  10. Heartthrob – Tegan and Sara
  11. Norman F*****g Rockwell – Lana Del Rey
  12. A Seat At The Table – Solange
  13. Aureate Gloom – of Montreal
  14. Morning Phase – Beck
  15. Currents – Tame Impala
  16. 7 – Beach House
  17. Broken Bells – Broken Bells
  18. Pure Heroine – Lorde
  19. What Now – Sylvan Esso
  20. Sound & Color – Alabama Shakes
  21. Lazaretto – Jack White
  22. This Is Happening – LCD Soundsystem
  23. This Is My Hand – My Brightest Diamond
  24. Passive Me, Aggressive You – The Naked and Famous
  25. Evil Friends – Portugal. The Man
  26. The Voyager – Jenny Lewis
  27. The Haunted Man – Bat for Lashes
  28. On The Line – Jenny Lewis
  29. Strange Mercy – St. Vincent
  30. Ultraísta – Ultaísta
  31. Contra – Vampire Weekend
  32. Lush – Snail Mail
  33. Sylvan Esso – Sylvan Esso
  34. MASSEDUCTION – St. Vincent
  35. Cults – Cults
  36. Love Is Dead – CHVRCHES
  37. Ninth – Peter Murphy
  38. Lonerism – Tame Impala
  39. The Next Day – David Bowie
  40. Love You to Death – Tegan and Sara
  41. Blunderbuss – Jack White
  42. Lukas Nelson & The Promise of the Real – Lukas Nelson & The Promise of the Real
  43. Honey – Robyn
  44. Trouble Will Find Me – The National
  45. Comedown Machine – The Strokes
  46. Help Us Stranger – The Raconteurs
  47. Coming Home – Leon Bridges
  48. Offering – Cults
  49. Francis Trouble – Albert Hammond Jr.
  50. LONER – Caroline Rose

I’m making a game this weekend

Amy and I were chatting about the importance of making time for art the other day. So I decided that I’m going to spend the weekend prototyping this game that’s been floating around in my head for months. Ok, here we go. Starting now 👇

48 hours later…

I originally thought I’d be able to prototype the whole thing in a weekend. I did not get close to finishing BUT I did make some really good progress AND I had fun working on it.

It's an image of the Twine interface. It has boxes connected to each other with arrows that represent how parts of a game interact with each other.

Prototyping Firefox With CSS Grid

Prototyping with HTML and CSS grid is really helpful for understanding flexibility models. I was able to understand how my design works in a way that was completely different than doing it in a static design program.


So I’m working on a design of the new address bar in Firefox. Our code name for it is the QuantumBar. There’s a lot of pieces to this. But one of the things that I’ve been trying to figure out is how it fits into the Firefox toolbar and how it collapses and expands, the squishiness of the toolbar, and trying to kinda rethink that by just building it in code. So I have this sort of prototype here where I’ve recreated the Firefox top toolbar here in HTML, and you can see how it like collapses and things go away and expands as I grow and shrink this here.

I’ve used CSS Grid to do a lot of this layout. And here I’ve turned on the grid lines just for this section of the toolbar. It’s one of the many grids that I have here. But I wanna point out these like flexible spaces over here, and then this part here, the actual QuantumBar piece, right? So you can see I’ve played around with some different choices about how big things can be at this giant window size here. And I was inspired by my friend, Jen Simmons, who’s been talking about Grid for a long time, and she was explaining how figuring out whether to use minmax or auto or fr units. It’s something that is, you can only really figure out by coding it up and a little trial and error here. And it allowed me to understand better how the toolbar works as you squish it and maybe come up with some better ways of making it work.

Yeah, as we squish it down, maybe here we wanna prioritize the width of this because this is where the results are gonna show up in here, and we let these flexible spaces squish a little sooner and a little faster. And that’s something that you can do with Grid and some media queries like at this point let’s have it squished this way, at this point let’s have it squished another way. Yeah, and I also wanted to see how it would work then if your toolbar was full of lots of icons and you have the other search bar and no spacers, how does that work? And can we prioritize maybe the size of the address bar a little more so that because you’ll notice on the top is the real Firefox, we can get in weird situations where this, it’s just not even usable anymore. And maybe we should stop it from getting that small and still have it usable.

Anyway it’s a thing I’ve been playing with and what I’ve found was that using HTML and CSS to mock this up had me understand it in a way that was way better than doing it in some sort of static design program.

Originally posted on the Firefox UX blog.

How I design Firefox with GoodNotes 5

I’m always making notes and sketching on my iPad and people often ask me what app I’m using. So I thought I’d make a video of how I use GoodNotes 5 in my design practice.


Hi, I’m Michael Verdi, and I’m a product designer for Firefox. Today, I wanna talk about how I use sketching on my iPad in my design practice. So, first, sketching on a iPad, what I really like about it is that these apps on the iPad allow me to collect all my stuff in one place. So, I’ve got photos and screenshots, I’ve got handwritten notes, typed up notes, whatever, it’s all together. And I can organize it, and I can search through it and find what I need.

There’s really two basic kind of apps that you can use for this. There’s drawing and sketching apps, and then there’s note-taking apps. Personally, I prefer the note-taking apps because they usually have better search tools and organization. The thing that I like that I’m gonna talk about today is GoodNotes 5.

I’ve got all kinds of stuff in here. I’ve got handwritten notes with photographs, I’ve got some typewritten notes, screenshots, other things that I’ve saved, photographs, again. Yeah, I really like using this. I can do storyboards in here, right, or I can draw things, copy and paste them so that I can iterate quickly, make multiple variations over and over again. I can stick in screenshots and then draw on top of them or annotate them. Right, so, let me do a quick demo of using this to draw.

So, one of the things that I’ll do is actually, maybe I’ve drawn some stuff before, and I’ll save that drawing as an image in my photo library. And then I’ll come stick it in here, and I’ll draw on top of it. So, I work on search, so here’s Firefox with no search box. So, I’m gonna draw one. Let’s use some straight lines to draw one. I’m gonna draw a big search box, but I’m doing it here in the middle because I’m gonna place it a little better in a second. And we have the selection tool, and I’m gonna make the, the selection is not selecting images, right? So, I can come over here and just grab my box, and then I can move my box around on top. Okay, so, I still have this gray line. I can’t erase that because it’s an image. So, I’m gonna come over here, and I’m gonna get some white, and I’m gonna just draw over it. Right, okay. Let’s go back and get my gray color. I can zoom in when I need to, and I’m gonna copy this, and I’m gonna pate it a bunch of times. Then I can annotate this. Right, so, there we go.

Another thing that I really like about GoodNotes is the ability to search through stuff that you’ve done. So, I’m gonna search here, and I’m gonna search for spaces. So, this was a thing that we mocked up with a storyboard. This is it right here. And it recognized my, it read my handwriting, which is really cool. So, I can find this thing in a notebook of a jillion pages. But there’s also another way to find things. So, you have this view here, this is called the outline view. These are sorta like named bookmarks. There’s also a thumbnail view, right? Here’s all the pages in this notebook. But if I go to the outlines, so, here, I did some notes about a critique format, and I can jump right to them. But let’s say this new drawing, well, where did I do it? This new drawing, I wanna be able to get to this all the time, right? So, I can come up here, and I can say Add This Page to the Outline, and now I can give it a name. And I don’t know what I’m gonna call this, so I’m just callin’ it sample for right now. And so, now it is in the outline. Oh, I guess I had already done this as a demo. But there it is. And that’s how I can get to it now. That’s super, super cool.

Okay, and then one last thing I wanna show you about this is templates. So, I actually made this template to better fit my setup here. I’ve got no status bar at the top. And then these are just PDFs. And you can import your own. And I can change the template for this page, and I’ve made a storyboard template. And I can apply that here. And now I’ve got a thing so I can draw a storyboard. Or maybe I don’t wanna do a storyboard, but what else do I have? Oh, I wanna do a crazy eights exercise. So, now I’ve got one ready for a crazy eight exercise. I love these templates, they’re super handy. I’ll include those in the post with this, a link to some of these things.

So, that’s sketching on the iPad with GoodNotes 5. Thanks for watching.

Originally posted on the Firefox UX blog.