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.

Links:

Transcript:
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.

Links:

Transcript:
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.

Elapsed Time: 155 Days, 3 Hours, 19 Minutes, 7 Seconds

It’s been a while since I last posted and even though I’m the only one who reads this I feel the need to account for the 5+ months. It’s mainly been work with some cool travel interspersed. So here are some highlights.

March 30th was my 9yr anniversary at Mozilla. I’ve been working on all things related to search for the last 16 months. Nothing much has been released in Firefox yet but we just spent our All Hands week in Whistler planning out all the cool stuff we’re going to build the second half of this year. Also, I got to make these cool videos for the plenary. It was so much fun.

Over the spring I got to visit some pretty beautiful places. First we visited the Grand Canyon. I hiked all the way down and back up in one day with some friends. It was amazing. Then we went to Zion. It looks like some kind of fantasy Leonardo da Vinci landscape. Also amazing. Then it was another trip to Big Bend were we did the South Rim trail and then gazed at stars. Finally, we spent our anniversary and my birthday in Maui. More amazing.

2019 Lunar Eclipse

January 20, 2019 lunar eclipse from San Antonio, TX.

Last night the clouds cleared out by about 9pm and Rebecca and I had a spectacular view of the lunar eclipse from the back deck. Our friends Pete and Carol joined us along with our neighbor Katie. It was really nice to share the event with friends and be able to step inside to warm up periodically.

Normally, I think the full moon is the least exciting moon to look at in a telescope because it looks completely flat. When there’s some shadow, you can really see the surface details. The eclipse is something totally different though. The colors are amazing and what I found particularly interesting was how it seemed to become a sphere again once it was completely in shadow. Especially in the binoculars, it looked like a little ball that you could just reach out and grab. Another nice surprise was being able to see stars near the moon. Normally they’re completely washed out. You can see one at the lower left in this photo.

I was worried that the moon was going to be too high in the sky and my telescope wouldn’t be able to track it because the eyepiece or camera would run into the mount but it turned out that I had just enough clearance to get 30+ minutes into totality. That gave us plenty of time to observe and swap the eyepiece out for the camera to get some photos. This was a 1 second exposure with a 1600 iso taken with my Lumix GX85 connected to my Celestron SE 8 and an f/6.3 focal reducer.

My Onboarding Talk for Mission UX


Our local UX meetup put on a conference last week and I talked about my experience working on onboarding for Firefox. It was really strange to be talking at a conference again. Back in my videoblogging days I did it often — including speaking at SXSW — but I haven’t done that in many years. Also, I wrapped up my work on onboarding and switched to working on our search experience a few months ago. But still, it felt good to put the things I’ve learned together in a talk. Check out the slides and my notes at Notist.


And a quick note about the conference itself — I was super impressed. It was a really nice event and I enjoyed all the speakers and getting to meet people. I especially enjoyed hearing Dr. Laura Faulkner talk about her work “Beyond the Five-User Assumption.”

Also, thanks to @ProfClayton for the cool sketch notes above.

Ron Mueck

Rebecca and I went to the Fort Worth Museum of Modern Art today. The big exhibit was new works by Ron Mueck. He creates these incredibly detailed and lifelike sculptures (mostly of people) that are either much smaller or much larger than the real thing.

I was only vaguely familiar with his work — as in it’s likely I skimmed this blog post once. Seeing it in person though was exhilarating. And the center piece, Couple under an Umbrella (2013), made me smile, and hopeful and happy. I can’t stop thinking about it.

Here are a few other photos from the exhibit.

St. Vincent

St. Vincent’s self-titled 2014 album has the kind of cover that would have stopped me in my tracks in a record shop as a teenager. It’s the kind of cover that looks so cool the music has to be interesting at the very least. Back then (mid 80s), sometimes that was about all you had to go on. If you were lucky maybe someone said they heard that it was good or you caught a song at a club. Plunking down eight bucks on a record was often a roll of the dice. A great album cover though was a huge signal. Joy Division and New Order’s great Peter Saville covers persuaded me to buy both at the same time.

St. Vincent came to me via a 2014 version of this. “Digital Witness” showed up in someone’s playlist that I was streaming and that album cover got me. I listened to it on repeat for months.

Later that year Rebecca and I saw her in concert twice. The things that struck me right away were the rehearsed gestures in her performance.

Download the video

I recognized them right away as akin to the gestural/ritual movement popular in the performance art world (at least the one I was a part of in the 90s). One of the first shows I was in was a movement piece about gay men dealing with AIDS. We had a whole section derived from a morning routine in front of a mirror and another one around bathing.

All of this goes to say that I was really excited to see her new show this past Thursday and I was pleasantly surprised to find out that it was just her on stage the whole time (somehow I didn’t read a review of the tour beforehand). The set consisted of curtains and lights revealing more and more of an empty stage.

After a quick blackout and costume change, she performed her latest album front to back in front of a video screen with colors and images from her new album artwork and videos. At one point a woman came out in a complete costume just to hand her another guitar (her own design). It reminded me of the time our stage manager swept the stage before the show each night, dressed in a nurse’s uniform.

Anyway, the point of all of this is that I thought this was the perfect distillation of what she’s been working towards over the last few years. It was a beautiful, singular statement — risky and bold. Apparently, this was also a bit divisive but like that article concludes, “The truth is that it was a total triumph.” And I didn’t miss the band. She’s such a bad ass with that guitar, that’s all you need.

Download the video

New Website

Late last year my friend Jen proposed that we use the new year as an opportunity to make over our personal websites. It’s something that I’ve done many times – burning down the previous thing in the process. And I’m never satisfied with it because I want it to be exciting and cutting edge and unique and and and… a bunch of things. Too many things. Then I end up feeling bad about it all and I go and buy a new domain where I’ll have less pressure to experiment because it won’t have my name on it. So two months ago I got excited by Jen’s idea but I started doing the same thing I always do (unsurprisingly producing the same result). Then I thought, just let your website be simple. Let it say a little about yourself, maybe have a portfolio (still on the to-do list) and maybe even blog again (I know that’s crazy but I still love blogs).

So I’ve re-burned it all down one more time and this is the result. It’s WordPress running an ever so slightly modified version of the Intergalactic 2 theme. I spent some time writing a bit about myself and I’m using my own photos in the headers. It’s not really cool or ground-breaking or even trying to use new techniques like CSS grid. That’s ok. It’s doing it’s job and I don’t have to spend a lot of time maintaining it. I’ll save the big ambition for another project I have in mind.

The one really new thing I did while putting all this together was make a logo for myself. You may be thinking that it looks like a drop-down menu button or a scroll bar arrow and you’d be right. It also makes an “M” and a “V.” As someone who designs software and who’s initials are MV, I think it’s on brand. I also like that you can reverse it over a photo and do things like this:

So this is my new website and this is my first (in a long time) blog post. Thanks for reading.