Alexander Perez, Senior Full Stack Engineer

Building Full Stack SaaS platforms for startups | Typescript, React, Next.js, State Management, SQL/NoSQL, GraphQL, OAuth

Published on September 3, 2024

Update - September, 2024:

Blake is in open Beta at 👉️ https://getblake.link

If you'd like to share thoughts and suggestions, make sure to leave me a comment here or on any of my posts and I'll chat about it with you :)

If you’ve ever found software online, then you’ll be familiar with the “landing page”. It’s like the website version of a commercial, or a magazine ad that you can interact with. In the same way, a landing page is made to get us excited about what we might be buying.

That’s the point behind my design goal with Blake - the social bookmarks manager. By getting to the point at the beginning, and giving an opportunity to explore more themselves, the landing page is where a person can feel as if they’ve come to the right place for whatever they might have been missing.

It’s sales on one hand, and marketing on another hand. And it is channel-specific: it’s made for people using web browsers, and less for those spending their time in social apps.

So I made sure that the landing page worked on browsers for desktop, tablet, and mobile. Have some fun resizing the page and you’ll get to see the thoughtful changes according to screen size.

Ideation and Inspiration

At each stage of the development process I tend to figure out where are good “jumping-off points.” These are like stops on a map to me. Because I could define Blake’s branding, I could develop a clearer picture of the essentials the landing page would need to adequately explain what Blake provides. Because I’m not primarily a designer, I need to hone my aesthetic sense using examples from more talented designers. I’ll use some help here.

Sketching Initial Ideas

At first I began by visiting Dribbble. It’s a large repository of designs from some of the industry’s best designers, and a great place to jumpstart the design journey. I use their search to target designs for different kinds of UIs. Using it is simple. For example, I wanted to see designs for “SaaS landing page”, or “newsletter signup”.

Leveraging AI for Inspiration

I knew that I wanted to play with design elements that were easily recognizable and reassuring. The brand idea for naming the idea Blake revolved around a helpful persona that made organizing and sparking community possible. This app would be a trusted facilitator for getting discussion started. Along those lines, I decided on the Alegria style of illustration, or Corporate Memphis. Sometimes it’s hated, but it’s often a light-hearted source of delight for marketing materials, and it’s not yet squeezed of its aesthetic usefulness: Blake is a lightweight tool, and its aesthetics should reflect that.

With that in mind, I began to ideate with the generative image creation functionality on ChatGPT. There were quite a few iterations before I settled on the final idea for the landing page's main illustration.

Eventually I settled with this for the landing page's main illustration:

Read the full article on LinkedIn: Click here to read, and leave a comment, please :)