For many, many years visual designers have been working outside the workflow of IT. The way of working differ a lot from the more controlled IT deliveries, which has meant that design often comes as design drops rather than as a part of an Agile workflow. Today we have many tools that can change that, but how do you do that and what is the benefit?

For many years visual design have been a messy affair with naming convention and external cloud storage where versions get put into a named folder structure. Sure it has been improved with tools that allow collaboration such as Figma and Invision. Handover to development have also improved with tools like Zeplin and Avocode. Still, the handover process, when it even exist, is far from streamlined and it causes quite a bit of a mess.

Even with collaboration tools and development handover there is still no control over changes to the visual designs. Versioning, automatic or even manual is not the same as version control after all. Why is it important to be able to control versions? The reason is that in a continuous delivery situation design changes  need to be controlled and agreed upon before they are turned into code. This is especially important if you do not work in a design system or at least in an Atomic Design pattern.

In order to fit into a continuous delivery way of working, which is where I think most companies are moving towards, we as designers need to fit into the way development work already. So how do we do that without compromising the exploratory nature of our craft? Let us first define what it is that we need to do in order to sync visual design work with development work:

• Collaboration - We need a way to quickly get feedback on visual designs so we can adapt and adjust. This comes from stakeholders and developers so it must fit both groups.
• Controlled deliveries - We need a way to deliver visual design in a controlled way that is not only easy to understand, but also matches the work of the developers.
• Handover - We need a way to handover visual design to development that is easy to work with for the developers.

Most of these are done today mostly in meetings. That is wasteful and it require a lot of time management. It also require that there are meeting spaces suitable for this work. In some cases it require that everyone is in the same location or that specific technical setups are made for external communication.

There has to be a better solution?

Indeed there is and it's not really that much of a pain to begin with this workflow for visual deign either. We will take advantage of the tools you most likely are already using and we will tweak the workflow a bit and add a few things that you may not use just yet. This workflow is for Sketch, but you can probably find similar way of working if you work with Adobe, Figma or the Affinity suite to mention a few alternatives.

Atomic Design

The first step is to start thinking of your design the same way that the developers (hopefully) is. By organizing your visual design according to Atomic Design you will have a one to one connection to the code. This is extra useful if you are using a design system as then the design changes you make will be reflected correctly in both the visual design and the code.

Nest your symbols following the basic structure of atomic design and you will make the developers happy as they can simply make the same changes you do on the atoms and molecules. You will also find it much easier to continuously work from the smallest entity up as it makes creating new design elements fast and easy

Abstract

Abstract is a great tool that allow you to work in branches, just like the development team is doing. This allow you to commit to designs for delivery, but without restricting you from exploring alternatives at the same time. This is done by having different branches where only the Master branch is actually the one that is put in production.

The way Abstract work fit very nicely into the development workflow. This makes it much easier to collaborate on the same cadence and it ensures that only the visual design that has been agreed upon by everyone involved is being put into production.  This is done by using the approval process built into Abstract any time you want to push design to the master branch.

The final part of abstract is the handover where the developers get an overview of the design elements that makes sense to them. Things like measurements, color codes and more are all easily accessible from Abstract. There are other tools specifically designed for this, like Zeplin and Avocode if the handover features in Abstract is not enough. For me Abstract hold all the information I need, but every team have different need.

Invision DSM

Invision DSM is a design management system and it is where the final design we push to master get placed as the one truth. Not only will this be a fully functional documentation space, but you can also work with the components directly in Sketch by drag and drop. This allow you to constantly work with the latest visual design.

You can integrate Invision DSM with your code as well to automatically push code directly into the documentation using Storybook. If you do not have Storybook, then you can manually add code to each component in the documentation in Invision DSM. If you want to extent the developer handover you can connect Invision DSM to Invision Inspect as well.

Invision DSM is also part of a greater package so you get access to tools like Prototype to make your designs come to life and Freehand that is a collaboration space that is kind of like a mix of sketch and a whiteboard. You also get Boards that allow you to create mood boards with ease.

Jira Cloud

Most developers work in Jira today and most are on Jira Cloud, or on their way there.  You can connect Invision DSM to Jira directly using the Invision addon for Prototypes or by simply link directly to a section in Invision DSM. Jira will act as your task management so you can connect your design tasks directly to other tasks, such as development and test for example.

If you are working within a SAFe organization, then design can be part of other types of work items such as SAFe epics or Features for POC work. If you are working in a smaller organization then you can get Jira Cloud for free, which is always nice.

Why would you want to do this?

What benefit would you as a designer get from changing your workflow in this way?  There are of course many benefits, but let us list the biggest reasons why making this change will have a positive effect on you and your design work.

1. Reduce the barriers between you, stakeholders and development - By making it possible for everyone to stay on top of the design process as well as the development process in one place it becomes easier to break down the barriers that naturally are built in most cases. You reduce us and them situations and communication improve quite a bit. This allow you to become a part of the team because you work the same way as everyone else.
2. Control the way your design turn into code - One of the worst things I know as a designer is when my design get turned into something horrible in development. This often happen when you as a designer is on the outside of the team and simply handover design. By working along side the developers and working with the same cadence as they do, it becomes much easier to maintain your design as you intended it. Using the atomic design and having a design system it becomes so much easier to make sure everything looks as intended in your design and changes can be done swiftly with minimum effort on all sides.
3. Improve feedback to make better designs - By working in a controlled with alongside the development team and the stakeholder with tools that allow for rapid feedback and approval processes you get feedback faster. Often this feedback is also much better quality-wise as it is in the design itself and not a collection of emails or excel sheets. With fast feedback with great quality design work become faster and changes can be done almost instantly.
4. Free up time by making information available to the developers - As a designer you spend a lot of time providing assets, color codes and information about the design. By automatically move this into a tool you can reduce that time a lot. This time can instead be spent on discussing designs with the developers to find great solutions together that are both visually appealing to the end consumer and technically easy to build and maintain.
5. Keep everyone up to date with the design process - How may screens, videos, prototypes and power point presentations have you not made to keep different groups up to date on your design work? Having everyone in the same tools make that so much easier. The trick is just that the tools have to be useful for everyone as well, which is why so many design tools fail in that regard. Abstract and Invision DSM are different in that regard since it is useful for stakeholders and developers alike.

If this is not enough to convince you, then as icing on the top you should know that the tools integrate with Slack as well. So you can get the best communication flow possible...

So, what do you say, does this sound like a workflow that you would like to see expanded with more details? If so, what would you like to learn more about first?

When you work with graphics one of the most important aspects is to maintain order among your assets. Having a good system to control stock graphics and reusable vector graphics is essential for a good workflow and proper management of assets. I have struggled to find a system that I like, but now I think I have fond it.

As I was updating some images and tried to locate a specific image I got frustrated and did a deep dive into the asset managers for images that are out there. By accident I stumbled upon Eagle and it looked a bit to good to be true as it had pretty much everything I need.

With a pricing of $29.95 it's very cheap, but they also offer a 30 day free trial. Of course I downloaded it to test it out. I was not disappointed, even if it took a little while longer than needed as I was dumping 1500 images from Dropbox that was not synced locally.  It was a stupid oversight on my end, but it still worked flawlessly.

I have quite a lot of stock photos and vector graphics that are pretty big. Eagle did not care and I could easily batch drop 100 large vector files and Eagle took care of it in seconds. Even adding whole folders was snappy and fast so adding images was a breeze. Once I had most of my images I started looking into how to make order out of the chaos....and it was glorious.

Categorization

Adding categories and folders is super easy.  A simple plus button add folders in relation to what folder you are currently in and you can add icons and colors from a predefined selection. Folders can easily be dragged and dropped as you see fit, making this a very easy and satisfying way to work with folders.

You can create two types of folders. Regular folders and smart folders. Regular folders behave as you expect and smart folders allow you to create rules based on a pretty large range of attributes such as type, tags, colors, sizes, notes, shapes, comments and so on. It can be pretty dynamic with multiple rule sets as well.

Tags is easy as pie. You can create as many tags as you like and Eagle will even suggest already existing tags so it's easier to group on existing tags. You can manage tags in a specific area where you can also group and add color to the groups, just like with categories. It does not have icons however, but you can live without that I think.

Comments and Notes

This is a bit misleading as it's actually notes and annotations. I was looking for the comments until I realized it was appearing in the image itself and not as a comment area below.

Notes is a section in each image where you can add notes about the image itself. Sometimes you would use something like that to add a link to where the image was found and what copyright is associated to it. In Eagle you have a custom url field for the link, which makes the notes field more focused. Notes is searchable as well, which makes it very useful.

Comments is actually annotations. It means that you can add comments inside the image itself for different purposes. This is amazing as I sometimes have vectors with multiple assets in it. Using annotations I can mark each item so I know where they are. Comments can be searched and filtered as well, which makes it very powerful.

Search and Filter

This is the most important part of a good asset manager and Eagle have one of the most dynamic and flexible search and filter function I have seen. Search can be done on pretty much any data you add to the image so it is pretty amazing. The filter however is for me even more useful.

I don't even have to make a search to use the filters, so I can just start in the all section and drill down using the filter options. I can filter on colors that is automatically added to each image, tags, folders, shape, ratings, file types, dates (both predefined and custom), dimensions, notes and URL. You do not even need to know the full data so for url for example you can just start typing the domain for example and that will filter on that domain instantly. It is very powerful and easy to use.

...and more!

Eagle also comes with additional features that are pretty great. For example you can use Eagle to take screenshots and it even comes with a  browser extension for that purpose. The extension allow you to take screenshots as normal with both defined areas and the whole page, but it can also scrape all images from a webpage.  You can filter the images based on size before downloading from the page.

You can easily drag and drop images between applications to either import into Eagle or from Eagle into Photoshop or Sketch for example. You can define auto tagging so images put into a specific folder automatically get a defined tag. Eagle will identify duplicates so you can keep the assets clean and nice. You can also password protect images in case you need to keep them out of prying eyes.

It should be mentioned that Eagle also works great with videos, audio and even fonts.

In short this is an amazing product!

Watch the video:

A nice new update for Sketch mac app came out yesterday. It comes with some nice quality of life additions and some bugfixes as well as two new features. It's a good start on the new year I think.

New Smart Layout controls

In this release we got a nice new addition where we can set minimum width for symbols. This is useful for making sure your assets look good when doing overrides as well as controlling size for tap and other things. Maximum dimension is coming soon as well so you can get even more control.

Quote

Now, when you give a Symbol Smart Layout properties, you’ll see a field for minimum height (for vertical layouts) or minimum width (for horizontal layouts) under the Layout panel in the Inspector.

A better way to save

A nifty new interface for the save function provide the option to save to cloud or locally in one dialog instead of two.

Quote

We’ve completely rewritten our save dialog to give you flexibility and control about where your documents live when you hit save. That way you can experiment and try out new ideas without worrying that your document is saving to Cloud and already being shared with your team.

A whole host of improvements and bug fixes

Quote

 

With the first release of the year, we wanted to take some time to make some small but important improvements across the app, along with a round of bug fixes that address some of the most common issues you’ve been running into. Here are some of the highlights:

• We’ve added Libraries tabs to the sidebar of the Documents window, giving you a quick way to find Libraries you share with your Team(s) on Cloud.
• The Components Panel and popover should feel faster and smoother when you’re working with Libraries of all shapes and sizes (and we’ve got more improvements on the way in future updates).
• We’ve improved the accuracy and appearance of documents with missing fonts, especially for text layers with specific alignment or Smart Layout settings and where multiple instances of the same text layer appear in a single document.

 

Not the largest update, but still some nice quality of life changes. A larger update is scheduled for later this month it seems according to the release post.

New Smart Layout controls, better document saving and more — what’s new in Sketch?

BLOG.SKETCHAPP.COM

---

After an exciting end to 2019, we’re kicking off the year with an update to the Mac app. Here’s what’s new in Sketch 62…

Every year Pantone present a color to represent humanity’s hopes and aspirations for the coming year. Each year it stir some controversy, like last years Living Coral (PANTONE 16-1546) that caused quite the stir. This year the Pantone selected is the Classic Blue (PANTONE 19-4052).

"Instilling calm, confidence, and connection, this enduring blue hue highlights our desire for a dependable and stable foundation on which to build as we cross the threshold into a new era."

Procreate 5 has been announced and with it comes some cool new features such as brand new cutting edge graphics engine and the new brush studio. I will try to tell you about five of them that I think is pretty cool and that i think will really make this upgrade worth while.

Procreate 5 is built on a new graphics engine called Valkyrie. This will not only improve performance, but will also allow new features such as importing Photoshop brushes and customizable brush options.

"the new cutting-edge graphics engine designed to elevate Apple Pencil and iPad Pro to new heights."

Brush studio is a brush editing tool that will let users combine two brushes to create custom Dual Brushes, and features over 150 different brush settings. Users will be able to manually adjust the Apple Pencil’s pressure and tilt settings, and use the built-in texture generator to create their own brushes. This will give you get hundreds of different brush variables to play with.

"Seeking the perfect brush to suit your style? Craft your own from the ground up. Using the built-in graphically accelerated texture generator, you'll be able to make the brush you need in seconds."

Animations, which was introduced back in April is given an upgrade as well. Animation Assist has features like onion skinning, (which shows a faint outline of the previous layer, and instant playback.

Colors are given some new dynamics options which will allow multiple colors in one brush stroke based on how much tilt and pressure is applied. We will also see support for CMYK, which is great for users working with print, and RGB ICC profiles.

"Enjoy a level of control unmatched by any other platform. Transform colors on the fly with complete control using Color Dynamics and Apple Pencil's pressure and tilt technology."

We will also see a new interface where the users will be able to move around the floating Color Picker and the transform and selection modes have been redesigned for better visibility on the canvas. There's also a new Clone Tool so you can  duplicate textures.

"Working in harmony with the entire suite of Procreate brushes, the new Clone Tool and CMYK support will change the game for concept artists and digital painters. There’s something here for everyone."