It’s time to talk about Studio.
You may have heard about Studio by Siteglide, or maybe you haven’t.
Stay tuned and we’ll run through all of the basics about Studio to help you get started and take advantage of this time-saving tool.
Along came Studio, our all-in-one - design and development tool.
Studio by Siteglide offers a best practice, Bootstrap 5 based, using FontAwesome v5.15.2, design and development process to rapidly build far more than just websites.
Studio is broken down into four components:
Studio is not only easy to use but comes with a whole host of benefits to boost your sites’ designs, code and performance:
With an ever-growing library of fully responsive layouts, you never have to start from scratch again. Start building from this library to rapidly wireframe pages and customise the look and feel. Using best practices, you can work with high-quality code without any excess bloat.
With our Figma file matching our layout library, all teams can collaborate with ease using the inspect feature in Figma to adapt existing pages.
With a drag and drop Visual Page Builder and a built-in layout library, you will never write a line of code ever again. Drag and drop layouts to build out your pages, and add customisations all in one place.
Did you know that using a high-bloat library can damage your SEO efforts?
Studio utilises best practices and never has any excess bloat. Keep your page speeds and performance high, while still rocking a beautiful design.
When code can be too overwhelming for non-developers, Studio enables you to still make quick edits in seconds, without fear of damaging any custom-built functionality.
You have the choice of working only in code or in combination with the Visual Page Builder, you can still utilise the fully responsive library of layouts.
Copy and paste, the solid foundations are already set up. Modify using Figma’s inspect tool showing colour codes, sizing, spacing and more!
Build quicker than ever + complete more projects in less time = 💰💰💰
As Studio is built with Bootstrap5, you can remove even our styling and still have the Bootstrap base to work from. Experience fully responsive layouts and use custom Bootstrap styling.
Global variables are already set up, all you have to do is edit!
Listed in Code Editor are the ready-to-go global variables. Change the primary colours and this will reflect everywhere primary colours are used. Customise to match branding, quicker than ever.
Welcome to Figma!
Work with the latest design tool by yourself or with your team.
Components, blocks, and templates are already built and ready to use. Wireframe these together, add your design flare and pass over to the developer.
Figma’s inspect tool ensures less back and forth between designers and developers. Carry on with your next projects
Design using ready-made components + Figma providing developers with all that they need = Quicker designs + more projects!
Have we piqued your interest yet?
We’ve told you that it’s easy and that it saves you time, but how do we actually use this?
Beautiful replicas of our layouts reside within Figma, the latest design tool, with building blocks, components and even example pages.
Choose to collaborate with your team or work alone.
Wireframe your pages by moving ready-made blocks together and adding your own branding on top.
Now that you have your designs ready to go:
There’s a few checks we need to do before we begin replicating our designs on our site, so let’s get going.
Heading to our pages, we jump into the ‘Studio’ tab.
Opening our menu on the right, we can begin pulling out the base layouts matching those used in Figma.
Wireframe these pages, add your branding on top.
It’s time to add your content and swap out those images for yours. Don’t forget to use the provided editing toolbar to match those styling changes.
It’s time to loop in your developers and let the magic begin.
Jumping into Code Editor, we can head to our scss files and get to work.
Our variables are already set up, let’s modify these to match our branding. Change our main colours here, typography there.
By changing even just a few variables, can dramatically change the look and feel of this site.
Within minutes, you can see your website has transformed before your eyes.
Saved development time, always fully responsive pages, aesthetic layouts; without sacrificing page speeds and quality of code.
How can this get better?
What if we told you that we’re removing the need to write code for the global variables?
With the recent release of Studio Variables UI, you can now choose and manage your branding colours without even writing code. Soon to come will be more variables added in this area for you to take advantage of.
Do you have ideas for layouts?
With the ability for a partner layout library: you can now submit your own designs and layouts; save your favourite layouts to your sites in their own folder; and choose other agency layouts. This will soon evolve, and you will be able to add your layouts to our upcoming marketplace. This will be a home for Siteglide and agency site templates, themes, modules and so much more.
Now that you know why we love Studio, why don’t you try it yourself?
Simple, quick and easy; with many possibilities and benefits for everyone.
We look forward to seeing the beautiful and speedy sites that you're making with Studio!
If you're an Agency click the link below to signup. Website Owners/Managers please contact one of our agencies.Become an Agency Partner