Design – 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.

My digital journey to #nfts

Vanessa — Fri, 26 Mar 2021 11:07:26 GMT

The Beginning

In my first years as a graphic designer, my world consisted mainly of paper, books and magazines. To give you an example, my bachelor and master thesis were both printed books (Yes - I am that old). So i was born analog, but i wanted to become more digital.

In the last three years, I have done my own personal digitalization and transformed from the analog design world into a digital one to the point that last weekend I created and launched my first crypto art - an NFT.

But First – What is an NFT?

I have read about NFTs before from time to time. Then, two weeks ago, the internet went wild about the news that a well-known New York gallery sold a digital painting worth $69 million for the first time. And this made me thinking a bit more about the subject again and I decided to join the hype. Let’s get rich!

But what is a NFT and how does it work? NFT stands for Non-Fungible Token which is secured by the Ethereum blockchain. 1 ETH is a fungible token – like bitcoin – a digital currency that is exchangeable. However, in contrast to ETH, a NFT can represent ownership of unique items. These unique items can be digital art like an image or a video, or any other digital asset. Within the process of creating an NFT, the digital asset will get connected to the token - which is called “minting”. Even though that image can easily be copied or recreated, the NFT can prove to a third-party that a specific person or entity owns this token. This makes digital art verifiable and unique.

What excites me so much about NFTs is that they make it possible to give digital art a real value. In addition it gives digital artists the opportunity to be perceived as artists in the same way as their colleagues who paint with brush and paint on canvas. So this means that digital art can finally step up to it’s physical counterpart. The beginning of a whole new era of art.

Currently it feels like that one can basically mint everything to an NFT and people go crazy about it. Why? Because people always liked to collect special and rare things like stamps, pokemon cards, oil paintings and so on - the list is basically endless.

Going digital

Circling back to my own story about transforming from an analog world to a digital one, the first step was to make my work more digital. Three years ago I gave up being self-employment and started working as an art director at IMG.LY. We do develop software for photo and video editing. Our first product was the Photoeditor SDK later followed by our Videoeditor SDK. However, last year we started defining our goals and begin the journey to transform our editor into a completely new tool that combines photo editing with automatic layouting. Automated and simplified processes make it possible for designer to focus more on the development of cool concepts instead of struggling with the technology itself.

Some time ago - while testing the functions of our tool, I created a series of pixel-art images. In my opinion this pixel-art style fits the topic of NFTs quite well, so that I created a small series with three matching images, which got the name “Life behind Pixels”.

One of these pictures was supposed to be my first NFT, but I had to realize that my digital transformation still has some gaps that I need to fill. There are various marketplaces that function like galleries, where one can upload their digital art for everyone to see and be verified as an official artist. I chose Rarible because it has a rather small community compared to the big ones like e.g. OpenSea and it is possible for everyone to join. Other marketplaces tend to select artists they work with based on the number of followers and how well-known they are in the community.

If you want to create an NFT – so called “minting” it, you have to connect your digital wallet to one of these platforms and pay a fee (gas) of about $60 in Ethereum. Unfortunately I don’t have a wallet or even digital money, so what can I do? I asked my boyfriend who works as firmware engineer in the 9elements cyber security department and who was of course already deep in the crypto universe and bang: My first NFT was minted. Now I’m even more fired up.

And although this NFT topic is on everyone’s lips in the digital scene right now, I recently noticed in a clubhouse talk with other designers that this hasn’t arrived everywhere yet.

And now what?

First we are curious to see what happens with our first NFT and we are trying to find out what else is possible with it. Instead of attaching unique information to a simple image file and making it unique, there is a way more potential behind it: NFTs can be minted in a way that allows them to react to their environment using their integrated code. For example they can show a different state in the morning, at noon and in the evening or their appearance changes due to the number of attached wallets.

Right now we’re looking at everything there is to know about NFT and blockchain to develop more crypto art and be part of the new era. Our plan is to create a new piece of crypto art every month. I’m trying to figure out what’s hot in crypto design right now. What do we need to stand out and be visually and technically unique?

And what are the options if you don’t have a friend working in the tech area?I think besides a monthly NFT, there could also be a monthly blogpost ;)

Also check out Instagram and Twitter for daily updates!
https://www.instagram.com/ellly_pix https://twitter.com/ellly_pix

A more technical deep dive can be found here.

Despite the fact that I am super thrilled about NFTs and that I finally generated my own, there is also a lot of controversial discussion going on about the climate impact of NFTs and the energy consumed to mint digital assets. If you like to follow up with this discussion, I put together some interesting links where you can also find some alternatives to the “minting” process:

Calculate the CO2 Footprint of your Ethereum address: https://carbon.fyi/
h ttps://www.greenpeace.org.uk/news/the-biggest-problem-with-carbon-offsetting-is-that-it-doesnt-really-work/
https://memoakten.medium.com/the-unreasonable-ecological-cost-of-cryptoart-2221d3eb2053
https://www.hicetnunc.xyz/
https://xtz.news/latest-tezos-news/getting-started-as-an-nft-artist-on-tezos-using-hicetnunc/

Building the Creative Engine of the Digital World

Daniel — Wed, 22 Apr 2020 12:42:48 GMT

Since releasing our first Software Development Kit (SDK) for photo editing in 2015, it quickly found its way into the hands of thousands of application developers. The demand allowed us to ramp up our efforts to expand our SDK to cover more platforms, add features and launch VideoEditor SDK.

At the same time, two very important things happened to us.

First of all, we got experienced in building rendering engines, while learning in-depth about the requirements of processing photos for professional and semi-professional use-cases, on every platform. Our team leveled up big time, to a degree where we are confident there aren’t many teams with such a domain-specific expertise.

Secondly, we gained critical insights into the visual creation process across many different industries, ranging from print services, social networks to marketing tools. In these processes, photo editing is only one part of the creative flow. There are topics like layouting, animation, generative design and many more, which go beyond the mere editing of an image, but are still essential to the business case.

Our vision is to fill the obvious gap, providing a holistic solution that allows users to map entire creative flows into a tool. By leveraging our technology our customers will become a lot faster and more competitive in their markets.

Six months ago, we decided to build the foundation for this vision and kicked off the development of UBQ, an engine empowering a new generation of tools for creativity.

It’s time to shed some light on our creative engine.

What is a Creative Engine?

Before we go forward, let’s establish what we mean by a creative engine. In general, an engine is a platform that allows developers to create tools that support creators to perform specific tasks such as editing photos, creating visual appealing posters, or social media posts. From our perspective, a creative engine will ease the development of design tools for various niches and as such it must be easily adaptable for different usage and user requirements.

To ensure that we don’t have to reinvent the wheel for each creative tool, a creative engine provides building blocks especially targeted to creative output. Some examples for these are:

High-quality image adjustment, editing, filtering, and manipulation.
Automated layouting of design elements on a canvas.
High-quality text rendering and layout algorithms.
Support for various industry-standard assets, image, and video formats.

However, these are only some of the basic features – there are far more advanced things that a creative engine can provide.

On the one hand, this may include scripting tools to ease the generation of generative art or automation for tedious design tasks via automated image segmentation.

On the other hand, there are also tools that not only help the individual creator but ease the cooperation and collaboration between multiple creators and editors. The details may vary, but it can be as simple as defining formats to exchange assets and designs between creators or even allow the simultaneous editing of their creation.

Introducing the UBQ Creative Engine

With UBQ we strive to lay the groundwork for modern visual and communication design.

Believing that these days, a good design tool has to be there for you every step of the way – it has to be ubiquitous**.** Let us explain what this means for us.

Usable on any Platform

In this sense, we want it to be easily accessible to everyone, and as such the UBQ stands for its availability across multiple platforms. It is conceptionally web- and mobile-first but is also available for classic operating systems such as macOS, Linux, and Windows, while being easily portable across various platforms.

Unified Rendering, Generative, and Inference Engine

While our previous products focused on processing a single image or video, our scope is greatly extended with UBQ. Besides being able to process multiple images, with effects such as filters, adjustments, and so forth, in UBQ we generalized images to a concept we call Design Blocks. As such, static images are not the only source of data. It can be anything, even code that generates the visual input. In turn allowing that generative patterns and complex generative art is processed directly in the engine.

We put a lot of work in the last years into modern tools for automation to help creators get rid of time-consuming tasks such as image segmentation, color adjustments, and many others. Our foundation for this stems from modern machine learning and neural network advancements. As such UBQ supports executing neural networks and inferring information. Thus basically allowing any neural network to be part of a design generalized in what we call Compute Blocks*.*

Collaboration – Interact in Realtime with other Creators

The cooperation and collaboration between multiple creators are dear to our hearts. Therefore, we believe that creation is not only the effort of an individual but of many.

UBQ will enable multiple creators to work together. Thus, allowing a design team to work together, share thoughts and assets instantly. Consequently, this constributes in accelerating their workflows and enriching their creative process.

All that is reinforced due to the multiplayer approach to design as well as reusable design elements.

Creators shall be enabled to work together locally as well as remotely and interact on the same design at the same time.

Cooperation – Ease Exchange of Designs with your Peers

Besides the collaborative aspect, UBQ is built around the interaction of creators and non-designers – which we refer to as editors.

Editors will be enabled to take existing designs and adapt it to their needs, by either just giving instant feedback to the creators, changing color palettes to fit the needs of their corporate design guidelines or changing images and text passages to make a design appealing to their audience.

Design Blocks – Smart and Reusable Design Element

Another important design decision is the ability to exchange and reuse design elements between several projects. Therefore, UBQs foundation is built around the concept of smart design elements that we call blocks.

Blocks are reusable design elements that encapsulate complex and tedious design tasks.

They currently come in two flavors, Design and Compute Blocks ranging from simple predefined image adjustments settings to automated image segmentation as well as predefined adaptable design elements.

From our point of view, creators should not have to spend their time with the recreation of preexisting designs. They should not have to watch tutorials just to get to the same output as someone else before. In UBQ, these design blocks are the core foundation for building adaptable and interchangeable designs.

Design blocks respond to the available space, adapting their content accordingly and may include complex logical rules or just a combination of assets. UBQ has all batteries included, providing a rich library of predefined blocks. By design, blocks can easily be built from a combination of other blocks or by using a scripting language similar to processing or p5.js to allow even generative and parametric design.

Final Words

As of April 2020, we are working on the UBQ creative engine for almost half a year now incorporating knowledge from 5+ years developing our SDKs.

We believe we can make an impact on how designs and design-tools are created, adapted and distributed. We are interested in your feedback and open to discussions, also we are looking for people who want to get involved as team members, early adopters or just want to play with it. Expect some demos during the end of summer showcasing what the UBQ engine is capable of.

Soon, we will get back to you with more exciting news.

Stay tuned!

We’re hiring!

Oh, and by the way, we’re hiring a Senior Frontend Developer at img.ly to reinforce our team and help shaping the frontend of our new design tool. Check out the job here and drop us a line, if you are interested.

On Magic Colors

Pascal — Wed, 17 Jul 2019 00:00:00 GMT

In this article, I will show and illuminate some pictures with the most magic colors that I have encountered as a photographer—these kind of colors that stick in your mind forever.

Apart from my interest in magic colors as a photographer, I am also interested in magic colors as a researcher and developer at img.ly where we push the quality of photo editing in our PhotoEditor SDK further. Therefore, this article will be completed by a follow-up article where I will show how to use post-production to gently push colors over the edge into the realm of magic colors.

Finding Magic Colors

The best way to capture magic colors is — ‘simply’ — to be at the right place at the right time. Both place and time are important but often not equally important. I will show one example where the place was more important than the time and one example where it was the other way round.

The magic colors from my first example were hidden in the intense, overwhelming, colorful, and loud city of Marrakech. There you can find a quiet place of refuge: Jardin Majorelle, a beautiful garden created by the French painter Jacques Majorelle.

While it is a very relaxing place for your mind and ears, it is a visually stunning masterpiece. The path through the garden starts with the clean visual appearance of a small bamboo forest with all the green and turquoise tones. It then runs past all kinds of palm trees, cacti, small ponds, and fountains. Finally, it leads to the center of the garden where you are blown away by a striking blue house, Majorelle’s former atelier, overshooting the intense blue African sky.

The blue is the famous Majorelle blue: an unreal looking cobalt blue, which is almost too strong to look at.

In the garden, the blue is elaborately complemented with pastel yellow, beige, and turquoise tones, which add a nice contrast and make the blue shine even more.

Surprisingly, around noon was the best time for this photo as the shown part of the building was in the shades under a roof and only harsh light yielded out all the colors.

The magic colors from my second example could be found on a stroll at some beach in the Netherlands.

After a rainy day, suddenly, the sun broke through the clouds when it was already deep down on the horizon. Then the magic happened, the light passed through the right amount of clouds and haze so that its bluish rays were scattered away and its tone shifted towards orange. All surrounding clouds lit up and the sky began to glow. As a stunning result, everything was bathed in amazing golden light.

These magic colors only appeared for three minutes during the golden hour. As the clouds moved back in front of the sun the light lost its golden shine. This moment could have easily been missed if I would have stayed at home just because of the rain.

Creating Magic Colors

The next possible way to achieve magic colors is to create them by yourself.

The magic colors from my third example were created by photographing the fluorescent mineral wernerite under ultraviolet (UV) lighting. I made the lighting with a DIY ultraviolet lamp consisting of a cheap spotlight housing, a cheap but powerful fluorescent tube for water disinfection, and an expensive filter glass. The filter glass only let the desired UV wavelength pass. Without such a filter glass, the colors would appear washed-out as the fluorescent tube not only outputs invisible UV light but also large amounts of visible light.

The mineral absorbs the UV light and emits visible light instead. The resulting colors looked unreal as the usually boring looking stone now glows all over with a huge intensity. As a bonus, the blue matches that of Majorelle very closely.

The magic colors from my final example were created by photographing a feather from a blue-and-yellow macaw in my home studio with a simple bidirectional light setup. I used a 50 mm Zeiss Pancolar lens from the 80ies with a wide-open aperture of f/1.8, which adds a nice glow to the yellows. The feather was lit from above and below by two flashlights modified with small softboxes. The light was shaded from the background and the shutter speed was set fast enough so that the studio just disappeared into black.

To keep the color magic on the yellow part of the feather, 20 images with different focuses on the blue part were taken with a wide-open aperture and then stacked to a single image. This created the fast drop-off in sharpness, which would have been impossible to create with a single shot.

Interestingly, these magic colors could never be seen with the naked eye as they only appeared for approximately 80 μs while the flashes were triggered. Then, they were formed to their final appearance by the lens and the post-processing.

What Makes Colors Magic?

To sum up, magic colors can be found in many places or even created by yourself. For the four examples in this article, different aspects were important: the right location for the picture of the blue building in Marrakech, the right time as the sun came through the clouds for the golden sea, the subject and the equipment for the fluorescent colors, and the quality of the light and technical realization for the glowing feather.

While writing this article I asked myself: What exactly does make colors magic? Is it the saturation, vividness, shininess, or glow? Is it the texture of the object, the quality of the light, or the surrounding colors?

All of this is important. However, perhaps the most important part to consider colors as magic is that the colors need to look slightly unreal — but only a little bit. What do you think?

In an upcoming article, I will tell how these thoughts on magic colors influenced the color editing process in our PhotoEditor SDK and share some details on how to gently push colors towards magic colors in post.

On the Democratization of Design

Daniel — Mon, 24 Jun 2019 00:00:00 GMT

Over the last century we have experienced the democratization of various domains of our lives:

Key drivers have been technological advancements and lower barriers to leveraging those technologies. In turn, technology became more accessible to more people resulting in products, services, and tools that improve our lives every day.

“Computers are a bicycle for the mind” — Steve Jobs

Tools, such as computers, allow us to finish more tasks in a shorter amount of time and with fewer resources. Even more importantly, said tools also rid us from boring and repetitive work, thus enabling us to shift our attention to exciting and more creative tasks, paving the way for us to experiment and create rather than repeat.

Evolve Design with better Tools

Proper visual design attracts, engages, and persuades; it helps convey stories and facilitates communication.

Nowadays, design in all its facets like advertising, social stories, product presentations, or merchandise is omnipresent in our daily lives. As there is no arguing that appealing and beautiful design has an impact on us and our surrounding, consequently there is also a growing demand for good design and easy-to-use tools.

“Use a picture. It’s worth a thousand words!” — Arthur Brisbamne

Although the importance of design is unquestioned, creating appealing designs remains hard for most of us, and there are many reasons for that.

First of all, design tools are still challenging to master, and while they empower professional designers to create stunning assets, they remain a closed book for most people.

Secondly, even if we leave most of the creational part to professionals, the average user is still unable to use existing designs as a basis to create new assets or refine and update small details. Even for the slightest changes, one has to get familiar with the inner workings of sophisticated design tools.

Also, when it comes to collaboration, the process with most tools is far from frictionless, to put it mildly. Still, most designs get shared as Photoshop, Sketch, or PowerPoint files, and there is no tool or platform that grants unhindered access for multiple stakeholders with varying degrees of experience with design solutions.

As today’s design processes regularly involve multiple stakeholders like designers, marketers, copywriters, or product engineers, one has to acknowledge that prevalent design solutions simply lack features and workflows that reflect daily routines.

Make Design Accessible through Technology

As we pointed out, the overall access to good visual design is still very limited, but with the growing need for compelling creatives in virtually every aspect of the digital and non-digital realm this shouldn’t be and it doesn’t have to. We believe in the democratization of design.

Better tools enable the democratization of design!

We believe that:

We need to overhaul design processes and methods to cope with the ever growing design needs and the ever-rising number of stakeholders.
Achieving elegant design must be made simple.
Design can be made accessible through technology.

The question remains: How do we achieve that?

We came to the conclusion that there are four key elements design tools should have that will make design more accessible:

Collaboration,
building blocks of intelligent design components,
automation of tedious design tasks, and
bringing together Editing, Compositing, and Layouting.

Collaboration

We hold as an opinion that design tools have to facilitate the collaboration between professionals and non-professionals, thus allowing an effective and frictionless design creation and adaption process. This includes direct collaboration on a design as well as the exchange of whole design templates, design components, and presets.

While some solutions already offer templates for content creation, we think that design components as a more modular approach are going to be a necessity to simplify the creation of new complex assets for everyone.

Building Blocks of Intelligent Design Components

If Lego™ taught us anything, then it is that creativity can flow when you base your work on a solid foundation.

That said, one has to admit that while the basic elements of design such as text, shapes, or images can be creatively combined in millions of ways to create stunning designs, they also can be used in a trillion ways to create underwhelming output.

Similar to modern UI design, complex building blocks will play a central role in the visual design process, allowing creators to be more efficient by removing repetitive tasks from the workflow and also allowing average users to create and adopt complex designs quickly. Intelligent design components will shift the focus to the composition by guiding the user in carefully chosen constraints.

Automation of Tedious Design Tasks

Speaking of intelligent building blocks, we believe that said blocks must not be static but adaptive to fit into an effective and frictionless design process. That may include the automation of certain design tasks like text layout or even abstracting away the complexity of image editing.

We envision that with the help of technology and specifically artificial intelligence, recurring and taunting tasks like for example, the separation of a picture into fore- and background can become totally interaction- and hassle-free. Even automatically choosing the right adjustments based on the image content will be possible.

Altogether, intelligent design components are a necessity and will be the next step in design automation, fostering a flexible and fail-safe adaption and creation process and thus ensuring that even without professional knowledge designs will be created faster and look better.

Bringing together Editing, Composition, and Layouting

Photo editing and layouting are both central to the design process. That is why, in a holistic approach, combining both will yield exciting new possibilities, improved visual consistency, and a reduced amount of friction while going back and forth between layout and photo editing.

Closing words

To sum it up: To democratize design, we need intelligent design tools and ecosystems that allow for the cooperation between all stakeholders, as well as a community that is open to share and learn from one another by building and sharing reusable and intelligent design components.

Updates to the PhotoEditor SDK

Felix — Tue, 28 May 2019 00:00:00 GMT

Over the course of the last weeks, we’ve integrated a couple of handy features into the PhotoEditor SDK. It’s now easier than ever for you to equip your service with the tools that make it the one-stop creative solution for your users.

Color Pipette

Colors are important for virtually every aspect of the digital world and a powerful tool when it comes to design, branding, social media and marketing. Color is one of the most important things to consider when communicating online. If used right these visual cues harmonize the impression and emphasize the message. But if used wrong, colors may also wreck design and content just as thoroughly as Comic Sans.

Whether it is for creating content, ads, special offers or a brand logo, finding the right color is just too important a decision to be taken lightly. The PhotoEditor SDK’s color pipette helps your users to discover and marry their content with the right colors for any purpose.

The Color Pipette is available for iOS and Android.

DuoTone Filters

Duotone is amongst the big trends in modern web design. What once served as a way of saving money on printed materials, today, adds boldness to designs and can be used to many ends. Duotone keeps things minimalistic yet captivating. In a world of full-color imagery, duotone images are a refreshing novelty as they add visual appeal by subtracting colors.

We added 8 filters to the PhotoEditor SDK’s gallery that map contrasting colors to an image based on its luminance values. Via a slider, your users can control which color the creative should lean to.

DuoTone filters are available for iOS, Android, and HTML5.

Folders

To streamline your users’ workflow and facilitate the exploration of the PhotoEditor SDK’s vast filter library, we categorized them into 7 folders. We also exchanged all filter names for more descriptive ones.

Folders are available for all platforms and completely customizable, you can rename the folders, add your own and rearrange the filters.

Snapping

To facilitate the precise layout of creatives, we added a snapping feature to our Text, Text Design, and Sticker tool. The visual elements snap to the center and borders as well as to certain angles.

You can customize the snapping properties to your wishes. Snapping is available for HTML5 iOS and Android.

Light Theme

Rumor has it that Apple is going to introduce light and dark theming in iOS 13. With our latest update, we complemented our standard dark themed UI with a light counterpart. Without any customization efforts, you can switch from dark to light theming with a single line of code.

Light theme is available for iOS and Android. For more on that, please check out our documentation.

If you think that the PhotoEditor SDK would be the right fit for your project, let us know and we’ll be in touch.

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

Text ❤ Design [Pt. II]

Felix — Wed, 28 Nov 2018 00:00:00 GMT

After giving you a sneak peek at the Text Design tool in a previous blog post, we can now finally announce that it is available as a part of the PhotoEditor SDK for all platforms. Over the last weeks, we finalized the Text Design tool and added functionalities that make it a handy creative tool for many industries and use cases.

One of our main goals is to make good design more accessible to everyone by developing technology that facilitates and streamlines creative processes so that even people without previous knowledge of sophisticated editing tools can yield appealing results. The Text Design tool enables you to provide your users with the power and features necessary to give speech to their ideas and create a narrative for their visual communication.

Attention-grabbing and precise visual communication is key to engaging one’s target audience. Our novel tool automates typesetting and lets your users combine photos and text fast and easy to create stunning imagery for any tone and task. The Text Design tool features complex text layouts based on recipes crafted by professional designers. Their balanced combination of fonts, sizes, alignments, and decorations allow for the fast creation of assets with a designer look for various purposes like social media, online ads, short-term offers, flyers, product images, posters, promo material and so on. Especially for small companies and teams, without the budget for a professional designer or a dedicated design department, the Text Design Tool can save a lot of time and stress by reducing what would usually take hours to a single tap.

All it takes is an idea. The Text Design Tool tends to 90% of the execution.

The tool makes design just as fast as your users’ ideas. Combined with the PhotoEditor SDK’s extensive feature suite, branding opportunities through sticker upload and the photo roll with endless source material, your users can achieve a harmonious and nuanced visual communication off the bat to stand out against their competitors. The designs help convey your users’ message and can be used to create a textural hierarchy to guide the spectators view to the essential infos for your users’ goals. Furthermore, the shuffle functionality randomizes fonts, alignments, and decorations thus offering endless possibilities for creative expression.

A recent change we made to the mobile versions of the Text Design tool is lifting the limitation of one design per creative to allow further artistic expression and get the most out of the interplay and combination of the various designs. On top of that, we optimized the inverting feature of the tool to allow for the adjustment of the inverted designs’ padding and size.

If you want to empower your users to give a voice to their creatives head over to IMG.LY and get in touch with our sales team.

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

Genki — A Design Developer System

Ludwig — Thu, 14 Jun 2018 13:00:00 GMT

https://www.youtube.com/embed/bEhoG-z6CQE?feature=oembed

However after maintaining and using our system day in day out we faced a series of problems, and annoyances:

Naming

When I first started working on the code of our app after designing the application for over one year, it struck me to see the naming was not at all related to the one we used in our sketch files.

Naming conventions on the design part had no effect on the ones defined by our developers and vice versa. This makes an effective theming impossible with no clear reference to each color and coordinating style changes so much harder.

Theming

This brings me to theming. Our product — PhotoEditor SDK — is used in a variety of environments. Most of customers want to adapt the editor to their own CI, therefore it has to work in multiple color themes and screen resolutions. Icons and all other assets like illustrations should then adopt to the theme and display accordingly. In the past one created multiple sketch files to accommodate themes, each one relying on its own atomic and component level library. Naming had to be kept in sync and each change in one file had to be applied to the individual themes.

Style Creation

We adopted the convention of creating atomic styles in a separate sketch library file. However the sketch component style creation is cumbersome and repetitive:

each text style needs 3 versions for left, center and right alignment
shadows and outlines variations need to be created for each radius used inside the app, since they can’t be masked
outline and fill style need to be kept in sync manually

Solution

We propose a “Atomic Design-Developer System”. This system lives in one JSON file, that gets accessed by developers and designers alike, through any imaginable input (web interface, editor, sketch plugin). From this JSON file, the application then generates styles for all code bases and a sketch library file with a visual representation of the styles and a page with all atomic symbols. On the sketch part the above described problems get solved in the following way:

Naming

By giving the generated symbols the same name as the JSON path, developers and designers work with the same vocabulary.

“theme.color.navigation” → “Fill / Color / Navigation”

Theming

With the simple switch of a constant the theme can be switched. No more multiple screens for each theme. The themes can be compared side by side, without unnecessary clutter of the generated variations for each style, like right and center alignment for typography. Those variations get saved in a separate symbol page.

Style Creation

For each color and shadow variations in outline and radius are generated.The radius and line weight is defined globally and generated for each style.

The same holds true for typography. For each style a symbol for left, centerand right alignment is generated. Also we allow extending text styles. The generated symbols then inherit from the base style. Think bold, italic versions of a text style, or button text on an image background.

Conclusion

We started integrating the generator in our process and are very happy with the results. No more naming conflicts and better communication. We would also like to thank the people behind React Sketchapp, which made this project possible in the first place.

You can download the project here.

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

Rise above the Noise

Eray — Tue, 01 May 2018 22:00:00 GMT

A few years back, a close friend came by with a presentation she had prepared for a marketing campaign. Overenergized by this career-boosting assignment, she had nothing else on her mind for weeks, barely reachable and always stressed out. When she finally popped out of her little bubble, you could feel how proud she was, presenting me her latest draft with a gleam in her eyes. She knew that I’m a very visual guy, so she asked for my opinion.

While I could see the enormous amount of work she put into research, structure and storytelling, most of its brilliance was shaded by its design — or better, non-existing design. Oversaturated images, logos placed maliciously in the middle of nowhere, no concept of harmonic paddings, margins or color palettes. As a consequence, the visual presentation was an emotional flatline, to put it mildly. Slide after slide, I was in a constant struggle of ’should I tell her’ or not.

If you’re a designer, you might be familiar with this feeling. Your trained eyes can be a true pain in the ass, often triggering discomfort whenever something is unbalanced, or, let’s say, lacks a certain design attitude. In the digital world, with each ad, presentation, website or user interface you come across, there lurks an urge to set things straight, like with a crooked frame on the wall. While some might argue that this can quickly end in an unhealthy compulsiveness, to some degree this is important. Good design is an essential ingredient to the effectiveness of the underlying medium. After all, your design is the packaging for your content, for your message, and as such, it deserves equal attention. When done right, its true power unfolds with emotions; it can make people feel excited, and most importantly, **it can create desirability**. In the end, it’s the perfect tool to maximise the impact of your message and let your work truly stand out. But heck, enough with design philosophy.

Back at my friend’s computer, I suggested a few visual changes to the presentation, asking her to choose other fonts, pick different colours, change some pictures, and add more consistency to the layout. She did most of the changes herself following instructions and simple questions, which gave her a sense of ownership over the design.

Looking back, it was two things that were really frustrating me. On the one hand it’s my conviction that a marketeer should know the basic principles of design. You’re responsible for communication, and design is an important tool to shape it and helps to rise above the noise. On the other hand, it was also the tools she’s been using for the presentation and assets that were responsible for that mess. Tools made for designers, so a designer can craft the most beautiful visuals, seem powerless in the hands of a novice. Even business tools like Powerpoint do so little to educate and empower their users to create good design. Time after time, I’ve seen how marketeers, coders, product managers and business managers across industries had to rely on design departments or just struggled with their own mediocre design skills.

Who could have known that this frequent observation would help us pave the way for our own product. In our early days, when we built the first versions of the PhotoEditor SDK, we focused on helping developers to add basic photo editing functions to their products. With non-destructive editing and handling of multiple elements of the canvas we expanded our editor beyond photography — to a design tool.

Once we had all the essential functions in place, we started looking at every tool, from text over brush to adjustments from different angles. The most essential question was: how can this tool deliver beautiful output to those who lack design expertise? To those who don’t really know what character spacing is, or to the ones that don’t really understand what clarity does to an image and what it’s good for.

We believe in the vast potential of democratising design, and digital design starts with an editor.

Our journey towards that goal has just started. In April, we have launched a novel text design tool that makes text layouting a breeze. Our app Portrait showcases how we can generate beautifully designed portraits instantly and has already been downloaded over a Million times. There is much more to come, with tons of ideas, prototypes and data in our backpack.

Of course, making our vision happen is tremendously challenging from a UI perspective, and again, it is the quality of the design that will make the difference. As editing is a process that spans platforms, use cases and mediums — I consider this job a true boss fight for every designer. A huge challenge with a huge accomplishment in return, provided that we’re able to pull it off.

So, if you happen to be a designer, and feel the itching in your fingertips, just shoot us an email. Let’s start a conversation, and once you join our team let’s shape the future of design.

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

Text ❤ Design

Felix — Thu, 12 Apr 2018 00:00:00 GMT

Introducing the Text Design Tool

There is power in words just as there is in design. In another advance in making good design more accessible to everyone, today, we are proud to give you a sneak peek at an upcoming product we created in addition to the PhotoEditor SDK: The Text Design Tool merges input text with typography, creating stunning designs for a multitude of use-cases.

While most of us are accustomed to the use of photo editing and enhancement tools, results often lack the desired appeal when it comes to typography and layout. Simply because most people don’t know about character or line spacing and other rules of typesetting and let’s be honest, why should they? But as well-designed text layout can add a lot to its expressiveness, we wanted to equip everyone with a tool that automates typesetting and layout, similar to apps like Typorama.

To transform our vision into a user-friendly tool, we first created recipes and set layout rules for different combinations of fonts with decoration elements. The Text Design Tool currently holds 16 layout designs for various use-cases. We worked close with the designers Tommi Gutscher and Ramona Schratt to conceptualize the designs and their different flavors. Through simple keyboard entries, you can populate the designs with your own words. The tool then lays out your text according to our recipes upon a single tap. You can then fine-tune your creative by choosing from 15 different text colors or by using the randomize functionality that shuffles the fonts, alignments and decorations until the creative lives up to your vision. You can even create a mask from your text that lets the background image shine through.

But that is not the end of the road, as, for the future, we will work with a wide range of artists and designers to expand our tool with a broad spectrum of new and exciting designs that can be applied to a variety of use-cases.

The Text Design Tool is currently available for iOS only. Versions for Android and HTML5 are going to be released in the next weeks.

Download our Photo Editor App for iOS to get a hands-on experience with the Text Design Tool.

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

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.