Fabric is a front-end content editing experience designed and built to complement Silverstripe CMS.
Fabric is a front-end content editing experience designed and built to complement Silverstripe CMS.
Fabric is a front-end content editing experience designed and built to complement Silverstripe CMS.
Fabric is a front-end content editing experience designed and built to complement Silverstripe CMS.
Fabric is a front-end content editing experience designed and built to complement Silverstripe CMS.
Fabric is a front-end content editing experience designed and built to complement Silverstripe CMS.
Background
Fabric started as an innovation project that proposed incorporating in-line editing into our in-house CMS. I joined the project out of interest, offering UX ideas and developing UI designs.
The project was well received internally, and became a passion project that we continued to develop beyond the initial project.
Background
Fabric started as an innovation project that proposed incorporating in-line editing into our in-house CMS. I joined the project out of interest, offering UX ideas and developing UI designs.
The project was well received internally, and became a passion project that we continued to develop beyond the initial project.
Background
Fabric started as an innovation project that proposed incorporating in-line editing into our in-house CMS. I joined the project out of interest, offering UX ideas and developing UI designs.
The project was well received internally, and became a passion project that we continued to develop beyond the initial project.
Background
Fabric started as an innovation project that proposed incorporating in-line editing into our in-house CMS. I joined the project out of interest, offering UX ideas and developing UI designs.
The project was well received internally, and became a passion project that we continued to develop beyond the initial project.
Background
Fabric started as an innovation project that proposed incorporating in-line editing into our in-house CMS. I joined the project out of interest, offering UX ideas and developing UI designs.
The project was well received internally, and became a passion project that we continued to develop beyond the initial project.
Background
Fabric started as an innovation project that proposed incorporating in-line editing into our in-house CMS. I joined the project out of interest, offering UX ideas and developing UI designs.
The project was well received internally, and became a passion project that we continued to develop beyond the initial project.
The opportunity
Silverstripe CMS allows content authors to manage their site through a backend interface. It can have a steep learning curve for those not familiar with website management or content management. We often need to help clients with using the CMS and provide training. Providing a more front-end focused interface would save our clients time and effort.
The opportunity
Silverstripe CMS allows content authors to manage their site through a backend interface. It can have a steep learning curve for those not familiar with website management or content management. We often need to help clients with using the CMS and provide training. Providing a more front-end focused interface would save our clients time and effort.
The opportunity
Silverstripe CMS allows content authors to manage their site through a backend interface. It can have a steep learning curve for those not familiar with website management or content management. We often need to help clients with using the CMS and provide training. Providing a more front-end focused interface would save our clients time and effort.
The opportunity
Silverstripe CMS allows content authors to manage their site through a backend interface. It can have a steep learning curve for those not familiar with website management or content management. We often need to help clients with using the CMS and provide training. Providing a more front-end focused interface would save our clients time and effort.
The opportunity
Silverstripe CMS allows content authors to manage their site through a backend interface. It can have a steep learning curve for those not familiar with website management or content management. We often need to help clients with using the CMS and provide training. Providing a more front-end focused interface would save our clients time and effort.
The opportunity
Silverstripe CMS allows content authors to manage their site through a backend interface. It can have a steep learning curve for those not familiar with website management or content management. We often need to help clients with using the CMS and provide training. Providing a more front-end focused interface would save our clients time and effort.
Refactoring the CMS interface
Our initial concept was a streamlined sidebar, which would allow the site preview to take prominence. This meant that we had to rework the CMS UI to work in a significantly smaller space.
The CMS makes use of tabs and separate pages for more complex content. The main tabs were converted into a dropdown, and secondary tabs or pages became buttons. This would allow users to navigate deeper into content to manage things such as links and other items.
Refactoring the CMS interface
Our initial concept was a streamlined sidebar, which would allow the site preview to take prominence. This meant that we had to rework the CMS UI to work in a significantly smaller space.
The CMS makes use of tabs and separate pages for more complex content. The main tabs were converted into a dropdown, and secondary tabs or pages became buttons. This would allow users to navigate deeper into content to manage things such as links and other items.
Refactoring the CMS interface
Our initial concept was a streamlined sidebar, which would allow the site preview to take prominence. This meant that we had to rework the CMS UI to work in a significantly smaller space.
The CMS makes use of tabs and separate pages for more complex content. The main tabs were converted into a dropdown, and secondary tabs or pages became buttons. This would allow users to navigate deeper into content to manage things such as links and other items.
Refactoring the CMS interface
Our initial concept was a streamlined sidebar, which would allow the site preview to take prominence. This meant that we had to rework the CMS UI to work in a significantly smaller space.
The CMS makes use of tabs and separate pages for more complex content. The main tabs were converted into a dropdown, and secondary tabs or pages became buttons. This would allow users to navigate deeper into content to manage things such as links and other items.
Refactoring the CMS interface
Our initial concept was a streamlined sidebar, which would allow the site preview to take prominence. This meant that we had to rework the CMS UI to work in a significantly smaller space.
The CMS makes use of tabs and separate pages for more complex content. The main tabs were converted into a dropdown, and secondary tabs or pages became buttons. This would allow users to navigate deeper into content to manage things such as links and other items.
Refactoring the CMS interface
Our initial concept was a streamlined sidebar, which would allow the site preview to take prominence. This meant that we had to rework the CMS UI to work in a significantly smaller space.
The CMS makes use of tabs and separate pages for more complex content. The main tabs were converted into a dropdown, and secondary tabs or pages became buttons. This would allow users to navigate deeper into content to manage things such as links and other items.
Interactive preview
We wanted editors to always be able to see what they were editing in context, so the preview takes up most of the page. The preview uses hover states to indicate different sections and blocks. This informs the user about different blocks and elements.
Pages are interactive on a section and block level. Once the user selects a section or block, editable elements such as text or images become interactive.
Interactive preview
We wanted editors to always be able to see what they were editing in context, so the preview takes up most of the page. The preview uses hover states to indicate different sections and blocks. This informs the user about different blocks and elements.
Pages are interactive on a section and block level. Once the user selects a section or block, editable elements such as text or images become interactive.
Interactive preview
We wanted editors to always be able to see what they were editing in context, so the preview takes up most of the page. The preview uses hover states to indicate different sections and blocks. This informs the user about different blocks and elements.
Pages are interactive on a section and block level. Once the user selects a section or block, editable elements such as text or images become interactive.
Interactive preview
We wanted editors to always be able to see what they were editing in context, so the preview takes up most of the page. The preview uses hover states to indicate different sections and blocks. This informs the user about different blocks and elements.
Pages are interactive on a section and block level. Once the user selects a section or block, editable elements such as text or images become interactive.
Interactive preview
We wanted editors to always be able to see what they were editing in context, so the preview takes up most of the page. The preview uses hover states to indicate different sections and blocks. This informs the user about different blocks and elements.
Pages are interactive on a section and block level. Once the user selects a section or block, editable elements such as text or images become interactive.
Interactive preview
We wanted editors to always be able to see what they were editing in context, so the preview takes up most of the page. The preview uses hover states to indicate different sections and blocks. This informs the user about different blocks and elements.
Pages are interactive on a section and block level. Once the user selects a section or block, editable elements such as text or images become interactive.
Focused editing
Clicking on a block takes you into a focused editing mode. Since blocks are managed independently, the editing mode ensures that users are focused whilst not taking them away from the preview.
The editing mode also incorporates UI into the preview area so users can edit entirely within the preview.
Focused editing
Clicking on a block takes you into a focused editing mode. Since blocks are managed independently, the editing mode ensures that users are focused whilst not taking them away from the preview.
The editing mode also incorporates UI into the preview area so users can edit entirely within the preview.
Focused editing
Clicking on a block takes you into a focused editing mode. Since blocks are managed independently, the editing mode ensures that users are focused whilst not taking them away from the preview.
The editing mode also incorporates UI into the preview area so users can edit entirely within the preview.
Focused editing
Clicking on a block takes you into a focused editing mode. Since blocks are managed independently, the editing mode ensures that users are focused whilst not taking them away from the preview.
The editing mode also incorporates UI into the preview area so users can edit entirely within the preview.
Focused editing
Clicking on a block takes you into a focused editing mode. Since blocks are managed independently, the editing mode ensures that users are focused whilst not taking them away from the preview.
The editing mode also incorporates UI into the preview area so users can edit entirely within the preview.
Focused editing
Clicking on a block takes you into a focused editing mode. Since blocks are managed independently, the editing mode ensures that users are focused whilst not taking them away from the preview.
The editing mode also incorporates UI into the preview area so users can edit entirely within the preview.
Slide-in modals
For management of non-content things such as site settings and the site tree, we incorporated slide-in modals that would appear over the sidebar and preview. The idea is that since it is not directly tied to content editing, it appears as a separate element.
Slide-in modals
For management of non-content things such as site settings and the site tree, we incorporated slide-in modals that would appear over the sidebar and preview. The idea is that since it is not directly tied to content editing, it appears as a separate element.
Slide-in modals
For management of non-content things such as site settings and the site tree, we incorporated slide-in modals that would appear over the sidebar and preview. The idea is that since it is not directly tied to content editing, it appears as a separate element.
Slide-in modals
For management of non-content things such as site settings and the site tree, we incorporated slide-in modals that would appear over the sidebar and preview. The idea is that since it is not directly tied to content editing, it appears as a separate element.
Slide-in modals
For management of non-content things such as site settings and the site tree, we incorporated slide-in modals that would appear over the sidebar and preview. The idea is that since it is not directly tied to content editing, it appears as a separate element.
Slide-in modals
For management of non-content things such as site settings and the site tree, we incorporated slide-in modals that would appear over the sidebar and preview. The idea is that since it is not directly tied to content editing, it appears as a separate element.
Fully in-context editing
The fully realised version of Fabric is a solely in-context editing experience, with minimal UI.
The sidebar would become a even more streamlined action bar that would float over the preview and be as non-invasive as possible. Contextual UI would appear when needed, such as when adding elements to a block or managing links.
Fully in-context editing
The fully realised version of Fabric is a solely in-context editing experience, with minimal UI.
The sidebar would become a even more streamlined action bar that would float over the preview and be as non-invasive as possible. Contextual UI would appear when needed, such as when adding elements to a block or managing links.
Fully in-context editing
The fully realised version of Fabric is a solely in-context editing experience, with minimal UI.
The sidebar would become a even more streamlined action bar that would float over the preview and be as non-invasive as possible. Contextual UI would appear when needed, such as when adding elements to a block or managing links.
Fully in-context editing
The fully realised version of Fabric is a solely in-context editing experience, with minimal UI.
The sidebar would become a even more streamlined action bar that would float over the preview and be as non-invasive as possible. Contextual UI would appear when needed, such as when adding elements to a block or managing links.
Fully in-context editing
The fully realised version of Fabric is a solely in-context editing experience, with minimal UI.
The sidebar would become a even more streamlined action bar that would float over the preview and be as non-invasive as possible. Contextual UI would appear when needed, such as when adding elements to a block or managing links.
Fully in-context editing
The fully realised version of Fabric is a solely in-context editing experience, with minimal UI.
The sidebar would become a even more streamlined action bar that would float over the preview and be as non-invasive as possible. Contextual UI would appear when needed, such as when adding elements to a block or managing links.
