Pre-watch: Sedona design workshop 🌵

Everyone's super excited to meet you all next week in Sedona. I wanted to create this quick loom to help facilitate the workshop we're going to do together on Tuesday related to thread as a design language and how we can evolve the look and feel of the product with thread in mind.

So you know, one, one thing that Jordan said that I really thought was hilarious is this idea that thinking about thread and product doesn't necessarily mean porting thread, as it is communicated exactly on lim.com into the product.

He, he actually had this great example that I'll probably butcher a little bit, but basically like, you know, if, if loom.com is the expressive, hilarious creative arts student, maybe maybe the product version of thread is a little more buttoned up the, the, the science major a little more serious, but they they're from the same family.

They, they, they have some of the same attributes that, that really tie them more together. And, and that's, that's really our goal.

Christina's going to touch on this a lot more in terms of overarching goals, schedule, et cetera, and like what we're doing today, but hopefully what this will help you all do is just have a lot of resources at your fingertips.

So you can just focus on being creative getting to know your coworkers while doing so, and just, just have fun.

So with that, I'll just, I'll go through this super fast. Yeah, so Really easy. One piece of setup to do is just go to the assets panel and then turn on what's called the brand primer that will just have the color palette that Jordan and team have introduced.

So you can experiment with that. And then another quick thing is I made a copy of the entire thread source.

I made a copy of it, so we don't mess it up because they are actively, you know, Jordan and team are still actively using that to to make progress on loon.com, but it's there for us in case what I have here is an extensive enough.

And if you want to kind of prove that for ideas and kind of look at some additional intentions that I haven't included here.

And then these tips, I think are all straightforward, but I was just thinking about what might be some helpful context as you start exploring one one thing I've been trying to do and Jordan has been trying to do is just avoid reinventing functionality.

So if you're, if you're, for example, playing with the look and feel of weave this, isn't an exercise that's focused on changing how we've works.

It's more about just changing how we feel to again, tie it more closely to our new design language and then go bold and broad, not deep.

Don't worry about all the details. Don't worry about finessing, just have fun, be expansive take risks and and, and leave it, leave it to Jordan and I to put the pieces together and and, and figure it out with your help.

And then I guess one thing is one additional constraint is assumed density still matters. I think that that's probably the biggest constraint we have to consider.

So what, when Jordan and I were briefly exploring how buttons, for example, from thread could be introduced into thread. One thing we did for the sake of engineering and for the sake of keeping content I hate saying above the full, just keeping content extremely dense is just we, we avoided making buttons taller.

So just, just keep that in mind. Not a big deal, but just something I think about. And then most importantly, just to have fun, we're all in Sedona this beautiful place, and we're all meeting each other for the first time.

So just see this as this, this first opportunity, really to be creative with one another in person, which I I've personally been really excited and waiting for us.

Oh, and one thing I didn't mention is Joe Jordan is not Cole looming with me, even though he's done all of this work because he is ruining his partner on who just graduated from college.

They're both in Portland right now, celebrating. So I'm just wishing well, and I consulted with him on this and he was just, he was just excited to see what we all come up with.

I'm also going to include a loom from him at the end of this, I'll weave it in he sent to me, but it's, it's just him exploring how we can introduce depth and shadow when he was just briefly exploring buttons.

So with that in mind, what I've included here is again, just some things to really help you all be creative.

So the, the base color palette, the extended color palette, which when you turn that library on that I mentioned you'll, you'll have access to that.

Some thoughts on typography from, from Jordan there is more information if you go to that thread link that I included.

And then the biggest thing I included are just the wonderful pages that the folks on brand have designed. So just really seeing the, the pieces put together to really give us ideas in terms of like composition opportunities to make things friendlier and appearance opportunities for color, et cetera.

So if you, if you take a look at this, you can really see this range of applications when it comes to color, when it comes to shake, when it comes to scale.

And that's what I love about it. So for example, while these two or three examples are really colorful and bold in appearance there's still a lot of personality happening on this, this choose your plan page, but just in a different way.

And maybe this, this approach is more appropriate for some of our pages like settings, or, you know, maybe, maybe portions of the enterprise part of our product, et cetera.

So just something to keep in mind and really, really think of this as just inspiration or if there are things you want to grab, like how that it duplicate pieces of this take screenshots make collages out of it whatever, whatever helps you get going.

So yeah, lots of, lots of the pages they've designed. And then another thing I included is actually when I was helping out with the recorder work, one thing I did because I was starting to try to make things friendlier and appearance is I combined that goal with where thread was going and I did so by drawing inspiration from other products out in the wild that in my opinion, resembled some of the spirit of threads.

So this may be helpful for you if you're trying to, you know, maybe take some ideas from Jordan and team and apply them to aspects of loon.com.

So for example, like maybe the friendliness of this date picker is like a practical application in the context of bloom.com of some of the things you see from them.com.

But that, that's just an example and same thing, take screenshots of those grab pieces of it, whatever, whatever helps you be creative.

And then finally this is the smallest piece. And definitely don't take this literally take this as like an example of, I would say a very modest version of like what I think you all will do.

So this was me for literally 20 minutes exploring very, basically like a before and after. So this is what the video share page looks like today.

What can we do modestly to make it friendlier in appearance? And one thing I was thinking about is we could just start tackling shape and we can start treating secondary actions a little differently to better align with threads.

So I started rounding things like the workplace picker the thumbnail, the video thumbnail, I rounded it more generously the search field.

I filled it as well to make it in my opinion, feel a little simpler and a little friendlier when you compare it to what we have.

It's kind of hard to see the search field right now. And then I also explored making secondary actions the lighter purple we have in our set with the darker purple we have as the as the text and iconography.

And in my opinion, it actually not only unifies it with the primary action, like we've seen in thread, but it also makes these things more noticeable on the page compared to what we have today, which I think is really helpful if you think of, you know, how much there is on loom.com and how hard it might be for our users to know like where to look.

So this is just an idea. And really, like I said, it's kind of a modest thing compared to, I think how far you all will probably go.

Another example of that is just looking at the, the loom library. And really again, before and after with just a couple of simple changes.

So round actions, secondary actions with that color, and then just rounding the various thumbnails search fields, et cetera. A big difference, even though, even though they're kind of small changes.

So that's the gist of that. And then the other piece, I think a lot of you have seen is this is just from Jordan and I are exploring very much a work in progress, but how we might evolve the, the actions that we offer in lens to better align with red.

So what is the default state, the hover state, et cetera, don't worry too much about things like state, unless you're really excited about that.

And maybe don't kind of want to figure it out but maybe use this as inspiration or maybe riff on it if if it serves the larger goal of like, kind of thinking expansively about some of, some of the pages on them.com.

So I hope this was helpful. I'll be there so you can talk to me if you have questions and super excited to see what you all come up with and and meet you all.

So talk to you later. So the idea here is I, and I'm using the violet one because the secondary button being violent felt appropriate to me.

We have these like primary buttons, which are that darker violet that blurple, and the gray fuels sometimes disabled to me.

That's just my take. I'm certainly open to other perspectives on that. But my thought here is we treat the buttons almost like physical objects.

And whenever I hover over it, it scales up a little bit, like it perks up like, huh, me, you're talking to me.

And then if I click it, it goes back down, and this is the selected state. So there isn't an active state because the active state is essentially like removing the scale and removing the shadow.

So what does that actually look like? I Figma is kind of limiting. So I've created like a little prototype to demonstrate.

So that's the default I hover there's a really soft button or a soft shadow. In fact, I'm also translating the button color or the text color from that light blurple to white, just to emphasize, like it's getting closer to the light and it's subtle, but that's what I'm trying to do.

And then whenever I click, it goes back down and it's kind of that default state, but again, we're, we're removing that shadow.

You know, we can exaggerate this more at the background shift, but the background color shift that we were working with in the file just felt it was really dramatic.

And there's, it's kind of like a jarring flash. Maybe there's like a slightly darker version of that, that we could play with, but at any rate, and then the focus state is pretty straightforward.

I don't think this is clear enough. That's I feel like that's too subtle, especially around like a dark violet. I feel like what we need to have there.

Like, it's like a really big ring around it or something like that's not what I mean. I mean like a double ring w what we've been doing on the marketing site, let me find it well, whatever, anyways, it doesn't really matter.

I think it should just be like a darker ring of some sort. So it can really catch your attention. I'm just thinking if there were like a whole bunch of these buttons on screen and this button was like in the corner and I'm like tabbing through, be hard to see that it's such a subtle difference.

So at any rate, she said that there, I'm curious to hear your thoughts, if this is making sense. I don't have a prototype of the secondary one.

I kind of ran out of time. I'm happy to spin that up eventually, but ultimately I think this is a fine job of communicating that secondary button with like a, a lighter style and translating from that light violet to white.

And then that selected state would be that, that dark version. How does that feel to you? I think overall, I think the shadows work, I do think with UI where things are so tightly compacted as they should be, because there's just, you know, it's like a tool belt.

You gotta, you gotta have the tools on hand. That said it gets really with so much density. I think the shadow kind of competes for attention whenever it's too dark.

And so I've gone back to like really subtle shadows and to just exaggerate the, that sense of dimension. I think playing with scale just a little bit is as good.

Now it is going to be a little bit of a tricky exercise for the engineers because actually that's not true if they transform it with scale, it won't, there won't be any layout shift.

There won't be any way shift. So nevermind. I forget the last 10 seconds of my life don't perceive me. Okay.

This is a long loom. What do you think.