📝 CSS-Tricks 237: The Dreaded Homepage Redesign

View this newsletter on the web.

[Robin]: Designing the homepage of a website is harder than learning a new framework, more difficult than building an enormous website, and more challenging than memorizing all the values and properties of CSS. In short, the absolute worst thing about the entire field of web development is designing the homepage. It’s just the worst.

Why? Well, introductions are hard. If you’re a front-end engineer then you probably want to lead with that and maybe where you’re from. But everyone’s website has that stuff! And they all sound relatively the same:

My name’s X and I’m from Y. I like front-end development, interesting activity Z, and coffee.

I’m not trying to make fun of anyone here—my own website is like this, too. I’m simply underlining how difficult this process is. How do we introduce ourselves? How do explain who we are and what we do without sounding like an absolutely unbearable jerk? How do we make our websites unlike anyone else’s and give a brief peek into who we are and what makes us tick?

My advice (to myself) is this: show me what you care about! That sounds kinda dumb and obvious but I’ve found it to be extremely tricky. Looking at examples can help us though.

I’ve mentioned Cassie’s website multiple times because I think it captures her personality and focus extremely well:

You can tell right off the bat that Cassie cares a lot about SVG and animation. You can tell that she likes the nitty-gritty details of web design and UI development and by the writing you can see that she doesn’t take herself too seriously.

Another example I love is Sarah’s website where she kinda kicks in the door right away and doesn’t faff about:

I like how bold and exciting this is, and it certainly doesn’t feel like I’ve seen a website like this before. I guess that’s what’s exciting about it to me; having to scroll down a bit to see who this person is, and not being told right away.

Another homepage that springs to mind is Michelle Barker’s CSS in Real Life where she writes about front-end topics. I like this one because it’s not about fancy animations or beautiful illustrations but because of that color, that luminescent pink that hops off the page and just sticks in my mind.

A lot of sites are pretty forgettable and the choice of using a

Alternatively, I like the story-based approach of Danielle Baskin’s website that shows everything that she’s been working on lately. The sheer amount of white space is also pretty great and gives you plenty of breathing room to enjoy those lovely typefaces:

These sites are inspiring and worth checking out not because we should copy them though, I just want to make that super clear. Instead we need to ask that super annoying question again: what do I care about? And then, harder still: how do I show folks that I care about that?

I could say “I like typography” in a paragraph but how do we show folks that without necessarily telling them? Probably: beautiful fonts, an interesting layout, attention to small typographic details.

So as I’m designing the homepage of my website I think that I need to take my own advice here. Earlier this weekend I popped open Figma and each time I started to riff on a new idea I would make a new frame and copy my previous design, just like this:

These are all different designs of the same page, with big grey blocks signifying images or UI elements that I don’t need to draw right now. I can’t quite remember when I learned this design “hack” but it’s great because after 30 minutes of trying different ideas you can quickly see how you got to where you are now. (In the past I would constantly move UI elements around the page and often retry things that I’d experimented with a dozen times before—this is a time saver).

All this homepage design work is scary and annoying but also fun at the same time. At least, once you realize that you can be smart about how you show yourself off, you can begin to play with typography and animation and layout. You can begin to think about all the CSS properties and weird things you can experiment with. You can begin to make something magic.

Wait, I have to go build the thing now? Wow, sorry dad.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s