George gave Gabby and Emma an update on the landing page design, explaining that the boxy, dense look comes from the brand’s geometric style and from building flexible modules with editable rich text areas for HubSpot. He said he is trying to balance having as few fields as possible with enough flexibility to reuse the template, while also designing for above-the-fold content on smaller screens like a 13-inch laptop. George asked for feedback on the setup so he can copy the modules over and use the pages as a source of truth for building in Codex.
[00:00] Hey Gabby and Emma. Happy Wednesday. So I wanted to give you an update on landing page design stuff. And Gabby sort of addressed some of your concerns about what these are looking like.
[00:10] So really high level, there's a couple of competing factors that are kind of resulting in what they're looking like.
[00:20] Which is a little bit kind of maybe feeling boxy and dense. So these are just a couple of things.
[00:30] One, the brand itself obviously is very hard lined and sharp corners and just by nature is very geometric. So I think that's partially what's coming through.
[00:40] Second to that, especially around like this sort of stuff, right, like the form fills and all these things. The second to that is that I'm trying to kind of build this in a set of pieces such that each one of these can have like a full rich text box underneath it or inside of it.
[01:00] That way you can edit whatever you want or you can put images in or whatever, right? So in this case, like I'm showing like, okay, here's one that could be centered.
[01:10] Here's one that could be left aligned. And I'm just dumping copy but, you know, it could end up being that it's just like, you know, just that or whatever, right? And that maybe you don't use the module above and below.
[01:20] So that's kind of the second thing. I'm sort of building this from the perspective that, you know, knowing that HubSpot, frankly, is just a pain in the ass to work with.
[01:30] We have to kind of build a template and then remove stuff from it each time. I haven't found a better way.
[01:40] I haven't figured that out either. So I'm basically thinking that this is the easiest way to go if we're going to do the custom template thing and try to like maintain it in some way, which is also why they feel a little bit like here's kind of generic layouts.
[01:50] If we were to get into more of like doing stuff that's closer to what the actual homepage has, it just gets much more specific, right?
[02:00] Like I could make a table, but we don't have anything to put into the table yet. So will we use it until we need it?
[02:10] I don't know. And I think that's kind of where I'm trying to strike a balance of like not going down the road that I've done before with Rematch, which is try to just make a bunch of modules and then hope that they get used.
[02:20] Instead of trying to kind of be like, what's the least number of fields that I can make to give you guys the most amount of flexibility? That's kind of the balance there.
[02:30] So the reality is that, you know, what's likely going to happen is that, you know, there'll be like a top hero section and maybe, you know, one or two of these modules down here.
[02:40] Maybe it's like, oh, we actually just want to use the cards, you know, right underneath the hero. And then from there, we could just have the text and then that's it.
[02:50] So like, I think that's kind of the way I was thinking about it. The second piece to note is that it's a real challenge to sort of keep everything quote unquote above the fold.
[03:00] From the logic of how to do that, I basically have to design it for the smallest screen that someone might be using.
[03:10] So I've kind of kept the width at 1100 pixels, which is like a 13-inch MacBook or something around that size.
[03:20] So relevant in trying to actually make sure that I get everything in there because if all of a sudden the content gets a lot longer, like sometimes the landing pages have a lot of content on them, that's going to inevitably push everything down.
[03:30] So then to try to like make a hierarchy, right, to be like, well, what stays above the fold and what doesn't, I have to organize the page that way.
[03:40] So you can see this is sort of one group, that's the second one such that this slides underneath once we get on mobile.
[03:50] And then what we cover ends up being below that. So there's sort of a little bit of logic there. And it can, again, feel when you're Zoomed out a little bit like grid-oriented boxy.
[04:00] So if we don't need all this stuff, right, if we don't need to, I mean, this one's somewhat minimal, but some of the examples have like quite a bit of copy and things, lots of headshots and stuff, or in an image.
[04:10] If we don't need all that stuff, that can significantly save some space, right, like if we do that. Now, there's a lot more room here for me to start kind of saying, well, this is actually going to be a lot larger.
[04:20] And then we can start to play with the widths of things.
[04:30] And maybe this can be a bit narrower so that we can have it wider. See, I'm breaking it all live, but you get the idea. So I wanted to float that food for thought.
[04:40] If you guys are cool with the way that this stuff is set up on these pages, I'll then kind of copy all the modules over.
[04:50] I need to make these as sort of exact as I can so that once I get into Codex and have to start building stuff, it can actually treat this as sort of like a source of truth.
[05:00] This is a screen recording transcript for a Voom video.