Design Studio
🤖

Design Studio

📄
The Design Studio was developed to reimagine the design & creative process. It enables you to collaborate, create and control your branding assets – all in a one single workspace. Empower your users to express creative flair whilst simultaneously fixing strict design settings on the fly, ensuring all output adheres to your brand’s design principles and guidelines.

Contents

About

All users will see the item from the apps menu named ‘Design Studio’. In addition, the site administrators can link any menu item or homepage callout item to the Design Studio module.

A checkbox will be added to the user management page, allowing user admins to set users as ‘adaptation approvers’. This will be unchecked by default and will grant the user access to edit templates, view all users’ adaptations and approve/reject all adaptations sent for review.

Design Studio facilitates a oneway relationship between 'templates' and 'adaptations'. Templates are briefed in to Adgistics in InDesign file format in conjunction with a completed brief. Once agreed, Adgistics will create the Design Studio template - inclusive with all logic - and upload to their BrandHub. It is here that users then have the ability to create adaptations from said template.

Full process can be found here → Template process

Permissions

The BrandHub comes with an in-built approvals process which routes completed adaptations via the administrators/adaptation approvers for approval, before the user can download the various file formats generated. The approval process can be toggled on or off granularly at the individual template level. Therefore, if the admins are happy for users to create internal posters and download the high res version without approval this is perfectly possible, whilst still requiring admin approval for any customer/externally facing creative.

Design Studio works in conjunction to the BrandHub user roles, to control what the user can do/see with regards to system templates.

Guest & standard users can view all public templates and create adaptations from them. If the administrator has selected that the template must pass through the approval process, they will only be able to download the finished adaptation once these have been approved by a site administrators/adaptation approvers.

Privileged, uploader & uploader publisher users can view all public and protected templates and create adaptations from them. If the administrator has selected that the template must pass through the approval process, they will only be able to download the finished adaptation once these have been approved by a site administrator/approver.

Adaptation approver is an ability that can be granted to any level of user within the BrandHub. This will give them all of the admin permissions within the Design Studio module only. Allowing them to approve/reject approval requests. They will experience the ‘admin’ role as described in following pages.

Administrator users can view all public, protected, unapproved and archived templates and create adaptations from them. Administrator users can download the finished adaptation of all templates without sending them for approval. In addition the administrator user can manage all templates.

Untitled

System roles
Guest, Standard
Privileged, Uploader, Uploader publisher
Admin, Artwork approver
View public templates & create adaptations from them
View protected templates & create adaptations from them
View archived templates & create adaptations from them
View unapproved templates & create adaptations from them
Add new templates to the BrandHub
Change protection level of templates
Edit template details
Set templates to skip approval process
View ‘My adaptations’
View ‘All user’s adaptations’
View 'Shared with me'
Share adaptation
Edit ‘My adaptations’
Edit ‘All user’s adaptations’
Download all versions of approved adaptations
Download preview of non approved adaptations
Download all versions of non approved adaptations
Subscribe to notifications for adaptation approval
Approve/Reject adaptations

Design Studio App

⚠️
Please note that none the following editable options are default or mandatory and are to demonstrate possible functionality only. Templates can be as rigid or relaxed as the business case requires.

Loading

image

Upon navigating to the Design Studio app, users will be met with a progressive loading screen updating uses on load state and useful tips for using the app. In the case above, it's informing users about auto-save or when to manually force a save.

Editable items

image

To signify an item on the adaptation is editable, on hover, the item will display a purple outline.

Navigation

image
image

On the left-hand side is the global non-context sensitive menu where a user can find document pages, items and layers.

In the center is where the user can see their updates in a live preview in (near) real-time.

On the right-hand side is the context sensitive editing panel - specific for the item that has been selected. For example, clicking on a header element, will then display the editable options for the header only (i.e. content, font colour, size/leading, etc.)

Notes

image

We can leave useful notes to users either from a general context (when nothing is selected, as above) — or on specific contexts. For example, when an image is selected you could leave a warning message to say that the library is not to used/published until a specific date, etc.

Note styles

  1. Warning — dark yellow
  2. Positive — green
  3. Negative — red
  4. Default — purple

Global Layout

Design Options

image

Allows users to navigate in a multi-page template to select which page to edit.

Layouts

Full page layers

image

This allows you to completely change around the design in a click of a button — always ensuring brand design adherence. This is defined in the template creation process by Adgistics using a global variable flag.

You can access the full page layouts via the global menu on the left-hand side under the title "Layers"

Formats / Alternative Layouts

image

This in the same vein as full page layers, Formats allow you to change the dimensions and general layout of a design to suit various outputs. For example, above you can see 4 different versions of the same design suited to different social media channels; Facebook, Instagram, LinkedIn and Twitter.

To access the formats options, navigate to the left-hand menu, then click the vertical ellipsis, then choose "Formats".

Imagery

image

When selecting an editable image the following options will be displayed in the context sensitive menu on the right-hand side.

  • Fitting options
    • Set to fill — as seen in the above where the image takes up the entire space of its container hiding any overflow)
    • None set — default setting from the template
    • Set to fit — this will contain the image within its container
  • Preset images — this is the pre-built template library. Users can choose from any of the images provided. A maximum of six will be displayed in a grid format, if there are more than six we display a button to 'display more' which will show all images. Hovering over these thumbnails will display the image in a larger size and not contained to give the user a clearer quick-glance view of the image.
  • Images I've uploaded — this needs to be enabled on a node-by-node basis and will have been requested in the template brief. This allows users to upload imagery from their local source. These images will be locked to the adaptation that the user is editing only and will not be added to the parent template. There is a generous max file size of 10mb for each image uploaded.

Image controls

image

Once a user has selected an image, they'll have the option to "Edit image". This will provide them with the opportunity to zoom and reposition the image within the container to optimise the layout to suit the adaptation.

Text

image

When selecting an editable text block the following options will be displayed in the context sensitive menu on the right-hand side.

  • Text — this is the text content that is to be included. The text box that encapsulates this block of text can be designed to be anchored at the top or bottom or not overflow at all - fixing its height.
  • Background colour — this is a range of colours requested during the template briefing process and can be defined in CMYK, Hex or RGBA. You can also provide labels with each colour to make it easier for the user i.e. if there are two similar reds, one could be for digital and one for print.
  • Font family — useful if you want to provide different fonts or different font weights to the user
  • Font size — we recommend setting a range (min/max) and will determine the font size on a sliding scale
  • Font leading — (or line height) again, we recommend setting a range (min/max) and will determine the distance between the lines of text - not shown above

Saving

Design Studio auto-saves the document every 5 minutes. It will also automatically save the document when the user has finished the adaptation and clicks 'Add to BrandHub'.

Outputs

When a user clicks 'Add to BrandHub', the system will automatically generate and add the following four derivatives to the template library. The rendering process is not instantaneous, during this time the user is informed via the UI that the derivatives are processing.

📢
Outputs are set to 150 dpi as a default setting.
  1. High resolution pdf — Press quality i.e. inclusive of bleed marks, colour marks and crop marks. This output is designed for professional print fulfilment.
  2. High resolution pdf — excluding bleed marks, colour marks and crop marks. This output is ideal for local printing and digital use.
  3. High resolution jpeg. For digital use.
  4. High resolution png. For use cases where transparent backgrounds are required.

Non-admin user views

Templates

image

Guest, standard, privileged uploader & uploader publisher users will see 2 tabs: Editable Templates and Adaptations. The editable templates tab will show all templates that are available within the BrandHub for the user to edit (guest/standard users will see public templates; privileged, uploader & uploader publisher users will see public and protected templates). The Adaptations tab contains a dropdown. For non-admin users this will display: 'My Adaptations' and 'Shared with me'. My Adaptations will, as the name suggestions, display all of the user's adaptations that they've created. Shared with me, will display all adaptations that have been shared with that user and other users of their BrandHub.

Templates can be filtered by keywords using the filters panel on the left. Users can use the free text search box to search based on template name, description and keywords. In addition the user can search by protection group or template type (e.g. social, leaflet, etc.).

Templates are automatically sorted by most recently used so their order can be unique for each individual user.

Clicking on a template thumbnail will take the user to the template details page, giving them a closer look and the option to create an adaptation of it.

image

On the template details page, the user will be able to view the following:

  • Template name
  • Template ID
  • Thumbnail
  • Description
  • Usage
  • Security level
  • Last updated date
  • Last used date/time
  • Keywords

To create an adaptations, the user can click ‘+ Create Adaptation’. This will display a modal where the user needs to add an adaptations name (this must be unique). They'll then be redirected to the Design Studio app where they can begin editing the template.

Adaptations

image

Users may return to any previously created adaptation at any time by selecting ‘My Adaptations’ in the Adaptations tab. This tab is personalised to the user and shows all items that they have created. The most recently created will be shown at the top of the grid.

Adaptations can be filtered by keywords using the filters panel on the left. Users can use the free text search box to search by: adaptation name, keywords, user the adaptation was created by (useful if they have had adaptations transferred from other users)

Clicking on the thumbnail of an adaptation will take the user to the adaptation details page.

Adaptations - In progress

image

If the admin has set the template to ‘skip approval’ then skip to the ‘Approved adaptations’ section below (as adaptations of templates in this process are automatically approved for download). Otherwise when the adaptation has first been created, the adaptation details page shows the user the following:

  • Preview of the first page of their adaptation.
  • Option to duplicate the adaptation (this will open the editing window with the current changes and allow the user to save the adaptation as a new adaptation). The status of the new adaptation will be ‘in progress’ (unless set to skip approvals).
  • Option to share the adaptation with another user of the BrandHub. This is a one-way locking process whereby if user1 shares an adaptation with user2, then user2 will be passed all editing rights. User1 then will not have editing privileges for that adaptation.
  • Option to edit the adaptation to make further changes.
  • Option to send adaptation for approval in order to gain access to download the high res versions.
  • Details about the adaptation including the audit log.

When sending for approval, the user will be prompted to enter some usage information for the administrator into a free text field (this is optional). At this time, the adaptation status will change from ‘In progress’ to ‘Awaiting approval’.

The following table shows the options that will be available for each user when an adaptation has the in progress status. An X notifies that the option will appear.

Untitled

Guest
Standard
Privileged
Uploader
Uploader/publisher
Adaptation approver
Admin
Download PDF
X
X
Download JPEG
X
X
Download PNG
X
X
Duplicate
X
X
X
X
X
X
X
Edit adaptation
X
X
X
X
X
X
X
Share
X
X
X
X
X
X
X
Send for approval
X
X
X
X
X
X
X
Approve
X
X
Reject
X
X

Awaiting adaptation approval

When an adaptation has been sent for approval it is ‘awaiting approval’ and has the following options for a non-admin user:

  • Preview of the first page of their adaptation.
  • Option to duplicate the adaptation (this will open the editing window with the current changes and allow the user to save the adaptation as a new adaptation). The status will be ‘in progress’ unless the template is set to ‘skip approvals’.
  • Option to share the adaptation with another user of the BrandHub. This is a one-way locking process whereby if user1 shares an adaptation with user2, then user2 will be passed all editing rights. User1 then will not have editing privileges for that adaptation.
  • Option to edit the adaptation to make further changes to this adaptation. This will revert the status to ‘In progress’ until it is sent for approval again.
  • Details about the adaptation including the audit log.

The following table shows the options that will be available for each user when an adaptation has the awaiting approval status. An X notifies that the option will appear.

Untitled

Guest
Standard
Privileged
Uploader
Uploader/publisher
Adaptation approver
Admin
Download PDF
X
X
Download JPEG
X
X
Download PNG
X
X
Duplicate
X
X
X
X
X
X
X
Edit adaptation
X
X
X
X
X
X
X
Share
X
X
X
X
X
X
X
Send for approval
Approve
X
X
Reject
X
X

Approved adaptations

image

Once approved, the user will receive an email with a link to the adaptation page. They will then be able to download all available versions of the template. Please note; the Download PDF options will only be available if the admin has not chosen the ‘disable hi res’ option on the original template.

Hovering over available options will give the user more information on the different file formats available and when they should be used.

In addition, the user can duplicate the adaptation to create a new adaptation, working over the approved version. Duplicated adaptations will be set to ‘In progress’.

The user can also share the adaptation with another user of the BrandHub

The following table shows the options that will be available for each user when an adaptation has the approved status.

'-' → Denotes that options that will appear for adaptations of templates set to skip approval process ONLY

'V' → Denotes that options that will appear for adaptations of templates NOT set to skip approval process ONLY

'X' → Denotes that options that will appear for adaptations of templates set to skip approval process or adaptations of templates NOT set to skip approval process.

*will only show when template is not set to disable hi res

Untitled

Guest
Standard
Privileged
Uploader
Uploader/publisher
Adaptation approver
Admin
Download PDF versions
X*
X*
X*
X*
X*
X
X
Download JPEG
X
X
X
X
X
X
X
Download PNG
X
X
X
X
X
X
X
Duplicate
X
X
X
X
X
X
X
Edit adaptation
-
-
-
-
-
X
X
Share
X
X
X
X
X
X
X
Send for approval
Approve
Reject
V
V

Rejected adaptations

If rejected, the user will receive an email, with comments from the administrator about what needs to be changed. The user will then have the option to edit the adaptation as instructed, before sending the new version for approval.

In addition, the user can duplicate the adaptation to create a new adaptation, working over the rejected version. Duplicated adaptations will be set to ‘In progress’.

The user can also share the adaptation with another user of the BrandHub

The following table shows the options that will be available for each user when an adaptation has the rejected status. An X notifies that the option will appear.

Untitled

Guest
Standard
Privileged
Uploader
Uploader/publisher
Adaptation approver
Admin
Download PDF versions
X
X
Download JPEG
X
X
Download PNG
X
X
Duplicate
X
X
X
X
X
X
X
Edit adaptation
X
X
X
X
X
X
X
Share
X
X
X
X
X
X
X
Send for approval
X
X
X
X
X
X
X
Approve
X
X
Reject

Admin user views

Templates

image

Admin and adaptation approver users will see the same 2 tabs as non-admin users, with two exceptions. Firstly, in the 'Adaptations' drop down, they will see an additional option of 'Adaptations' through which they can view all adaptation made on the BrandHub, by all users in a single view. Secondly, they will see the blue ellipses button in the far right-hand side which contains all the additional 'admin' options:

  • Add template
  • Approvals
  • Notifications
  • Transfer adaptations
  • Print fulfilment (if the client has this enabled)
  • Item types
  • Cost centers

Templates can be filtered by keywords using the filters panel on the left. Users can use the free text search box to search based on template name, description and keywords. In addition the user can filter by type or protection group.

Admin users will click on a template to create an adaptation of it or to edit it, first being taken to the template details view.

Editing templates

image

When editing an editable template an admin/adaptation approver will have the following options:

  • Edit the name of the template as it appears within the BrandHub
  • Edit the description and usage as it appears on the editable template details page
  • The template ID is added during template creation and cannot be edited, but can be viewed
  • Skip approval – checking this option means that all adaptations of this template will automatically be set to ‘approved’ and will not require approval before the user is able to download the hi res version. Leaving this option unchecked requires the adaptations to go through the approval process, before the user can download the hi res versions.
  • Disable hi res – checking this option will remove the Download PDF artwork option for adaptations from this template. Leaving this option unchecked will mean that users will be able to download the PDF artwork on approved adaptations.
  • Upload thumbnail – an image can be uploaded that will be used as the preview/thumbnail of the template within the BrandHub.
  • Security level – the admin can set the security level of the template to dictate whom it will be available until. See the ‘Design Studio user roles’ section for more details.
  • Keywords can be edited by choosing ‘Actions’ > ‘Edit keywords’ on the template details page.

Adaptations

Admin and adaptation approver users may return to any previously created item at any time by selecting the ‘Adaptations’ tab. This tab is personalised to the logged in user and shows all items that they have created. The most recently created will be shown at the top of the grid.

Whilst adaptations created by admin users will inherit the normal statuses, admin users have more options and are able to download all versions of an adaptation at any time, as well as approve/reject their own adaptations. For more information on what an admin user can see for each status of adaptation, please see the tables in the previous sections.

Approvals

image

Admin users can view the approvals tab in order to locate items that are requiring approval. By default, adaptations awaiting approval (and therefore requiring admin attention) will be shown. Here the admin is viewing all adaptations within the system, including those created by other users. The creator name and date can be seen in the list view.

Adaptations can be filtered by keywords using the filters panel on the left. Users can use the free text search box to search by: adaptation name, keywords, user the adaptation was created by or the audit log (containing comments from the submitter upon submitting for approval). In addition the user can search by creation dates to locate a specific adaptation.

Administrators can click on any adaptation to view the adaptation details page, where the adaptation can be reviewed and approved or rejected.

image

On the adaptation page, the admin user can:

  • View and download all versions of the adaptation
  • Duplicate the adaptation to their own profile
  • Edit the adaptation
  • Share the adaptations
  • View the comments left by the user upon sending for approval (within the Audit log section)
  • Approve the adaptation
  • Reject the adaptation

Please note; the options available to the admin user vary depending on the status of the adaptation – please see the tables in each adaptation status section for more detail.

Upon approving or rejecting an adaptation, the admin will be prompted to enter a comment to the user. When approving, this is optional however when rejecting an adaptation, this is a mandatory field that must be populated with some text. This will be included in the email sent to the user and recorded in the audit log.

Notifications

image

Admin and adaptation approver users can view the notifications tab to self-assign notifications for submitted adaptations. The admin can choose from the following options:

  1. Notify me of any unassigned updates
    1. if the user chooses yes, this will send the user an email notification every time an adaptation is submitted for approval that has not been assigned any keywords that admin users have subscribed to.
    2. if the user chooses no, they will only receive updates for adaptations with keywords they have subscribed to.
  2. Send me everything
    1. if the user chooses yes, this will send the admin user an email notification every time any adaptation is submitted for approval.
    2. if the user chooses no, they will only receive updates for adaptations with keywords they have subscribed to.

The admin user can choose keywords to subscribe to. Every time an adaptation is saved from a template with a keyword the user has selected, they will receive an email notification. This can be used to split the administrator responsibility between multiple users based on template category etc. Admin users can click on any ‘Available Keywords’ to add them to their ‘Selected Keywords’.

When the admin user receives an email notification of an adaptation being sent for approval this will include:

  • Name of the user who created the adaptation
  • Name of the adaptation
  • Name of the user who sent the adaptation for approval
  • Comment left by the user when sending the adaptation for approval
  • Link to view the adaptation within the BrandHub

Transfer adaptations

image

Admin and adaptation approver users can transfer all of one user’s adaptations to another user. This could be required because a user has left the business, or moved to a different department, or simply because they would like to pass the tasks of finishing their adaptations onto other users.

On this screen the admin can select one user to transfer the adaptations from and one user to transfer the adaptations to. Please note; this process will transfer all adaptations on the first user’s account to the new user. When a user is selected (by username) the number of adaptations they currently have will be shown.

The admin can click ‘transfer’ to complete the process. Note: this will not affect any new adaptations created by either user moving forwards. Once complete an email will be sent to the user who has gained the new adaptations.

All users

Share an adaptation

📢
Please note that sharing edit access to a user is a locking process and therefore you will temporarily lose editing access.

Sharing a single adaptation allows a user to pass editing rights to a colleague. This is normally used for situations such as; collaboration on a project, sickness or holidays.

Within the adaptation details page, the user can click on 'share'. This will then open a modal whereby they can search for a colleague via free text search box against a user name, first name or second name. — they must be approved registered members of the BrandHub.

image

There is no time limit on the sharing functionality, but you can revoke the share and retake back control of editing rights by 'Revoke Share' button.

image

Duplicate an adaptation

From the adaptation details page, all users will have the option to create a duplicate.

Clicking ‘Duplicate’ will open the editing interface, with the current adaptation pre-loaded, including all changes made to the original template (image changes, text changes, layout changes etc). The user can edit the adaptation as required, and can then ‘Save’ the adaptation in the normal way, giving it a relevant name. Once saved, this will create a new adaptation in that user’s account, defaulting to the ‘in progress’ status for further editing or to be sent for approval (assuming the template does not skip the approval process).

This feature is particularly useful when users want to create a new adaptation based on a previous creation, maybe only changing a few elements, as it means they do not have to begin from scratch each time. This is essential for large templates such as magazines, that may require a lot of editing and are likely to take on a similar format in future editions.