Many agencies are used to using Templates/Themes to speed up the development flow but often this causes problems/issues, devalues the service and leads to bad practice. We believe in Frameworks and following Best Practice standards. As a result we have created the Siteglide Design System which offers a Framework to deliver quality solutions to clients every time and with hugely increased efficiency.
“A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.” - Invisionapp.com
The Siteglide Design System (DS) takes the fundamentals of a standard Design System but integrates it tightly into the front end development process when building websites into Siteglide.
There are 2 elements to the Siteglide Design System:
In Figma (an online design tool similar to Sketch, Photoshop) an agency would take the various modular layouts and piece them together into Page Templates and Page Layouts. The design process with the client can be far more efficient as they can quickly mockup wireframes and clients can comment on and interact during the process.
Once designs are signed off the development team (internal or dev partner) would take the corresponding Bootstrap 4 Responsive layouts available in the Siteglide Layout Library and build out Templates, Pages and other functionality based on these as a starting point and customise according to the signed off designs in Figma. This is not only extremely quick and efficient but should guarantee accuracy first time too. Overall this process offers significant benefits and no drawbacks.
You have full control to customise the code via Code Editor. You can also insert dynamic features like Modules and WebApps such as a Blog and it work with your site out of the box!
Once you’ve customised your Layouts you and clients would be able to edit any pages and layout sections in our Visual Editor. The Editor will show how the site actually looks with your custom CSS/design. This is great for clients to be able to quickly make content changes once the site is built without breaking code.
Having built a slick and easy to use Visual Editor we decided to help developers build pages visually too. We took the basis of the Visual Editor but opened up the ability to piece together pages using the same layout blocks from Layout Library.
This becomes really powerful and completes the flow from initial wireframe design in Figma all the way through to development and ongoing improvements to a website. Your marketing team or clients can then build complete new pages using the structure layouts that will also apply any global stying you’ve set.
Normally these kind of tools are for static websites and are quite limited in terms of being able to do anything more complex. We’ve made Visual Page Builder work on top of the core product meaning you can use all the powerful tools such as WebApps and Modules and then manage static content around it. This gives you total control over building every element of a page the right way whether it should be a Module, custom WebApp or static content.