Finished my landing page in 2 weeks. Here's how I did it
I am pumped to share the landing page for my latest project, Gamify. It is (or will be) a gamification-as-a-service product, a toolset to allow points, leveling, rewards, badges, and things like that via an API (or sdk or admin webpage if preferred). It's an idea I've been thinking about a lot recently and plan to add it to my other project BetterMorningReading.com soon.
I write "will be" above because this time around, I'm learning from experience with past projects and the general advice of the community, and I'm just going to collect email addresses from people who are interested before investing time in building something that nobody wants.
Anyway, I was able to try a number of new things this time:
Netlify
I am beyond pleased with my experience with Netlify so far. My landing page is a static site built with React/Typescript with a form for collecting an email address. The integration with github for deployment is awesome and even automatically spins up a preview for every pull request. Basically zero config was required. And it's all in the free tier. Amazing.
Mantine (component library- https://mantine.dev/)
I was determined with this project to surpass the obvious appearance of "developer trying to do design" so had my heart set on using some component library or other for both speed, convenience, and to avoid having to make design choices on every little thing. I saw Mantine in a recent issue of the React Status newsletter, and it looked a little more fun and casual than antd, which I'd used in a past project and has a more enterprise feel to it. So I gave Mantine a shot and have no complaints.
Logology (https://www.logology.co/)
I think I learned about Logology on Indie Hackers and knew it would be the best way for me to get a good and professional looking logo quickly. I filled out their survey about the look, feel, and persona of the project and spent a few days considering three or four out of the dozens of logos they proposed. I eventually landed on the geometric looking G with a purple and yellow theme and paid $49 for the lowest package. Worth every penny. Thanks for their advice I now have a good starting point on design with colors, typography, and mood in general.
Cool Backgrounds (https://coolbackgrounds.io/)
A great project for nice looking backgrounds. I used a gradient for the background at the bottom of the page.
@emotion/styled for CSS in styled components
Not everyone agrees about "CSS in JS" as a concept but I wanted to give it a try. So far so good.
Where did the rest of the inspiration come from for the design? I literally just googled "best saas product landing pages" and drew inspiration from zoom, shopify and a handful of others for both desktop and mobile designs when I wasn't sure about how to make something bad look good.
Check it out if you're interested or might have a minute to give some design feedback. And see if you can figure out how to advance past Level 1 😄
This doc is useful, thank you