New Domain, Same Quest
How I built my author site from scratch over the weekend.
Check it out 👉 mattwhetsell.com (It might be really buggy on mobile)
I had a dilemma. As a product designer, I need a website to host my portfolio, and as an author, I also need a website.
Until now, I’ve scraped by with my social media and Linktree for author purposes—mainly because I have no books published and nothing to sell. It’s no excuse, but still. I had a single website for both, and it was time to separate them.
But why have a site when I have no books published? It’s almost a running joke for writers to be told they need a website even when they have no books coming out in the near future. Of course, you can have a blog (I have these Substack articles), maybe some ‘about’ section, and posts or links to your social media. That’s a good start. and it’ll get me ready for the future.
But I wanted to try something a little different.
I’m a massive design tool geek. I championed Figma before it blew up in popularity—to the skeptical ire of my coworkers. Animation tools (Rive, Protopie, etc), dev hand-off tools, assets managers, font makers … I mean, I could nerd out forever, but you get the point. One tool that I’ve always wanted to learn was Framer. In recent years, they’ve made tons of progress on their app, and I thought it would be fun to try.
I put writing aside for one weekend and got my hands dirty in design.
The process
I first came up with my goals.
Detach my author identity from my designer portfolio.
Have space to link to my socials and blog (Substack).
Give some semblance of writing progress to potential readers.
MOST important: a CTA to collect emails.
I spent Friday night jumping into Framer. It’s familiar to Figma (eerily so), and I quickly caught on to the basics. But then came the headaches. I’m a big believer in this kind of learning curve:
I stuck with it, but I would be lying if I hadn’t been a bit discouraged. Framer has a learning curve. I also didn’t have an idea for my site. I could make a nice, clean site, no problem. Take a template. Add my content. Call it a day. But my toxic trait is never being satisfied with something if it’s like everything else. There’s nothing wrong with a nice site, but I wanted something that is a bit more custom. Quirky. More me.
There was an idea I had been thinking about the past week, and since the stakes for me are so low (I have no books yet, as you can remember), I thought I’d rather fail at being ambitious than succeed easily.
The idea: my site would fit within an e-reader (cough-Kindle-cough). I studied my device and replicated a UI that would reflect it. I realized a few connections to the visual design to inspire some of my experience. Here’s what I decided to do:
My unpublished books can share the UI of books without covers you would see on your device. This way, I can show progress and what’s ahead for me.
Each book can be tapped into for a brief overview (chapter previews, purchasing info, and more in the future).
My Substack articles can be their own carousel—to add more color and image to the design so it doesn’t look so empty.
All images can have grainy, ink-like effects. It should feel like an e-reader to fulfill this concept.
I also added some special background effects with the laptop cursor. Because why not a little ✨pizzazz✨?
Why go through all this trouble?
Aside from needing an author site, I wanted an excuse to learn Framer. I had a blast getting familiar with a new tool—I still have a lot to learn! But more importantly, I wanted my site to have an ‘experience’ over plain functionality. Most people will buy my books elsewhere. Even when you could buy my books from my site, it still won’t be the main vehicle for book sales. So my angle is to make it a vibe.
In the future, I’ll design checkout flows in a way where it will be intuitive and not so annoying (sites like this could be a headache because it places form over function a bit). But I believe both can coexist.
What’s left?
This is only the first version. I’ll be updating it as time goes by with an ‘About page,’ published books, and more. Also, the mobile design isn’t quite as nice and is a little buggy, so that will need to be updated.
Not bad for a weekend project, though.
Check it out 👉 mattwhetsell.com