How would you approach the front end design for SaaS applications?

I did a bunch of false starts on my current project. Most of it was due to design issues (both in terms of product design and visual design). If you want to build things from scratch because you have a particular vision or just want to learn some new skills, here are some things that helped me:

• I really like https://refactoringui.com/ as a book. I force it upon any junior designers I work with. It's a little pricey, but really good.
• Using a tool like Figma to plan as much possible before writing any code. This includes working through edge cases (e.g. what happens when this form errors). There is always loss of detail when it comes moving design from the imagination to the real world. Catching that early is crucial. One of my false starts were due to me losing momentum when I hit a major oversight in the project.
• Try to use components. Break down every visual aspect of the app into a component you can implement separately. This allows you to make incremental progress and keep momentum going.
• As someone who has so-so CSS abilities, I found using something like https://styled-components.com/ was life-changing. It allowed me to isolate my shittier css to one component at a time and prevent sabotaging myself later.
• Steal all the time. Like how a modal looks? Open the inspector and look at its CSS properties. Your early CSS will be a Frankenstein mess of stolen limbs, but that's okay.

Are you more interested in learning front-end development or shipping a product?

TailwindCSS is great, but pretty low level. Not much different from building your UI up from raw CSS. Something like Bulma or Bootstrap is a bit higher level in that you get pre-designed buttons, navbars, and other common elements. I personally like Bulma a lot.

If you're hoping to ship a fairly complex product, like a SaaS application, in any reasonable amount of time then I'd suggest starting with a pre-built template and then customizing it to your needs. That way you have some basic structure to start with and can learn as much or as little as you want, depending on how much you want to customize.

For templates my suggestions would be:

• https://themes.getbootstrap.com
• https://creative-tim.com
• https://divjoy.com (disclaimer: my product)

Thanks everyone, some great tips here! Quite like the look of some of the templates on those websites @Gabe, I'll definitely dig deeper into them. I'm more interested in shipping a good product than learning everything about front-end development so I think this approach definitely suits

I would recommend you TailwindCSS and their Tailwind UI (if you feel like using their library of components)

for the design you can use Sketch or Figma.

They are very good for people with little front-end experience.

And of course, you can always dig into the viewsource of your favorite websites or competitor products to get some inspiration and see what challenges they encountered and how they solved them.

For a first project, yes to themeforest and buying a theme. Makes it so easy to manage your styles and copy things you like.

Couple tips

1. File management - so it's easy to replace with updates later

• I recommend putting the whole theme in a subfolder
• Also create separate files for a override.css if you want to make any custom overrides
• If you decide to use other plugins and such, put them in another separate folder to keep the files on their own for easy updates

2. Think a bit about the components you need today and may need tomorrow before you make your choice. In the beginning they all look awesome, but later you'll realize some of them fall short in areas you didn't think you would need or didn't take a day to design out the main pages.

Some good sources of Inspiration for SAAS designs:

• Webframe - https://webframe.xyz/
• Landingfolio - https://www.landingfolio.com/category/gallery/saas/

After this, pick any frontend frameworks or simple bootstrap to kickstart your frontend design.

All the best for your project. Hoping to see it soon here :)

There are plenty of starter templates out there which are fantastic starting points for any SaaS project. Check out www.wrapbootstrap.com amongst others. Just be aware that if you are going to be using any of those templates on a commercial site (not just personal), then there is a higher license fee to pay - however it is still a ton cheaper than hiring a designer or spending time yourself creating from scratch when you are just starting out.

Check for good documentation too. Some have great documentation plus 'starter' blank slates which you can populate yourself as the basic building blocks.

We did exactly this in my SaaS 5 years ago, and even though we have planned to do a completely UX overhaul (with a UX designer) in the coming year, the pre purchased template has served us really well for nearly 5 years now, and gets rave reviews from our customers.

I always start from my own SaaS boilerplate (https://www.saasforge.dev) and then, using bootstrap, react-bootstrap, and boilerplate's frontend components create UI very quickly. But before I always create some kind of wireframes.

Hi David,
We are working on Paperbits. This is the open source content builder for designers and developers who familiar with CSS and Html but do not want to code it by hands. All styles can be created and edited with visual editor, starting from typography and colors up to design blocks. You can check www.hostmeapp.com this website was designed and built with Paperbits. It's fully responsive and fast as static content. You can find more information about our project on paperbits.io