ROMAN NURIK: There are a lot of ways to design something.
That blank canvas you get at the start of many projects,
I think it's something that designers and developers love
about what they do.
And for every 100 complicated solutions to a design problem,
there's only a handful of simple ones
that I think will work and be successful.
I think it's why simplicity in design is so revered.
I'm Roman, a designer in the Firebase team at Google,
New York.
And I love this little app called Circuit.
And I want to talk about some of the design details that
make it so beautifully simple.
So Circuit is an app that solves the traveling salesman problem.
You give it a couple of destinations
and it figures out the optimal order to visit those places.
I'll add a couple of my favorite spots
here in New York as a quick example.
Once I'm done, I can hit this nice big button
to calculate the route, and proceed
to navigate on Google Maps.
And that's it, simple.
I did all that in under a minute.
So let's talk about some of the design choices
here that I think are really great.
First is contrast.
At any given point, these big splashes of blue
clearly draw my attention to what I should do next.
Now the app also uses verbs like improve, navigator,
and calculate.
And this creates affordances.
You don't always need special visual treatments
to make something look clickable.
Now while we're on the subject of UI text,
one minor suggestion is instead of using title case,
to use sentence case in labels like Remaining route or Total
estimated savings here.
This will make the app feel a little bit friendlier.
Speaking of which, this expand and collapse transition
here is dead simple, but done incredibly well.
So as the one-line summary moves up and down,
the other elements, they slide and they fade with it.
And this creates this consistent spatial relationship
between expanded and collapsed states.
It almost establishes this one-line summary
as a synecdoche, a symbol for the expanded state.
I think it's something that's very powerful
for these progressive disclosure UIs,
and can make them much more successful.
So notice how in the map in the list,
there's a bunch of shared visual elements-- the step
circles, the flag, and then the path to the next step
is a darker blue, compared to all the other paths
that are a lighter blue.
Using a coherent visual language like this,
is a great way to connect related elements
throughout your app, without needing
to use a legend or any other visual aids.
It's a great way to encourage your users to really
quickly build a mental model for how your app works.
One idea here is to go a step further and differentiate
previous paths from upcoming ones.
In general, I think it's always a great idea to consider users
past, present, and future.
Finally, let's talk about something at play here
that's invisible.
If I click on Edit, you'll see that this app is following
the 8dp grid and keylines from Material Design
to create harmony across the UI.
If I turn on a couple of nice overlays,
you'll see what I'm talking about.
First, I'll use the grid and keylines
overlay from this app called Designer Tools.
And then I'll turn on Show Layout Bounds from Android's
Developer Options.
Aligning elements through these natural visual guides
is a great way to create order and balance in your UI.
The human brain is really good at pattern recognition,
and it's even better at spotting things that break that pattern.
So remember to be deliberate whenever things
aren't aligned in your app.
So those are some of my favorite visual tidbits in Circuit.
It uses contrast to clearly tell me what I should do next.
It employs a clear visual language
to create cohesion throughout the app.
It uses motion to subtly express the relationship between what's
visible and what's hidden.
And it creates harmony in the UI by using Material Design's
8dp grid and keylines.
These little details, and many more,
make this app feel very simple and easy to use.
And that's something that I think
that all designers and developers should aspire to.
If you have an app you want us to take a look at,
click here to submit it.
And make sure to subscribe to our channel
for more awesome design videos.
[MUSIC PLAYING]