Skip to content

The “Maven Box”: an Arduino Controller for Software Developers

maven-box

As a software developer, you sometimes want to grep some tools and build some “real” hardware. If you can implement the software for this hardware on your own – even better!

I’m a big fan of JavaFX and Arduinos, so I thought I would combine these two interests by building the “Maven Box”. It’s an Arduino board connected with switches, push buttons, LEDs and a rotary encoder that allows you to control a JavaFX based UI. The idea of the UI is to select a CoreMedia workspace (e.g. a workspace of CoreMedia 7 or CoreMedia 8), select a branch and trigger a Git update and a Maven build. Once the build is finished, a notification is shown that you are now able to use this workspace in IDEA.

In addition to this “project control”, six LEDs indicate which pipelines are currently available. This is very helpful, because it’s annoying to start your local Studio instance just to realize the connected repository is not available.

The whole project is not hard to build and I’ve written complete instructions which are available on instructables.com:

http://www.instructables.com/id/The-Maven-Box-an-Arduino-Controller-for-Software-D/

 

Sketch and Principle: UX Prototyping on Scale

The CoreMedia UX team has been busy working on a new vision for our UI. We wanted to explore new interaction concepts and interface design using an example story that leads through the major parts of our product. However, our product is huge so the story became quite long.

We ended up with a Sketch prototype of more than a hundred artboards that we painstakingly animated in Principle. Now, creating clickable prototypes with beautiful animations is super fast and easy with Sketch an Principle. But at that scale, we pushed them to the limit. Here are some lessons we’ve learned and pitfalls to avoid.

But first, we would like to express our sincere gratitude to the Sketch-people at Bohemian Coding and Daniel Hooper of Principle. We ❤️ both! They’ve helped us create an amazing prototype.

Design Phases

A project like this goes through several phases. Here is what you’re looking at when you plan a large prototype.

1. Create a Storyboard

We started out drafting our story on a dozen whiteboards. First, we drafted the key points of our protagonists through the story, then we began creating a storyboard that depicted each step. We came up with 27 steps, or waypoints, through the story. This was a group effort and we gathered feedback during and after this phase.

office-lens-20160711-144453-1

Here is one of our storyboards. We had several of those.

The storyboard already included the structure and key interactions of the app but was still very rough in terms of micro interactions and design. The whole storyboard was saved in our wiki. We gave each step a number and a little explanation so we wouldn’t be confused as the project went on.

2. Design in Sketch

Then we began converting the whiteboard drawings to a high fidelity prototype. Let’s call this the design phase, which was also a group effort. We already had in mind that the artboards we created would eventually be imported into Principle so we created artboards for each and every interaction. Those were the sub-steps of our storyboard steps. For example, if the user would open a menu, we would create another artboard for this sub-step. We gave each artboard a number comprising the storyboard-step-number plus a number for the sub-step, e. g. “step_4_2”.

Screen Shot 2016-12-09 at 11.39.46.png

This is our symbols page. As you can see, you can see nothing. It’s really cluttered.

This took a while in the beginning because we had to design things like buttons, panels, or content elements as we went through the story. Once these were all in place, adding new steps became much quicker. Most time, however, was spent on discussions about how things should work, not how they should look.

3. Consolidate your Design

Then we entered what I would call a consolidation phase. We imported our design into Principle and found a million little things that didn’t work right. We had to make our Sketch file Principle-ready (see next section). This phase includes most of the tedious work and is a job for one person. At this stage, we didn’t do any complex motion design. In fact, we only animated the transition from artboard to artboard (not from any layers) on tap so we could go through the whole story step by step.

Importing from Sketch took more than 2 minutes every time, by the way, so make sure your coffee kitchen is well stocked.

4. Design Transitions

At last we entered the motion design phase where we created nice looking transitions between certain steps. This is the part where Principle really shines though you have to understand the way Principle animates pretty well. Especially Drivers can become pretty complex.

In our prototype, the story can only be told in one specific way from the beginning to the end. This is typical for Principle prototypes but with more than a hundred steps it is sometimes hard to remember which step comes next. It is critical to really practice the story before presenting it so the click path comes off as natural.

How to Make Your Sketch File Principle-Ready

Remove Masks

Limitation: Principle likes to flatten certain layers to bitmaps (see documentation for more info). That’s often OK but if you have to interact with individual elements of your design they can’t be flattened. In our experience, masks were most often the culprit. Solution: sift through all of your symbols and remove all the masks in your design. Try to be clever with the order of your layers instead. It is OK for layers to stick out of the artboard, those parts won’t be visible in the Principle viewer. This is all of course a bit frustrating, especially considering that Principle does support its own flavor of masks (clipping sublayers).

Detach Nested Symbols

Limitation: Principle can import symbols completely with overrides but only one level deep. So if you’re using overrides on nested symbols you’re out of luck. Solution: at the end of your design phase in Sketch, detach all nested symbols. Of course, this makes changes after this phase difficult so you really have to make sure that your design is solid at this point.

Principle’s Components (same as symbols in Sketch) are not helpful here yet but maybe they’ll get there eventually. We didn’t use Components at all.

Detach Resized Symbols

Limitation: Sketch has this amazing ability to resize symbols and groups. However, this feature does not work reliably for text and images. We’ve experienced some glitches on resized layers where margins were just all over the place. Solution: at the end of your design phase in Sketch, detach all resized symbols that give you trouble. This is also what Principle does internally when importing your Sketch file. You will notice that Sketch is to blame here, not Principle.

Avoid Unexpected Renaming

Limitation: In the consolidation phase, a normal workflow is importing something from Sketch into Principle (☕️), finding a mistake, going back to Sketch to fix it, and then re-importing(☕️☕️) everything in Principle. However, that can sometimes lead to unintended results as Principle sometimes renames layers in an unexpected way. Solution: In the consolidation phase in Principle, before re-importing from Sketch, just select all layers of all artboards with the mouse (not ⌘-R) and delete them. All your artboards and the transitions between them will remain. This way, Principle can start with a clean slate when doing a re-import. You’ll lose all other interactions though so make sure you’ve consolidated your design thoroughly before moving on to detailed animations.

Also, make sure to follow the tips in the next section to avoid unexpected renaming.

How to Work with Large Sketch Files

Name Your Layers and Keep them in Order

The first keyboard shortcut you should learn in Sketch is ⌘-R for renaming your layers. It is very important to name every layer and to keep everything in aptly named groups that correspondent to the hierarchy of your design.

Pro tips:

  1. When you use overrides, make sure that the layers within your symbols are redundantly named. For instance, if you have a symbol for a primary button, name the text layer “Label primary button”. This redundancy is not needed for Sketch but when you import your design into Principle this pattern lowers the risk of layers that are identically named and potentially confusing to Principle.
  2. Keep the layers and groups in the same order from artboard to artboard. This helps Principle identify identically named layers.
  3. Use Rename It for Sketch. It is a great plugin that helps with bulk renaming of layers. Also, did you know about Sketch’s ⌘-F? It’s the fastest way to find all layers named “Rectangle”, for example.

Use Symbols for Everything

Use symbols for everything. Also, nest your symbols. Your artboards should pretty much only contain symbols and the few things that are specific to that very artboard. In programming, this mantra is called “DRY” (don’t repeat yourself.) We’ve learned the hard way when we had to go through all the artboards and replace tons of layers with one big symbol that we had neglected to create.

Here are some more tips on organizing your symbols.

Use a Staging Page for Animation Tests

Every Sketch prototype will have at least two pages; one for the prototype and one for symbols. When trying out animations between artboards, it can help to create another page, e. g. “Staging” in which you copy and paste only the artboards that you are currently working on. This makes importing them into Principle much faster. Principle will only import the page that is currently open in Sketch.

Be Prepared for Some Inconveniences

Here are some things that made our life harder:

  1. Work can’t be parallelized very well. Given the scope of our undertaking we did most of the work as a group anyway, but the consolidating phase could have been sped up immensely if it was possible to work on a Sketch file in collaboratively. There are already tools out there that can do this. We will definitely evaluate other tools when we do something similar again. Leave a comment if you can recommend another toolset.
  2. Navigating artboards both in Sketch and in Principle. If you want to navigate from the beginning to the end you’ll have to scroll for a long time or zoom out to a point where you can’t distinguish artboards anymore. And on the symbols page you can’t find anything anyways.
  3. Text overrides in Sketch are cool and we used them all the time but for long strings the input field is just too small and cumbersome.
  4. Overriding images in symbols is awful if images don’t have the same aspect ratio. This cost us so much time.
  5. Importing into principle takes a looooong time even if only one tiny bit has been changed in the Sketch file. It should offer importing specific artboards.
  6. It’s hard to find out if symbols are ever used or not. This makes it impossible to clean up our cluttered symbols page.

 

We hope these tips were helpful to anyone who is considering Sketch and Principle for a large project. If you would like to add something, please feel invited to comment.

Happy Sketching!

What if Google and Facebook got it all wrong?

7777982086_adab3806e5_k

Google and Facebook are without any doubt two of the greatest entrepreneurial success stories of the digital age. Both companies serve billions of users. They provide various services directly and are critical enablers of countless third party services. Both companies have unimaginable technical and financial capabilities. They are the winners of our era. The caught an enormous wave and surfed it well. But what if they got the core of their business wrong?

What if Google and Facebook focused on the wrong monetization strategy from a long term perspective? What if ads are inferior to transactions? And what if we can watch our future unfolding in China today?

There are a growing number of signs that this might be true. One of the most revealing is the rapid evolution of China’s e-commerce market and Tencent’s rise to the top as China’s most valuable tech company.

Tencent’s success point to a business model that goes beyond ads: direct transactions. Instead of mainly selling ad impressions to advertisers while – more often than not – annoying users, Tencent decided to sell virtual goods – and now physical goods – by delivering these commercial transactions directly to consumers on any channel or device. Give people the chance to immediate buy what they want, when they want it. If you can see it, you can buy it: right here, right now on your mobile device.

Tencent’s WeChat application is revolutionizing e-commerce. It integrates orders, payments and customer care right into your chat app with tremendous success. 9 out of 10 people in urban areas in China use WeChat already.

And by all measures Tencent’s approach has beena huge success, enabling them to reach more than $10B in revenue in the first half of 2016. That’s 48% more than a year before. And all that growth happened while maintaining a net margin of 30%. Even very happy Amazon shareholders might feel jealous of these numbers.

Unlike Google and Facebook, who generate around 90% and 97% of their revenues through advertisements, Tencent generates the majority of their revenue through enabling direct transactions.

No doubt, digital ads are a growing business in China and will generate many billions in revenue. But advertising is not the dominant business model that it is in Silicon Valley. And it might never be that way.

Even in the U.S., Google is confronted with signs of trouble. Google is no longer the #1 search engine for product searches. That title now goes to Amazon. Google had lost the race and Amazon is pulling further ahead. In 2016, 55% (up from 44% in 2015) of consumers use Amazon to search for product while only 28% (down from 34%) use Google. This creates significant long term problems for Google because these are the best searches to monetize. Google knows this and started Google Shopping a while ago to compete with Amazon. It is a great service that I personally enjoyed using. However, the above numbers seem to suggest this was too little, too late.

Given the growing success of ad blockers on mobile devices, we can expect even more headwind for any forms of digital advertising–old and new–that disturb or annoy users. Nobody likes to be bombarded with ads, but most of us like to buy nice things. And that might be the winning monetisation strategy of the future: making it easier to buy the things we like.

Apple and Facebook seem to have taken the WeChat lesson to heart. Both companies have opened up their messaging platforms for external apps, enabling transactions right inside a chat and adding the ability to make payments or move money around. You can order your Uber ride, send money with Square Cash or share your favorite fashion items with the YOOX app inside Apple’s iMessage. Plus you can use Apple Pay on your Apple device to pay for stuff on the Internet. Not to be forgotten, Facebook turned their whole platform into a marketplace. Now, all companies can start selling products directly from their Facebook page.

In the future, shoppers can expect to have more and more options to spend their money in more social ways without leaving their favorite apps. The distance between a piece of content showing a product and the purchase of that product will further decrease. Amazon’s One Click Shopping will be the norm wherever you are. And since we spend most of our time in messaging apps, that is where we will discover and buy most new things.

Why didn’t Facebook try to enable transactions earlier?

They did. For many years, Facebook launched efforts to monetise through transactions and a digital wallet built into their platform. They haven’t been successful though. The main reason that ads ended up to be dominant in Silicon Valley might have been the starting point. When Google and Facebook started their monetisation efforts, the U.S. had already a sophisticated retail ecosystem with broadly accepted payment option and significant advertising budgets. The Internet penetration was significant and growing even though there was no mobile Internet yet. In this environment online advertising worked pretty well compared with all the other options. It was relatively easy to implement, scalable and efficient. It just worked.

Trying to monetise online transactions was a much harder thing to do. It also wasn’t a must have for American shoppers. They were pretty satisfied with their malls and super stores and could usually buy whatever they wanted.

Not so much in China. China lacked all this. They lacked a comparable retail infrastructure and the growing middle class didn’t have easy access to many retail options. They main problem to solve was enabling people to spend money and buy stuff. Fortunately, they had the mobile Internet from the start and no legacy system in their way. China’s Internet ecosystem leapfrogged the established patterns of the western world.

What does this all mean for brands?

Brands might be the biggest benefactors of this development. More platforms to reach more customers will enable successful brands to sell more. To thrive in such an environment, brands will need to provide compelling content and engaging experiences on various current and future platforms. Shoppable products will live on mobile apps, mobile sites, messaging platforms, social networks, online marketplaces and new platforms we haven’t even imagined yet. But before a product can be ordered, it needs to be seen and it needs to look convincing. Therefore, there will be increasing demand for great content that can be used in a wide range of commercial scenarios.

What does this mean for publishers?

Publishers might be on the losing end of this. They used to own a big piece of our attention and sold it for a nice profit to advertisers. The Internet shifted our attention to other things and to new players like Facebook and Google. Publishers saw a huge decline in revenue. Instead, Google and Facebook were able to capture our attention and sell it more efficiently and at a much bigger scale. In a world where enabling transactions replaces ads as the main monetization model, publishers might have to rethink their online and mobile strategies.

Photo Credit: David Goehring via Compfight cc

CoreMedia Soulbottles

CoreMedia is really special… and a great working place. The recent proof for this: the introduction of soulbottles at CoreMedia. Each employee got a bottle with:

  • CoreMedia Logo
  • Personal Name Tag
  • CoreMedia Values  as recipe of the “CoreMedia Cocktail”
  • and as developer of a Web Content Management System of course: a “reload” button at the bottom of the bottle

The soulbottles are a result of a discussion at a CoreMedia Open Space and four colleagues (thanks to them!) driving the idea until it got implemented.

And now? CoreMedia became even more special. Instead of boring bottles made of plastic now employees are running around with their soulbottles, easily carrying them around using the nice handle.

 

Configuring the MDM login screen with xrandr for mirrored multiple monitors

Setting up my new laptop with Linux Mint 18 Cinnamon I faced the challenge that on a multi-monitor set up the MDM login screen did not show up well: While it looks great on the laptop monitor the external monitor has the wrong resolution and shows only a part of the login box.

Searching for a solution I stumbled across a post at Segfault (News from the Linux Mint development team):

This post was really helpful to eventually evolve to my solution. I needed a somewhat different approach than in the fixed call to xrandr because I sometimes switch working places. So it needs to be more generic. And the result is this xrandr setup placed directly in front of the exit 0 call in /etc/mdm/Init/Default:

PRIMARY=`xrandr -q|awk '/connected primary/ { print $1 }'`
if [ "x$PRIMARY" = "x" ] ; then
  # take the first one
  PRIMARY=`xrandr -q|awk '/ connected/ { print $1 }'|head -n 1`
fi

if [ "x$PRIMARY" != "x" ] ; then
  SECONDARY=`xrandr -q|awk '/ connected/ && $1 != $PRIMARY { printf "--same-as %s ", $1 }'`
  if [ "x$SECONDARY" != "x" ] ; then
    xrandr --output $PRIMARY --mode 1920x1080 $SECONDARY
  fi
fi

What the script does:

  1. see if xrandr already knows some primary screen to take this as reference
  2. if there is no primary screen take the first connected screen as primary screen
  3. if a primary screen could be determined choose all secondary screens which are all connected screens, which are not equal to the primary screen
  4. add --same-as for all secondary screen
  5. only if primary and secondary screen are present: use xrandr to set up all screens as mirrored screens; use resolution 1920×1080 which fits best for all working spaces

5 x 5km = 2:12h

Der Muskel wird durch starken Gebrauch gestärkt, der Nerv hingegen dadurch geschwächt. Also übe man seine Muskeln durch jede angemessene Anstrengung, hüte hingegen die Nerven vor jeder.

Arthur Schopenhauer

Einige CoreMedia Mitarbeiter kräftigen ihre Muskeln regelmäßig bei gemeinsamen nervenberuhigenden Laufeinheiten in der Mittagspause oder nach Feierabend. Die Teilnahme am diesjährigen Mopo-Team-Staffellauf war damit willkommene Abwechslung und Herausforderung. Fünf CoreMedianer ließen auf der jeweils 5km langen Runde durch den Hamburger Stadtpark ihre Muskeln spielen. Unterstützt und nervlich gebändigt wurden die CoreRunners durch Rhea, die den Papierkram erledigte, für Verpflegung sorgte und am Streckenrand fleißig motivierte. Erfreuliche Einzelleistungen und exzellenter Teamgeist mündeten in einer Zeit von 2:12:23 und damit Platz 321 von 986 gestarteten Teams.

Mopo Staffellauf 2016

Die CoreRunners: Patrick, Kerstin, Eva, Rhea, Karo und Peter (v.l.)

Farbwechsel

Unser letzter Blog-Eintrag vom Juli zeigt Fotos aus unserem leuchtend grün gestrichenen Chill-Out-Raum.

Das “Chill-Out” erfüllt bei CoreMedia verschiedenste Funktionen. Es dient uns allen als Küche, Aufenthalts- und Kickerraum, Kaffeeanlaufstelle, Obststand, Müslibar und Treffpunkt für ein kühles Getränk zum Feierabend am Freitagabend. Um es noch gemütlicher und einladender zu gestalten, verpassten unsere Auszubildenden und dualen Studenten dem Chill-Out vor Kurzem einen neuen Anstrich.

IMG_7817

IMG_7832

Leuchtend Grün wurde durch ein entspanntes Grau-Blau ersetzt, und die Wände bekamen auch eine neue Dekoration. Durch die – manchmal auch in Hamburg – hohen Temperaturen war die Arbeit sehr schweißtreibend. Doch der Einsatz hat sich gelohnt: Das Ergebnis kann sich sehen lassen!

IMG_0021

Vielen Dank, dass ihr euch so ins Zeug gelegt habt und nun ein frischer Wind im Chill-Out weht!

Frohes Neues!

DSCF8974

Man muss Feste feiern, wie sie fallen. Und bei CoreMedia fällt Neujahr auf den 1. Juli, denn an diesem Tag beginnt unser neues Geschäftsjahr. Grund genug also, am vergangenen Freitag auf das Erreichte anzustoßen und das neue Jahr gebührend zu begrüßen.

DSCF8971

Schon nachmittags sorgten die obligatorischen Neujahrsberliner – dankenswerterweise ohne Senffüllung –  für einen ersten Zuckerflash.

DSCF8997

Abends erhielt der Magen sein aus Kartoffelsalat, Würstchen und Sekt bestehendes Kontrastprogramm. Kulinarisch fühlte man sich damit ebenso ans kalendarische Jahresende versetzt wie dank des von Petrus spendierten Regenwetters beim Blick aus dem Fenster.

DSCF8976

Na dann, happy new year and a little more sunshine.

Sketch vs. OmniGraffle in UX Design

OmniGraffle has been used as a staple in UX design for more than a decade. This position has been challenged in the past 5 years though. What does Sketch do differently that has convinced so many UXers to switch?

The go-to product for many UX designers was, and maybe still is, OmniGraffle. Since it has been on the market for over a decade, many professionals have developed a high level of efficiency and expertise using it.

If you follow the trends on twitter, producthunt, or dribbble, you may have noticed that a great deal of UX related posts have something to do with Sketch. Many people seem to be convinced: Sketch is the new workhorse in UX design. How was Sketch able to become such a capable contender to OmniGraffle? Let’s analyze the differences to find out.

(This post compares Sketch 3.6 with OmniGraffle Pro 6.)

Features

At times, OmniGraffle’s background as a diagramming tool shines through. This makes OmniGraffle look less focused because it offers options that are usually not needed for interface design, for example connected shapes or diagram layouts. OmniGraffle is also less restricted to a specific medium: you can select from a wide array of measuring units and paper formats. Sketch, however, is clearly made for the screen. Everything is measured in pixels, with support for arbitrary pixel densities.

Both Sketch and OmniGraffle come with an almost identical structure that has a list of pages/canvases and layers/artboards, respectively, on the left and a bunch of properties on the right. Users who know one tool will not be completely lost in the other. However, there are some differences that affect each tool’s efficiency.

Groups and Layers

Grouping and layering shapes have to be used in any sufficiently complex design. OmniGraffle comes with a hierarchy of canvases, layers, groups, and shapes. I believe that most people will create a canvas for every screen, a layer for every large component, and a group for every set of shapes that belong together logically. Groups can be nested to create logical hierarchies. Layers always fill the whole canvas; they can only be moved on the z-axis.

A similar thing is happening in Sketch, albeit with different names: On the top are pages, which contain Artboards, which contain groups, which contain shapes (called layers in Sketch). In Sketch, grouping is more powerful than in OmniGraffle. You will find yourself grouping large components as well as sets of small shapes for organizing your work. Artboards, on the other hand, are often used for different screens. Pages can be used to organize different parts of an app, or to temporarily deposit unused parts.

Grouping, as mentioned, is done better in Sketch. This is due to the fact that you can see the contents of nested groups in the Layer List, and that you can easily select every element, no matter how deeply it is nested, with +Click. (Something similar works with Alt+Double Click in OmniGraffle, but you end up in the text edit mode of the selected shape.) In OmniGraffle, you can only ever see the elements on the first hierarchy level.

Another key difference that cannot be understated is that Sketch encourages you to name your elements. Renaming anything is only a +R away. This results in well-structured documents that are searchable and easy to work with. You can rename shapes in OmniGraffle as well (in the properties tab of the inspector) but that doesn’t help much for nested groups. Sketch also offers better keyboard navigation options (use Tab, Shift+Tab, Return, and Esc) for all deeply nested elements. Not that OmniGraffle doesn’t have keyboard navigation (use Tab, Shift+Tab, and +Cursor Keys) but they don’t work great in complex groups.

All in all, organizing your work is much easier in Sketch than it is in OmniGraffle because it has superior grouping and naming capabilities.

Edit: OmniGraffle 7 has caught up with Sketch in this area. Groups can now be expanded and looked into. Renaming has become easier as well though there still seems to be no keyboard shortcut for that. The two are therefore almost equal in terms of organizing your file, with small advantages for Sketch.

Component Reuse

I believe I can speak for all of us when I say that we don’t want to do repetitive work all the time. We want to design a button once and then reuse it whenever we need it again. Who does it better?

OmniGraffle

OmniGraffle has a vast array of features that help you speed up your UX work.

Stencils

Stencils are shapes or groups of shapes that you can drag onto your canvas. When you have a well-prepared stencil library, this makes prototyping very fast. You can extend your stencil library while you work. Once on the canvas, the stencils can be edited just like any other shape. This very flexible approach is also a problem: changes to one instance of a stencil don’t propagate to other stencils. So if you create a stencil ‘on the go’ and decide you want to change something about it, you’re out of luck.

At CoreMedia, we have a great stencil library for all of our widgets and icons. Especially for icons, though, this has been a huge amount of work for us. Depending on how you manage and store your icons, you might have an easier time.

Shared Layers

You can create layers that are visible on all canvases. In UI Design, I have found this troublesome for everything but website headers. As soon as the position of the element might change, shared layers are not helpful. They can be used to display titles and page numbers in presentations, though.

PDF LinkBack

PDF LinkBacks (I don’t know if that’s what the feature is really called) are the closest thing OmniGraffle has to Sketch’s symbols. You create them once, duplicate them wherever you need them, and when you change one of them, all the other ones change with them. You can even use them in your stencil library (sort of, at least.) They have many shortcomings though.

Copy/Paste Styles

Both programs can copy and paste styles of elements. OmniGraffle does it better though: you can grab individual style attributes or all of them and drop them onto the target. Neat!

Screen Shot 2016-05-31 at 10.55.13

OmniGraffle’s excellent style picker.

Tables

Tables are my favorite feature in OmniGraffle. They allow you to depict tabular data flexibly, but are also useful for creating extremely flexible stencils. If you use OmniGraffle, make sure to master tables. They can really make your life easier.

Sketch

Symbols

Arguably Sketch’s most famous feature are symbols. It works like this: you design your buttons, list entries, menus, etc. once, then reuse them everywhere. Text and images can be overridden for each instance. Since version 3.7, nested symbols are possible as well. And since version 39, they can be resized which is particularly useful.

Changes to a symbol are immediately visible in all instances. What is a little strange is that, when you store all your symbols on the special symbols-page, you can’t edit them in situ anymore. This makes it hard to see the changes in relation to the surroundings.

Shared Styles and Text Styles

You can think of shared styles as CSS classes for your shapes. If you want to make sure all your, say, toolbars have the same color, give all of them the same shared style. Want to change the color of all toolbars? Just change it once, then update all other toolbars with the click of a button. You can even extricate the styles as CSS code.

Shared Text Styles work the same but for text. This helps a lot with typography, especially for website designs.

Copy/Paste Styles

Like in OmniGraffle, you can copy and paste styles. Sketch lacks methods to selectively copy certain style properties from one shape to another.

To conclude, Sketch wins again simply because its features are geared towards UI design. Both programs could benefit from better search options for stencils and symbols though.

Vector Paths

If vector paths (Sketch calls them vectors, OmniGraffle calls them curved lines) are for some reason important in your design, I would certainly recommend Sketch over OmniGraffle. It is way ahead in all aspects and it keeps improving.

Interoperability

Both tools have excellent exporting capabilities. OmniGraffle supports a great number of formats, while Sketch has a handy slices-feature. Importing from other tools is limited in both. Sketch seems to be slightly more lenient with Adobe file formats (which it flattens to a bitmap), but you can always copy and paste from Adobe programs into OmniGraffle as well. Opening PDFs is not well supported in either programs, with Sketch sometimes even failing to render PDFs correctly that it exported itself.

Ad-hoc sharing of your work is easier in Sketch as you can just give your co-workers a link to an HTML-version that is hosted on your local machine. There is also a cloud sharing option which is currently in beta status. You can also view your designs on a connected iPhone using the Sketch Mirror app. In OmniGraffle, however, you can tie simple actions to elements or groups which allows you to create click dummies. These are even retained in exported PDFs which makes it practical for sharing with your colleagues.

You’ll find that support for the Sketch file format in prototyping tools is staggering. The only tool that can read the OmniGraffle file format is, to my knowledge, LucidChart.

If you were to make the decision to go with either Sketch or OmniGraffle, a soft factor could be the community. To make it short, Sketch has the advantage here. It dwarfs OmniGraffle in submissions to producthunt about 100:1, many of which are about community-created content around Sketch. It has a larger eco-system regarding plugins (which can be written in JavaScript (actually CocoaScript but it works the same), compared to OmniGraffle’s AppleScript), resources, and exchange of knowledge. There are also community events in the US and Europe for Sketch, but none for OmniGraffle as far as I am aware.

So, Sketch is clearly ahead in this area as well. The team behind Sketch manages this with a staff of 15, compared to OmniGroup’s 70 (who work on three other products besides OmniGraffle, as of 2016.)

Summary

I believe that OmniGraffle has an advantage in one area of UX work: low fidelity prototypes. These can be created blazingly fast and, if need be, beautified later with a little more effort.

For anything else, Sketch is the better choice. It has a clear focus on screen design and helps you create highly organized documents. It also has the superior eco system of plugins and community.

Related: Find out how Sketch fares against Photoshop and Fireworks.

Nearly Stable Teams

Long-lived teams with stable membership over a long duration are generally seen as desirable. But there are downsides, and therefore I argue that development teams should exchange some members every now and then, especially in a product company that does not think in projects.

Let’s ask some authorities on the subject.
* The Scrum Guide does not mention how long a team should exist. No help here.
* Reading about product ownership or user stories, we find the hidden requirement to keep your team largely constant. Empirically measuring past velocity and forecasting future velocity only makes sense when the team velocity is not influenced all the time by changing team size, or by people leaving and other people being onboarded.
* When reading about feature teams, you find that work should come to the teams, the teams should not be formed around the work. The team is the fixed part, work (and knowledge) come to them.
* The Agile Manifesto asks that people voluntarily form a team around a vision. There is a project thinking behind this and the notion that the team is stable until the project is done and the vision fulfilled. The principle is difficult to map to a company with several products in different stages of their lifecycles. Additionally, taken literally, people may leave the team when motivation wanes, and others who feel the urge to help the project along may ask to join the team.
* Tuckman’s team model tells us that re-forming leads to storming, meaning that awful touchy-feely conflict overhead waste of time as opposed to the performing stage.

I can see that there is merit in the principle of stable teams. When you start out in an organization where people are pulled off projects and reassigned almost arbitrarily by managers, juggling several competing assignments at once, it is probably very beneficial to demand that a person work on one project for an extended duration of time, such as several days in a row. The longer one works toward the same vision, the higher the potential for identification with it. A long-term perspective for the team is the foundation for long-term team goals like learning and sharing knowledge with each other, improving quality of the deliverable, raising craftsmanship, and investing in relations among the team members.

However.

My observations convinced me that this ideal is not to be pursued for several reasons.

For one, there is diversity. Diversity is generally seen as capability-enhancing for a team. There is diversity in work style, team role, experience, culture, gender and so on, but also in duration of team membership. Newcomers to a team are able to question an established consensus in a way the others cannot.

Then there is the team silo and local optimization. The longer a team works on its own, the greater the risk of losing the big picture and focusing on the local situation.  When people switch teams every few months, informal bonds remain in place and people find it easier to connect across team boundaries. This is a powerful countermeasure against local optimization.

A stable team might over-optimize and establish routines and experts for certain topics. The possibility and the reality of a slow team churn enforces a culture of knowledge sharing, because in that situation it is dangerous to have a single point of knowledge for anything.

Finally, there is real life. People take a year off to travel the world or to raise kids, people leave and people are hired, so there will always be a change of faces in all teams. The more a team is experienced in handling these situations, the quicker they will pass through the storming phase and hardly see the storming as any bother at all.

To sum up, from my observations the recommendation is to make sure that every team exchanges at least one member every few months. If it does not happen anyway through new hires and the like, there are violence-free ways to ask people to take on other roles and to shuffle the teams by a small degree.

Just avoid the extremes: Do not reassign people by the hour, and do not keep teams stable for years. A healthy dose of change makes a team more resilient.