I redesigned my website last weekend, with a specific goal in mind: learn from Patreon.
Patreon has brought the concept of the membership site to the minds of creators everywhere, making things easy and feature-packed in exchange for reasonable fees. They’re a successful company, changing the lives of many creators by providing a steady stream of income.
They’re also backed by quite a bit of venture capital – $413.3 million at the time of this writing. Their current valuation is $4 billion (which is frankly insane). The point being – they’re worth a lot of money and backed by wealthy investors who want a great return on their investment (aka another example of how the rich get richer, but we can discuss that another day).
Patreon wouldn’t be successful if their service didn’t work, and they have the funds to fine-tune and tweak their design, user experience (UX), and everything else to make their business as profitable as possible.
To put it simply: design and UX decisions are made on Patreon.com because they have been tested and proven to work.
Why re-invent the wheel when I can learn from a proven success?
My end-goal is to build a DIY Patreon (and show you how to do it). So I redesigned my site by copying some of Patreon’s design decisions, taking inspiration from another smart website design, and then adding some ideas of my own.
Note: since I haven’t launched my DIY Patreon area yet, I’m skipping all design related to that.
Part 1: Designing the page header
Above is the header from Patreon’s home page, from which I took inspiration for 3 elements: the header & navigation, the hero area, and buttons. Let’s go through each one.
1. Patreon’s navigation
Patreon’s nav is straightforward = simple, readable links on white, but not too big. I’m sure they chose white for readability; I’ve seen studies that said people can read dark letters on a white background easier than white text on dark.
I didn’t follow their color scheme (though I might change my mind about this in the future), but I did follow the simplicity and size. And I added search in the nav too.
They also use a single button to draw the eye – and establish that their buttons are all rounded pills. This stands out from the vertical and horizontal lines of a typical website design.
2. Patreon’s hero area
They have a headline, a short description, a button (all left-aligned, which is easier to read than center alignment) and a video.
I’m not sure I’m going to use a video, but I do have room for it. Otherwise I’ve copied the format of their text and call to action.
You’ll also notice that Patreon’s hero area isn’t that tall. I made my home page hero area taller (you’ll see why below), but all of my interior pages are shorter like Patreon.
3. Patreon’s buttons
People are more likely to click on objects that look like buttons. And in Patreon’s design, the pill-shape of the buttons are so noticeable that calls to action are impossible to ignore. I’m sure they spent money testing and decided that pills were the way to go. Who am I to argue?
My other design inspiration: the Generatepress template Stream
I probably haven’t extolled my love for Generatepress enough, but I should.
I use it for almost all of my site builds now. It’s super light and fast loading, almost all design & layout edits can be done via settings and not code, and it still has a lot of geeky options for a developer like me that less technical people never have to use.
In short, it’s damn near perfect. And if you’re looking for a flexible, easy to use WordPress theme, you should check it out.
As a modern fully-featured theme, it provides a number of templates that anyone can use to kick off a site design (note: the templates are an option with the paid, premium version of the theme). I found one called Stream that is built for podcasters to increase their subscriber base.
This is Stream’s hero area, from which I took inspiration for 3 things: the styling of their headline, the background image, and their newsletter call to action.
4. Stream’s headline with highlighted text
I love the highlighted text in their headline – clearly it worked on me. I used it to make sure people know why my site exists, as you’ll see in a sec. It is also a variant on the copywriting idea of using bolded text to make text scannable and to make important points stand out (like I’ve been doing throughout this post).
5. Stream’s background images
When I first attempted a redesign a few weeks back, my goal was to impress upon people that they were on a comic-maker’s website. My initial idea was to try to make the site look like a comic, by replicating gutters and making things look like panels. It kinda worked, but it also looked more like a 20yo website than something that belongs to the modern web.
And one marker for trustworthiness of a website is whether it’s outdated or not. So that design idea went out the window.
Instead, I can impress the comics idea on visitors by using my comics in background images. And I can do this while taking advantage of the lovely, giant screens that are so common today (while still looking damn good on mobile devices).
By the way, did you notice how Stream’s background image is a face, looking at their headline text? That was a smart, psychological marketing decision. Humans are attracted to faces and look where the eyes are looking.
In the future, I might make a custom comic to use in the background with this psychology in mind.
6. Stream’s pattern-interrupting subscription form
This might be my favorite part of Stream’s design. Humans find order to be pleasing – when web page elements line up, it looks good to us.
This subscription form catches our eye by breaking out of the expected grid – not only does it intrude into the header, it’s also a narrower width from the rest of the content on the home page.
Human eyes can’t help but notice this.
Stream’s subscription form is much simpler and streamlined, and I may yet emulate that aspect. But I like customizing emails with first names – it just feels more personal.
Here’s my home page hero area:
I opted for the transparent menu background like Stream because it helps the background image be more readable. I will probably switch to a simpler logo in the header but spelling out my site name is fine for now.
Besides that, all the elements that inspired me from Patreon & Stream are there.
The big difference is really the color scheme, one full of retro colors. I thought about using a literal CMYK color scheme to emulate printing but I had to use a palette that involved orange (aka my favorite color) instead. And it had to have a retro 70s vibe.
Note that the color I’m using for my buttons is similar to Patreon, but it’s not the same color. I decided to use the retro aqua blue as the hover because blue is a trust color and commonly used on websites for links.
If you’re wondering about the screenshot of the colors, it’s from the settings for the Central Color Palette plugin, which lets you set a custom color palette – and have it replace all the palettes in WordPress so you you have easy access to only your colors when creating and editing!
Here’s a screenshot of what my color settings are right now as I write this post:
Next: designing the website footer
Above are Patreon’s footer on the left, and Stream’s footer on the right (click either for a closer look).
Both of them are simple, with no calls to action, subscription forms, recent posts or any other stuff. All they have is some branding, and simple links – with Stream having a background image.
Here’s my footer
I don’t have as many links as Patreon so I followed Stream’s layout more. I put all of my legal links in a row at the very bottom, alphabetized, where they are expected to be and thus easy to find (it’s easier than perusing footer columns).
I used a background image to add some halftones for a comic feel. A background of comic panels would have made the small text harder to read.
Because I had some plain text as well as links, I wanted to differentiate the links by adding a subtle dashed underline. Maybe it’s not needed and people will just assume their links?
Lastly, I pushed my social links aaaaaaaalllllll the way to the bottom. They’re findable, but they’re not front and center. A lot of designers and site owners still put their social links at the very top of a page so they’re the first thing a visitor sees.
This is just plain DUMB.
When someone’s on your site, the objective is to try to get their email address so we can try to build a relationship with them. If they go check out your social media profile, sure they might follow you but they WILL NOT COME BACK TO YOUR SITE.
All social networks spend million$ and million$ to figure out how to keep visitors on their sites/apps as long as possible. The last thing any business owner should do is encourage visitors to leave and never come back.
Finally: the design elements that I added
There are four things I can talk about right now: A sticky nav, another expectation interrupting call to action, an eye-catching sidebar, and a custom page header.
I made a sticky nav that hides
No one needs to see a nav 24/7, but no one should have to scroll all the way back to the top of a page to find the nav either.
Solution: a hiding yet sticky nav that disappears when you scroll down and reappears when you scroll up.
Try it – this works on desktop and mobile.
(This is a built in feature of Generatepress too.)
I added an expectation interrupting call to action above the footer
Since we already have a newsletter call to action at the top of the home page, this CTA above the footer is only on interior pages.
Again, because it’s a different width than the rest of the content on the page, and it ‘interupts’ the footer by encroaching into it, it catches the eye.
Can you tell that I’m focused on newsletter subscriptions?
Here’s a cool thing about it: it’s only visible to people who are not logged into the site. That way when members login, they don’t get advertisements for the newsletter and can focus on engaging with me and the community.
An eyecatching sidebar
You might have noticed this already if you’re reading on a tablet or larger device: the sidebar is sticky.
Sidebars are useful when used judiciously. Fill it up completely with crap (like Fakebook) and it becomes noise that our eyes gloss over.
By not overfilling it and making it sticky – thus breaking the pattern again – makes the sidebar catch the eye.
You’ll notice that it’s not sticky towards the bottom of the page – it just scrolls up as expected. It’s useful on longer pages – on posts like this.
As much as I love a focused reading experience on a website (with a narrower width and no distractions – like having a nav that hides), I still want the opportunity to either market or inform – thus the sticky sidebar.
Lastly: a custom page header
This is where I used a more geekier aspect of Generatepress: being able to create page elements that are only used on specific pages or posts. It’s pretty cool – and not that hard because you still don’t need to know any code to do it. The headers and footers on my site have been built using WordPress’ block editor and not html and css.
I decided to make a special hero area with call to action for my newsletter page:
This design might need a little work but it gets the point across and provides some reasons for subscribing to my newsletter. I will want to use bullet points instead and make the copy more compelling.
This doesn’t mean my newsletter issues aren’t available for reading – scroll down and they’re there. But I like a hero that takes up the whole screen; this was done using the free version of the GenerateBlocks plugin, where you can set an area to have a height based on the viewport (the premium version of the plugin also replaces 99% of the functionality provided by slow & crappy web page builders like Elementor or Divi).
And… this header will only be shown to people who are not logged in. It also grabs the background image from a recent newsletter post. How cool is that?
There you have it – my website redesign explained
What do you think? Does it make sense? Do you like it? What would you do differently?
Leave a comment below and let me know.
(You can’t miss it, I made the Leave a comment headline so big that it’s impossible to miss 😂)