DEV Community

Cover image for Starting the Onboarding Flow - Building SaaS #49
Matt Layman
Matt Layman

Posted on • Originally published at mattlayman.com

2 3

Starting the Onboarding Flow - Building SaaS #49

In this episode, we worked on the progress element that will display in every step of the onboarding flow. I added some labels and styled the banner using Tailwind CSS. At the end of the stream, we boxed in the shape of the welcome page with some placeholder elements.

The very first thing I did was insert a top bar that was unstyled to the top of the welcome page. We added some placeholder text for each of the steps in the onboarding flow. After that, I started styling the UI until it took shape.

We talked about design elements like color and spacing and some aesthetic qualities that help make a user interface feel better.

After completing a first cut of the top bar navigation, I shifted to the welcome page and added vector art and placeholder text to give the page some life.

This article first appeared on mattlayman.com.

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

Top comments (0)

Heroku

This site is powered by Heroku

Heroku was created by developers, for developers. Get started today and find out why Heroku has been the platform of choice for brands like DEV for over a decade.

Sign Up

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay