Blog

Sitecore 10 Content Serialization and best practices – Part 3

SCS is pretty new, and there are a few basic recommendations while doing the first setup, In this blog, we will discuss those settings and options.

This blog has split into three parts, and this is part 3.

  1. Configure the relative serialization path correctly. In Microsoft NTFS the maximum length is 240. In SCS the content serialization path size limit is defined in the settings, by default, the value is 100.
{
  "$schema": "./.sitecore/schemas/RootConfigurationFile.schema.json",
  "modules": [
    "src/*/*/*.module.json"
  ],
  "serialization": {
    "defaultMaxRelativeItemPathLength": 100,
    "defaultModuleRelativeSerializationPath": "items"
  }
}

The maximum relative item path length = the file system maximum path and file name length – (the base path length + the serialization path length). for more details, please follow this link – Configure the maximum relative item path length

2. Define the hash and alias for relative serialization path – Hashing to shorten paths and aliases and to make it human readable.

It’s super important for two purposes. One is to mitigate the risk of serialization path, and second is define the structure of the project like we can define common aliases for the site.

Relative path is combination of four section (Base path + serialization path +include path content item path) , for example

C:\Users\jsoni\Sitecore\Project\src\Sites\ +  serialization\ + content\ + Home\Products\P1\test.yml

define the alias

"rules": [
  {
    "path": "/Home/Products/P1/test",
    "alias": "alpath"
  }
]

3. Sequence is most important while defining the module.json – As a rule of thumb with Sitecore, all the dependencies should be defined first, for example before defining the content we have to define the templates, layout and rendering etc.

for example

{
  "namespace": "Feature.Hero",
  "items": {
    "includes": [
      {
        "name": "templates",
        "path": "/sitecore/templates/Feature/Hero",
        "allowedPushOperations": "createUpdateAndDelete",
        "scope": "itemAndDescendants"
      },
      {
        "name": "layouts",

        "path": "/sitecore/layout/Renderings/Feature/Hero",
        "allowedPushOperations": "createUpdateAndDelete",
        "scope": "itemAndDescendants"
      }
    ]
  }
}

4. Don’t forget first-match-wins principle while defining the IA or base principle of the content sync strategy – this rule says when a content item matches a rule, all subsequent rules are ignored:

As per the Sitecore recommendation, we need Keep the following things in mind when we configure rules:

  • No path overlapping, If you follow the Helix principles I’m sure it will be much easier, otherwise it can be very hard to identify any path overlaps.
  • Again, Parent rules will override the child rule, example if you have mentioned a rule on parent item node, It will override any child rule configuration.
  • Rule scopes cannot be more inclusive than the root scope. For example, if the root scope is ItemAndChildren, the rule scope cannot be ItemAndDescendants.
  • The alias property in a rule replaces the root name property (the folder name in your file system) for this particular rule.
  • If you have configured an alias property and a scope property with an ignored value, the scope is used. Content items scoped to be ignored are not influenced by aliases.

For more details, please follow below links

I hope this blog will help you to think of a few fundamental considerations while starting to work with SCS on Sitecore.

Sitecore 10 Content Serialization and best practices – Part 2

Unicorn was the most popular plugin for content serialization. It was very straightforward and well managed; all the documents were very descriptive and easy to understand. Now we have Sitecore Content Serialization (SCS), I think we must understand what has changed. Are we losing or gaining any functionality? what changes are required to our existing setup? Re there any changes in terminology etc?

This blog has been split into three parts, and this is part two.

Below is the high-level comparison between Unicorn and SCS.

  1. SCS has an additional Visual Studio plugin to manage Content.

VS plugin provides the below options –

1. Option to push and pull changes
2. Differences between disk and database content
3. Option for selected item sync

SCS has Sitecore command line (CLI) Interface and Unicorn has it’s own page.

SCS configuration is based on JSON files and Unicorn configuration is based on XML.

The configuration file naming convention is different. The SCS configuration file names contain modules for identification and Unicorn configuration contains serialization – Although this is configurable.

The initial setup is different. For SCS we have to setup the package and to enable the CLI it’s required to install the packages.

Difference in global/shared configuration

Difference in project level configuration.

Difference in feature/module level configuration.

SCS provides more flexibility for rule based configuration, for each feature we can define a rule and each rule has the option to define the path, scope and allowed PushOperations etc.

There are changes in the configuration.

When using Unicorn we used to define the dependencies and extends options

<configuration name="Feature.Demo" description="Feature Demo" dependencies="Foundation.*" extends="Helix.Feature">

With SCS, we need to handle it while defining the feature itself and any overlap, for example if there is any specific overlap we need to make sure to put the most specific rule first.

Rule of Parent’s path override rule of children’s and dependent path.

Overall, I can see the SCS configuration is much easier and more flexible. However, I’m still looking for an option for pattern-based formats in SCS.

I hope this comparison will provide a basis to understand the difference between Unicorn and SCS.

Sitecore 10 Content Serialization and best practices – Part 1

Sitecore has introduced Sitecore Content Serialization (SCS) as part of version 10. In this blog, I will explain the basic concept of serialization and compare all Unicorn features, followed by steps for the basic setup and best practices.

This blog has split into three parts, and this is part 1.

Part 1 – Sitecore 10 SCS- Basic concept

Let’s first try to understand the definition, Serialization is the process of translating a data structure or object state into a format that can be stored (for example, in a file or memory data buffer) or transmitted (for example, across a computer network) and reconstructed later (possibly in a different computer environment) – Wikipedia

Sitecore Content Serialization (SCS) is a system for serializing, sharing, and deploying content items, as well as keeping them in version control – Sitecore

Now, we know the definition of serialization. I remember with the Sitecore 6.X Serialization guide we had an option to serialize the item tree and restore it, there were additional options to configure the serialization based on the events like item saved, created, deleted etc. and we were using SVN to store those serialized files.

Growing of TDS (Team Development for Sitecore) foundation

TDS was beneficial to manage the project and item files. I used TDS a lot with Sitecore 6.X versions. We were also using this as part of the deployment process as the underlying TDS was using the MSBuild project file to group the Sitecore items into a deployable project. Additionally to that, it has the below features which are not part of SCS.

  • File deployment into a local Sitecore instance
  • Web Deployment Package (WDP) generation
  • Code generation
  • Validators
  • Environment Validation

Note – Paid license is required for TDS and the cost was around USD 400

In my opinion it’s the end of the TDS era.

Growing of Unicorn (/unicorn.aspx)

Unicorn is a Sitecore utility and it is open source. It solves the issue of moving templates, renderings, and other database items between Sitecore instances. TDS is a monolithic product with commercial support, and marketing does a lot more than just serialization. Unicorn is relatively simple, free and open-source, and does one thing well.

I prefer using Unicorn instead of TDS. Generating the TDS code was not that easy and always needed to take care of the partial class, unnecessary field generation, etc. We can set up the template class following the helix principals.

For more details about the setup, Here is my blog post – Sitecore – Unicorn setup, patterns and tips.

In my opinion Sitecore content serialization would be a replacement of Unicorn.

Sitecore Content Serialization – Future with Sitecore 10 and current focus

SCS will do the out-of-the-box item serialization that lets you automate the synchronization of item changes. It has two options one is using the command-line interface (CLI) and the second Sitecore for Visual Studio (SVS)

Note – for using SVS it’s required to get the license and TDS and SVS are both offered under the same license.

Basic Settings and configurations

Out of the box there are three options to serialize content, The default serialization format (.Item)

  • Manually serialize, update, and revert items in the Content Editor.
  • Use Sitecore event handlers to automatically serialize items.
  • Use the Sitecore service page to serialize, update, and revert a whole database.

Item format

YAML format – using Unicorn and Sitecore content serialization.

This article is the first part to explain the basics of serialization, in the next Part 2- Compare SCS with Unicorn, I will explain the difference between Unicorn vs SCS setup.

I hope this article will help you to understand the basic concept of serialization.

Sitecore Power with ASP.NET Core and why it’s important.

Sitecore has recently introduced a development SDK with ASP.NET Core. In this blog, I will explain why it’s super important for the Business to start thinking about it and how it will change the way of Sitecore development.

In my view, technology is an essential part of running a successful business, and it keeps changing for a better purpose. It’s tough for the Business to make the right decision to choose the right technology and plan for the investment as there are a lot of factors involved like cost, technology choice, stability, future, support, extension, security, machine learning, AI, robotics etc.

Off Couse, every Business would prefer to make a one-time investment and to reuse that investment to cater to any new technology.

Is it possible today to make a one-time investment? I think it’s not, but a company like Microsoft and Sitecore they have been putting all efforts to make it happen and the release of Sitecore with ASP.NET core SDK is a big step towards that dream. In my opinion, The secret of success is to make the right choice at the right time, and don’t devote all energy in fixing the old guys.

Before getting into more details, Let’s understand the key part of the puzzle..

Why Sitecore with ASP.NET Core is so important?

Microsoft has started moving all the focus from the previous development framework (.NET Framework) to .NET Core, Why?, Okay, because .NET Framework 4.8, which was announced on 18th April 2019 will be the last major version of .NET Framework. The visual studio which is the primary IDE for the most of the development is itself is built-in .NET Framework, Although Microsoft will continue to provide the support, as I said in my first few lines, It’s a matter of making the right decision at the right time. below are some key features and needs for the changes.

  • Cross-platform & container support
  • High performance
  • Asynchronous via async/await
  • Unified MVC & Web API frameworks
  • Multiple environments and development mode
  • Dependency Injection
  • WebSockets & SignalR and  Cross-Site Request Forgery (CSRF) Protection
  • “Self hosted” Web Applications
  • Globalization and Localization
  • Swagger OpenAPI built in

SitecoreASP.NET Core rendering SDK enables SItecore headless development with ASP.NET core. This rendering SDK is in addition to the already existing Javascript Service rendering SDKs of React, Angular, Vue and JavaScript libraries. below is the flow diagram and it makes Sitecore solutions faster and easier to develop, maintain, scale, and upgrade by splitting them up into a Sitecore backend and a ASP.NET rendering host frontend. And we can build rendering hosts with the Sitecore ASP.NET Rendering SDK. That’s a fantastic option. here is a high level flow diagram.

Microsoft has already planned roadmap until 2023 releases, so this shows how important it’s that Sitecore goes with the .Net Core platform.

Source – https://dotnet.microsoft.com/platform/support/policy/dotnet-core

The most important part is, there are a lot of front end technology like Angular, React, Vue.jS, Flutter, Microsoft has launched the new platform called Blazor which will allow C# developer (Sitecore technology) stack to write the web interactive UI through the same language, WOW that’s really amazing, Microsoft has already unified the infrastructure with Azure Cloud provider, development technology with .Net Standard and front end technology through Blazor, so now to develop any complex code that includes Azure, backed like Machine learning , AU and front end all can be done through the same technology and Sitecore has release official SDK for that, so that’s the reason is very important for the business as well as for the development.

Let’s talk about the development and architecture

There are two main parts, One is rendering host front end and second is Sitecore instance backend.

  • Rendering Host – The rendering host front end is a web app made up of the Sitecore ASP.NET Rendering SDK code and static resources. The job of the rendering host is to respond to visitor requests.
  • The Sitecore instance– exposes a set of endpoints like web based native rendering hosts or third party integration
Source – https://doc.sitecore.com/developers/100/developer-tools/en/sitecore-headless-development.html

1. Setting up the sample project-

Below are the prerequisites for the installation.

Follow these steps in case of any error, Please see the reference in Troubleshooting section in the below page.

Below are simple command to setup the local environment.

dotnet new -i Sitecore.DevEx.Templates --nuget-source https://sitecore.myget.org/F/sc-packages/api/v3/index.json (Install template)

dotnet new sitecore.aspnet.gettingstarted -n MyProject (Create a new project)

.\init.ps1 -InitEnv -LicenseXmlPath "<path to your license.xml file>" -AdminPassword "<your Sitecore administrator password>“  (Prepare the container)

.\up.ps1 – (Download the Sitecore Docker images and install the containers)
Docker-compose up –d and Docker ps -a

Once you follow above steps, You should be able to see the working Sitecore instance running inside docker with ASP.NET core.

2. Below are the steps to setup the JSON rendering.

Setup the template in the project and add the standard value, As example below, Ref – https://doc.sitecore.com/developers/100/developer-tools/en/walkthrough–creating-a-simple-rendering-with-a-data-source.html

Add JSON rendering and placeholder settings As mention below.

Add a new component in the solution, A new model, View and register it.

Verify Traefik

  1. Reverse proxy
  2. Traefik provides the friendly URL for each of the instances.
  3. Low configuration setup.
  4. SSL termination

Benefit of using ASP.NET core with Sitecore.

  • Super fast.
  • Fully integrated with Visual Studio.
  • Sitecore headless development is based on ASP.NET Core, there are also fewer problems when doing the native integration

Below features are not supported.

  • Horizon
  • Edit frames
  • Sitecore Forms
  • Invocation of xConnect events, goals and outcomes from c#
  • Managed Cloud Standard and Managed Cloud Premium do not currently offer headless topologies for rendering hosts.

Helper

Set-ExecutionPolicy -Scope Process -ExecutionPolicy Bypass

Troubleshooting

  • First issue while the setup was ‘Invoke-WebRequest’ is not recognized as an internal or external command

Root cause analysis and Solution.

Need to update the default shell to PowerShell for dotnetsdk –

C:\Projects\RenderingSDK\MyProject\docker\build\dotnetsdk\Dockerfile

SHELL ["powershell", "-Command", "$ErrorActionPreference = 'Stop'; $ProgressPreference = 'SilentlyContinue';"]
  • C:\Program Files\dotnet\sdk\5.0.100\Sdks\Microsoft.NET.Sdk\targets\Microsoft.PackageDependencyResolution.targets(241,5): error NETSDK1005: Assets file ‘C:\build\src\rendering\obj\project.assets.json’ doesn’t have a target for ‘netcoreapp3.1’. Ensure that restore has run and that you have included ‘netcoreapp3.1’ in the TargetFrameworks for your project. [C:\build\src\rendering\renderinghost.csproj]

Initially, I thought it’s related to version, As I had installed both dotnetcore SDK 3.1 and 5.0, but finally had to update above command.

Extension – In case if need any extension like xConnect events and to trigger a goals, there are always a way, We can Instantiate client in a non-Sitecore context, Reference Link and can add interaction like to trigger a goal

Finally, A few development tips.

  • How to check the files running inside the containers through the VIsual Studio.
  • Dotnet Sitecore Help command
 dotnet sitecore --help
  • Sitecore login command
  dotnet sitecore login 
  • Push the serialized items command – SCS (Sitecore content serialization)
 dotnet sitecore ser push 
  • SCS (Sitecore content serialization) Publish command
 dotnet sitecore publish

Git link for the ASP.NET core Helix

https://github.com/Sitecore/Helix.Examples/tree/master/examples/helix-basic-aspnetcore

I hope this will help to start the development with ASP.NET core with Sitecore 10

Video reference –

I have also presented in Sitecore User Group Pune – Nov 2020 and explain these details.

Thank you for 2020

Despite everything 2020 threw our way, over at Aceik, we certainly had a lot to celebrate in 2020, including: 

  • PARTNERSHIPS: We partnered with a number of new clients including McGrath, RACQ and the Australian National Maritime Museum on some exciting new Sitecore projects. And we owe a huge thank you to our customers for your support throughout this year. We know it has been incredibly trying and we are grateful that you had our backs. THANK YOU! 
     
  • TEAM GROWTH: Our team and capabilities grew with the addition of 14 incredibly talented individuals including our first Chief Operating Officer/Creative Director, Head of HR and Quality Assurance Lead, to name a few. 
     
  • RECOGNITION: Sitecore promoted Aceik to their top partner tier, Platinum, named two of our team members Sitecore MVPs and awarded us the Sitecore Experience Award Honorable Mention 2020 for our work with RAA
     
  • PRODUCT DEVELOPMENT: Last year we launched our new training practice and in 2020, we added 2 new courses to the program, including Creating and Managing Content in Sitecore 10.x and Marketing Foundations for Sitecore 10.x. We wrote a top ranking blog for deploying Sitecore into Kubernetes as well as improving our existing offering – Sitecore Speedy.

Our 2021 plans are equally exciting and we’d love to share a couple with you:

  • Aceik is planning to expand our creative offering in our endeavour to provide our customers with a genuine end-to-end proposition. 
  • A rebrand is on the horizon.
  • Sustainable growth is based on insuring our customer success record. We are planning to continue to grow our team, to enable our growth and offering to our customers. Stay tuned for opportunities to join our team! (reach out to careers@aceik.com.au if you would like to work for Aceik).
  • It’s also time to diversify the team and so we’re looking to onboard 3 new pups as office mascots (kidding! But were you still reading?).

I know I say this a lot, but I truly mean it when I say, ‘thank you’. Your support has been invaluable and I’m looking forward to continuing our work together in 2021.

Cheers

Jason Horne & Aceik team

Leah Di Paola joins Aceik as Head of Human Resources

We are excited to share that Leah Di Paola, former Group HR Manager for Incitec Pivot Limited. has joined Aceik as our Head of Human Resources.

The appointment highlights Aceik’s desire to introduce more and more brands to the power of Sitecore, to enable them to drive personalised experiences and positive marketing ROI.

Di Paola has more than 15 years experience in human resources, having worked in industries such as Explosives and Fertiliser Manufacturing with Incitec Pivot and Dyno Nobel, Resourcing with Hudson Global, Procurement with the Charted Institute and Sporting Events with the Melbourne Commonwealth Games.

“I’m thrilled to be joining the multi-award winning Aceik, and am looking forward to contributing to the business’ success by empowering our people, enhancing the employee experience, and acquiring talented resources to support our clients and Sitecore relationships,” said Di Paola.

Jason Horne, Chief Executive Officer at Aceik said, “Aceik’s Sitecore knowledge is vast and our agility is unmatched. We keep up with evolving technology and can change direction more easily than larger companies, giving our clients the most innovative Sitecore solutions to their business problems.

Horne continued, “Helping our clients to realise the full potential of Sitecore’s experience platform is at the centre of everything we do. With Leah’s expertise, we’re looking forward to hiring and fostering talented developers, architects and designers to the team that will create stronger long-term relationships with our clients and Sitecore”.

Tips for Running a Remote Design Workshop

Advice from an Experience Design Lead

What makes a remote workshop so different? And how can you make it work for your team? A practical guide for running remote workshops – specifically design workshops – that work and deliver results.

Work from home policies and remote collaboration don’t need to put workshops on hold or detract from their value. But online workshop do you need to be rethought in a few ways to ensure the business outcomes are achieved.

There is plenty of advice available for those looking to run any kind of a virtual workshop but I wanted to talk to the special requirements for a design workshop. Below I will guide you through how to facilitate a remote design workshop so its most effective.

How are remote workshops different?

First, let’s talk about how remote workshops are different to in person workshops.

  • Reduced depth of conversation: intonation and body language carry significant amounts of meaning but these pretty much vanish during an online workshop. Even with videos turned on and good internet it’s easy to miss visual cues.
  • Increased levels of distraction: emails, text messages, Slack/Messenger/Teams, your dog in the room and learning new tools are all the result of not having a dedicated workshop space.
  • Reduced effectiveness of tools and methods: post-it notes and whiteboards take on different forms when online and sometimes these aren’t as effective as in-person.
  • Reluctance to actively participate: Creative teamwork takes trust and it can be difficult to build trust over a remote connection.

Advice for a successful remote design workshop

I’ve been running design workshops (in-person) for many years now but we recently ran a design workshop for a new client and I wanted to share the extra steps we took to ensure high engagement from all participants. Let’s dive into those now.

General Advice

  1. Prior to workshops, advise people to be on time, joining midway will derail the agenda for the group and usually ends up causing topics to be repeated.
  2. Organise a workshop assistant to lookout for participants who wish to speak that may be missed by facilitator. Facilitator may miss participant’s body language signs in the video grid while working with the tools, and they may also be unfamiliar with the introverts in the group. The workshop assistant should know all participants and encourage equal contributions from everyone in the group.
  3. I suggest that participants bring and use a mouse and not use trackpads for interactive workshops. We’ve seen some participants having issues with clicking and dragging items around on trackpads.
  4. I highly recommend participants connect to an external larger monitor if they are working on a laptop as it can help with viewing smaller details on the screen.

Miro-specific Advice

I’m a huge fan of Miro, a collaborative online whiteboard platform designed for remote and distributed teams. But if you are going to use Miro then I recommend familiarising yourself and other participants with the platform in advance of the design workshop. A few tips to help with this:

  • Tutorials are required for the first workshop participants.
  • Conduct an tool-familiarisation exercise to get participants to write their name on a sticky note then move into a designated area in a workspace.
  • An ice breaker is required for the first workshops to ease participants into doing workshop activities. We love a simple ‘price is right’ guessing game of three items which we prepared in advance. It’s not too hard, provides a little competition and fun without being so technical that some group members won’t be able to participate.

Running a remote workshop requires additional levels of focus and leadership to ensure engagement and participation from all attendees. To summarise:

  • Set up ice breaking activities
  • Over communicate
  • Set ground rules to reduce distractions
  • Ensure sufficient breaks to maintain engagement
  • Document using the tools that meet your workshop needs

Design: Your Questions Answered

Following on from our recent posts A lesson in design processes for 2020 and Design: But I still have a versioning problem, our design expert, Chung Sham is answering a few of your design questions.

Don’t see your question on the list below? Pop it across to info@aceik.com.au and one of the team will send you a reply and update this post.

Let’s get into our Q&A with Chung Sham.

Q: You mentioned previously exposing design elements in Sketch. How manual is you needing to expose all of that stuff? The button does not have the font and the specific hex codes and all that sort of stuff. Is that something that you would manually do in Sketch?

Chung: No, there is no process or anything additional that we have to do as part of the design. Sketch, because it is a JSON-encoded file, is where it is getting all this information from. We just hit publish and InVision decouples everything. So, it is a smooth process. You can sort of see here with the text label, we have got the font family, the font size, all that sort of stuff, no additional work on our end.

Q: What you shared is an out of the box Sketch set up. Could you make your own  core style sheet page and then have your H1s and feed into your design?

Chung: The short answer is yes, you can set up a Sketch file and put all your H1s, H6s or your icons in a Sketch file and then have that in Abstract and push that into InVision.

The longer answer is that there are other tools available that will help with creating a design system, because then, once you have certain design decisions about why an H1 is the way it is or what fonts were chosen, you can put comments around it and expose that in more accessible way for a website or something like that rather than for Abstract, but yes, is the short answer.

Q: Thinking about responsive designs. If you are designing a component, you end up with different versions, one is for desktop tablet and another for mobile. Is that for just one design file? Does it actually have any tools to go? Okay, his container needs to drop it into the next slide. And can you do something like Flexi design or really? 

Chung: There are plugins that will allow you to set up Sketch files and build some of those smarts as you change, what we call in Sketch up boards, which is basically the working size of your design. You could start with a desktop, build in some of those smarts using a plugin, for example Anima. And then that will adjust the designs based on the breakpoints that you want. Now, that takes a little bit more work, obviously, because you do have to bake in those designs. So you are not just designing on that up board itself.

Another option is you could have multiple Sketch files at different breakpoints. And just like what you saw with Abstract in the second post, you can have those in different branches. Someone might be working on mobile, someone might be working on desktop. There are a few different ways you could manage that, and every team in every organization is different, but there are ways to do that. 

Q: If we end up having multiple Sketch files for different breakpoints because technically, some of those can be not achievable. For example, some designers just go crazy and then just move stuff around in mobile, not making it responsive. This increases the complexity of development. Do you come across any of these challenges and how did you sort of overcome them?

Chung: Yes. So that comes down to, I suppose, the design practice and the designer themselves. What you saw before is the way to manage those design decisions. I think the example would be that you would have three different uploads, freedom files because that just visualizes how certain elements or components should behave down to different breakpoints. And you can share those with the client as well. Whereas if you do bake it in and inside Sketch, you do have to change the artboard within Sketch to be able to see how that behaves. So a lot of times, it is a lot easier for clients to visualize how these three different breakpoints look like and then have comments be placed against it in something like InVision.

Q: Our designers might have ideas around placement. Do you see that more as a collaborative experience between technical and the designer team to go, “Yes, we have worked together to produce this design but there could be technical difficulties and we might need to sort of, it goes kind of both ways.”

Chung: There are a few different deliverables that we designers like. If it is quite a complex component, you might want to start off with a discussion with the developer first, create a wireframe, have a discussion around how that actually behaves before creating a high fidelity version that you would see in Sketch. This is what I’d call design practice for the individual designers, rather than the tools to help solve that. 

Q: Let’s say you have a senior designer on the project. Then you bring in more junior designers who are still onboarding and still learning. Do these tools have any provision for you as the lead creative person to place restrictions on things or warnings, let us say? I guess you’d call it an approval workflow but for alerts.

Chung: There is no out-of-the-box function that might facilitate that in Sketch, it will be a lot of basically, communication. But Abstract would be a place where – such as the request review –  so if they complete a task, send a request review to whoever the senior lead is and then they can actually see and edit that file if they need to or send it back to the junior designer before merging it back into a brand new milestone.

And we are starting to see plugins for Sketch where if a designer enters a different font, it will say, in real-time, “Hey, this is not part of the design.” But that is still in its infancy, but it is moving towards something like that.

Don’t see your question above?

Pop it across to info@aceik.com.au and one of the team will send you a reply and update this post.

Design: But I still have a versioning problem

Following on from my recent blog post, A lesson in design processes for 2020, I wanted to address versioning in design.

Design working shifts are history

Sketch files are managed locally and we still have the problem of how to manage versions on different people’s machines. 

For example, you could try design working shifts. You might have Jane, who will work on the website file from nine to twelve and she will make edits to a couple of banners but Jim will work on the website after that from twelve to three because he is going to make changes to the footer. But then Alice might need to work on the main navigation and she will take that from three to six.

This isn’t good enough. We need something that is better able to:

  • Manage our files.
  • Work together in parallel. We do not want to work in design shifts.
  • Preserve the thinking and history of designs because clients might ask for something and we will make a change, but then another designer might be freed up and they will jump on board the project but they might not know the history or the context that they are jumping into and make changes that aren’t based on current information.
  • Communicate and collaborate
  • Scale: onboard new team members, preserve team knowledge and have context around all design decisions

This is where Abstract helps

Abstract is one place to manage your design versions and collaborate in the one platform.

We have borrowed certain concepts like branches, you have got master. We also have merge branches as well. And of course there are tools around that offer version history, but in terms of version history and version control, it is not exactly the same.

A quick definition: version history vs version control

Version history is still working on a single timeline, and this sort of goes back to that design shifts problem mentioned in our first design blog post. What we really need is version control where multiple designers can work on different branches and they can’t intermingle with other people’s work. And then, we merge that back into the master file after we have all decided which ones meet the requirements.

Until now, designers have mostly been working with version history. Version control is common for developers but is a very new but powerful concept for designers.

Quick recap of the benefits:

Single source of the truth

  • All work is located in one place can accidentally be overridden or lost.
  • Master files, they are all centralized.

Parallel design

  • Multiple designers can work on the Sketch files without overwriting each other’s works.
  • Designs are branched, committed and merged.

Collaboration:

  • It is no longer my file. It is our files.
  • All design work is visible, and you can track progress and changes, as well as see feedback and understand context.
  • Designs can be reviewed and approved before merging.
  • Create a smoother transition from design to development.

Check out the next blog in the design series: Design: Your Questions Answered.

A lesson in design processes for 2020

Today, I’m talking about the tools and processes in a design process, and I’m going to specifically cover the past and present of design processes.

Exposing design tools and processes can improve collaboration, provide a smoother transition from design to development and provide insights into how designers work. Because there’s no point building a bridge from two sides if they don’t align once they reach the middle.

What design used to look like

In the beginning, there was only Adobe Photoshop. A traditional process would have seen a designer send JPEGs to a client because the Photoshop file was too large to share. In response, the client would provide feedback in a Word doc and the designer had to muddle through trying to align the design in Photoshop with the client’s amendments. Versioning and latest files became a problem. As a consequence, the aesthetic output was impacted.

Keep in mind that Photoshop was designed and built around photography rather than graphics. It sort of did the trick when it came to web design, in that you could draw some stuff and put some text into your designs but in reality it wasn’t meant to be a digital design tool. It wasn’t designed first as a digital design tool.

A smarter working environment for designers

What we needed was a smarter working environment built from the ground up specifically for user interface design or digital design.

What designers really needed was:

  • To expose the structure of design work
  • More optimised files, faster to open and easier to share

Along comes design tools such as Sketch…

…and InVision.


But what is Sketch? An app built for digital design. It is a local application on a Mac. Edits are non-destructive, so that is different to how Photoshop works. If you want to redraw a shape, you would have to start all over again, and you cannot really change things as easily as what you would be able to do in Sketch. Much smaller file sizes; we are talking about megabytes here. You could have files from ten megabytes, twenty, but certainly, we are not talking about five hundred, unless you add large raster graphics or photos in there. The documents are stored as ZIP archives. The Sketch file format is actually just encoded JSON data. That allows for better third-party integration to plugins or other platforms such as InVision. There is a whole bunch of plugins, and Sketch is super-fast compared to Photoshop.

But where does InVision fit in? It is a cloud-based hosting platform for designs. The reason why you would want to combine InVision and Sketch is it allows you to create interactive prototypes.

It is a shared environment for collaboration. You can put comments in context, and we can share these screens out to clients. There is also smart outputs, but why we want that is developers can inspect the actual structure of the designs and also get creative assets like SVGs from the actual design files itself, rather than send it by email or zipping it up as what we used to do back in the day. So, it is one place to host all your designs.

Example 1: No such thing as dumb JPEGs anymore

Let’s say you draw a shape in Sketch. It is 212 pixels wide, and it is 212 pixels high. I can change that to, let us say, 200 pixels and it would just change dynamically. Now, it is smart in a way that these fields are not just inputting values. Sketch recognizes some conditions as well. So, let us say I wanted to make this with an extra 100 pixels wide. I could type in 300 pixels, but instead, there are calculations. I could do +100, and it will make that three hundred. I do not have to actually know what the end result is. I just need to know what I want to add to it. Just like with plus, you can also minus as well.

It also recognises different commands. For example, I might want to add 100 to the left only so I add a letter, say ‘R’ and that locks the Right side. The shape them adds to the Left side only. You can measure and have consistent spacing, which is really good for designers because we do want to have consistent spacing for certain elements to match up to a grid.

These are all decisions that we have been baking into the designs.

This is all living on my local drive but how do I share that?

There is a little plugin that InVision has made called Craft. I have made a prototype called, “Awesome Website,” and I can go and publish. That goes off into the cloud and will publish this image into that project.

For example, I have this component called, “Hero Banner” and I have got the modal in here as well. If I click into the Hero Banner, anyone that has the shareable link will able to see this banner. 

But did you know this isn’t just a flat image? We can create an interactive prototype from this file and clients and anyone with the shareable link can start adding their feedback. No more Word docs back and forth! Simply, click on a spot (aka hotspot) and add comments. Now those comments are a part of the project and there is context. In turn, a designer can return to the file, know straight away what is being asked of what, go into build mode and implement the change.

The designer then returns to Comment mode and hits resolve to say, “Yes, that is done.” We can track all the history of this, and all the design decisions.

Quick tip: This is not just a JPEG image for developers as we do have an Inspect mode. You can expose many different design elements, for example:

  • What is the width
  • What is the height
  • What is the grid width columns and the gutters
  • There is also the colours
  • If there are any assets available for download
  • The structure of the pages and the layers on the left here
  • There is an image, a background, content too

You can also grab the code. It is not just a dumb JPEG image, there is a whole bunch of code that gets pushed up through into the cloud and gets decoupled. You can also change what the code is. For example, you want to use less SAS objective-C Swift code as well. It is all in here. So depending on what the project type is, you can switch that up yourself.

Example 2: No such thing as dumb JPEGs anymore

Let us say we go to any website (but today let’s say that website is Apple.com), grab a screenshot. We’ll then copy/paste the SVG image into Sketch.

Because this is a smart working environment, it is not a static or dumb image. In Sketch you’ll see all of the exposed different elements from the screenshot: colours, texts, font sizes, etc.  

Next in our design series, I’ll be talking versioning control.