Design Process – IMG.LY Blog

Creative Workflows - the Future of Digital Asset Management

Jan — Tue, 14 Feb 2023 08:44:42 GMT

Traditionally creative assets used to follow a clear lifecycle of conception, creation and use.

Designers and marketers have been thinking in terms of campaigns, timelines spanned months and the types of media to produce content for could be counted on one hand.

In this paradigm, digital asset management filled an important yet clearly circumscribed role; storing, sharing, and managing assets during the use phase of this lifecycle.

However, the rapid proliferation of digital publishing channels as well as the fast-moving nature of modern marketing campaigns means that the creation and adaptation of assets by stakeholders other than designers are becoming prevalent requirements across organizations. In the process, creative assets are increasingly becoming ‘living’ artifacts subject to frequent iterations involving many stakeholders.

Growing Market Need for Integrated Creative Workflows

Adobe’s most recent report on digital trends shows the full extent of this shift, according to the report 79% of survey respondents identified as leaders of their industries agreed with the statement that customer expectations are constantly resetting to match their best omni-channel experience, 85% concurred that the demand for content has significantly increased.
The report goes on to underline that creative workflow challenges continue to pose the greatest challenge affecting organizations’ ability to keep up with and adequately serve customers’ needs.

Common Challenges

About half of the respondents consider workflow issues to be a critical internal barrier holding back their marketing organization.

Paul Nicholson, Senior Vice President of Production and Technology at Showtime Networks, states that his marketing team can be working on 600 to 800 pieces of promotional content at any given time, optimizing the workflow between design and marketing involving decision makers in a seamless and timely fashion and giving enough autonomy to non-designers make design changes themselves.

Success now requires hundreds of variations of images and videos for different ad networks, social networks, market segments and localizations. Every one of these variations in turn requires versions for creative optimizations and testing,

The Need for Change

This increased need for agility, shorter iteration cycles, and timelines means that content creation and distribution are becoming intertwined requiring a unified creative workflow.

In tandem with an increasing amount of publishing channels, the addressable customer segments within those channels are becoming smaller.

Digital advertising platforms are offering ever more granular targeting options on the basis of both demographic and behavioral data.

In order to take advantage of these focused targeting abilities, the creative content served to audiences needs to be customized accordingly.

For reference, the D2C pet food retailer Pets Deli saw its online conversion rates increase by 51% as soon as its marketing started tailoring materials to smaller segments as well as personalizing messaging.

Threats and Opportunities for the DAM Industry

These trends present the DAM space with great opportunities as well as threats from adjacent industries.

The Opportunity

As a result of the above mention market pressures, marketing teams need to scale up content creation with the use of tools that are specifically designed to iterate sets of related creatives using data and templates.
The natural evolution of a digital asset management system is then to become a 360 content hub empowering the marketing team and other stakeholders while freeing up the design team for more valuable work. A great example of a DAM company doing that is Bynder, its Studio solution supports both images and videos and allows designers to create templates and define constraints so they are easily adaptable by marketers and other stakeholders.

The Threat

Just as DAMs need to expand their value proposition towards becoming tools for creating and managing change rather than static assets, design tools might expand to encompass traditional DAM functionality.
As these two domains merge both types of businesses will have to make a play for becoming the 360 content solution that meets the growing market demand described above. As such DAM companies will face competitive pressures from design-centered products.

Adobe’s Cloud Experience DAM for instance seamlessly fits with other Creative Cloud products such as Illustrator. The obvious advantage is that designers are already working with the tools and won’t have to make the shift to a different way of working.

The obstacle these companies face, however, is a classic Innovators Dilemma; it’s hard to add innovative, disruptive features to a mature product with a large customer base that might be unlikely to value those changes. It is easier for DAMs to secure early adopters for a new product line than for a design tool to move its established user base to use novel and substantially different features.

Implementing a Creative Workflow with IMG.LY’s CE.SDK

Technical viability poses the biggest challenge for implementing a creative workflow, apart from a great UX the complexities of building graphics processing on the web or mobile are immense.

Fortunately, you do not have to commit valuable engineering resources, time, and money to add creative editing to your DAM solution.
IMG.LY’s CreativeEditor SDK is a cross-platform design editing and automation solution you can integrate with ease into any web, mobile, or desktop app and customize to fit your use case perfectly.

Creative Workflow for DAMs Example

Let’s look at an example workflow of an imaginary DAM Carpeta.

Carpeta’s customer OGNX is a skincare brand part of a large consumer brand conglomerate. Until now they have used Carpeta to distribute product designs and marketing material to the marketing and communications team, there are a host of files in different formats originating in various design tools.
OGNX is planning a large campaign for their new product line, but marketers are worried that design resources will present a bottleneck as they are planning to test different variations of CTA and color schemes in a large number of formats for different channels.

Luckily, Carpeta has just rolled out its new Creative Studio powered by CE.SDK.

OGNX’s design team can now import files from tools such as InDesign and start creating templates for marketers and A/B testers to work with.

Creating Smart Templates

In the example below, a designer is creating a template setting a constraint that the logo cannot be changed or rearranged.

Defining dynamic elements using variables

The text used as CTA is defined as a text variable to allow populating the template programmatically for each customer segment or personalized campaigns. Thereby ensuring that all designs are consistent with regard to branding while users adopting it have enough leeway to create unique variations.

Template delivery and adaptation

Now, the template can be centrally stored in Carpeta’s DAM, and a marketing team preparing a campaign on social media can make changes to it using the CE.SDK design UI. In our example, they are testing different color schemes and CTAs which they provide from a central data store.

Automatically generating variation using the CE.SDK API

In addition, Carpeta uses the CE.SDK’s headless API to generate designs in different user-defined formats for each social media channel.

Conclusion

The way organizations work with their assets is evolving quickly, the proliferation of marketing channels, shrinking customer segments, and personalized messaging increase the volume and variations of creatives and require ever-shorter timelines and iteration cycles.
This presents a unique opportunity for digital asset management systems to incorporate creative workflows into their solution and grow to become 360 content management and creation hubs meeting this demand.
IMG.LY’s CE.SDK allows DAM companies to focus entirely on delivering the optimal solution to their users while relying on battle-tested tech and category-leading UX to build optimal creative experiences.

Schedule a demo today to explore how you can integrate creative editing into your DAM product.

Designing a Photo Editor

Ludwig — Mon, 10 Apr 2017 12:30:00 GMT

Part 1: Design as a team

One designer on your team, in outright conviction that the current 2677FD can not be the right choice of blue, changes the color slightly to a more saturated 2676FB, unaware he again forgot to turn off flux. The next day Lisa is infuriated. The color she loved so much now looks terrible on her display. Aziz is furious. He was working on illustrations for the product website, nitpicking the right colors based on the original blue. Oh noes, what a mess…

Heard or seen that before? Bear with me, you´re not alone: Even though we are just a small team of three designers, the journey we had redesigning our product, the PhotoEditor SDK, left us with numerous insights about design collaboration. Most of those lessons were learned the hard way and many of the following suggestions are techniques that matured over the last year. The methods discussed below can be applied to any team, be it two or fifty designers. So, whether your team also struggles with the inability of Sketch to allow for real collaboration or if you’re just curious about how we dealt with the struggle, read on my fellow designer!

Use style guides early on

Right after the first screen is considered finished, sit together as a team of designers and discuss colors (don’t let the developers get wind of it). Schedule the whole thing so you have enough time to get finished while the sun is still out. Otherwise you will look at the interface the next day and have a really hard time reading the ten percent opacity labels.

The naming of colors/styles is crucial, they help to communicate with the developers and your fellow designers (we’ll get to that) and keeping a clean state of used styles.

As you can see, naming styles with a predefined set of simple rules, facilitates finding the style you are searching for. Especially since the colors that come into question for the given element are right by your selection. The prefix indicates the type of color: s for shadow, n for neutral, p for primary …

Why start counting at 100? Sketch doesn’t order styles by their absolute value, thus 10 comes before 1. This also gives you the flexibility to define several color ranges for one color type.

If your team defines their neutral colors in a dark spectrum, bright, neutral colors can then be defined as a detached unit by starting from the next hundreds.

Use Grids

I am from a really cozy Bavarian village, miles away from any accumulation of at least 12 houses (at least it felt that way in my youth, where the fastest transport we could use was the new lawn mower from the neighbours). To visit my friends in the next village, walking across an area of meadows, cow shit and finally woodland was the fastest path to take. There was no real pathway so everyone took a slightly different route to uber between the villages, which was just fine during the summer. However, come winter, not so much.

Every year it took us a few weeks, a lot wet socks and thus angry mom’s, to settle for one path. Ultimately, one of us took the courage to create the path of truth by preparing a trail with really tiny steps. By this time the snow usually hit the 30 cm mark.

I encountered a similar situation 10 years later. I started in a team that did give zero fucks about any type of layout or grid. Basically, every member took his own route. Switching out a specific component was often accompanied by the change of multiple components on the project since the perception of equal spacing between each one wasn’t given anymore.

Nowadays, I use grids everywhere, no matter how small the project, alone or in a team — and if you don’t already, I encourage you to start now! It makes it easier to let your creation feel coherent, speeds up the design process and helps any possible future collaborator to navigate trough and comprehend your design philosophy.

**Tip**: choose an easy to reach shortcut for show grid and show rulers or make a macro to show and hide both (mine is one of the mouse buttons).

For the photo editor we chose a primary grid of 8pt and a secondary one of 4pt. All components are aligned on the primary grid and fonts on the secondary. Designing isolated components based on the grid helps to keep things evenly spaced, even if components get switched out or rearranged.

We used a lot of different icon dimensions across all platforms (iOS, Android, HTML5), to guarantee a coherent look across them. It was essential to specify a layout and predefined rules for them as well. I will discuss the creation of icons in a future post, where I will also delve into finding a style that is unique and fits your project. So stay tuned!

If you haven’t started yet, create grids from the start on in every component of the project! It will probably get your feet wet at first, but your moms will be happy, I promise.

Keep your symbols organized

Keeping all the components ordered and close to each other is, again, great for consistency. After defining a component once in the page view, you will most likely return to the symbols page for future refinements. Now you can easily compare the component to every other used across the app. It will also make you slightly more liked by developers, something you should strive for as a designer at every time (to increase the chances of your next masonry grid not to get waived off as: “to time consuming to implement in the current release — and the release after”). Framing the cooperation between the two parties as smooth as possible is paramount at all steps of the product cycle.

And also, defining grids on both, the parent artboard and the components. This way pixel imperfections and inconsistencies will be visible immediately.

Also now, all elements inside a component share similar rules about placement and margins. They are easily interchangeable and allow for fast prototyping and iteration even at the final design stage.

One of the hardest things to accomplish while working day in day out on a project like this was keeping everything neatly organized while more and more components were created and added from different parties. In the sprints before an upcoming release, we often were sloppy keeping the symbols page organized, which in turn did cost us a lot of time later on. As a solution, we created a plugin, that lints your symbols page on safe.

What’s next?

The project is far from being finished and we will most likely change things here and there, building upon the methods discussed above. We are on an exciting journey crafting, designing, redefining a creative editor that is already used by hundreds of customers with millions of users. So expect more insights and learnings from our team in future articles!

Thanks for reading! To stay in the loop, subscribe to our Newsletter.