Subscribe
Share
Share
Embed
Each week Adam & Ste focus on a specific feature, idea or prototype in Hardcover and iterate on it together or with guests.
Adam (00:01.418)
Hey, hey, stay. How's it going?
Ste (00:03.894)
Hey Adam, it's going good. I'm enjoying a nice evening in London. It's been dark for the past three hours here.
Adam (00:12.338)
Oh yeah, you don't have a time change there, right?
Ste (00:16.97)
We do and it's so confusing because it's the change from British summertime to GMT. And then there's another change. I can't figure out, especially with US or other areas, how this goes. So it's like two weeks of calls being mangled each year or two times a year actually. So yeah, that's how it's going.
Adam (00:40.02)
Yeah.
Adam (00:46.078)
Yeah, I always, I always wonder about that. Like, because this would have been the first meeting that we have after the U S time change. So is this at a different time than usual for you?
Ste (00:55.67)
No, actually last week it was one hour earlier, but now it's the same hour somehow. I couldn't figure it out. I still have to like research deep into the issue because it's like, yeah, it boggles my mind a bit.
Adam (00:58.341)
Oh.
Gotcha.
Yeah.
Ste (01:12.782)
Yeah, it's time zones. How about you?
Adam (01:17.902)
It's been a very quiet week. It doesn't feel like, sometimes it feels like a lot happens during a week, but last week felt rather quiet. We weren't doing any big hangouts with friends or any massive releases on hardcover. So it was just a chill week for the most part. Although last night, this story has a happy ending, but last night one of our friends, Katz, got out.
So this morning we were over there looking around and this morning they found their cat in their next door neighbor's dog house. So luckily happy ending.
Ste (01:54.63)
Wow. Yeah, classic. Yeah. Well, that's a classic cat story. They always do stuff like that. Yeah, I know. I'm lucky mine doesn't get out ever, but we've got the terrace and sometimes she goes out and she finds the most like awkward places to just like sit or explore and I always have to go like get her out of, I don't know.
from under the vent or she's just like, you have some plants and she likes to go like in places where you can really see her. I don't understand why and how they can just like vanish. But yeah, nice. Was it a long search?
Adam (02:39.607)
Hehehe
Adam (02:43.53)
We kind of just spent like an hour and a half walking around, but luckily, uh, yeah, so a lot of people, like it's, it's funny to see that many people just like out and about, like living their lives at like eight in the morning. Normally I'm not awake.
Ste (03:00.94)
Yeah, are they jogging or like doing morning people activities?
Adam (03:04.498)
Yeah, lots of people walking their dogs, lots of people jogging. So, but yeah.
Ste (03:08.466)
Okay, that's good. Good to hear that Salt Lake City morning community is doing well. Yeah, there's a lot of joggers in my area as well. We have lots of parks, so I'm guessing I sometimes go out when I don't have coffee at home, but it's a bit later. The joggers are, yeah, I think it's 7, 6 a.m. thing. I don't know how they do it. Yeah.
Adam (03:15.839)
Yeah.
Adam (03:32.863)
Yeah. People that want to get a run in before work. Yeah. I can hardly believe that before I was working on hardcover when I was working at a typical nine to five job, I would get up at 6 a.m. every day and I would work on side projects for an hour. And then I would change clothes and I would go to the gym for an hour. And then I would go to work for a full day of work. And somehow I would...
Ste (03:36.88)
Yeah.
Adam (03:59.879)
I would just be exhausted every day.
Ste (04:01.97)
Yeah, well, it's still I mean, perhaps to you, you did that I mean, yeah, I can relate. I did that as well at some point. Yeah.
Adam (04:11.167)
I mean, having a kid is kind of like doing that every day.
Ste (04:13.934)
Yeah, I mean, I'm kind of lucky. Yeah, it's actually been pretty good. I think this past week he discovered that he can scream at everything, so he screams at everything. Which is... I mean, I can relate to that. I wish I could do the same sometimes. But yeah, that's the latest development. But sleep-wise, he's good. I really get eight hours of sleep every night, even more.
Adam (04:29.57)
Hehehe
Ste (04:44.298)
So yeah, and my wife gets, I mean, she doesn't like, she's not staying awake while I'm sleeping. So yeah, he's a good sleeper. So yeah, that's good. Nice. Yeah. And.
Adam (05:01.872)
on the hardcover front, what have you been up to lately?
Ste (05:05.194)
Well, we've been doing a lot of stuff in the background, I guess, which is how these things go after we released the book page. Now you can see the book page and lots of updates after the app update, lots of stuff you could see. We're kind of doing the same now. So I've been working on the discussions prototype.
which has gone out to people and we already got some really good feedback on what we're planning for discussions. So I'm really hyped about that. Really like thorough feedback on the prototypes. If for everybody watching you can still like access the link Adam shared in the announcement channel if you want to like get a sneak peek on the discussions.
Yeah, and I think those are in a pretty good spot. I got some feedback was that we actually read their minds regarding how they imagined discussions. So I guess the first iterations between us where we just like spent the time changing the designs, those paid off,
Yeah, I think with a little tweaking, it could be close to something we can start building. Yeah.
Adam (06:28.215)
Nice.
Adam (06:36.212)
Have you noticed any trends in the feedback on areas of improvement? Or probably still need to just do a breakdown of it.
Ste (06:43.108)
Mmm.
Ste (06:47.318)
Yeah, there are some things, I think, related to how people discover discussions and how they participate. The feedback, I mean, it has been depending on how people like to use discussions on various sites in general. So some people don't like to do that at all. So they would like to see discussions.
Adam (06:54.85)
and
Ste (07:15.078)
but they wouldn't participate, not because our prototypes are bad, just because they don't do that, which I totally understand. I think there's been like a cleanse of social media, especially recently. So I don't know, maybe once we build it, it will become a place where people who wouldn't actually talk on other networks would stop on file cover. That's what I'm hoping at least.
Yeah, and some people who are like, I'm going to reply, I'm going to talk about the book. Yes, this can replace, like, this can like, complement my chats that I have with friends around books. Yeah. So, that's good.
Adam (07:59.174)
Yeah. One of the things that kind of brings to mind the fact that like, you know, if these discussions exist in the book page and people are like, when they have a book in mind, they'll seek out the book page and look at discussions. But for like, just random discovery of like, discussions on books that they previously read, and someone posted a discussion and they
Uh, it kind of got me thinking about like, what if we change the, like the home, like the feed button. So the feed is no longer like just a feed of activities, but we changed that up somehow, so it's, uh,
It's more like a discover feed. And I think I had a better idea of how far this was going to go in my head when I was describing it. But, uh, what I, what I don't want to do is just inject feed items in with all the tons and tons of activities because there's so many activities right now that even right now, things like prompt activities and, um, cool new lists that are being created aren't really being showcased there.
Ste (09:09.653)
Mm-hmm.
Adam (09:19.51)
So it's almost like re-imagining that home area to be like a discovery area. And being able to showcase both like, here are the hot lists, here are the hot prompts, here are the hot discussion topics, here are, but you also wanna see like, here's a feed of what your friends are doing. So kind of like, kind of combining all of those into one discovery area.
Ste (09:25.912)
Mm-hmm.
Ste (09:39.771)
Mm-hmm.
Ste (09:45.134)
Yeah, that sounds good. I was actually like, that thing you're describing is the next thing I was thinking of actually tackling in design because yeah, you're right. It's gonna be a bit weird. I wanted to redesign the activities as well so they match the discussions and they're more in tune with what you describe as the discover area or mechanism.
If we just have them chronologically like we do now, like something happens, you get it in the feed, that might be awkward from some points of view. I'm sure at some point it will just be populated enough so you'd get like a bunch of things, but even then they might be a bit chaotic. So yeah, that's like a good shout to...
to build on. And I think it could be like the next step because I think like the individual discussion and the way you create a new discussion, I think we are close to, I haven't seen any feedback that would say, we gotta get back to the drawing board. Everybody understands right off the bat what we try to do. So that's a good sign.
I think those are apart from small tweaks, ready to just go for it. But for the feed, yeah, maybe we can figure out maybe like a mixer that serves you content that's tailored to you somehow, or yeah, lets you browse multiple areas. I'm not sure how to do it, so maybe we can.
Adam (11:12.884)
Yeah.
Adam (11:20.716)
Yeah.
Ste (11:42.278)
can brainstorm.
Adam (11:43.526)
Yeah. It sounds like a good future thing, at least like we're, we'll probably do the urine review before we do like implementation on discussion. So we still have time to hammer all these things out before we get too deep into it.
Ste (11:59.362)
Yeah, exactly. It should go pretty fast historically when we've been thinking independently on something. We just got to get in there and...
Adam (12:10.31)
Yeah. And like I saw that, you know, like the way fable does discussions is people create their own like kind of book club and then there are like sections for each book. I saw that story graph is also going that route. So they're going to have someone be able to create something for a specific book and then split out sub discussions within that book, which is kind of like how fable has chapters. So
Ste (12:22.681)
Mm-hmm.
Ste (12:38.5)
Yeah.
Adam (12:39.178)
The fact that we're going completely different route with like a discussion is owned by the book rather than being owned by like a like a buddy read like Jeff mentioned there in the chat. It's, I think, I think that'll make it so that like anyone can be a part of a book as opposed to like having lots of separate communities each reading the book. So I think I'm most excited about that.
Ste (12:49.414)
Yeah.
Ste (13:06.114)
Yeah, yeah, it's gonna be like that approach I think is gonna pay off. I think the other approach is closed off somehow because the discussion belongs to a reader or a group of readers and I actually tried to talk about our idea of basing book clubs on Reddit before my post got...
removed on the art books channel. I just wanted to, I just explained, I mentioned like not like well who we are or what it's about. I just wanted to discuss the concept. They took it down anyway. They said it was market research, but anyway. But like in the, I think 15 minutes when it was up, I got like a bunch of replies.
saying that the idea of acing book cups would be like really nice. And the replies were like, Oh, but you have to do this. And it was actually what we were doing. So avoiding spoilers and making sure it's moderated that kind of stuff, which we already like handling or planning to hand.
Yeah.
Adam (14:28.926)
Yeah. And we can eventually see about other iterations on discussions for private groups, but I think it's kind of similar to like how Reddit has like private subreddits, maybe we'll go that route with the private groups too, but to be determined.
Ste (14:43.11)
Mm-hmm. Yeah, it's gonna be easy. Yeah. Yeah, exactly. Yeah, I was reading what Jeff was saying in the group. Yeah, definitely. I mean, once we figure out discussions, we'll be able to put them anywhere related to any entity or part of the site. I had someone mention, I think on Discord, was it a DM or was it a channel? I think it was a DM.
they would like to just comment on a list that, you know, cool list or something like that. And yeah, I mean, why not? If you open comments on the list.
Adam (15:22.414)
Yeah.
Adam (15:27.23)
Yeah, Letterboxd has comments on lists as well. And Mike Flanagan just joined Letterboxd. So people were commenting on his lists left and right, saying like, hey, what about this book for this list? What about this book?
Ste (15:43.27)
Wow, nice. Okay, yeah, that's definitely, if we get a really hot, like cool, like author to join, that would be really neat. But yeah, that's when we're actually like digging into that like separate parts altogether. Yeah.
Adam (16:08.974)
deep dive today. I was gonna say, are you down for just digging into the urine review and just kind of pair designing it?
Ste (16:19.994)
Yeah, let's go for it. How should we do it? Do you wanna share your screen or should I share mine? Yeah. Yes.
Adam (16:25.822)
Maybe you could share yours. That way you don't get the awkward me trying to use Figma part.
Ste (16:35.093)
Oh, that's fine.
You're pretty pro at using it. So, okay, here we are. So, Haka for your review.
There we go. So this is where we left off last time. And for context, this is going to be the top part of the page, the intro. And I'm still thinking maybe we could do like Leatherbox does and show a bunch of images here on a grid. That would be neat. But I still have to see if I can find some nice images.
just mocking it.
Adam (17:19.141)
Hmm.
Ste (17:21.926)
Yeah, something like this.
Adam (17:22.73)
But yeah, and I think in like, those would be like mid journey generated images based on some of the most popular books of the year.
Ste (17:35.222)
Yeah, exactly. So we can actually try that right now if you want, or we can do it later when we hit on a section and yeah, so we can do a demo of how we're generating those.
Ste (17:56.051)
Yeah, for this one, I mean, further along when we actually can go to artists, it could be nice to have these be fan art and generated maybe by the users of hardcover even. But yeah, for this one, we've got some of these really nice images that we've...
we've generated. So this would be like the small description. What do you think about this? Is it in a good place? Do you think there's too much text? That was my worry over here.
Adam (18:37.23)
Yeah, I worry about this text because we're gonna have so many sections that this would probably be too much
Ste (18:43.618)
Yeah, maybe we can just do this. So this is text. This is, we might not even like, we need like this much text we can just do.
Ste (18:57.81)
Let's do this.
Adam (19:00.014)
Thank you.
Adam (19:07.35)
And I think we could, since we're like such a small team, I think we could even do something where it's like, like created by, you know, Adam and Stay and Jeff. And with like our icons are in a stylized way, just like.
Ste (19:18.494)
Oh yeah.
Ste (19:28.666)
Yes.
Adam (19:33.274)
And we're thinking about still doing a table of contents, but having it be more like a navigation thing than a thing at the front, I think, right?
Ste (19:44.818)
Oh, yeah, we could actually, yeah, yeah. Did I delete that? No, I didn't. Yay. Okay, so maybe we can do like a neat thing and just have an icon of a menu, menu icon. Wait, let me grab an icon from somewhere and just have it in the corner.
like fixed. I know Leatherbox doesn't have that but we could just use the nav and grab... where did I have an icon around here?
Adam (20:22.91)
Let's see.
Ste (20:29.111)
So.
Ste (20:34.27)
This could be, okay, a ship for navigation. I'm probably gonna change it because it's very.
Adam (20:39.706)
you put.
Ste (20:46.35)
Yeah. And this would be just the popover. And the...
map. Okay, so this would be like over here and yeah, it would open up that thing.
Nice. Yeah, good idea.
Adam (21:09.09)
Yeah, kind of a, just a quick way to kind of jump around and, oh yeah, top right. Especially since we're talking about not having the traditional navigation on this page. It makes me think we need still some way to go back to like the hardcover homepage too.
Ste (21:09.613)
or if it's here.
Mm-hmm.
Yeah.
Ste (21:25.814)
Yeah, maybe we could put the actual logo in the top right and have it fixed. And that would take you to higher cover. I don't know. What do you think? So it would just be like this and it would stay like on the page.
Adam (21:41.95)
Yeah, I'd be up for that. And it doesn't need to be too big. And people are so used to looking in the top left for the logo anyways, so.
Ste (21:52.469)
Yeah, exactly.
Ste (21:57.594)
in Figma. Okay, nah, it's very small right now. So it doesn't interfere with anything. Maybe I can remove it from here. So I can... This one I'm gonna save as an SVG. So I thought it would be cool to have like that, this kind of font. So it's like...
Adam (22:12.777)
Oh.
Ste (22:20.134)
Wow, we can't read, so I'm just gonna have the, or maybe just remove it and like this hardcover.
Adam (22:24.382)
Yeah, yeah.
Ste (22:39.884)
Okay.
Adam (22:43.553)
Yeah, that looks legible.
Ste (22:45.208)
Yeah, not the best day out, but yeah, I'll work on it a bit more. So.
Adam (22:54.698)
And yeah, we can tweak the content here, but yeah, I think that amount of text is good, something short.
Ste (22:55.706)
this.
Ste (23:00.109)
Yeah.
Ste (23:03.766)
Yeah, exactly. That's what I'm using it for. So maybe this can be like a subtext. Maybe we can even ditch this and just it kind of repeats the same thing.
Ste (23:22.79)
this and just remove this and this.
Adam (23:26.103)
You see...
Adam (23:33.87)
Grabbing an avatar.
Adam (24:17.28)
I like that I can just like zoom to somewhere else and then just click on your avatar and it jumps me right back here.
Ste (24:23.238)
Haha yeah. Ops, there you go.
Ste (24:34.11)
Okay, this is neatly aligned. I still have the handwritten font that I like. I put it back. Yeah.
Adam (24:42.998)
One thing I've noticed with the Figma app is like, I wanna be able to select multiple things and then control click to get the right click menu, but I've noticed that doesn't work in Figma. Is there a, is that what you do to open the right click menu?
Ste (25:02.165)
So you wanna select multiple things and then right click on all of them or just one of them.
Adam (25:09.726)
On the group, like I was trying to just like group these two by selecting them both and then grouping. So.
Ste (25:14.65)
Oh, yeah. Yeah, you can actually, like, I select both of them, and I group the selection.
Adam (25:23.382)
But to open that menu, you're just right clicking, I guess. Yeah. I guess I I'm having a, I have a track pad, so I don't have a right click. So it was control clicking.
Ste (25:27.502)
Yeah.
Ste (25:32.746)
Okay, yeah, maybe it doesn't work with the trackpad. Sometimes it's weird with navigation. I just use shortcuts. So I just hit command G and that's it. War. Yeah.
Adam (25:44.405)
Oh yeah?
Adam (25:53.966)
Gotcha. Yeah.
Yeah, I was just creating something like this by.
Ste (26:00.59)
Yeah, I don't group anything nowadays. So I either do auto layout, which lets you like do stuff like this, or I should group some things, yeah.
Adam (26:10.934)
Oh yeah. Yeah, this should be an auto layout, not a group.
Ste (26:15.154)
Well, sometimes that's why I'm saying I just leave stuff out in the open so I can move it around. Yeah, for instance, see when this frame appears over here, it means it's not in the actual frame, so you have to go and then copy paste it. But yeah, auto layout doesn't work really well for this. It would work if you do this.
Adam (26:17.538)
I'm gonna go.
Adam (26:44.091)
Oh, I had like multiple texts. Yeah.
Ste (26:44.59)
made yeah made with love and then have bye and then have the avatar sorry i'm just messing what you're doing so then yeah you can just like loop on like this and boom okay and command a and
Adam (26:58.89)
No, you're good.
Adam (27:09.579)
Nice.
Ste (27:10.67)
Wow, still needs a bit of spacing. And if you want more stuff around, it's going to be really tough. And apparently we're all NK Jemisin. I don't mind.
Adam (27:21.907)
Yeah.
Adam (27:32.426)
Yeah, okay. Yeah, that's not too bad.
Ste (27:37.518)
Yeah, here we go.
Adam (28:01.742)
I think that's a good start.
Ste (28:05.091)
Yeah.
Adam (28:07.786)
I'm trying to think like, when I'm looking at this for the first moment, what is it that I wanna know? Oh yeah, the yellow is awesome, yeah. Yeah.
Ste (28:17.37)
Yeah. Okay. Ahaha, thought I'd try. Okay.
Adam (28:24.261)
time.
Ste (28:27.158)
Um, well, I guess you'd be interested in the sections, but if you're like most users, you will just scroll. So we could put like letterbox. They have a little arrow. So you know how to scroll, but I've read a lot of like user experience, uh, things that say that it's best to just.
let users scroll because they scroll a lot without any issues. So on letterbox, this is how they do it. So they have this and.
Adam (29:06.678)
Oh, I see what you mean. It's like pinned to the top of the screen.
Ste (29:08.456)
Yeah.
Ste (29:11.973)
Yeah.
Adam (29:14.538)
Yeah, and each section has its own full screen card. So it's kind of like going through a presentation.
Ste (29:21.498)
Yeah, exactly. It's nice that they made that keyboard triggered as well. And I really like these. So yeah, they also have the nav and the nav takes the whole screen, but for our purposes.
Adam (29:47.425)
Oh yeah.
Ste (29:49.714)
That's good. Yeah.
Adam (29:51.162)
Yeah. Having like a menu pop over or pop. Yeah. I guess it's just a menu. Works.
Ste (29:58.978)
Yeah, it's just the menu. Yeah.
Adam (30:02.83)
That's a great picture of William Defoe.
Ste (30:05.478)
Yeah, I was looking at Dave Bautista. He's great. Oh yeah! I didn't even notice William the 4 just staring from under. Oh god. I could have been this far.
Adam (30:11.82)
Hehehe
Ste (30:20.23)
Whatever this is.
Adam (30:24.399)
Oh yeah.
Ste (30:27.03)
Okay, yeah. So we could do this, but I just like leave, leave it like this because people are gonna scroll 100%.
Adam (30:27.758)
cool.
Adam (30:40.958)
It could be there and then it could become a position sticky. So when you scroll to the top, it just stays at the top.
Ste (30:49.454)
Yeah, of course. I mean, we could do the same thing and have like the, because it's, if we're gonna implement the scroll snap, it's gonna be important. So that's the thing over here. See if you go, oh, they don't even have the scroll snap actually. Oh yeah, they have a bit of a scroll snap, but.
So if I, yeah, see it's really like sensitive to, so if you go, let's see, yeah, just maybe it's like from 25% on something like that. So, yeah.
Adam (31:32.011)
Hmm.
Ste (31:35.314)
just scroll like it gets, yeah, it snaps in place. We can do that with Tailwind. I've looked it up, so should be good.
Ste (31:48.238)
Yeah, we just have to make sure these are the whole, like, screen height for most laptops, which is just about this high. Pretty much nailed it.
Adam (32:06.166)
Hehehe
Ste (32:08.966)
you'll have to move this up and yeah we're good maybe we can even like have some rows and the rows can be like auto and they can be tough and they have the height of
Adam (32:14.702)
Okay.
Ste (32:35.302)
How high is the desktop screen? So, 1,150, one, one.
Adam (32:44.878)
Well, we can just use like H full, I guess, right? And then.
Ste (32:49.546)
Oh, yeah. Yeah, I was just like gonna do it for like design purposes. So let's say 1000. Yeah. So right now just cuts off and the gutter.
Ste (33:13.802)
Okay, so this is the brother. Okay, anyway.
Ste (33:20.242)
should be.
Adam (33:27.554)
This is, it's going to be interesting because this is going to be the first page on the entire site that doesn't have our classic nav bar. So that'll mean restructuring our next JS folder structure to not use that layout on this file, which just means moving all of our files into like a new folder within the app directory. But that'll be easy enough.
Ste (33:27.832)
Okay.
Ste (33:49.766)
Okay, yeah. Okay, that's good. I was about to ask if, you know, it would be easier to actually have the nav bar, but if we can just move it, I think, yeah, we should be good, right?
Adam (34:04.978)
Yeah. Especially then also we'll be able to completely statically render and cache this page for everyone because it won't have the nav bar. So it'll be like a hundred percent cached for all users, which will be nice.
Ste (34:19.198)
Okay, that's great. Woohoo, loading times. Perfect, so we have the header section. I think, yeah, this is, I don't know, you're happy with the layout? I'm pretty happy with it.
Adam (34:32.19)
Yeah, I think that's a good, I think that's good. We can, you know, change the text or something, but other than that, yeah, looking good.
Ste (34:35.243)
Okay.
Ste (34:42.046)
Oh yeah, the text definitely will iterate on. So moving on to the next one. So I think the thing for us to figure out right now is how to do some types of sections. So this is one type of section which could be like most something, like have like one, the book which is number one highlighted, maybe with a review. And
the picture would be something related to the category and then you'd have the other books and you'd have like a number two, number three over them. I have to mop those up, but yeah, we can just imagine that. So this would be like the top one book, then number two, number three, number four, and maybe we'll have how many are there to...
four, six, seven, we have nine here, but if there are more books, yeah, we can just.
more in there. And I tried last time we talked, we talked about having these images full width, and I tried doing something like this. So yeah, this would be like an image that is related to the actual section. So,
Adam (36:00.194)
Hmm
Ste (36:16.142)
Most Redbooks and then we'll have number one here, then the others and then the review here. Just like planes, yeah.
Adam (36:24.886)
I think I like that even more. Like it's also because I think I read left to right, you know. So I see like the book first and then the description and everything else. And like Jeff says, the full width image like is, yeah, it's really cool. And I think the proportions are really cool too. It's different enough that, yeah. The one thing I was thinking might be neat to,
Ste (36:37.162)
Okay, so that's good.
Adam (36:53.43)
change here is like this badge part. Like I wonder about how he could make this more impactful. Like if it maybe, maybe if we change it from a badge to text somewhere, but I'm not sure exactly where.
Ste (37:03.986)
Mm-hmm.
Ste (37:10.662)
Yeah, we could do that. We had some cards like this one, so see how well this goes with a card. And we have some...
Ste (37:26.332)
This has a gradient over here and it's just like, boom, something like that.
Adam (37:36.979)
I see. So it'd be like at the bottom.
Ste (37:39.186)
So yeah, we could do something like, so this is like most read books, most read books of 2023. Maybe we could have it on the top. And
Ste (38:00.274)
What else can we put here? Well, we can have it at the bottom and have like the gradient the same over here. So you'd have the gradient. Gradient would be our color. So we have something like this.
Adam (38:24.654)
Hmm. What if we put it like here? Like, so it's almost like, well, I don't know. Well, with, with it selected. No. Yeah. Don't love it.
Ste (38:24.946)
Mm-hmm. So we.
Ste (38:36.33)
Yeah, I'm wondering, I mean, it's good, but it might be associated with this book. So I'd rather like have it more central, you know? So it's kind of like a thing. I like the yellow, like burst of yellow, but I'm wondering what we could write. So could we just make it the number of the section? So number one.
Adam (38:48.52)
Yeah.
Ste (39:06.126)
But if that makes sense, I am.
Adam (39:09.93)
Uh, I think it's enough, like with our nav.
Ste (39:14.074)
Yeah. So most thread books title LG. So if we do this and maybe center.
Ste (39:33.126)
We can even like left line it. Letterboxd has for these kinds of sections.
Adam (39:37.134)
Hmm.
Adam (39:41.198)
playing with it.
Adam (39:46.719)
Yeah, they do like a full out.
Ste (39:48.95)
Yeah. So yeah, it's the title. And then what it is.
Adam (39:50.434)
Like that.
Adam (40:01.55)
I feel like I don't even see the section titles very much in there. There's like, I almost have to hunt for them.
Ste (40:02.017)
Iris.
Ste (40:07.951)
Yeah, exactly. It's much better to just have them somewhere. On top, it seems a bit disconnected. I don't know. Is it just my feeling?
Adam (40:14.67)
Thank you.
Adam (40:20.006)
Yeah, yeah. I think, I think you're right. I think having it like, what about like, I'm just playing with it to see how it looks on the right.
Ste (40:28.655)
Yeah, yeah, go ahead.
It could be over here, most red books. And you have the books here and then the section here. And maybe some like this.
Ste (40:46.988)
section
Adam (40:48.594)
Yeah, I think like Jeff mentioned, it reminds me of being in the review when it's there.
Ste (40:54.202)
Yeah.
Adam (40:55.905)
about.
Adam (41:00.534)
this, but yeah, this makes it look like this is, this is in one section and this is in a different section.
Ste (41:05.314)
Yeah, yeah, exactly. So we have this book and then the most read. May.
Adam (41:12.734)
Yeah, like, it feels like ideally it would be like above, above the first one. But yeah.
Ste (41:19.458)
Yeah, we can live into this. And this one, since this one is about this book, we could leave underneath the book. And then we'd have most read books of 2023. And you'd have like number one here and then the others.
Adam (41:45.294)
I think I liked it with the covers closer to the other one more.
Ste (41:53.03)
What if? So we have this one. So this is like the highlight. This, these are the others. It's the thing is there could be like more books here. So I was thinking, you know, what if?
Ste (42:11.752)
this amount of books here. So it would be good to have this here. So I'm still thinking like having this central.
Adam (42:23.726)
There's 10.
Ste (42:26.886)
everybody's design is actually not that simple.
Adam (42:34.734)
Um, hmm.
Ste (42:39.694)
Yeah, how many are there? Two, four, eight, ten. Maybe we have just like nine underneath. So it's done with this one.
Adam (42:52.33)
Yeah.
Ste (42:52.658)
What do you think? So if you just did this as well.
Adam (42:59.149)
So one thing I was thinking was what if like
Adam (43:06.33)
Two and three are...
Ste (43:08.41)
Mm-hmm.
Adam (43:10.514)
that size and like this one's like the big one um but yeah
Ste (43:12.667)
Yeah.
Ste (43:17.311)
Oh yeah, maybe not that big.
Adam (43:23.234)
Just playing with it to see what happens here.
Ste (43:25.21)
Yeah, go ahead, yeah.
Adam (43:33.082)
Oh wait, maybe not this one too, maybe this one too. It's too small. That way it's like one, two, and, well no. I guess portions make it better.
Ste (43:45.314)
Yeah, this is, I mean, letterbox does one, two, three, four. So, and then the rest, we could actually do that. I mean, yeah. And have the title of the book not next to the book, but have it here and maybe just like have, wait, let me just copy this. So we have.
some kind of comparison between the two.
Adam (44:20.894)
I have another idea here after you're done. Oh, you might be doing it actually. We'll see.
Ste (44:23.984)
Yeah, go ahead. Yeah.
Ste (44:29.26)
I was just gonna go for 4 by 6, or not 4 by 6, but 4 and 6.
Ste (44:44.262)
four or one, two, three, and yeah, why shouldn't we put the top four? So we can just like leave that out and.
Ste (44:57.522)
sure we can find.
Ste (45:02.29)
So these are the first three and then the last seven. But the last seven, I guess we could make the covers like smaller.
this.
Adam (45:27.946)
Let's see, do I have the right thing?
Ste (45:31.25)
then this could be.
Ste (45:36.078)
on.
Adam (45:41.326)
Hmm.
Adam (45:46.35)
Yeah, it makes it harder for me to tell that that's connected to the first book. I was thinking about like this.
Ste (45:53.795)
Yeah.
Ste (45:57.682)
Uh-huh. Yeah, but the thing is, I was worried about that title because it's a short title and we'll have way longer titles. So it should be like at least the whole like span of six columns. So this should have its own like thing.
Adam (46:03.91)
Oh, good point, good point.
Ste (46:18.278)
So.
Adam (46:21.806)
Let's see.
Adam (46:29.438)
Mm-mm.
Adam (46:54.879)
And I think we can move the four and a half stars part actually.
Ste (47:00.171)
Oh yeah, we can just...
Adam (47:07.452)
Okay. Jeff give a good example of a large longer title so I'm going to.
Ste (47:11.914)
Oh yeah, we need that.
Ste (47:19.304)
Okay.
Adam (47:28.258)
So if we're doing like...
Adam (47:34.146)
to there, and this one is to there.
Ste (48:13.003)
Okay, that's more like it.
Adam (48:23.93)
if we did this one.
Ste (48:43.994)
underneath because it should be like six columns long. Two, four, six.
Ste (48:58.616)
I'll just leave it there.
Ste (49:02.95)
This is.
Ste (49:08.146)
here. Yeah, I think this needs to be wider a bit.
Ste (49:16.466)
So we will have.
Adam (49:18.408)
and
Adam (49:23.102)
And one way we could do it for this first section for most read is like, like these are like the top books of the year. So having, we could do something where we do like this, but then we...
like duplicate this and then like.
Adam (49:55.122)
do like a right version for like number two.
Ste (50:01.538)
Yeah, but then it will be like hell. Yeah, it would be like really long. I mean, I think what you saw last time with just like keeping the first one and then just having the covers and being able to access the info for the books just by tapping on, you know, hovering on the book and getting the book info. Kind of like...
Adam (50:02.914)
That's a lot.
Ste (50:32.05)
this thing over here, where is it? So when you hover on a book, yeah, just get this. I think that's gonna be, that's gonna be enough.
Adam (50:38.95)
Summoners.
Ste (50:45.798)
but...
Ste (50:49.666)
Yeah, this review is tricky. Just one second, my cat is asking for pellets. I'm gonna be back in one.
Adam (51:02.013)
Yeah.
Adam (51:05.835)
One thing Jeff has just mentioned was like side arrows to navigate between the ones in the list. So it's almost like this top section becomes like scrollable and then
Ste (51:20.378)
We could do that, although I like letterboxes that they do this thing, they just show it. If we do horizontal navigation and then you have to slide to see all the books, it might get annoying. Over here it's good because you just see all of the movies, you can tap on them and yeah, it's just easy to browse.
If you'd have to scroll sideways as well to see all of them. I mean, I'm a fan of just having the covers instead of too much info, because you can go to the book page in any case, and you have the info on hover, and on mobile, you just tap on the cover and get the book drawer with the info. So...
Adam (51:50.473)
Yeah.
Ste (52:22.798)
Maybe just like having the first one. We can even ditch the review. Oh, I was thinking about that, but I think it's the one thing that will make it stand out, you know?
Adam (52:25.235)
Yeah.
Adam (52:36.307)
Yeah, I like having like some kind of like thing from the community. Cause we can pick and choose. It doesn't have to be like the most liked review. It can be like the most quippy review.
Ste (52:39.61)
Yeah. Mm-hmm.
Ste (52:47.102)
Yeah, exactly. Yeah. We have the power to like, choose that. I like this because it was... Yeah.
Adam (52:57.118)
Yeah.
Ste (52:57.298)
pretty, this is actually from hardcover.
Adam (53:07.157)
Um, actually, maybe we just use this next to the number one, like, because this is, this is what it's number one of. It's like, if we make like this top part into something we can reuse on multiple sections, like number one in.
Adam (53:28.427)
So like this part becomes maybe like the same font as this number one.
Ste (53:39.874)
Oh yeah, it could be.
Ste (53:46.667)
Let me just like, let me look at this.
Ste (53:52.434)
have it in.
Ste (54:02.49)
Yeah, we have a winner takes all situation where if you're not the number one, but when hardcover, well, stuff like you only get the cover, but.
Ste (54:16.114)
Then again.
Ste (54:21.874)
So.
have this review.
Adam (54:27.823)
What if we change this to...
Adam (54:33.458)
Um...
Ste (54:36.082)
our normal font.
Adam (54:43.251)
Yeah, yeah.
Ste (54:45.145)
Here we go.
Adam (54:46.784)
Exactly.
Ste (54:48.27)
And then we can have the other books over here.
Ste (54:57.973)
and.
Adam (54:59.26)
Yeah.
Ste (55:04.926)
and one, two, three, four, five, six, seven, eight, nine, ten.
Ste (55:25.546)
or we can just have them underneath and...
F the other nine.
Adam (55:35.886)
I think.
Yeah, I think I liked them up there on the top right actually. Like it as like as the two rows. Yeah.
Ste (55:40.374)
and have the review. Yeah.
Ste (55:45.586)
on the top right like this.
Adam (55:49.986)
Like we could make the.
Ste (55:50.65)
Yeah, I really.
Adam (55:55.242)
Oops.
Adam (55:59.174)
No, that's way too big.
Ste (56:03.023)
Yeah. Well, these sizes aren't like this.
3 and 6, that's mine. And just make these like...
Adam (56:19.786)
Yeah, we could do four and five and then it would be, the ones on the top would be slightly bigger, but they wouldn't be as big as the number one. So it would be like number one's the biggest two, three, four.
Ste (56:28.708)
Yeah.
Adam (56:33.602)
Five are a little bigger and then six through 10 are a little. Yeah.
Ste (56:39.758)
This is basically what Leatherbox does, so I think they did it for a reason. We ended up in the same place. So see it's, well, it's four and six. So yeah.
Adam (56:49.094)
Oh no. Yeah.
Ste (56:53.786)
Yeah, this is actually pretty, pretty good. So you have the review over here for the first book, and then you have all of these and you have the number. So you'd have one to three, maybe.
see if we make this slightly bigger so it's like the highlight just trying things out
Adam (57:20.37)
Yeah, and we could actually just.
Ste (57:22.83)
Yeah, just go all the way and have the review over here and maybe have these here. This might not work, but we can just revert to the, so because we have this.
Adam (57:25.526)
Yeah.
Ste (57:47.566)
Let's say this is the review and here.
Adam (57:54.722)
funny as you're doing all that I'm like trying to get the space between the one and the most.
Ste (58:01.675)
Wow, it's significantly harder. I think there's lots of groups here. So this is like... That's why I said it's better to not have any auto layouts as you're designing stuff because yeah, it's way easier to do this. I was gonna like just do this and do this but...
Adam (58:19.086)
Yeah.
Ste (58:27.674)
I think it was there the other way around. So this here, this over here, this, which is like slightly smaller cover.
Adam (58:46.046)
Yeah, I think, yeah, one thing Jeff mentioned that I think I agree with is like having the title being like without break lines. Yeah, like is really, it's much more legible. So what about like.
Ste (58:46.674)
Okay.
Ste (58:54.706)
forward. Yeah.
Ste (59:01.115)
Mm-hmm
Ste (59:05.542)
just put these underneath so have this full width and have this like this and maybe even make the cover bigger for
purpose and.
Adam (59:21.374)
and then these become like the wide version. I don't know. I think I actually really liked it when it was like, like this, yeah, over there. And then the title or the review is like below the.
Ste (59:29.474)
over here.
Ste (59:40.685)
Yeah.
So this was like this and this was over there.
Adam (59:49.89)
Mm-hmm. Yeah, and then if we did that like if we did this here we what we could do is put the book button here and then like that's one thing that we have that Like could be a distinct Distinctive thing or like down here like below
Ste (01:00:06.61)
Yeah, you grab it.
Yeah.
Adam (01:00:12.234)
Cause then, then we have plenty of room for the title. We have plenty of room for multiple authors because there are, there might be like three or four authors and.
Ste (01:00:20.678)
Yeah, I know. What if we put the covers one underneath the other?
Ste (01:00:30.96)
less well
Ste (01:00:38.258)
space over here.
Adam (01:00:42.318)
And what if we keep it like this, but then we have something like a header for this group where it's like a number two to 10 most read.
Ste (01:00:49.391)
No, yeah, that could work.
Adam (01:01:01.812)
I don't know if that's the best title for it, but.
Ste (01:01:01.874)
Yeah.
Ste (01:01:07.47)
Now, it's pretty good. It's a bit... This space over here bothers me a bit. What if... Let's see with this. I want to see how it looks if we just center everything.
Adam (01:01:11.81)
Yeah.
Ste (01:01:27.334)
Well, maybe, let's see if we have it over here. And this is like way up there. And we push this like to the edge where it's readable. And then we have the review over here. Maybe we can have these over here.
Adam (01:01:50.707)
Mm-mm. That is cool.
Ste (01:01:55.238)
Yeah, it could be a thing, especially because it has all the covers in the same place.
Adam (01:02:06.894)
I guess that's kind of similar to what I was also kind of doing while you were talking, but like left aligned versus right aligned.
Ste (01:02:12.17)
Haha, yeah
Yeah, exactly. Well, sometimes it solves it because yeah, the text right now seems to be...
Maybe we can, yeah, we can make this cover like as big as we want. It doesn't matter if it covers like the cover image. And...
Adam (01:02:33.139)
Let's see, because I think both of these do a good job of like the review is related to the book. I like how in yours all the covers are kind of close to each other. And I like in this one how...
Ste (01:02:41.743)
Yeah.
Ste (01:02:46.266)
Mm-hmm.
Adam (01:02:52.778)
Um...
Ste (01:03:01.366)
It's, wait, I was doing this, so it has a bit more contrast. So, okay, I'm finally using the badge.
Adam (01:03:07.757)
Yeah.
Adam (01:03:12.002)
I like the badge.
Ste (01:03:13.49)
Yeah. I had to find a reason to use it somewhere. Okay. So, yeah.
Adam (01:03:15.981)
So.
Adam (01:03:25.671)
Yeah. So, yeah.
Ste (01:03:27.99)
and get fit and actually.
Ste (01:03:32.37)
covering here as well. So we do like exactly this thing. And, oh God, if we end up doing the same thing after like doing that many, I mean, I don't know.
Adam (01:03:45.466)
I like having the cover be big, especially like, I guess it depends on the context of the list. Like in some lists, you want the book to be the center. Like for instance, this one, it's most read books. So it makes sense that like, we really are highlighting the book. But when there's like top read books by genre.
Ste (01:03:49.412)
Yeah.
Ste (01:03:55.672)
Mm-hmm.
Ste (01:04:00.751)
Yeah.
Ste (01:04:05.463)
Yeah, exactly.
Ste (01:04:10.958)
So it just, well, we will cut the title. I'm sorry, Jeff.
Ste (01:04:20.474)
This is an extreme example. I don't know how we won't cut the title. I mean, only if we do, oh, we can actually do this. So maybe we can even, yeah.
Adam (01:04:20.896)
end.
Adam (01:04:40.494)
I think.
Adam (01:04:46.046)
Yeah, I do like the little badge.
Ste (01:04:56.718)
Yeah, you can just replace it over there as well. It has like extra contrast. So.
Adam (01:05:07.918)
So of these, do you prefer it on the left or the right?
Ste (01:05:14.006)
Well, the only reason I prefer it on the right is because there's some weird like spacing here. And if you have multiple authors, it will like overlap over here. So if you have like, we might get some cases where it's not that clean, plus on mobile we'll have to figure out. So this might be like a thing with negative margin, but I'd rather like have everything aligned.
Adam (01:05:41.001)
Yeah.
Ste (01:05:43.59)
you know, somewhere that works on mobile and desktop as well. This is also weird because, you know, on mobile, you'd have to like switch where the cover is. But yeah.
Adam (01:05:44.252)
Yeah
Adam (01:05:54.122)
I think the one thing that I, the one thing I like more about the top one, and I like everything else more about the second one, is that if there is a short title like that, then the space between the title and the book cover is going to be very large as opposed to if it's like here and the title is like right next to the cover.
Ste (01:06:02.925)
Yeah.
Ste (01:06:06.566)
Yeah.
Ste (01:06:18.826)
Oh, yeah. Yeah, I get what you're saying. And you are absolutely right. So let's see if we can... I mean, I play around with this thing. Let's see if we can... So we have these. What if we do like the exact same thing? Oh, yeah. Yeah. I'll just play. Yeah, go ahead. There we go. So maybe if we move this over here...
Adam (01:06:33.361)
I'm gonna run to the restroom real quick while you're doing that. I will be right back.
Ste (01:06:53.506)
it's a bit weird. Let's see what the chat says. Where did I have the... Here we go.
Ste (01:07:11.776)
Okay
Yes, some titles will have to wrap. I'm curious about the longer one. OK, so here we go. Maybe.
Ste (01:07:29.298)
Let's take advantage of the fact.
Ste (01:07:36.978)
Hmm, well, this breaks the title a lot. So that's not my deal, but yeah, why I wanted to do this, see if I can put this actually right underneath.
next to the cover.
So we'll have this, maybe we'll have the book button over here so you can read this book if you want. And then I have the community, this long review here. Well, it's not that long.
Ste (01:08:16.298)
Let me just like space everything out there. Most books will have this title on just one row. So that's good. Let me space things out a bit more. So we can do this. So I have to, all right. Okay, yeah, I was just moving stuff around.
Adam (01:08:32.206)
Okay, back.
Adam (01:08:35.934)
Hmm
Ste (01:08:44.642)
But I was thinking, you know, if this can be moved here and this can be moved there, and we will just have like these covers and just have them significantly larger. So it's like how many? Three, nine. Okay. So let's reset. Oh, no, not this.
Adam (01:08:45.453)
Thanks for watching!
Ste (01:09:14.78)
Okay, so we have the review over here. We have these books over here and we have this over here.
Adam (01:09:25.282)
I mean, this looks pretty good. Like, I think I could go with the book button being down here with like the large version. Yeah.
Ste (01:09:33.822)
Yeah, just maximize version. Yeah.
Adam (01:09:41.898)
did that.
Ste (01:09:43.854)
Yeah, maybe we can remove that thing just a bit more. So it's like this.
Adam (01:09:51.262)
or make the cover just a little bigger so it's like.
Ste (01:09:54.522)
Yeah, I made the cover bigger.
Adam (01:10:11.95)
I think having this like, yeah, cause there's the gutter.
Ste (01:10:14.606)
Yeah, we can just flex it. It doesn't have to be...
Ste (01:10:21.87)
like put on columns.
Ste (01:10:26.034)
like Flexitin, like CSS Flex.
Adam (01:10:30.411)
Oh yeah. So we have three versions. Maybe we could like post these three in Discord and like see which one people like. Cause I think all three of them are great in their own way. And I feel like, you know, as we look at it more and more, we'll probably, well.
Ste (01:10:39.922)
Yeah, of course. Yeah, that sounds good.
Ste (01:10:45.746)
Uh huh.
Ste (01:10:51.154)
Yeah, I know. I think it's a good stopping point for these. Woo, this is like, I think this is, yeah, it's the section we'll use for like most sections on the page. So it's good to, yeah, actually have this in a really tight spot, but yeah, I like it.
Adam (01:11:14.083)
Yeah, I'll make all of these the maximized version of the button just for consistency. And other than that...
Ste (01:11:20.146)
Oh yeah, for sure.
Adam (01:11:25.84)
Let's see.
Adam (01:11:29.418)
Oh yeah, let me change the text on the middle one to be a
Adam (01:11:35.598)
that again. Yeah. And, uh, also each, each one of these covers is going to have the number next to it. What do you think about mocking that up before sharing it so people can, uh, that way? Yeah.
Ste (01:11:36.69)
Yeah.
Ste (01:11:49.074)
Yeah.
Yeah, I will do. Uh huh.
Yeah, I'll do that. I disabled the grid, so it looks good without the grid as well. And they will be like spaced in between themselves a bit more, so they will have space up and down, but yeah, this is good.
Adam (01:12:07.036)
Oh yeah.
Adam (01:12:14.358)
And every cover will have the option to like long press on it on mobile to open the book button and on desktop. If you hover over it, you can click little bookmark and it'll bring down the book button. So you can like save any books from this page, which will be handy.
Ste (01:12:22.194)
Mm-hmm.
Ste (01:12:33.01)
Yeah. Yeah, this is gonna be really...
Adam (01:12:36.342)
Although the first one's the only one we show the button for.
Ste (01:12:40.594)
Yeah, well, that makes sense. You gotta read like the most read or like the most, like anything. Well, we might have the most hated book on hardcover, but you wanna read that as well. I mean, why do people hate it? That's interesting.
Adam (01:12:42.206)
Yeah.
Adam (01:12:46.935)
Mm-hmm.
Adam (01:12:54.478)
Yeah.
Ste (01:12:56.338)
Okay, that's good. Well, I think this is like a good point to wrap up the session. What do you think?
Adam (01:13:03.05)
Yeah, I think so. I think, yeah, this has been fun kind of just exploring this and trying to figure out like how Letterbox got to where they got and realizing how just moving things around, we got to a lot of the similar places.
Ste (01:13:11.186)
Yeah.
Ste (01:13:16.978)
Oh yeah.
Yeah, I know. I mean, some of the else they just, you know, they end up in the same place. There's like a certain number of combinations you can do with them. I think we've covered most of them. Well, not most of them. There are a ton more, but we could be spending hours just moving stuff around. But yeah, this is good. I think like of all the book apps, I don't know.
Adam (01:13:36.363)
Yeah.
Adam (01:13:43.213)
Yeah.
Ste (01:13:50.13)
any like book I haven't seen like this done with books at this level and this nice so I'm kind of excited to yeah see what what people think when we get it out there.
Adam (01:14:00.119)
Yeah.
Yeah, it's kind of our version of the Goodreads Chose Awards or something like that. Where it's, but we're, instead of people voting on it, like people have been voting on it with their reads throughout the year and now we're, we're using those, uh, those ratings for, uh, and those stats for this.
Ste (01:14:08.114)
Mm-hmm.
Ste (01:14:21.394)
Yeah, exactly. Yeah, this is very good. We just got another longer title for a book in the chat.
Adam (01:14:25.602)
cool.
Adam (01:14:31.216)
Oh yeah.
Let me see what that looks like just for comparison sake. Yeah, still two lines. Yeah. With a, yeah.
Ste (01:14:39.602)
Yeah?
Ste (01:14:43.378)
Not bad. Our designs hold. They're holding. That's good. Great. Well, this has been like a good, a really good session. And yeah, we'll keep doing that. And we'll share it with all the people on Discord and see what, what they think.
Adam (01:14:47.534)
Hehehe
Adam (01:15:02.322)
Yeah, I'm excited to see which one because I feel like it could be any of them.
Ste (01:15:07.25)
Yeah, I'm curious as well. Let's see. Public choice.
Adam (01:15:11.504)
Cool. My guess is it's gonna be number two. Like, what's your guess?
Ste (01:15:14.162)
Number two? I think number three, but I don't know. Yeah, I have to buy more than three, but yeah, let's see. How nice.
Adam (01:15:17.942)
You think number three? Cool. Oh yeah. Number one was left. Number two is right. And number three was all of them on the bottom.
Ste (01:15:32.69)
Yeah, exactly. We're gonna share it. I'm just gonna mock up the...
ranking guns, yeah.
Adam (01:15:43.946)
the yeah.
Ste (01:15:46.514)
Perfect. Awesome. Well, I'm gonna go check on the baby and yeah, this has been fun. Perfect. Thanks everyone for joining. Yeah. Talk to you later Adam. See ya. Bye bye.
Adam (01:15:54.574)
Sounds good. I might.
Talk to you later.
Bye.