Myinterface

The virtual realm is uncharted territory for many designers. In the last few years, we’ve witnessed an explosion in virtual reality (VR) hardware and applications. VR experiences range from the mundane to the wondrous, their complexity and utility varying greatly. Taking your first steps into VR as a UX or UI designer can be daunting. We know because we’ve been there. But fear not! In this article, we’ll share a process for designing VR apps that we hope you’ll use to start designing for VR yourself. You don’t need to be an expert in VR; you just need to be willing to apply your skills to a new domain. Ultimately, as a community working together, we can accelerate VR to reach its full potential faster.

In the top-left quadrant are things like simulators, such as the rollercoaster experience linked to above. These have a fully formed environment but no interface at all. You’re simply locked in for the ride.

In the opposite quadrant are apps that have a developed interface but little or no environment. Samsung’s Gear VR home screen is a good example.

Designing virtual environments such as places and landscapes requires proficiency with 3D modelling tools, putting these elements out of reach for many designers. However, there’s a huge opportunity for UX and UI designers to apply their skills to designing user interfaces for virtual reality (or VR UIs, for short). The first full VR UI design we did was an app for The Economist, created in collaboration with VR production studio Visualise. We did the design, while Visualise created the content and developed the app.

We’ll use this as a working example throughout the next section, in which we’ll lay out an approach to designing VR apps, before getting into the nitty-gritty of designing interfaces for VR. You can download the Economist app for Gear VR from the Oculus website.

A Process For VR UI Design Link

Whereas most designers have figured out their workflow for designing mobile apps, processes for designing VR interfaces are yet to be defined. When the first VR app design project came through our door, the logical first step was for us to devise a process.

TRADITIONAL WORKFLOWS, NEW TERRITORY LINK When we first played with Gear VR by Samsung, we noticed similarities to traditional mobile apps. Interface-based VR apps work according to the same basic dynamic as traditional apps: Users interact with an interface that helps them navigate pages. We’re simplifying here, but just keep this in mind for now. Given the similarity to traditional apps, the tried-and-tested mobile app workflows that designers have spent years refining won’t go to waste and can be used to craft VR UIs. You’re closer to designing VR apps than you think! Before describing how to design VR interfaces, let’s step back and run through the process for designing a traditional mobile app.

1. WIREFRAMES

First, we’ll go through rapid iterations, defining the interactions and general layout.

2. VISUAL DESIGN LINK

At this stage, the features and interactions have been approved. Brand guidelines are now applied to the wireframes, and a beautiful interface is crafted.

3. BLUEPRINT LINK

Here, we’ll organize screens into flows, drawing links between screens and describing the interactions for each screen. We call this the app’s blueprint, and it will be used as the main reference for developers working on the project.

Set Up Link CANVAS SIZE

The simplest problems can be the most challenging. Faced with a 360-degree canvas, one might find it difficult to know where to begin. It turns out that UX and UI designers only need to focus on a certain portion of the total space.

We spent weeks trying to figure out what canvas size would make sense for VR. When you work on a mobile app, the canvas size is determined by the device’s size: 1334 × 750 pixels for the iPhone 6 and roughly 1280 × 720 pixels for Android.

To apply this mobile app workflow to VR UIs, you first have to figure out a canvas size that makes sense.

Below is what a 360-degree environment looks like when flattened. This representation is called an equirectangular projection. In a 3D virtual environment, these projections are wrapped around a sphere to mimic the real world.

The full width of the projection represents 360 degrees horizontally and 180 degrees vertically. We can use this to define the pixel size of the canvas: 3600 × 1800.

Working with such a big size can be a challenge. But because we’re primarily interested in the interface aspect of VR apps, we can concentrate on a segment of this canvas. Building on Mike Alger’s early research on comfortable viewing areas, we can isolate a portion where it makes sense to present the interface. The area of interest represents one ninth of the 360-degree environment. It’s positioned right at the centre of the equirectangular image and is 1200 × 600 pixels in size.

Let’s sum up: “360 View“: 3600 × 1800 pixels “UI View“: 1200 × 600 pixels

TESTING

The reason for using two canvases for a single screen is testing. The “UI View” canvas helps to keep our focus on the interface we’re crafting and makes it easier to design flows.

Meanwhile, the “360 View” is used to preview the interface in a VR environment. To get a real sense of proportions, testing the interface with a VR headset is necessary.

Using Avocode, you can visually compare revisions of designs easily.

TOOLS

Before we get started with the walkthrough, here are the tools we’ll need:

Sketch

We’ll use Sketch to design our interfaces and user flows. If you don’t have it, you can download a trial version. Sketch is our preferred interface design software, but if you’re more comfortable using Photoshop or anything else, that would work, too.

GoPro VR Player

GoPro VR Player is a 360-degree content viewer. It’s provided by GoPro and is free. We’ll use it to preview our designs and test them in context.

Oculus Rift

Hooking Oculus Rift into the GoPro VR Player will enable us to test the design in context.

A Process For VR Interface Design Link

In this section, we’ll run through a short tutorial on how to design a VR interface. We’ll design a simple one together, which should take five minutes tops.

A Process For VR Interface Design

In this section, we’ll run through a short tutorial on how to design a VR interface. We’ll design a simple one together, which should take five minutes tops.

Download the assets pack, which contains presized UI elements and the background image. If you want to use your own assets, go for it; it won’t be a problem.

1. SET UP “360 VIEW”

First things first. Let’s create the canvas that will represent the 360-degree view. Open a new document in Sketch, and create an artboard: 3600 × 1800 pixels.

Import the file named background.jpg, and place it in the middle of the canvas. If you’re using your own equirectangular background, make sure its proportions are 2:1, and resize it to 3600 × 1800 pixels.

2. SET UP ARTBOARD

As mentioned above, the “UI View” is a cropped version of the “360 View” and focuses on the VR interface only.

Create a new artboard next to the previous one: 1200 × 600 pixels. Then, copy the background that we just added to our “360 View,” and place it in the middle of our new artboard. Don’t resize it! We want to keep a cropped version of the background here.

3. DESIGN THE INTERFACE

We’re going to design our interface on the “UI View” canvas. We’ll keep things simple for the sake of this exercise and add a row of tiles. If you’re feeling lazy, just grab the file named tile.png in the assets pack and drag it into the middle of the UI view.

Duplicate it, and create a row of three tiles.

Grab kickpush-logo.png from the assets pack, and place it above the tiles.

Looking pretty good, eh?

4. MERGE ARTBOARDS AND EXPORT

Now for the fun stuff. Make sure the “UI View” artboard is above the “360 View” artboard in the layers list on the left.

Drag the “UI View” artboard to the middle of the “360 View” artboard. Export the “360 View” artboard as a PNG; the “UI View” will be on top of it.

5. TEST IT IN VR

Open the GoPro VR Player and drag the “360 View” PNG that you just exported into the window. Drag the image with your mouse to preview your 360-degree environment.

We’re done! Pretty simple when you know how, right?

If you have an Oculus Rift set up on your machine, then the GoPro VR Player should detect it and allow you to preview the image using your VR device. Depending on your configuration, you might have to mess around with the display settings in MacOS.

Technical Considerations LOW RESOLUTION The resolution of the VR headset is pretty bad. Well, that’s not entirely true: It’s equivalent to your phone’s resolution. However, considering the device is 5 centimeters from your eyes, the display doesn’t look crisp. To get a crisp VR experience, we would need an 8K display per eye. That’s a 15,360 × 7680-pixel display. We’re pretty far off from that, but we’ll get there eventually. TEXT READABILITY Because of the display’s resolution, all of your beautifully crisp UI elements will look pixelated. This means, first, that text will be difficult to read and, secondly, that there will be a high level of aliasing on straight lines. Try to avoid using big text blocks and highly detailed UI elements. Finishing Touches Link BLUEPRINT Remember the blueprint from our mobile app design process? We’ve adapted this practice to VR interfaces. Using our UI views, we map and organize our flows into a comprehensible blueprint, ideal for developers to understand the overall architecture of the app we’ve designed.

MOTION DESIGN

Designing a beautiful UI is one thing, but showing how it’s supposed to animate is a different story. Once again, we’ve decided to approach it with a two-dimensional perspective.

Using our Sketch designs, we animate the interface with Adobe After Effects and Principle. While the outcome is not a 3D experience, it’s used as a guideline for the development team and to help our clients understand our vision at an early stage of the process.

We know what you’re thinking, though: “That’s cool, but VR apps can get way more complicated.” Yes, they can. The question is, to what extent can we apply our current UX and UI practices to this new medium? How Far Can VR UIs Go?

INTER-YOUR-FACES

Some VR experiences rely so heavily on the virtual environment that a traditional interface that sits on top might not be the optimal way for the user to control the app. In this case, you might want users to interact directly with the environment itself.

Imagine that you’re making an app for a luxury travel agent. You’d want to transport the user to potential holiday destinations in the most vivid way possible. So, you invite the user to put on the headset and begin the experience in your swanky Chelsea office.

To transition from the office to some far away place, the user needs to choose where they want to go. They could pick up a travel magazine and flick through it until they land on an appealing page. Or there could be a collection of interesting objects on your desk that whisk the user to different locations depending on which one they pick up.

This is definitely cool, but there are some drawbacks. To get the full effect, you’d need a more advanced VR headset with handheld controllers. Plus, an app like this takes quite a bit more effort to develop than a set of well-presented options organized like in a traditional app interface.

VIVA LA REVOLUCIÓN!

The reality is that these immersive experiences are not commercially viable for most companies. Unless you’ve got virtually unlimited resources, like Valve and Google, creating an experience like the one described above is probably too costly, too risky and too time-consuming.

This kind of experience is brilliant for showing off that you’re at the cutting edge of media and technology, but not so great for taking your product to market through a new medium. Accessibility is important.

Usually, when a new format emerges, it’s pushed to the limit by early adopters: the creators and innovators of this world. In time, and with enough learning and investment, it becomes accessible to a wider range of potential users.

As VR headsets become more commonplace, companies will start to spot opportunities to integrate VR into the ways that they engage with customers.

From our perspective, VR apps with intuitive UIs — that is, UIs closer to what people are already accustomed to with their wearables, phones, tablets and computers — are what will make VR an affordable and worthwhile investment for the majority of companies that pursue it.

TIME TO BOARD THE ROCKETSHIP

If your app gets too complex, think about unbundling. Look at what Facebook did with Messenger. They broke out functionality around key actions and put it in their own separate app.

Hamburger menus drive engagement down, slow down exploration and confuse people. If you are reading this, it won’t confuse you, but it damn will confuse others who might be happy to consume your content.

Tabs

Tabs help organize content in categories, like you would under a navigational drawer. People will instantly know how to use it. Use labels or combine it with icons.

Bottom navigation

A close relative of tabs deserving its own category. The pattern is adopted on both platforms – iOS and Android – mostly “always visible” and composed of icons with labels. The navigation bar could be hidden/revealed on downward and upward scrolling. One note that I would add, even though Google recommends not using a description for the inactive icons in some cases, I am strongly for using labels. Don’t make navigation a guessing game for users.

Show more

If there are more menu items that fit on the screen you can add a show more option. Reduce your list to the top 4 actions that you want your users to make and put the remaining items under a modal or popup or even a new page. You have the option to expand your settings here and enrich it as it fits with requirements.

Scrollable navigation

Similar to “Show more” this is another approach for longer lists. Make it scrollable so that users can move it from side-to-side. Icon only solution can work with well educated power users, but make sure to test it before commiting.

Inline

You can lay out top categories in the main application hub. That would be your home page in case of a web app. These groups can be laid out as a list with distinctive headers. Under the categories you can present the content as horizontally scrollable cards for easy access or whatever works best for the content.

Segmented control

If there are only a couple of destinations, you can use a segmented control. All options are visible at once and can be accessed with a single tap.

Don’t hide search

It’s not just navigation that people hide behind the hamburger menu. If search is a key functionality of your app, it needs to be in front of people. Don’t hide it. You can either display it at the top of the screen or have a visible reference which will go into search mode.

Always design with content

I cannot stress this enough. Always design with real content, otherwise you’ll end up with placeholders, lorem ipsums and hamburger menus inside hamburger menus. Content on its own doesn’t make sense, and layouts without content either.

The fact that hamburger menus are a bad choice is backed up by actual numbers and is proven by companies that make money on time spent in-app. So if you have to convince someone – a client, boss or manager – why switching to a more obvious navigational pattern is a good idea, this could help.

As @lukew puts it Obvious always wins. Facebook, YouTube, Spotify did away with it. This is why. Project management company Redbooth switched to bottom navigation after extensive research and doubled usage, in-app time and engagement. Read about it here.

If you need additional colors beyond those you’ve defined in your palette, make use of shades and tints. They will provide a different tone to work with.

60–30–10 Rule

This interior design rule is a timeless decorating technique that can help you put a color scheme together easily. The 60% + 30% + 10% proportion is meant to give balance to the colors. This formula works because it creates a sense of balance and allows the eye to move comfortably from one focal point to the next. It’s also incredibly simple to use.

60% is your dominant hue, 30% is secondary color and 10% is for accent color.

Wall paints, furnitures, accessories.

Color meaning

Scientists have studied the physiological effects of certain colors for centuries. Besides aesthetics, colors are the creators of emotions and associations. The meaning of colors can vary depending on culture and circumstances. That’s why you see black&white fashion stores. They want to appear elegant and sublimely.

Asos is pure black&white with green CTA. It’s made for a reason.

Red: Passion, Love, Danger

Blue: Calm, Responsible, Safe

Black: Mystery, Elegance, Evil

White: Purity, Silence, Cleanliness

Green: New, Fresh, Nature

If you want more check this list — color culture.

Grayscale first

We like to play with colors and tones early in our designs but this behavior can betray you very quickly when you will realize that you’ve spent 3 hours adjusting primary color … It’s really tempting but you should learn to avoid this attitude.

Instead force yourself to focus on spacing and laying out elements. It will save you a lot of time. That sort of constraint is very productive. On the flips side, it doesn’t need to look boring. Try different tones if you want to make it good looking.

One of my work that you can find on dribbble. Simple monochromatic colors and focus on elements.

Stay away from pure grayscale and black

One of the most important color tricks I’ve ever learned was to avoid using gray colors without saturation. In real life, pure gray colors almost never exist. The same goes for blacks.

Darkest color on this image is not #000, it’s #0A0A10

Remember to always add a bit of saturation to your color. Subconsciously it will look more natural and familiar to users.

Believe in nature

The best color combinations come from nature. They will always look natural. The best thing about looking to the environment for design solutions is that the palette is always changing.

To get inspired we only need to look around

Keep the contrast

Some colors go well with each other, while others will clash. There are definitive rules for how they will interact that can be best observed on a color wheel. You should be aware of this methods but it’s not necessary to do it manually.

If you want to learn more about color theory check this article — Color Theory For Designers: Creating Your Own Color Palettes

Get inspired

When we are talking about UI references then dribbble is the best place for it. It also has tool for searching by colors so when you want to do visual research on how particular color was used by other designers then go here dribbble.com/colors

Videos, print design, interior design, fashion… there are so many inspiring places to gather from. Simply don’t be inert to those palettes and save everything that looks interesting.

Often time I like to steal colors from KPOP videoclips. They are gorgeous.

Tools

To make things easier, I rounded up some of the best tools for choosing color palettes available in 2017. They will save you a lot of time.

Coolors.co

Definitely my favorite tool for picking colors. You can simply lock selected color and press space to generate palette. Coolors also gives you the ability to upload an image and make a color palette from it. The cool thing about it is that you are not limited to only one outcome but instead you have a picker that allows you to modify reference point.

Kuler

This tool from Adobe has been with us for a long time. It is available in the browser, and in desktop versions. If you’re using the desktop version you can export a color scheme into Photoshop.

Paletton

It’s similar to Kuler but the difference is that you are not limited only to 5 tones. Great tool when you have primary colors and want to play with additional tones.

Designspiration.net

Imagine that you have an idea for your color palette but you want to see examples of this mix. Designispiration is a great tool for this. You can pick up to 5 colors and search images that are matching your query. Really good not only for finding images with the specific palette but also for real implementation of them in design.

Shutterstock Lab Spectrum

You may ask — what if I want to search for photos with my chosen color? Well, Shutterstock has a tool called Spectrum where you can search photos by specific tone. You don’t even need subscription because small preview image with watermark will be enough to generate palette.

Tineye Multicolr

But if you want to search mix of colors in the photo and even specify the amount of each one, then Tineye will help you. This website uses a database of 10 million Creative Commons images from Flickr.

Final thoughts

Tinder

A few years later, the card interface became so widespread that you could find a job or an apartment only by swiping cards. So, when I was redesigning the Home screen for Paktor (Southeast Asia’s largest dating app) in 2014, I decided to strip those yes/no buttons because everyone knows how to swipe a card, right?

I made gazillion versions, and exactly zero of them had yes/no buttons. What was I even thinking

Wrong. As soon as we rolled out the new cards, Indonesia suddenly forgot how to swipe. Wait, wut? Our AB test results were telling us that Singapore and other tech savvy markets had no problem with my sudden outburst of minimalism, but the numbers in Indonesia dropped significantly. A whole country, overnight, simply forgot how to swipe. That was the moment when many single Indonesians collectively thought “Mati aja lo, Nina”. I totally ruined their day. Pretty sure someone was minutes away from finding the love of their life, but no, Nina decided to try something cool, and effectively cockblocked a whole country. So… Why only Indonesia was affected? As it turns out, different markets are at different phases of design evolution. That means markets which joined the internet or smartphone revolution a bit later, are now going through early stages of familiarization, and can‘t simply jump into advanced concepts like pull-to-refresh or swipe-to-dismiss. It takes a bit more guidance and clear affordance to effectively communicate an action. Takeaway: When releasing one product for multiple drastically different markets, always design with the least advanced market in mind.

2. That time I created art instead of design

I used to love hamburger buttons because they’re so elegant. They manage to reduce the whole menu into beautiful three lines. However, tapping a hamburger button is like bumping a “?” block in Super Mario, since it employs the exploratory mindset “Let me check if the thing I’m looking for is hiding over here”. Also, tapping it requires you to stretch to the farthest edge of the screen. Which sounds like torture. So, it’s basically this:

In contrast, a navigation bar employs the mindset of “ok, I can see the thing I’m looking for”.

Bottom navigation bar

For bonus points, bottom nav bars are usually located in the most comfortable tapping area, so no need to stretch. I really wanted to continue loving hamburger buttons, but the facts make it hard. After extensive AB testing I realized that navigation bars will always outperform hamburger buttons, despite their aesthetic inferiority •́︵•̀ ˢᵒʳʳʸ ᶰᵃᵛ ᵇᵃʳˢ. Takeaway: Yes, sometimes uglier design can perform better. And this is the ultimate proof that design is not only about aesthetics, it’s also about usability, clarity, affordance.

3. That time I tried to design a font, but ended up with 26 circles instead

I’m a messy person. My room is never tidy. I have no idea what my desktop wallpaper looks like, because it’s always covered with piles of files. If you ever try to prank me by replacing my wallpaper, it won’t work. Because I’ll never see it. Yet, when it comes to design I’m eerily tidy in my mind. I always have sets of rules that I cannot stand to break. It’s like a weird case of OCD where I have to keep everything consistent. Very often that works out great, giving birth to stuff like this:

Rule 1. Use very limited color palette. Rule 2. Create every object using only a rounded wavy pattern. Rule 3. Direct everything at 30 degrees

Imagine if I also included triangles, and a few more colors, and the direction of the objects was random. It wouldn’t have been that impactful and simple. It would’ve been messy and chaotic. So, for illustration and most other things, blindly striving for consistency gives great results. It brings order to chaos. So this one time I set my mind on creating a geometric font that would be based on circular shapes. Halfway through, the rule “based on circular shapes” turned into “is circular shapes”. I over-minimalized the shit out of that font. I quickly realized that in typography, consistency is nearly impossible. You gotta make an occasional exception here or there. Each letter is its own story, with its own geometry and proportions. Some letters don’t even make sense! I mean, small “L” and big “I” is essentially the same line. Small “r” looks totally unfinished. And the line at the bottom of big “Q” was probably a mistake by an intern, but they went with it anyway. Having a circle in every letter didn’t work out as well as I planned. What makes sense for one letter, doesn’t make sense for another. And I was going crazy here, so for the sake of my sanity I had to forever stop trying to design fonts. Another reason being that I doubt people would find a font like this useful:

Actually, I’ve managed to nail one letter.

Takeaway: Forcing consistency is not always the best way to go. Sometimes it’s necessary to design for context, even at the price of breaking the consistency. Fonts are a good example.

4. That time I turned into the client from hell

We all know the client from hell. Ten changes per second. A severe case of tripolar disorder. A ton of emails at 3am. I thought these people are born like that. Disorganised and they don’t care. But not really.

Back to my story. I started my own side project. Completed the design. Hired a developer. Great guy. He started working and after a while he started asking all these questions. Completely valid questions, like ”Hey Nina, how do we handle this edge case?” Or, “What do we show if an in-app purchase fails?” I’ve never really thought about that. So I ended up giving quick ideas: “How about we show like, you know, a toast message. Or, make it a popup. Wait, no, popups suck. Hm… what if we dont show anything”…3 minutes later…. “Actually, you know what, let’s just go with a toast message. This is final”. And of course it wasn’t. That’s when I realized I had just turned into the client from hell. I was the guy every freelancer hates. I could almost hear the developer at the other side of the planet telling stories about me and how horrible of a client I was. And I thought “Oh, wow so this is how it happens”. Clients from hell are nothing but ordinary people who don’t have a good workflow and end up improvising a lot. I remember I skipped half of the process designers usually do, so I ended up with unfinished flows, half-assed ideas, unhandled edge cases. Takeaway: Don’t skip process. User flows? User scenarios? User stories? User jokes? User lollipops and user flashlights and user sinuses? Yes please, give it all to me. I don’t care if it exists or not, I’ll learn it and I’ll find a way to apply it. Because these processes exist for a reason.

With the limited time I had with it, I can already say with confidence that it’s far more polished and production-ready than in my first experience with Adobe XD. It also has three invaluable features that set it apart: real-time collaboration, vector networks and version history. It can handle dozens of designers working on the same document, at the same time without breaking a sweat. Last but not least, this tool is really fast, easily handling 20+ Artboards in a single document.

People will inevitably compare Figma to Sketch, so as a long-time user of Sketch, I’d like to share my experience, following a tradition that I started 3 years ago.

Browser VS Native

I was skeptical at first because Figma is a browser-based user interface design tool, but now I’m convinced that there is a future in this area. Everything is extremely responsive, works as expected and the software is almost every bit as powerful as its native counterpart Sketch, minus features like Symbols, Overrides and Plugins. Every document and version exist on their server, making the task of iterating effortless and worry-free. You can still save your document as .fig to make it downloadable. Like this, you can share your Figma files with others.

By default, Figma uses Google fonts (a free library of 800+ fonts), but you can also add your own by installing an add-on. They even included the hugely popular FontAwesome. I think this is an incredibly smart move, since collaborators won’t need to download extra fonts when they jump in.

Real-time collaboration

For many teams, this is a game-changer. Being able to design with a fellow designer, engineer or client in real-time will save a ton of time in both execution and communication. Although not every project needs collaboration, it’s good that the possibility is there.

You can quickly work alone, then invite others whether they’re signed up or not to edit or view-only your design in progress. The advantage of a browser-based tool is that the recipients won’t need to install anything at all, or even own a Mac to participate. Figma works on Mac, Windows, Linux and on mobile devices (viewing only). I can’t overstate how this will completely change team dynamics and allow true collaboration between designers and developers. Anyone can just come in and check all the specs: fonts, colors, sizes, distances, etc. Developers can benefit from inspecting the constraints and how the layouts adapt to multiple screens.

Version History

The versioning is much more visual in Figma, allowing you to quickly compare between versions. It’s a lot more pleasing to use than Sketch’s macOS native versioning, which feels slow and over-the-top. While they both have Autosave and version history, their execution is completely different.

In Sketch, it’s slow to navigate between each version. Often times, designers disable this feature because it eats too much of their disk space.

Comments System

The comments feature is built-in. Team members can pin comments to your designs and you’ll receive notifications when there are new comments or replies. Once you’re done, you can click “Resolve” to hide the thread.

In Sketch, you can add comments by downloading a plugin or use the excellent Zeplin for a more interactive solution that includes specs and assets delivery.

Zeplin is also browser-based, so it works for Mac/Windows.

Another Sketch plugin worth noting is Craft from InVision, which allows you to design with real data. You can quickly generate names and photos from presets, Websites or APIs.

If you put Sketch together with Craft, InVision and Zeplin, the package suddenly becomes a lot more attractive for comments and prototyping.

Vector Networks

Vector Networks is groundbreaking. You can move the lines instead of the vector points, and all the connected points will automatically follow. That’s because instead of having just a beginning and an end point, you can connect multiple vector lines in Figma, creating a web of vector points. It’s incredibly intuitive once you start using it.

Vector Networks introduced by Figma.

Sure, it’s still missing things like Scissors or Rotate Copies, but for most vectors, I believe that Figma is easier to use and Vector Networks can lead to interesting results.

Import from Sketch

Figma was able to import Sketch files extremely accurately. Every Artboard, Groups and layers were left intact with their exact names, grouping and properties, including multiple borders, shadows and effects like Blending modes and Background Blur. Because of this, I’m inclined to say that using Figma as an extension of Sketch or vice versa is not a far off idea. You can basically import any existing Sketch work, resource or vector and start from there. The fact that they don’t support Photoshop files (yet) speak volumes of the level of compatibility that it has with Sketch versus Photoshop.

Strangely, I couldn’t copy and paste vectors from Sketch to Figma, but I could drag and drop an SVG file directly into an open document.

I was even able to import the extremely detailed vectors from Angle and got a fairly impressive result. Sure, the gradients and shadows aren’t as good-looking (sometimes even missing), but all the shapes were there. This is a big deal because you can use virtually any Sketch UI Kit in Sigma.

There’s a Desktop-ish app

You can download the desktop version, but don’t expect a native experience. It’s basically just a Web wrapper. Still, unlike the browser version, the keyboard shortcuts won’t interfere with browser’s. For example, CMD + 1–9 switches between browser tabs, but in the Desktop app, it switches between documents. You also get rid of the extra browser chrome.

Constraints

Adaptive layout is an indispensable feature for modern design tools. Designers have to deal with an increasing amount of device resolutions. It would be silly not to be able to adapt a design from the iPhone 7 to 7 Plus just by resizing the Artboard.

In Figma, you set up the constraints by pinning against the borders, or setting the element to center. It’s essentially like Sketch’s Pin to corner and Resize object. I have to admit that Figma’s version is more visual and intuitive to use while Sketch has more options like Float in place.

Is Float in place any good? Yes, if you want the elements to keep the same proportional distance and size between each other.

Performance

Handling dozens of Artboards is a breeze in Figma (but your fan may start kicking though). Those who complain about Sketch’s performance may find better luck here. Seeing that it’s browser-based, the entry point is much lower for practically anyone owning a desktop, laptop or mobile phone. As a matter of fact, those who long wished for Sketch to come out in Windows finally have their answer.

The User Interface

The user interface is almost an exact replica of Sketch, down to the tiniest details like the names of the tools, keyboard shortcuts, the Artboards and Groups, or the Export tool. Don’t get me wrong, this is a GOOD thing for users. It just means that Sketch has set such a powerful standard that both Adobe XD and Figma have no hesitation following.

Sketch is like the “iPhone” of design tools, in that most new tools will copy its standards, add a few twists, but years down the line, they’ll mature enough to be truly unique on their own. In the end, users win the most as they get more choices at the highest standard. In other words, they’re no longer stuck with Photoshop for UI design, the same way they were stuck with dumb smart phones with clunky keyboards. Of course, I don’t mean this as an insult to Figma or Adobe. They’re smart to answer the modern designers’ needs in a way that don’t confuse them, making their transition as smoothly as possible. To be fair, a lot of these standards came from the Mac and Adobe’s own Illustrator and Fireworks (RIP).

Should you use Figma?

I think the answer is a resounding yes. You don’t need to learn a new tool, because it feels and works like Sketch. For me, switching between these tools felt completely natural.

Both tools can reinforce each other, meaning that they can fulfill different needs as you switch between Mac and Windows, iOS and Android, home and office. I’d choose Figma for its real-time collaboration, multi-platform support (Windows, Mac, Linux) and Sketch for its platform maturity, true native experience, and its excellent plugins and resources. In term of features, I think both will eventually catch up to each other (Real-time Collaboration, Vector Networks, Comments versus Symbols, Overrides, Plugins).

Today, we're proud to announce the winners of the second annual Material Design Awards. As with last year’s winners, we’re highlighting specific aspects of Material Design used in creating apps which satisfy their users while appropriately expressing their brand. The five winners, to be honored at the SPAN LA conference on October 27, represent the finest application of aspects of Material Design.

Brand Infusion: Asana: Team Tasks & Projects

Charming Engagement: Fabulous - Motivate Me!

Creative Navigation: C Channel (available in Japanese and Thai)

Expressive Layouts: Kitchen Stories

Focused Efficiency: Airbnb

Brand Infusion:

Asana: Team Tasks & Projects

by Asana, Inc

An app built on making teams more productive and collaborative needs to be visually focused and clear to keep users concentrated on getting work done. Asana achieves this by polishing short, frequently repeated interactions to make efficiency feel rewarding. Content is never overwhelmed by the wide range of available actions because they are organized intelligently and are easy to trigger.

With so much functionality built into the app, it would be easy for Asana’s visual identity to become diluted. But Asana’s design team thought through the brand experience at every turn. Subtle gradients are applied to the floating action button, as well as in moments of more casually paced user communication. The product logo is echoed in the circular outlines around icons that show up while editing a task.

Charming Engagement:

Fabulous - Motivate Me!

by TheFabulous

It’s hard to rewire your brain and adopt a new routine, but it can be made easier with an attentive coach by your side, encouraging you to achieve your goals through positive reinforcement. The Fabulous app is such a mentor, a self-described “happiness trainer” that makes positive choices habit-forming.

The app’s charming illustration style makes an immediate impression, inviting users into their first experience of goal-setting. The crisp state transitions and pleasing goal completion animations keep up motivation—even experiences beyond the in-app functionality are carefully considered, with bold notification styles, a well-developed soundscape, and email reminders that feel personal and direct.

Creative Navigation: C Channel (available in

Japanese,Thai) by C Channel Corporation

When it comes to designing an app’s navigation, more content usually means more problems. Search often becomes a primary mode of exploration, reducing the user’s exposure to items they might otherwise be interested in, if they’d only known they existed. The C Channel app neatly balances a blend of studio-created and user-submitted videos covering fashion, food, and more.

C Channel organizes content into a series of tabs that can be traversed easily with a simple swipe. This engaging, gestural journey through the product continues even when videos are playing, allowing users to advance seamlessly between clips with a vertical fling. The overall positive vibe of the app—there’s only a like button and no down voting—celebrates the ideas and trends within the community.

Expressive Layouts:

Kitchen Stories

by Kitchen Stories

Determining the layout of an experience isn’t a solitary decision—it’s the result of a series of small decisions, that combine to create a harmonious whole. When it works well, users may not even consciously notice it, but they certainly feel it when things go awry.

Kitchen Stories excels at creating effective, easy-to-scan layouts for recipes across a variety of screens and sizes. Home cooks will be happy to have their tablets in the kitchen: content is organized smartly, minimizing the number of times you’ll need to touch messy fingers to the screen. The attention to craft shines through at other moments in the app experience as well, from the precise positioning of type, to the playful use of the logo as a textural element on background surfaces.

Focused Efficiency:

Airbnb

by Airbnb, Inc

One of Google’s Ten things we know to be true is “Fast is better than slow.” Airbnb clearly relates to this philosophy, and acts on it by showing respect for their users’ time. Essential tasks are satisfied through precise design, routing users clearly and briskly from sign in, to browsing, to booking a reservation. By neatly segmenting larger goals into smaller steps, Airbnb is able to sidestep the appearance of complexity, making the overall experience feel comfortable.

Happily, none of this efficiency comes at the cost of Airbnb’s visual appeal. Photography is a clear focus and communicates a sense of opportunity in each new destination. The considered typography and consistent but unobtrusive branding are equally successful for both the Android and iOS versions of the app.

There are multiple ways to evaluate interfaces and identify areas of improvement, one being usability heuristics, or design principles. Nielsen Norman’s 10 Usability Heuristics (published in 1995) are by far the most popular set, and are widely used. However there are alternatives, albeit much less known.

One of them covers Cognitive Dimensions: they were created more than 20 years ago and have a special focus in programming languages, but are incredibly relevant to design today: its principles (as you’ll see below) can still be applied to all digital products that we interact with, and help to create better, more usable interfaces.

The Cognitive Dimensions Framework was first introduced by Thomas Green (University of Leeds) in 1989/1991. A few years later in 1996, Thomas Green and Marian Petre developed a lenghtier analysis of programming languages using the Cognitive Dimensions, which explored in more depth how each Dimension worked and should be used.

Until recently, however, this framework remained mostly within the domain of academic papers, and attempts to explain the dimensions and their applicability to the product design process were few and far between. The goal of this article is to introduce UX practitioners to each dimension and its applicability to the design process.

The 14 Cognitive Dimensions of Notations

There are 14 different Cognitive Dimensions of Notations. Before jumping into what they are, it’s important to define what a notation is in the first place: A notation consists of an interface element—or a group of elements—with which the user will interact with in order to effect a change in the system. Multiple notations can be nested in the same screen. For example, if you consider iOS’ Phone App, the keypad with multiple keys is a notation by itself—responsible for composing the number that will be dialed, and for interacting with that number; calling, adding as a contact etc. But the tab bar buttons are also notations themselves—which would then take the user to another screen.

1. Viscosity

For fluids, viscosity measures its resistance to local change. For information structures, the viscosity is the amount of work the user has to put in, to effect a small change. A system that is highly viscous will require the user to take many steps to accomplish their goal. When evaluating systems, each user goal is going to have a level of viscosity—and that level should be as low as possible.

2. Visibility

Visibility is a measure of how easily users can locate the elements necessary to accomplish their goals. It’s important that the system doesn’t bury information or encapsulate elements, because the less cognitive work that goes into accessing an interface element or content, the better. The longer the search trail necessary in order to find something, the less visible, and thus the less satisfactory the experience.

3. Premature Commitment

Premature commitment is a “yes/no” measurement. The user should never have to make a decision before the information required for him to make that decision is available. If the user is asked to make a decision prematurely, it may be because the order of doing things is inappropriate and wasn’t thoughtfully constructed. In the same way that we wouldn’t ask someone to select cutlery before choosing their food, we shouldn’t ask a user to choose whether to make a purchase before telling them how much it will cost.

4. Hidden Dependencies

This is another yes/no. Whenever parts of a system are dependent on each other, that dependency should not be hidden.

One good example is Sketch App’s Symbol feature. When you create a Symbol, it becomes an element that you can reuse throughout your design—and whenever you make changes to the original, it will affect all the other ones.

You can nest Symbols, too—and that’s where it gets tricky.

If you nest Symbol B under Symbol A, then nest Symbol A under Symbol X (Making X dependant on A, which in turn is dependant on B), then making changes to the Symbol B will result in effects hard to observe or predict without a search of all symbols associated.

5. Role-Expressiveness

The purpose of an element in a system should either be obvious or readily and easily inferred by the user. Two elements with different purposes should not look the same, and the user shouldn’t be confused by their presentation. Consistency is key, and can be measured for the experience as a whole on a sliding scale.

6. Error-Proneness

The terms and symbols that we use in an application will determine how error-prone the end-user is. It’s important to make sure that the user notations we use will help the user avoid making mistakes or slips. A poor dialogue box that doesn’t clarify what a user should do next has a high level of error-proneness, where a green button that says Go! Has a low level of error-proneness.

7. Abstraction

An abstraction is a number of elements grouped together that are meant to be treated as one entity either to lower the viscosity or to help the user understand that UI element. The abstraction barrier is the number of abstractions a user needs to master before he’s able to use the system. The lower the abstraction barrier, the better.

An abstraction also changes its underlying interaction. It usually expands it. For example, the UI elements used to dial a number in the iOS’ phone app are the digits 0-9. However, since the app also has a “favorites” feature, there is now more than just one way of calling somebody—the concept of making a phone call was expanded.

8. Secondary Notation

Secondary notations are any extra information used to supplement a UI element and to convey extra information to the users. They are not a part of element, and they do not change its meaning in any way, just make it easier to comprehend.

Some good examples of this are programming languages that allow the use of comments, or even products with well-designed icons. The more secondary notations, the smoother the experience tends to be.

9. Closeness Of Mapping

“Closeness of mapping” refers to how interface elements describe their results, much like an affordance. If the button “Add to Cart” sends an item to the wish list instead of to the cart, that element is very far from the result it is describing.

If the interface elements clearly describe their results, the user will have fewer new concepts to learn in order to use the system, which in turn, improves usability.

10. Consistency

Using consistent patterns allows users to recognize familiar symbols as they move through a system. For example, if similar information is presented in different ways, learnability and usability will be compromised as a result of increased mental load.

This goes from buttons with similar functionalities but that look different, to menus that lack consistency.

11. Diffuseness

Diffuseness is the verbosity of language, which is the number of symbols or entities required to express a meaning. The less space used to convey a message, the better.

Some notations can be too long-winded or occupy too much valuable real-estate in an interface. For example, unnecessarily large icons or copy often hurt usability by making it harder for users to scan a page.

12. Hard Mental Operations

This refers to any operations with a high demand for the user’s cognitive resources. A notation can make things unnecessarily complex for the user if it makes excessive demands on working memory: it’s a bad sign if the user needs to use a notepad to make annotations in order continue using the system.

A good example of a hard mental operation is Wolfram|Alpha’s minimal interface, which requires users to enter syntactically-complex queries. The user must either remember the syntax necessary, keep notes, or consult the wiki.

The less the demand for cognitive resources, the better. Low cognitive demand improves usability and allows users to achieve their goals faster.

13. Provisionality

Pencils are used by architects, typographers and other designers to make faint, blurry provisional markers, meaning “something more or less like this goes more or less here”. Provisionality allows users to make indicative selections before making definitive choices. It reduces premature commitment, which improves usability in the system.

For example: Referring to Principle again, when you are creating a new event, you are able to see—before making a definitive choice—what artboard will be linked to that event simply by dragging the mouse over it.

14. Progressive Evaluation

While this applies more to programming languages than to design, it’s still worth visiting, as it is the final cognitive dimension in the set. Progressive evaluation answers the question: can a partially-complete program be executed to obtain feedback on “How am I doing?

Beginners, when using a system, tend to evaluate their own progress at frequent intervals. “Progressive Evaluation” helps them do that, which in turn, increases odds of users achieving their goals. A great example is (yet again!) , the prototyping software for Mac, which has a “preview” window that allows users to test their prototypes in real time, while they are being built.

Real World Application

Now that we’ve covered the theory, let’s talk about practical uses and real world examples.

The Cognitive Dimensions framework is used to provide insights as to how users interact with products. It’s not a list to “check-off,” instead, it’s way of empowering UX practitioners and others to make better design decisions.

I recently evaluated a very popular web app—InVision, the prototyping tool—to determine why it was successful, and where the app could use improvement. I reviewed the app according to the 14 dimensions, and I found that it typically scored very highly. It had good visibility, a low number of abstractions, plenty of secondary notations, and was very consistent.

Let’s take a closer look:

Good Visibility

Remember

: The longer the search trail necessary in order to find something, the less satisfactory the experience.

Inside a prototype, you can see a list of all screens. All informations regarding that screen are available without the need to visit a different page. On mouse hover, all the possible interactions are readily available, including less-common interactions such as sharing or deleting that screen.

Abstractions

Remember

: An abstraction is a number of elements treated as one entity. to help the user understand the interaction.

An abstraction changes its underlying notation. It usually expands it. For example, the notation used to dial a number in the iOS’ phone app are the digits 0-9. However, since the app also has a “favorites” feature, there is now more than just one way of calling somebody—the notation was expanded.”

The standard way of linking two screens together is creating a clickable box and then selecting the screen it will link to. However, with the “Templates” feature, you can group multiple boxes in a “Template”, then apply that template to multiple screens—effectively expanding the previous notation, so now it’s possible to link screens together simply by applying a template.

In the screen below, the blue clickable boxes were created manually, while the green ones are from the template that’s being applied:

Secondary Notations

Remember:

Secondary notations are any extra information used to convey extra information to the users.

The small dialogue boxes that pop up on mouse hover make it easier for the users to comprehend what an icon means, and what the resulting action will be. This is the type of secondary notation that rates very highly.

Consistency

Remember

: Using consistent patterns allows users to recognize familiar symbols

The result of a mouse hover in a card is consistent through the application. It becomes clear to the users that a hover equals further information, a way of opening that card, or the ability to select multiple cards.

Progressive Evaluation

Remember

: Progressive evaluation answers the question: can a partially-complete program be executed to obtain feedback on “How am I doing?”

This is a major area for improvement on InVision. When you are linking screens together in the app, there is no way to assess your progress—you can’t know if there are fifty screens left to be linked or just two, for example. Not only does that make it really hard to locate yourself, but also hard to estimate how long you will take to finish it up. There is no indication as to what screens already have links when you are linking them, nor when you are looking at the screen listing.

Closing Thoughts

This wraps up our guide to the Cognitive Dimensions. If you enjoyed the subject and want to dive deeper—which I highly recommend, given how useful it is to understand the concept—then it’s worth taking a look at

Usability Analysis of Visual Programming Environment: A “Cognitive Dimensions” Framework

, the original paper from Marian Petre and Thomas Green that we based this post on.

We’ve all been there. You’ve gathered crucial stakeholders to review your latest round of design mocks, and the productive conversation you’d hoped for is just. Not. Happening. Two people are in the corner arguing about hamburger menus, one person is silently writing down critiques, and a cheerful soul is propping up the review with their opinion of how they “like the font you chose.” How do you get your colleagues to focus—and on what, exactly? How do you frame the review so that you all make progress on solving the same problems?

There are many factors that go into creating a successful design review, such as format and number of invitees (see Jake Knapp’s take on how to run a design critique for more examples), and running a design review looks different for every organization, whether it’s large or small. However, one very simple tactic you can use to ensure you get something out of every review is to first clearly articulate (and agree!) on the problem you are trying to solve. This is the heart of a successful design review, because, at the end of the day, all the design details must support the solution to that problem.

Design work can roughly be divided into three stages: early conceptual work, mid-stage mock and prototype creation, and late-stage build. Each of these stages maps to a different part of a product: problem, solution, and implementation. An effective design thoroughly addresses the underlying problem, the expression of a solution in UI, and the implementation of that solution. It’s a multilayered stack that should add up to a design that supports your ultimate goals.

It’s important to ask the right questions depending on which stage you're in. You’ll get insights that are more likely actionable during the current stage of the development process, and it can be appropriate—even enlightening—to pull questions from earlier stages back into later stages to cross-check your work. For example, you might discuss in a mid-stage design review how your app looks confusing because there are too many calls to action. It could be that you haven’t fully discussed the problems your app is trying to solve for the user—you're trying to solve all problems within a certain market, rather than focusing on just one. Knowing which questions to ask during each stage of review will help you see past the surface of your design, and it'll save you a lot of time (which can be better spent elsewhere).

Early review

In an early design review, you might be looking at UI sketches, or even flowcharts, or product briefs. The team is formulating what the product will be and laying out the user journey in broad terms. Product managers might be very involved at this stage, as well as engineers who are looking to evaluate feasibility. At this point, the main questions to ask are:

What is the underlying problem and can it be described succinctly?

Who is your user and will they recognize themselves as the audience?

Is the problem interesting, addressing a real user need, and is it worth valuable designer and developer time?

Has the problem been contextualized within a typical user’s journey?

Is the problem solvable with a technology solution? Be sure to frame the problem as solvable with the resources you have.

A great app will address a clearly laid out problem hypothesis which is instantly recognizable to the target user group.

Mid-stage review

The mid-stage design review is probably most familiar to designers: You are evaluating medium to high fidelity mocks, short videos, prototypes, and early builds. Deliverables may include print outs of screens posted around a room, presented on a large screen, or passed around on a device for people to inspect more closely. These reviews are to evaluate proposed solutions to the problem in more detail. Now your questions should primarily be about whether or not the UX is effectively solving the problem:

Is your design actually addressing the problem all stakeholders have agreed upon?

Is the architecture and organization of the app or feature intuitive?

Is information hierarchy clearly expressed both through visual and interaction design? Don’t clutter your user’s primary task flow.

Are your colors delightful and useful? Is the gridded layout guiding the eye through data, and is your text the right size to be readable?

Does the motion design support the information architecture, guide the user through the flow, and match your brand’s character?

Are you using predictable UI patterns that are recognizable and appropriate for the platform?

Are you overusing predictable patterns such as cards because many popular apps do?

Does a new user come away with the correct description of what your app can do for them, and can the user get all the way through to the end of a major task?

Does the solution show off why people should be using your product over others?

A great app will have a strong solution. The product’s unique value proposition should be obvious at first inspection, and the design should guide the user easily, both adhering to and deviating from platform and UI conventions with purpose.

Post-implementation review

Post-implementation design reviews are important to evaluate finer details and determine how engineering constraints might have affected the work. Reviewers should evaluate full engineering builds of features on the intended platform and on the relevant devices. Look for anything about your expression that is getting in the way of solving your problem for users. Useful questions to ask at this stage:

How close to design spec is the engineering implementation? Is all interaction, visual, and motion design implemented as it was intended, and is there any inadvertent “jank” making the experience less than perfect?

Are the text strings on screen helpful and clear? Thoughtless writing makes UI confusing.

Is your brand fully present and can your users distinguish your app from your competitor’s?

Are you inadvertently alienating users? Watch out for issues in the areas of accessibility and internationalization for different languages.

Is it a good player in the platform and device ecosystem? Does it use notifications appropriately, is it screen orientation-independent, and does it support a variety of screen sizes?

A great app will have beautiful design that is on-brand and executed with expertise and loving care. The implementation should be robust enough to accommodate all users. The full expression—problem, solution, implementation—should hold together in a compelling package.

This article is part of a series on our new Design Language System. Karri recently answered questions about this topic in a Designer News “Ask Me Anything” interview. Click here to read the transcript.

Working in software development and design, we are often required to ship one-off solutions. Sometimes we’re working within time constraints and sometimes we just haven’t yet agreed upon a path forward. These one-off solutions aren’t inherently bad, but if they aren’t built upon a solid foundation, we eventually find ourselves having to pay back accrued technical and design debts.

Visual language is like any other language. Misunderstandings arise if the language is not shared and understood by everyone using it. As a product or team grows, the challenges within these modalities compound.

Design has always been largely about systems, and how to create products in a scalable and repeatable way. From Pantone colors to Philips screws, these systems enable us to manage the chaos and create better products. Digital products are perhaps the most fertile ground for implementing these systems and yet it’s not often considered a priority.

A unified design system is essential to building better and faster; better because a cohesive experience is more easily understood by our users, and faster because it gives us a common language to work with.

Why we need design systems

Airbnb has experienced a lot of growth over the years. Currently our design department consists of nearly a dozen functions and outcome teams. It became clear that we needed more systematic ways to guide and leverage our collective efforts. While we recognized these challenges within the company, I believe they are symptoms of larger software industry problems.

Too few constraints Software design has few physical constraints compared to many other design disciplines. This allows for a variety of solutions to any given challenge, but also opens it to disjointed user experiences. As product owners and designers, we have to create and follow our own constraints.

Multiple designers and stakeholders Software is often built by teams– sometimes incredibly large teams– of people. The challenge to create coherent experiences multiplies exponentially as more people are added to the mix. Also over time, no matter how consistent or small a team is, different people will contribute new solutions and styles, causing experiences to diverge.

Multitude of platforms We need to ship our product on a multitude of platforms and devices. Keeping features and designs synchronized takes significant effort, often requiring the same work to be repeated across all of these platforms.  

Software as a continuum Another unique thing about software is that, while it can be considered a product, it doesn’t really wear out and get replaced like traditional consumer products. Code and designs created years ago still exist in many places, even after the landscape of a company and its product have shifted significantly. This requires constant maintenance and upgrading.

Getting to work

To work through these challenges and keep our decision making process fast, we assembled a small group of designers and engineers [2]. We cleared our calendars, reserved an external studio place just outside Airbnb HQ, and dedicated ourselves to designing and building the Design Language System (DLS).

The goal we set for the DLS was to create a more beautiful and accessible design language. Our designs should be unified platforms that drive greater efficiency through well-defined and reusable components. In order to focus our efforts, we reduced the initial scope to creating the system first on native platforms (iOS & Android).

We started by auditing and printing out many of our designs, both old and new. Laying the flows side by side on a board, we could see where and how the experiences were breaking and where we needed to start making changes. We figured that the best way to begin was by tackling issues head on. Each of us focused on a screen or product area to redesign, And we established a few principles to guide us with these individual designs:

Unified: Each piece is part of a greater whole and should contribute positively to the system at scale. There should be no isolated features or outliers.

Universal: Airbnb is used around the world by a wide global community. Our products and visual language should be welcoming and accessible.

Iconic: We’re focused when it comes to both design and functionality. Our work should speak boldly and clearly to this focus.

Conversational: Our use of motion breathes life into our products, and allows us to communicate with users in easily understood ways.

Laying the foundation

Prior to beginning this design sprint, we had already created a basic style guide, that we called the foundation. This foundation loosely defined our typography, colors, icons, spacing and information architecture. The foundation proved essential for guiding our work in a unified direction while allowing room for us to individually explore creative design solutions. This way we felt that we were all working together, towards the same idea. Reviewing our collective work at the end of each day, we began to see patterns emerge. We course-corrected when necessary, and started defining our standardized components.

Creating the Components

Traditionally, many style guides define components as atomic components, which are then used to build more complex molecules. In theory, this works well to create coherent and flexible systems. In practice, however, what often happens is that these re-usable atoms are used many different ways, allowing all kinds of molecules to be created. Again, this opens the door for all kinds of disjointed experiences and makes the system harder to maintain.

Instead of relying on individual atoms, we started considering our components as elements of a living organism. They have a function and personality, are defined by a set of properties, can co-exists with others and can evolve independently. A unified design language should not just be a set of static rules and individual atoms, but an evolving ecosystem.

-

A unified design language shouldn’t be just a set of static rules and individual atoms; it should be an evolving ecosystem.

-

For example, our user avatar element might be initially defined by a style guide, but its end use in the platform can take on hundreds of permutations, making it difficult to successfully update the avatar element down the road.” If we want to change either of these things, we can be sure that we don’t break other screens.

Each component is defined by it’s required elements (such as title, text, icon and picture), and may sometimes contain optional elements. These elements are both defined in the Sketch document as well as in code. Instead of allowing divider lines themselves, we require each component to have a divider, which is then visible or hidden based on on the view logic.

Compiling the library

While creating these components, we collected them in a master file called the library, which we referred to throughout the design process. After a week or two we began to see huge leaps in productivity by using the library when iterating on designs. One day, while putting together a last-minute prototype, our team was able to create nearly 50 screens within just a few hours by using the framework our library provided.

While the library was growing, we started organizing individual components into artboards containing similar items. These artboards were then organized by general category into: Navigation, Marquees, Content, Image and Speciality.

We created one set of these components for phones (iOS and Android), and adapted them to tablet sizes from there. Tablet components are largely the same as those for mobile, and on a technical level the code only needs to exist once in two different styles. With this system components can vary in their look and positioning, similarly to the way responsive design works for web. Designers can then design a screen once using common components, and it can be easily adapted to different screen sizes as well as to iOS and Android.

For tablet we created a couple of simple layout concepts, such as Focus Views, which focuses the content on the page, modals, and 2-column and grid layouts.

All of the components and views are built with our own technical view framework, which handles these styles, states and adaptivity. [2]

Lessons Learned

We knew that this was a challenging project. It meant re-designing and rebuilding the majority of the views in our app. We managed to make our goal of creating the system and releasing the new apps on April 17th. As with any project, there are things we wish we would have done differently.

Not all components are created equal. In most apps there are a set of components that repeat often. For us, these components are rows (or table-cells). Looking back, I wish we had taken more time to think about the rows and come up with a stronger set of patterns and components. In the end, we wound up with many different kinds with some inconsistencies.

Sketch. We initially tried to create these components as symbols in Sketch, which resulted in a mess. Even now, our Sketch files are sometimes challenging to maintain. Moving forward, we hope to find better ways of maintaining and creating new components. [3]

Documentation. This project required us to operate within a tight timeline, which caused us to overlook some of the documentation process. Lacking thorough documentation created some confusion that could have been avoided. Just like with coding, documenting systems as they are created is paramount to the process. It has to be done sooner or later, and documenting throughout the creation process allows for smoother decision-making.

Conclusion

While this was a monumental task that ended up requiring efforts from many of our product teams, we found that creating our Design Language System was worth the investment and a huge leap forward.

Since the design language and code are often shared, we can now build and release features on all native platforms at roughly the same time. Development is generally faster, since product engineers can focus more on writing the feature logic rather than the view code. Additionally, engineers and designers now share a common language.

Designers were also excited about the system. It enables product reviews to focus on the actual concepts and experiences of a design, rather than padding, colors and type choices. The DLS provides us with a shared understanding of our visual style, and streamlines contributions to a single system. This system also enables all of us to prototype and experiment with ideas in high fidelity faster and at a lower cost.

I believe that aided with these systems we can focus more on actual user experiences and concepts we want to create in the future.

Footnotes:

[1]: Many great projects are about teams and there are always too many people to thank for but I wanted to highlight few people who made this project happen:

Bek Stone, Adam Michela, Amber Cartwright, Alex Schleifer, Michael Bachand, Paul Kompfner, Sean Abraham, Salih Abdul-Karim, Michael Sui + many others in the design and engineering teams. Thanks Josh Leong, Sola Biu, Catherine Waite for reading the drafts of this.

[2]: I’ll leave it to one of our engineers to write more about the technical side the DLS.

[3]: In our case, we want people to be able to change the symbol sizes (eg. you need to fit in more content in to a header). If you need to resize or accidentally resize something, Sketch (<3.5) would automatically resize every instance of that symbol. That would kill your sketch for few moments and probably mess up your file permanently (sometimes undo didn’t work). We ended up putting the components in Layer Groups, and letting people copy and paste them.

The wooden train system was especially great. You could fit the track pieces together into circles, straightaways, s-curves, whatever you wanted. But you had to be thoughtful about how you created your routes — there was a logic to how the pieces fit together, and you couldn’t force the geometry.

Some twenty years later, my own kids play with these very same relics from my childhood. I can hear them clunking against the wood floor of their room right now. The enduring designs have held up across years and generations of change.

This wonderful self-evident simplicity of BRIO was on my mind last spring, when I first started to focus on a big problem that had developed with the design of Pinterest. Actually, 3 big problems.

Our UI was inconsistent

Our visual system was stale

Our marketing felt disconnected from our product

Over the years, the designs for our website, apps and marketing had all begun to drift, so they no longer felt like they had the same personality. A number of new features had also been added without a clear vision to how they fit into the overall design, so the interface had begun to feel cluttered and hard to understand. There was no visual hierarchy or system to help you understand what was important when you looked at any given page. As a result, all the inspiring ideas people save on Pinterest — by far the most important part of our experience — were getting lost.

As it turns out, it’s damn hard to design consistent and beautiful things at scale.

A matter of principles

The Pinterest experience as a whole was in sore need of simplifying and unifying. And if we were going to do that, we needed to identify some core design principles for ourselves.

I retreated to a dark corner of the Pinterest basement and spent the next few weeks playing with designs. I wasn’t even sure what I was doing at first — basically it was like my own grown-up version of banging blocks together. I started mulling on questions like, Why do people love Pinterest? What makes our product unique? What’s our personality? What are we all about?

The more I thought about it, the more I realized that the essence of Pinterest is a lot like my family’s beloved collection of BRIO toys. Both of them encourage you to play with different options, connect pieces together and create your own world. You can start with your own goals and projects in mind, or you can get inspired by what someone else is doing and build off that. Jump in and immediately start playing, stop whenever you want, then come back and pick up right where you left off.

Pushing the thinking even further, the essential qualities that Pinterest and BRIO shared bubbled down to 3 simple principles. These described the best qualities of Pinterest today, and laid the foundation for where we wanted to take the product in the future.

—

1.Lucid

It’s intuitive, not learned You understand how things work without any direct explanation. It makes the user feel powerful Nothing makes you feel uncomfortable or like you can’t trust the system. The system provides you with the right components and asks you what to do next. It makes the content taste better The framework is totally seamless and hidden. You don’t notice it until you interact with it. You get to decide what you want it to be, instead of us forcing it on you.

2. Animated

It’s colorful The personality is bold and stands out. It’s visually responsive The experience interactions in a physical way. It’s unexpected The experience is playful and fun, but never overwhelming.

3. Unbreakable

It’s built for exploration Just like a children’s toy, you want to try it out just to see what will happen. The more you investigate, the faster you learn and the more you get in return. It’s impossible to mis-tap Everything is designed to help you navigate easily and do exactly what you had in mind. It’s reversible If you accidentally do something that doesn’t produce the results you were looking for, it’s obvious how to correct it. — Once we blocked out these 3 principles, the next step was to translate them into something tangible that could potentially be the foundation of everything we built moving forward.

The basics Shapes — We use basic and touch-friendly shapes that people naturally understand and want to interact with. The corners are rounded to make them feel more approachable.

Colors — I’m a big fan of analogous color schemes. They feel very natural and reflect a feeling of calmness. When you combine a few different analogous color schemes that were originally based on some given complementary colors, the result is very interesting and unexpected.

Hierarchy — Everything is extremely hierarchical, so it’s always clear what’s most important. As we design we ask ourselves, What’s the most important thing for someone to understand here? What we can remove to make things even more obvious?

White space — In the old Pinterest design, the focus was on the containers that surrounded people’s content, which overpowered the content itself. All you saw were lots of lines, gradients, shades of grey. There was no room to breathe. Introducing white space gives a natural separation between elements without adding more visual noise. The result is balanced and structured, and the amount of whitespace adds personality and impact.

The early explorations and ideas

We wanted to see what would happen if we just removed all the containers from from the UI. Would the focus return to the objects themselves, or would the experience fall apart completely?

Turns out the resulting container-less grid felt great, and the emphasis was finally back on the ideas people were saving on Pinterest. We didn’t lose the containers entirely, since they do help clarify which info goes with what image. Instead, we wait to show the container until you’re curious enough to tap. That way, the interface visually teaches you how information is connected and grouped in our system. You only need to experience this interaction once to understand how a Pin is built.

Designing a new set of standards After playing around with the designs and interactions for good couple months, the team and I finally got things to place where we felt like all 3 of our product design principles (lucid, animated, unbreakable) were represented. We were ready to put our newly established principles and design system to the test.

We wanted to start with a contained system, so we decided to tackle our iOS app first. For our first pass, we focused on the visual design — reworking the information architecture will come later. You can read all about the iOS redesign and coordinated backend rebuild in WIRED.

Along with redesigning the app, we also built what we’re calling Pinterest’s Product Design Standards, which includes: System—Shapes, typography, colors, grids Structure — The arrangement of components Environment — All the little pieces of the world we’re designing

We spent the next 9 months working closely with engineering to build each component, and we made lots of modifications and adjustments along the way. It’s been an incredible, collaborative effort making sure everything we built together not only meets our design goals, but is reusable and valuable to all other product engineering teams across Pinterest.

Below are just some of the ways our new Design Standards have taken shape across Pinterest.

The epic team that made it happen

Pretty much the entire product design team at Pinterest was involved in vetting and executing the new design system.

We also had a small team of crack designers (Annie Teng, Jay Marsh, Kimberly Fellman, Linus Wahlstedt, Long Cheng, Patrik Goethe, Rick Chatas, Susan Kare, Tom Watson, Woosung Kang) who worked closely with me and our amazing engineers to iterate on design decisions together, to find the right transitions and curves, to prototype different gestures, and so on and on. This was truly the best part of the process. Working across teams, incorporating feedback from multiple perspectives (a process known at Pinterest as “knitting”) made the results exponentially stronger. We also had a lot of fun.

And last, I worked closely with the Pinterest brand team to create new brand guidelines that reflect these same design principles. Our latest marketing is already starting to feel like it shares the same voice with our product. Up next, we’ll be tackling the next wave of improvements for the iOS app, along with redesigning the Pinterest website and Android app, and we’re looking for even more stellar designers to help make it happen. I hope you are as excited as we are about where it will all end up.

Did you think that a stream of cards was enough to call it a day for Material Design on smart watches? Nope. Actually, the cards as we know them seem to be completely gone — but this is another story, for another article. Here I will focus on a fundamental element of Material Design: color.

Color is one of the peculiar aspects of Material Design, one that takes part in the expression of its bold, graphical, intentional style. The ink that ripples through Google’s quantum paper is vibrant, saturated, part of a simple but strong palette composed of a primary color — distilled into two accessory shades to differentiate without adding visual noise — and an accent color, usually contrasting with the former to direct the attention to key UI elements.

A typical Material Design palette

“Color in Material Design is inspired by bold hues juxtaposed with muted environments, deep shadows, and bright highlights […] Color should be unexpected and vibrant”

Material Design specs on Color

So, what happened to color on Material Design for Wearables? It joined the dark side. Literally.

Dark is the new bold

At Google I/O 2016, JP Gil — the designer on the Android Wear team that lead the process of bringing Material Design to wearables — listed three key areas that define Material Design for Wearables: vertical layouts, dark colors and a set of UI components and app design patterns.

Yes, dark colors are listed as a Material Design pillar when being applied to wearables. Say goodbye to our beloved Pink A200 and Indigo 500, because they have been replaced by much darker siblings. The contrasting accent color? that’s gone too, leaving us with a monochromatic palette [2].

Here you have an example of a typical Material Design for Wearables palette, based on the well known Material Indigo: yes, when Google said darker colors he really meant it.

A typical Material Design palette for Wearables

The rationale behind

It seems that the Android Wear team had done some exploration about the use of light colors on wearable UIs — did someone mention white cards on bright, illustrated backgrounds? — and the results were not good for two main reasons:

- First, light colors are not battery efficient on OLED displays — the reason being the need to light pixels with brighter intensity; - Second, light colors can be potentially interruptive when the screen is active — watches are visible on the user’s wrist at all times and a bright display may disrupt a pleasant atmosphere with an incoming notification, especially in a dark ambient like a restaurant or a theater. On the other hand, the use of dark colors could solve or at least reduce these pain points: - Dark colors are less aggressive toward battery life, cause the display doesn’t have to light its pixels at high intensity — of course, this solution is valid only for OLED screens; - Dark colors make the screen less bright when it’s active, and that could lead to a more discreet device.

That’s why Material Design for wearables advocates for dark colors: to enhance the user experience, being that having a longer battery life or a more deferential device. And the whole OS embraces this principle, shifting from an immaculate UI made up of white and greys to a darker, muted palette — using a color schema a lot like the one used by the Settings app on Wear 1.x.

Darker colors system-wide on Wear 2.0

A unified palette system for a coherent experience

But Material Design for Wearables does more than whining about whites and greys: it offers a complete system to build a dark palette made up of five different shades of any original Material 500 color (or any app primary color, for that matters); each shade has been labeled and is intended to be applied to a certain family of UI components — and the overall palette is supposed to cover most of any apps needs.

The same app-specific palette is used by the OS when serving notifications to the main stream: the background color of the card is applied by Android Wear itself — hands off, developers! — and it is simply the darkest shade of the palette derived from the app’s primary color. This way, color is used to create a coherent experience through the whole system.

Anatomy of a dark Material palette: meet the fabulous five

As I mentioned earlier, a palette built for a Material wearable apps derives directly from an original Material 500 color chosen as the app primary color and contains

five

of its shades — the primary color is not consistently used as part of the palette itself. Each shade is named after the UI region that’s designed to fill: color is then even more informative on Wear, because it defines not only some key UI components but every UI region’s function.

Let’s meet these five, from the darkest to the brightest:

Dark background

Lighter background

UI element

Lighter UI element

Accent

A dark Material Design palette based on the classic Teal 500

The names are quite self-explanatory, but let’s explore further how they are applied to the UI.

-The Accent color is the only one in the series brighter than the primary color; it’s used very sparingly through the interface to highlight bits of content that should immediately pop.

-The Lighter background color is used to tint most of the UI backgrounds. The Dark background color is used for some sections of the UI background; for example, an IM app could use it to differentiate the latest message (Lighter background) from the old ones (Dark background). This should also be the shade used by Android Wear to fill the app’s notification cards background, at least according to the explanatory text on the Material Design for Wearable sticker sheet and the slides used at I/O; unfortunately, the images shown in the same context tell another story —or, better, another shade.

-The Lighter UI element color is applied to interactive components of the UI, like buttons and other components introduced as part of the new UI kit — namely, the Action drawer and the Navigation drawer.

-The UI element color is used almost as an intermediate background color and it’s applied to UI regions containing an actionable component (like the new Primary Action Button) or to highlight the background of title and subtitle headings.

The first two renders on the left depict two states of a fictional Android Wear App implementing Material Design for wearables; on the right, a render of a notification fired by the same App. The numbers indicating the UI regions match the list of shades reported under “Anatomy of a dark Material palette”

The extraction process

So, how do we derive our dark palette from a given color? The extraction process is actually fairly simple and it begins by looking at the chosen primary color through the HSB notation. Unlike the RGB notation that describes a color as an additive mix of Red, Green and Blue lights, the HSB notation uses Hue, Saturation and Brightness to define a color.

Each color of a dark Material palette is derived from the given primary color by simply manipulating its brightness value according to a precise scheme, leaving the hue and saturation values intact [3]. The brightness value is expressed as a percentage in the HSB notation and here we have the scheme describing each derived color’s brightness:

Dark background: 15%

Lighter background: 30%

UI element: 40%

Lighter UI element: 65%

Accent: 100%

Yep, the darkest color of each series is really dark.

The same Teal dark palette previously showcased, explained: each shade has a rectangle on top representing the absolute value of its Brightness — having set hue and saturation values to zero.

Exceptions: color correction

For some hue ranges, however, the extraction process require some additional touches besides the brightness value manipulation to generate a usable palette on wearable devices:

Blue hues between 190° and 300° on the color spectrum need to increase the saturation value to 100% when generating the Dark and Lighter backgrounds colors; for the Accent color, these hues also need a 50% Saturation value. Material Purple, Deep Purple, Indigo, Blue and Light Blue colors are included into this hue range.

Yellow hues between 45° and 75° on the color spectrum are the hardest ones to manipulate: they need to use specific hue and saturation values when defining the Dark background color, according to a schema reported on the specs. Material Lime, Yellow and Amber colors belong to this hue range.

Enjoy the dark side

At this point, the new Material color scheme for wearables has no more secrets for us and we can enjoy the new palettes defined in the specs.

It’s worthed to point out that the specs themselves are still a draft for the developer preview of Android Wear 2.0, so some details could change before the final release; and to be honest, at this stage it’s easy to spot some inconsistencies between what’s written and what’s shown by the screenshots or what was presented at I/O — the main problem here is the discrepancy about the use of the palette for some components.

However, the core concept of darker colors on wearable devices and the main process to extract a dark palette from a given color should remain as they are.

Material Design is a living system, and this wearable implementation is another tangible proof of its flexibility and its user centric essence. Material is here to stay, for sure. Even if it joined the dark side!

References

Android Wear 2.0 | Building Apps with Material Design @ Google I/O 2016 (here’s a link to the YouTube video)

Material Design for Wearables specs about color

Wear components sticker sheet for Sketch

Footnotes

When we think about user experience design, we’re often thinking about the way an experience feels to a user and the decisions it prompts a user to make. But, argues UX psychologist John Whalen, these represent only two of the driving forces behind a user’s experience. There are four other “minds” that contribute to whether or not a design is effective.

“Language, wayfinding, emotion, and memory are all things that are sort of in the middle of cognition, but aren’t as obvious as the decision that people will be making or what exactly is going to be on the screen,” Whalen said. “That middle section is currently underserved in books and in the way we describe experience design.”

Whalen, who holds a PhD in cognitive science from Johns Hopkins University, was living in California in the heart of the dotcom boom when he realized the potential for applying the inner workings of the mind to the design community. Fast-forward to now, and Whalen is the founder of Brilliant Experience, a DC-based UX strategy company that takes a “psychology-based approach” to the design process.

He says UX design is a multi-dimensional and multi-sensory experience that taps into these “six minds.” Understanding these six minds is the future of experience design.

1. Vision/Attention

Of all the minds, Whalen says this is the one designers nail best as it appeals to the UI aspect of UX. Still, he cautions that what designers think may appeal to a user isn’t always the case. This is why it’s so important to dive into the other minds in order to establish deeper insights into how the overall experience is influenced by visual cues.

Some questions to ask:

What visual features are drawing attention? Where do the eyes go first on the page? What words/objects are they searching for? What is the visual flow?

2. Wayfinding

Wayfinding refers to how a user gets from point A to point B. It taps into information architecture, innate navigational cues, content and more. Wayfinding becomes increasingly complex in the virtual world, and will continue to do so as augmented and virtual reality, as well as interactive design, continue to rise in popularity.

“In the new world of cell phones where you shake them, twist them or swipe them, we’re using very different tools to do that wayfinding of where am I now? How can I get to the next place? And how do I know if I’ve gotten there?” Whalen said. “We actually have a huge part of our brain devoted to that, so the question is how can we harness that in ways that are so different now in virtual space?”

Some questions to point you in the right direction:

What is cuing your users to let them know “you are here?” How does the user expect to move in space? What are their expected interactions along the way? Are these interactions based on a clear model?

3. Memory/Semantics

Memory plays a huge role in wayfinding, but also in establishing user expectations. Whalen uses the analogy of a colleague suggesting some post-work happy hour drinks. She may be thinking of a sleek, high-tech establishment while you’re envisioning your neighborhood dive bar complete with graffiti on the walls.

“Both would be happy hour, but with very different expectations of how you would be served, what you would have, and how the interactions might play out,” Whalen said.

This too must be considered in UX design. Users come in with expectations based on previous models of experience. They expect things to work in specific ways (for example, like Amazon, Google or Facebook) and they want these experiences to feel natural and easy.

Designers can ask:

What mental schemes are being activated? What does the user think about when they think about X? Does the experience design make sense? Does it activate patterns users are already familiar with?

4. Language

Language is where things can get tricky. It varies based on demographics, user familiarity with the product and terminology, and ease of understanding. All too often, companies make the mistake of over-sharing. They expect the user to be as passionate about the product as they are and end up giving too much information, getting in the way of the user’s experience.

“In many cases we want to simplify and just trust the brand we’re working with,” Whalen said. “Sometimes we get so obsessed with telling people all the minutia we’re interested in and not really thinking about how it’s represented by that end audience.”

Before getting too far ahead in the design experience, teams can have a conversation about:

What words does our target audience use? What is their lexicon? What terms are we using? What tone is appropriate for the product?

5. Emotion

Like it or not, users bring emotional baggage to every experience. They are real people with feelings, fears and frustrations. They are afraid to make mistakes. They have hesitations. They wonder how certain purchases will affect their careers, goals or reputations. All of these elements influence the decisions they make.

“We often talk about quick emotions, like in this game am I excited or bored or happy, but we also try to think about what are these deep emotions that also are a major driver,” Whalen said. “If you go back to how would they like to be represented as a human and what to them is the most valuable, suddenly we get really interesting responses.”

In one example, Whalen studied people of high net worth to determine what banking needs of theirs were being underserved. He asked questions ranging from what credit cards they had in their wallets to what their goals were—and whether or not they thought they were likely to achieve them.

“Of 24 interviews, three people cried and six people hugged me and said, what a great therapy session,” Whalen said. “We don’t usually think to ask what it is that means the most to [a user] in this world and how to get it out of them in a way that’s authentic. How do you get people to a level at which they expose themselves in a way that might be perceived as threatening in a way we don’t usually do?”

Whalen likes to take the appeal, enhance and awaken approach.

What will draw them in immediately? What will provide lasting meaning and value? What touches on their deepest goals and wishes? In his research and user interviews, he likes to explore what responses a user experience triggers. He looks at a user’s fears and asks, how can we allay those fears and produce positive experiences? Understanding a user’s underlying emotions is very important and can provide deep insight into why users make the decisions they make.

6. Decision Making

One of the number one questions asked about decision making is why do people not act? It is part of the responsibility of a UX designer to factor in all of the above elements in order to make the decision process easier for the user.

“There are a lot of people who talk about persuasive design,” Whalen said. “How do you get people to make a decision, be willing to respond to an ad, or to finally commit to buy?”

A designer’s power tool is anticipating what a user will need before they need it and then incorporating this into the overall experience strategy. Some of the questions Whalen recommends exploring are:

How can we help the user make a decision? What information do we already have? What will the user need next? How can we augment their “micro decisions” through design?

Emergent User Experience Design

Together, these six minds comprise what Whalen calls emergent user experience, a field that sits at the intersection of psychology and user experience innovation. By better understanding how a user thinks and the cognitive aspects that drive their decisions, UX designers can create more optimal and meaningful human experiences for users and organizations alike.

tinue to do so as augmented and virtual reality, as well as interactive design, continue to rise in popularity.

So. Besides all the Ooo’s 😮 and Ahhh’s 😃, there are other reasons to use parallax scrolling. Not to get too far into them, here’s a brief list of some reasons: Presentation User engagement and interaction Guiding the user Providing some FUN! 🎉

My opportunity & concept⌚️

Providing some context… As some of you might (or might not) know, I’m quite the EV (electric vehicle) advocate. I currently drive a BMW i3 (moving to the 30 kWh Leaf next), and it has been an awesome learning experience and first step into the early adoption phase of the EV community and industry. From a designer’s perspective, there’s so much opportunity in this space with all the apps, smart features, etc. that these vehicles offer. As my love began to grow for Material Design and Android again, I noticed that BMW never released an Android Wear version of the BMW iRemote app. When I first got the car, I was on iOS. The Apple Watch version was available, but it wasn’t great in terms of design and execution. It worked at least, though.

Material Design for Wearables, provided by Google

I recently switched to Android (for various reasons) and wanted to see how things were on this side of the waters. The mobile app was fine, but again as I said earlier, no Android Wear version. ☹️ I had never designed a fully fledged concept for a watch device, and with the timing of Google releasing the new M.D. Wearables Guidelines, I knew I had to jump on this!

Let’s get diggin’

Alright, the moment you all wanted to really dive into. Making this happen in the wonderful and easy to use prototyping tool, Principle. (14-day free trial if you don’t own a copy. And it’s based on actual usage time! 👍) To give you a decent idea of my setup, here’s a brief overview of my artboard/layers/groups. Most of the layers & groups I kept untouched, using the Import from Sketch feature. I also hid some of the graphical elements to give you a clearer view of the main parts:

Pro tip: When you’re in Sketch, I recommend exporting your assets at 2x sizes. It’ll import into Principle at retina quality. You can even drag n’ drop directly from Sketch into the Media slot like so (or layers/groups directly to the dartboard):

Setting-up & clipping our screens ✂️

Once we have our layers/groups where we want them, let’s mask out the watch display so our screens are circular. Principle makes this very easy with the Clip Sublayers option. Let’s take the background group. As you can see below, this consists of the background gradient, shadows and lens flare objects…

Important note: When your groups are imported in, they will be the size of the total bounding space of the layers within it. You will need to resize the clipped group so it matches the size of the display. This will not scale your objects. As you see below, mine was resized to the size of the display on the watch…

Now, because the display is round we’ll need to add a radius as well. In my particular design I went with a radius of 170. In most places (CSS, design apps, etc.), rule-of-thumb is just use about half of the total width or height if you are trying to get that perfect circle. Sometimes if you go too far over the half mark, you’ll get some wonky paths. I’ve seen this in Sketch a lot, and you may need to zoom in to see the wonkiness happening up close.

Go ahead and do the same for the Display group, so what will be our pages, are also clipped/masked.

Draggable pages

We have our sizing for the two groups worked on above, so it’s time to get the first part of our paged interactions. Since we already sized our Display group to the size of the watch display, the only thing we need to do is change the Horizontal property to Page. The result is simply what you expect! Draggable pages for each group/layer within the Display group! 📖 👈

As reference, this is covered in Principle’s docs/tutorials, in a nice simple video:

What’s next? Drivers! 🚕 💨

Let’s animate the background to start giving it that depth and 3D space. Instead of animating a second artboard and moving things around that way, we’ll be using Drivers. What are Drivers you ask? 🤔 Here is how Principle puts it in their docs:

Drivers connect properties to each other using keyframes. Unlike Animated transitions, which occur “between” artboards, drivers work in dartboards.

Woah cool! That will save us a lot of workspace too! So, if you click on the Drivers button in the toolbar at the top, it will open the timeline. In my instance and screenshots, I have a few things listed already. In your case, it’ll be empty and ask to select a layer and change its Horizontal/Vertical property (Drag, Scroll, Page). Once you do that, you will see the Driver Source show up in the list. For example, if you chose Drag or Scroll, you can now drag your object in the Preview window. You’ll also see if you scrub the timeline bar, it will move the object on your dartboard.

Another pro tip: You can pinch n’ zoom on your trackpad or hold ⌘ + scroll on your mouse to zoom the timeline in & out. 🔎

For my example, I’m going to start with making my background gradient layer move horizontally (X-axis) when I drag to each page. I’m going to leave the layer property as Static, since I don’t need to interact with it. We wouldn’t be able to interact with it anyways since our Display group is over the background. If I scrub the timeline around we’re going to see the pages slide.

Let’s go back to the 0 central position, then select the background gradient in the Driver sources and click the Add Keyframe blue diamond icon button. Once we have that first keyframe, we can scrub to the left to -311 (the width of the Display and background group), and then move the layer all the way to the right until the left edge bumps into the left side of the display. I also went ahead and turned down the shadows group Opacity to 50%. We should be seeing some movement at this point:

Getting there! 👌

I’m going to let you finish the rest of the pages/views, what I’ve shown you so far should be enough for you to get there. 😊

Keep going! 🏃

You should have 3 keyframes now for the background (shadows and gradient). But wait, we still have those lens flare looking things sitting in the background right? There’s a decent amount of spacial awareness and sense of position from just moving the gradient, but if we can add some other background elements (like the lens flares) to move as well, it can really kick things up a notch! So let’s do just that. If you think of the lens flare objects in z-depth (meaning closer/further to you), the largest one should be the closest one to you. Naturally, if things are moving from side to side, (side scrolling adventure games coming to mind like Terraria 🌄 🎮) the closest objects are going to move across the screen with the fastest and furthest change in position.

Starting with the blue side, which is the Remote Control actions page, we’re going to grab each lens flare using Drivers again, and move them over to the right. (Don’t forget to add initial keyframes at 0, before moving them.) We especially don’t want the orange flares in view. Keeping the 3D depth in mind, let’s move the largest flare the furthest across, and the smallest one the least amount between the three. Mine looks like so:

The more drastic the difference in speed between background elements, the more apparent the parallax effect will seem.

To the finish line! 🏁

The current prototyping tools landscape:

Of course, there are plenty tools I have missed. Please feel free to keep these to yourselves.

Essentially there are 3 types of tools: Vector tools Multi-page tools Single-page/Layer tools Let’s take a look a each one:

Vector Tools

If you have been anywhere near a designer, you have seen or used one of these tools. Inevitably 90% of designs are done inside vector based programs.

Pros: -Super easy to use. -This ease of use means designers can really express their vision for the design accurately.

Cons: -Limited to no interactivity. We end up producing flat art-boards and then stringing them together in another multi-page interactivity tool, like InVision, to mimic interactivity. -Designing at multiple screen sizes and resolutions can be a pain (Sketch is making this much easier though). -Require complicated spec sheets and handover files to ensure the developer can interpret the designs.

Multi-page Tools

As mentioned above, these tools tend to take flat designs made in a vector program and string together the whole flow of the app. In fact, most of the good ones interact directly with Sketch to improve the workflow.

Pros: - Pretty easy to use. - Allow designers to fake a real app relatively well. - They are great for demonstrating flows, animations and simpler interactions which is useful when proving the concept.

Cons: -All the interactivity is, essentially, fake. By this I mean there is no actual internal logic inside the app. Things like text fields and data are tough to mimic. -It’s also very difficult to show lower level animations and user-interactions. -You have to create the design in a vector program, and then string together the pages.(InVision has a pretty good workflow with Sketch though) -Still difficult for a developer to interpret the designs.

Single-page/Layer Tool

These tools are primarily for prototyping out smaller, more detailed interactions. Useful for demonstrating single user flows and moments.

Pros: -Relatively high degree of interactivity. Some tools, like Framer, allow you to make working text fields, use live data sources and responsive interactions.

Cons: -High learning curve. The more interactivity, the higher the learning curve. Pixate requires a passing understanding of Javascript to really exploit it’s features. Origami requires keeping track of a vast set of nodes. And in Framer, the design is done in code (CoffeeScript, which is like a more readable version of Javascript). -The developer needs to spend time duplicating work you have already done.

Okay, so what’s wrong with these? What’s the problem with a high learning curve? If you can demonstrate interactivity to a developer in code then surely it is worthwhile? Well, no, not really. None of these tools solve the main issue in UI design: bridging the gap between design and development. When you pass your design on to the developer, all that work learning CoffeeScript and stringing together nodes, that’s all thrown away. These things may help the developer interpret your design better, but he/she still has to sit down and build it from scratch, in code. This takes time. Yours and theirs.

So, what is the answer? It’s not to make these prototyping tools more complicated. It’s to make coding UI, more intuitive. In a perfect world, a designer could build the UI, in code, whilst the developer focuses on complicated developer bits™. The problem is, right now, doing that is really hard.

Introducing Fuse:

Fuse is not a prototyping tool. In fact, it exists so that prototyping (as most people currently use it) should no longer be needed. It is a mobile app development framework (fancy way of saying: a set of coding languages that you use to make apps) that’s more accessible, but still outputs 100% native code for both iOS and Android. What truly makes makes Fuse different, is that it is designed to bridge that gap between designers and developers by empowering designers to get involved in the process earlier and more often. Building UI in code is simpler, more intuitive and scaleable. When developers no longer fear designers intervening late in the process, you know you have a good workflow.

UX Markup — An introduction: You can think of UX markup as a coding language built specifically for making mobile UI’s quickly and easily. It’s an XML based language so you might recognise the way it works already.

1. Limiting Variables

If we consider all the potential variables to produce a high fidelity concept, and there can be many, it becomes clear that we need to limit and define them early on. Reducing the amount of choices available will make it easier to be decisive.

With experience, it becomes easier to predict how limiting certain groups of variables have a multiplying effect throughout a composition.

Reducing choices doesn’t correlate to reducing originality. Our assumption is that creating concepts around predefined rules is a limitation, but as designers we can establish our own rules, and be in complete control of formulating them.

Scale & Spacing

Every facet of UI design should revolve around a system that promotes rhythm and helps maintain consistency in scale and space as a project grows. One such system I love to use is modular scale, which can facilitate a scale from any given ratio to measure or set the size of an element or negative space in a composition.

While it can reduce variables on grids, typography, vertical spacing and the overall dimensions of a layout down to a manageable level, it also provides pleasing aesthetics and rhythm. Designing UI is far easier.

Grids

Grid systems are great for restricting how content is organized within the horizontal plane and a no-brainer when it comes to UI. However, a grid is often picked without too much thought, to be a one-size-fits-all. What most designers don’t realize is that it’s better to create a grid system that is built around the content.

This means ideally having a clear understanding of content scenarios in advance so that it paints a picture of how to better serve the content from a particular grid. Think of the business constraints with preexisting assets and brand guides, such as a logo that has specific spacing rules and requirements, or perhaps ads with specific fixed units.

The type of content is also a factor. There’s a big difference between devising a layout for a shop, news publication or blog, or a simple splash page. A layout that is image-heavy vs. word-heavy. It could be helpful to understand eye-scanning patterns and how they have an impact on visual hierarchy.

The more understanding of the business and content restraints upfront, the easier it will be to pick a grid system and make layout decisions.

Typography

I would argue that typography is the most important aspect of UI design, as it can make up to 95% of the web and be the driving force of communication. While systems like modular scale can be applied to size and leading, font families and styles can also be limited. A UI should never need to exceed two families and a couple of weights. Rules can also be extended to how justification and title case is handled.

Color

It’s easy to get over-zealous with palettes. A small range of tones can go a long way to producing sufficient and consistent visuals. Usually all we need for a starting point is five swatches.

Most brands should incorporate a primary or accent color, and a few neutral or contrasting tones to compliment it. We don’t need 15 shades of one tone, especially at the beginning. It’s better to start small and augment a shade or two later on.

Images

How we incorporate images into UI is largely determined by the context of the content. If we have a rough notion of what that is, we can create a starting point for our images with variables for ratio, size, shape, and treatment. We may find that we don’t need that many.

Limiting our image variables will enforce better consistency and make it easier to manage image assets in the long run. The same goes for iconography.

2. Creating A Style Guide Earlier

As a UI project grows conceptually it becomes increasingly important to create and maintain a style guide, or pattern library. This will establish design principles to help the project scale, maintaining rhythm and consistency. If we’re defining variables beforehand, it’s a good way to document them. Future decision-making is going to be easier with a style guide than without one.

Depending on the project, creating a style guide is a luxury and quite often intended for future reference. This is why most style guides get put together at the last minute or after the project is complete, and that’s still good practice. But while there is plenty of post-rationalization and reasoning for a style guide to aid prospective design and development, it can actually help build up fidelity in the early stages of conceptualization.

Creating a basic style guide right at the beginning will not only establish principles early on to reduce design decisions, but also help as an infrastructure to evolve and augment principals going forward.

Making one at the start doesn’t mean it has to be complete — far from it. Styles tend to evolve more in the early stages anyway, and the bigger a project gets the more clearer and tighter the boundaries become.

3. Modular-Based Priority and Adaption

In modular-based design systems, such as Brad Frost’s Atomic Design, a layout can be formulated out of specific key areas. Modules become reusable throughout various layouts. Interfaces are treated as systems and not pages, with pattern-based design and development a big part of the process. This is a great methodology and it makes UI design much more manageable, but to make it more effective we have to prioritize the key areas and adapt everything else around them. This in turn will ensure there is visual coherence.

Identify Key Areas

Our design should revolve around the important parts. The priority of each area is determined by its content or functionality within the interface, and is essentially the key to the puzzle.

By focusing on the important areas first, we are reducing design decisions thereafter as subsequent areas have to bend and adapt to established surroundings.

Focus On Key Areas

Once high priority areas have been identified, it’s about super-focusing on the critical parts and finessing them to completion. The idea is to ensure they’re intuitive and meet all requirements before adapting the less important areas.

4. Making It Work For Everyone

For thousands of years designers have strived to do one thing — communicate effectively. We’re continually reinventing and fine-tuning ways to better communicate visually and audibly to an audience.

With ever-increasing access to information from the widest possible audience, it’s become imperative to maximize accessibility to as many types of people as possible.

Accessibility Is A Blessing In Disguise

Catering to a wider audience sounds like more work, and it’s tempting to see accessibility as a barrier to innovation. However, complying with the latest standards can be a blessing in disguise, especially if they become second nature.

Examples of this in design terms could include requiring that we need a minimum font size on body copy, or a significant amount of contrast between copy and background, or bigger linkable areas on touch devices.

It’s Not Just About Disabilities

Accessibility is not just catering to disabilities as some would imply, but also to users with legacy devices and browsers that don’t support all the latest features and enhancements. Being conscious of these standards and observing them will naturally reduce design decisions.

5. Using Tried And Tested Patterns

The fact is, users find interfaces intuitive when they conform to the hundreds of common design patterns they have absorbed from years of practice and exposition. As soon as we start breaking away from typical molds and treading new ground, we may find it takes time for a new pattern to become completely intuitive to the masses.

There’s a time and a place for creating original UI patterns, but we shouldn’t shy away from common techniques — they’re successful for a reason.

The silver lining is for us to worry less about reinventing, and concentrate on aesthetics. It is still possible to create original work based on established patterns.

The more we get to know and integrate successful design patterns, the less choices we have to make as designers. We’re not necessarily considering what might work, but what will work.

Final Note