Starter Kit: Key-Turn Solution for Webstudio

Question

Story: When I duplicate the Craft Clonable I feel as a starter in Webstudio extremely overwhelmed.

I come from Webflow and built complex websites so I am in luck, but I am imagining someone beginning their journey just giving up just here. Don't get me wrong. Craft in itself is genius. Relying on Open Props, Open Colors, Modern Font Stacks, Radix Components is great.

And at the same time: I need to build the navbar, footer and the base sections all on my own. I don't see the best practices in action.

In Webflow I've built a starter package.

I am thinking of bringing it into Webstudio, re-building it with Craft and Open Props logic and to share it with everyone. More of a key-turn solution with which you can build extremely fast to get the page published. I love the idea of building one concise styleguide and design system around Webstudio. In Webflow it was always messy with Finsweet's Client First, Lumos, etc. Working from one central "language" of design and development excites me.

It contained

Basics like Navbar and Footer (also Mini Versions for Landing Pages)
Base Layouts for Heroes, Normal Sections, Testimonials etc
Color, Type and Button System
GDPR pages (Legal Notice and Privacy Policy with pre-filled texts for the normal website)
Blog system (overview and article page)
Newsletter (opt-in and thank you)
In a later version I also brought in home page, landing pages and funnels (but this can be optional)

What are your thoughts? What would be great to have as a starter package to get going immediately? Thoughts, ideas and feedback are always appreciated. It would be great to have this starter kit build both for pros and starters alike. Starters can just go with what's there. Pros can modify it fast thanks to copy/pasting CSS Variables into the root.

There was also a discussion here in the community about building a Figma starter kit – it would be definitely useful.

Oleg Isonen · Answer

Yeah, higher level components with a built-in opinionated design system is what people need when they are less technical

Oleg Isonen · Answer

To make this a better experience, we need to make projects from the marketplace "installable/pinnable" into the sidebar so you have a quick access to sections to insert

Oleg Isonen · Answer

I feel like starter kit for this is something that should be in the templates and made of the things that the author of it chooses to use, its not something webstudio should be enforcing

Hiram Broemme · Answer

Definitely not. You always should be able to start from scratch.

Hiram Broemme · Answer

I am just inviting to bring in shared effort into one design system / styleguide / starter kit + naming convention. Instead of having multiple that don't speak with each other (like Lumos and Client First in Webflow).

Oleg Isonen · Answer

Here is the issue that should make working with templates equally fast as with core components: https://github.com/webstudio-is/webstudio/issues/3535

Oleg Isonen · Answer

and here another additional idea to be able to install ANY project just like via marketplace https://github.com/webstudio-is/webstudio/issues/3536

Hiram Broemme · Answer

You guys are moving it into the right direction! ♥️🔥

Hiram Broemme · Answer

So excited to see the tools capacity and community grow!

daveh7344 · Answer

Hiram, I love the sound of your plan. I have been a designer/developer since 1997! and am starting to learn webstudio for the first time and have experienced exactly what you are talking about ( The overwhelm) I'd love some resources that I could use to quickly put together a site using best practices and the 'correct webstudio way' (as it where) and then just modify the design, colours, typography to suit. I guess like a component builder with all the blocks i know are useful in any website (tried and tested) I don't want to reinvent the wheel I want tools to allow me to work fast and use my experience to craft stories and great UX to deliver results. I have today stumbled upon ONX ui & Drevo Library that i think might be what I am looking for to a degree but first I have to get my head-around how the ecosystem and tools work. It is humbling after 28 years to return to newbie status!! lol

Hiram Broemme · Answer

Welcome, @daveh7344. Nice that you go from the beginner's mind again – always a great chance.

I just see the need for a plug-and-play experience, not only for beginners but also for pros who are starting with Webstudio. I always want to look under the hood of how something is build (like a navbar or button for best practices).

Libraries can be added on top of that.

"I'd love some resources that I could use to quickly put together a site using best practices and the 'correct webstudio way' […] and then just modify the design, colours, typography to suit"

That's the dream!

M4Dm4n · Answer

Hey @Hiram Broemme is what you proposing something similar with this https://www.nocodesupply.co/mast ?

Hiram Broemme · Answer

Yes, Mast is for sure an inspiration like Client First from Finsweet! Also Core Framework, Uber's Design System "Base" and the guidelines from Google and Apple.

Jochen Gererstorfer · Answer

I feel an integrated CMS is same important.

Hiram Broemme · Answer

A small version would be nice, yes.

There was already a thread about it:
https://discord.com/channels/955905230107738152/1311010880292393022

But I fully understand that the WS Team decided to postpone since there are higher priorities – and honestly the CMS integration with Baserow/Airtable etc is great.

Join the Webstudio community

Starter Kit: Key-Turn Solution for Webstudio