Note: if you haven’t already read This is Launchday, Whaddya Think?, you should definitely read that first:
Last month I was starting a new project and needed to build a quick product landing page. I recalled productpages.xyz being #1 on Product Hunt a couple weeks prior, so I started exploring it and handful of other inspiration sites.
After browsing a few hundred sites, it struck me how homogenous they all were. Apparently, I’m not only one thinking about it either:
There are a few ways to walk away from this realization:
- 💪 Motivated to differentiate your next product site
- 🤔 Inspired by what’s in vogue and excited to integrate it into a future product site
- 💥 Struck that so much time is being invested in designing and building the same thing over and over
That last one was what stuck with me. I decided to investigate a bit further and go through ~50 semi-random product pages and turn them into loose wireframes. I ended up with a Sketch document with lots and lots of this:
Looking across the wireframed sites, I realized ~80% of all the sites were just a handful of basic building blocks.
This led me to wonder how hard would it be to abstract those blocks into simple design patterns and generic HTML/CSS components? I designed a quick and dirty landing page, using some of the basic blocks and random assets from other sites:
From here I designed a few more block variations and threw together a super, super simple drag and drop editor using just images:
This seemed promising enough and I’ve always been interested in learning how to build a real app, so I just got started. After a couple weeks of toying with Node, Express, React, Angular, Browserify, Vue, ES6, and probably a dozen templating languages, I managed to build a basic API and a pseudo-real editor. I spent another week building a basic front-end framework for the actual product page code (think very light lightweight Bootstrap specifically for product pages). Lastly, I threw together a few actual blocks with the framework to drag around and customize:
As of a couple weeks ago, Launchday was coming together nicely:
Fast forward to a couple days ago…I realized I’m building a full-fledged product and it’s outgrown its humble “proof of concept” origin. I hadn’t planned on building a fully-fledged product, but I’m pretty into the idea now.
If you’re interested, sign up for the beta!