Tip:
Highlight text to annotate it
X
ROMAN NURIK: Welcome to Android Design in Action.
I'm your host, Roman Nurik.
ADAM KOCH: Hey, guys.
My name is Adam Koch.
NICK BUTCHER: And hi.
I'm Nick Butcher.
ROMAN NURIK: And today's episode is about the beautiful
design collection on Google Play.
And I think it was about a month or so ago that we
released a collection on Google Play called the
Beautiful Design collection for summer 2013.
And this is a collection of 11 apps that highlighted some of
the best of class, or I guess some of the best designed apps
on Google Play.
So in today's episode, we're going to look through these
different apps on our tablet here.
And we're going to talk about some of the best design
details in each app.
And then I think we'll have time to go
through all 11 apps.
And then we have a couple things at the end that we'll
show as well.
So with that, any other intro, guys, before we jump in?
ADAM KOCH: Nope.
NICK BUTCHER: Yeah, I just want to talk a little bit
about how these apps were picked.
I think that the idea behind this collection is that these
are applications which really embrace the design guidelines
but also go beyond that and really have that level above
that adds the polish that makes it a beautifully
designed application.
ROMAN NURIK: Absolutely.
So let's see.
So the collection from the blog post that we posted about
this collection talks a lot about attention to detail.
And it's not really about just getting the 80% of the app or
90% of the app looking great.
It's really just adding that final 10% of fit and finish
and polish that, again, like Nick said, goes above and
beyond just following the guidelines and really kind of
stressing that every single part of
the app must be polished.
And really, you have to think about every single flow that
the user would go through.
And so these 11 apps we found contain some of these
masterfully crafted design details.
And so that's why these were chosen.
Obviously, this is only 11 apps.
There are tons more beautiful apps out there on Google Play.
This is just kind of the first set, or I guess the first
collection in this set, in this series.
You should expect more in the future, in the coming
different seasons, since this is just the summer 2013
collection.
And we also wanted to mention that very recently, there are
some other apps that have been published.
And Matias Duarte, who's the Director of User Experience
for Android, had this really long Google+ post that talked
about kind of where the guidelines sit in terms of the
design process.
How you should approach the guidelines, what types of
decisions you should be thinking about, where you
should begin introducing branding and consistency and
things like that.
So while we're on the topic of the Beautiful Design
collection--
which, again, the apps there do follow the guidelines, but
they go above and beyond that-- while we're on the
topic of this, I think that this post really summarizes
some of the Android Design team's views on the guidelines
and consistency and where they fit in.
So with that, should we jump in with the first app?
OK.
So the first app we're going to look at-- and so, actually,
these are the apps that we're going to look at today.
We have Pattrn, Eye in the Sky, Pocket, Timer, Grand St.,
Pinterest, Press-- lot of Ps--
Press, "New York Times," Expedia, Flipboard, and Ted.
So those are the 11 apps in that collection.
So the first of these is Pattrn.
So Pattrn is basically an app that lets you look at
different wallpapers.
And actually, these wallpapers are all pattern tiles, hence
the name Pattrn.
So they kind of tile across.
They're not just one big photo or anything like that.
But it's really something that lets you browse and browse
patterned wallpapers and set them.
So we're only looking at tablet today.
One of the key things in this collection, actually, before
we jump in here, is that most, if not all, of these apps are
really responsibly designed.
So this is one of the--
meaning it works on tablet, it works on phone, it works on
seven-inch, and so on.
And so this app right now is one of the best examples of a
very nice standardish responsive design, where
basically on a tablet here, you see multiple columns of
patterns, of wallpapers.
And on a phone, you actually see fewer columns, maybe just
one column and two columns on landscape.
And then you have your kind of core navigation on the left.
You basically can jump in between or switch between
different sections.
And then you can open up one of these wallpapers.
And one of the nice touches is that they have these very
subtle animations here that let you see more.
And actually, it also goes into lights-out mode.
So you actually fade out, or you dim the navigation bar and
the status bar in the process.
And one of the last things I wanted to mention about this
app-- and obviously the responsive design, I think for
me, is one of the biggest things about it
that makes it so great--
one of the last things is that there are subtle little
touches here and there, like letting you rotate the
wallpaper, set the wallpaper automatically on a schedule.
And then also, just the overall fit and finish, it
really does feel like a really, truly
Android-designed app.
So overall, just a very solid app.
That's the first one in our collection.
Can we move on Pinterest?
ADAM KOCH: All right.
So let's talk a little bit about Pinterest.
So for those of you who are not familiar with Pinterest,
it's a social networking app that sort of revolves around
these virtual pinboards, where you can
pin up virtual content.
I will admit I am not a big Pinterest user myself.
But that doesn't mean I can't play with the app and use the
app and see how it's beautifully designed.
So the first thing you'll notice, and this is kind of
interesting because there's no sort of standard action bar.
And of course, if you've listened to any of our shows,
we're always talking action bar, action bar, action bar.
But in this case, they've actually gone for almost like
a hybrid between top-level tabs, which you may see in an
app like, say, the "People" app, and the sort of standard
action bar, where you have branding only in the top left.
And it actually works nicely because on their website, they
have this same design and layout.
So you can see here, they've still got the sort of standard
interaction patterns of swiping between these tabs,
where the middle tab is really sort of home
or browse your stream.
And the left tab, while it does have a search icon, it's
more of a discover tab or something along those lines.
And so that's the first I wanted to call out.
The second thing is this multi-column layout.
And that's, again, very similar to their website.
And this is really nice because, obviously, their
social network revolves heavily around content, so
it's a very content-forward design.
And it has the added advantage that it's also very
responsive.
It scales very well to different screen sizes.
As we mentioned before, we couldn't show you the phone
layout today.
But you'll see on the phone layout and on the smaller
tablet or portrait layouts, you'll see that it reduces the
number of columns nicely there.
ROMAN NURIK: One of the best things about this, really
quick, is that the Chrome of the app, the bar at the top, I
guess the action/tab bar, the bar at the top follows the
natural Android interaction model, but the content is very
much Pinterest.
It's very much
Pinterest-branded content, almost.
The exact layout of the posts is very
much a Pinterest thing.
So that's one of the ways in which they
let their brand show.
ADAM KOCH: And they've also sort of fused their brand
design with the Holo design language.
So you sort of see the Holo design tabs.
You sort of see the buttons are much flatter than what
they have on their website and in other platforms.
They have sort of the overflow down here.
So they've done a very good job at the middle ground
between fusing Android design with their own brand.
NICK BUTCHER: And just one little thing on Pinterest.
I absolutely love the way, as it's loading in a new image,
it'll take the average color of the image, right?
Yeah, there we go.
So the color shown will be the average color of the image
once it's loaded.
It's a completely unnecessary detail that I love.
It is delightful.
ROMAN NURIK: Yeah, it's one extra database field, but for
a lot more value there.
ADAM KOCH: All right, guys.
So that's Pinterest.
We really like the Pinterest app.
ROMAN NURIK: Pocket?
Nick, you want to talk about Pocket?
NICK BUTCHER: Yeah, absolutely.
So Pocket, hopefully you know, is kind of a catch-up reading
of the news sites.
So you can save sites, videos, images, and so forth into your
Pocket and catch up later.
So when trying to pick what I wanted to highlight in this
application, I initially thought about
the responsive design.
Because like these other applications we looked at so
far, this app responds beautifully to the form factor
of the device you're looking at it on.
So on a phone, for example, it'll use list-based
navigation when you click a [INAUDIBLE].
And as you get to larger devices, it breaks out into a
grid, and then there's kind of an asymmetric grid,
as you can see here.
If you have more content, there would be lots and lots
at the top.
ROMAN NURIK: Yeah, sorry about not filling it out completely.
ADAM KOCH: I forgot to add it in, but that's OK.
NICK BUTCHER: No problem.
But in fact, my favorite detail, I think, about this
application is the sheer focus on the reading experience.
The application does a lot of stuff, but it doesn't feel
heavy in its user interface.
Everything seems to get out of the way in order to let you
have the best reading experience.
So for example, the user interface here, the action bar
and so forth, is all quite muted.
So it immediately recedes out of the way.
And if you could start scrolling down through the
article, as soon as you start scrolling-- that's a very
short article.
Were it longer, as soon as you start scrolling down, the
action bar hides.
And once again, we go into this, what we refer to as
lights out mode, where the system bar and
navigation bar recede.
See the slightly dim state.
So it's all about the reading experience.
But as soon as you start scrolling back up, which
indicates you've finished the article, for example, the
affordances jump right back.
So you can check the time or multitask to another app or
use one of the action bar options.
So it just gets out of your way, and it just works.
And I love that focus on the reading experience.
And the same thing's true of their kind
of pagination model.
So you can either read it in an endless stream, so where
you're swiping up and down.
Or you can swipe left and right to change to a paginated
content model.
And I love the fact that there's no-- you can imagine
that one way of implementing that interface would be some
kind of toggle or switch or machinery in order to do it.
But instead of doing that, they just listen to how you're
trying to use it.
So if you scroll vertically, then it'll give you a vertical
stream of content.
And if you scroll horizontally, then it'll
automatically flip into this paginated content model.
So again, it just reduces all the machinery around it and
just really, really focuses on getting out of your way and
letting you get to the content.
So really, really great attention to
detail in this app.
ROMAN NURIK: Yeah, I'd say that it's one of the best
in-reading experiences.
If at all, you need to build an app that lets you read
through large chunks of content that have large body
copy, definitely look at this app as a shining example of
how to do that right.
ADAM KOCH: Yeah, it looks a lot different once it's filled
out with content.
We did a bad job at prepopulating it today.
ROMAN NURIK: All right.
Shall we move on to Timer?
So Timer is a very, very simple app.
It's--
ADAM KOCH: Let's start the ADiA timer.
ROMAN NURIK: Oh yeah, sure.
So Timer is basically an app that it's just that.
It's a timer.
It has a couple of features.
It has basically a stopwatch.
Does it have a stopwatch?
I actually don't remember.
NICK BUTCHER: Nope.
ROMAN NURIK: But it basically has a countdown timer.
It's just kind of your standard, run of the mill
countdown timer.
But the best thing about this is the interactions and the
little ways in which they sprinkle Android goodness.
So for example, if you pull down the shade here-- well,
Android Design in Action is live.
That's good--
you'll notice that the notification is very
customized.
And they have actions built into the notifications.
So without even-- let's say I'm just at
the home screen here.
I can manage my timer right from here.
So I can pause and resume it.
I can see how much time is remaining.
And I can obviously end it if I needed to.
But also, one of my other favorite things about this was
that the interaction for creating a timer is very
simple and intuitive.
So you basically just drag this thing around.
And sorry for the lag here.
I think our HDMI connection is laggy.
But you basically just drag this around.
And it's very tactile and kind of visceral, the feeling of
rotating a dial.
It almost hints back to the earlier
days of a rotary telephone.
So the interaction model here is very nice, and it's also
very simple.
The last thing I wanted to point out is that they have a
couple of themes.
And while having multiple themes is not a necessity,
it's always a nice extra touch.
And they also basically theme everything.
So if you switch from the light blue to the light orange
theme, basically everything becomes orange.
The action bar, tabs, even the app icon becomes orange.
So you can see here, their single accent color changes to
fit what the user prefers.
So overall, very nice, simple app, obviously also using
responsive design best practices.
They have a tablet version that works in portrait,
landscape, 7-inch, 10-inch.
So just an overall very solid, very simple app that just gets
the job done.
I think next we have Grand St.
ADAM KOCH: Yeah, just pardon me jumping in there.
One last really subtle touch that I really like about this
is-- and you can't really it--
is that in the actual rich notification, they have that
same circular representation of the timer, which actually
fills in with the color of the theme that you chose as well.
ROMAN NURIK: Yeah, if you just do--
NICK BUTCHER: Show the timer, maybe.
ADAM KOCH: OK, let's move on.
Let's move on.
ROMAN NURIK: Yeah, just do on this.
NICK BUTCHER: We could probably use this app to make
sure we don't overrun.
ADAM KOCH: I know.
We should use it every week, actually.
Let's leave it running.
All right.
Let's move on to Grand St. So yeah, I'll
switch this to featured.
ROMAN NURIK: Oh no!
Ah!
ADAM KOCH: Oh, demo fail.
NICK BUTCHER: Cannot see the demo.
ROMAN NURIK: Yeah, there we go.
ADAM KOCH: Demo fail.
So Grand St., for those of you not familiar with it, is
basically a curated gadget catalog.
And the Grand St. team goes and finds these interesting
gadgets and then reviews them and then posts them up through
their app and through their website.
And the first thing you'll notice is it's basically like
a digital magazine.
They've essentially converted the old school version of a
physical magazine into a digital magazine.
And you can see, it's instantly full-screen imagery,
really nice typography.
And they've actually gone for this sort of custom action
bar, but very much sticking to the interaction patterns and
the layout, the sort of gist of the regular action bar.
You can see they've got their app icon in the top left, a
spinner next to that.
And then they've left the area between that empty, and then
they've got the regular sort of action items and overflow
on the right there.
I think it works really well for taking the focus off the
UI elements and then bringing the focus to the actual
content of the application.
So you can see here, they've got these dots representing
the different pages of the magazine.
And then this is one of the products.
Let's go into it here.
And then they've got this really nice representation of
the actual review and content.
So between each of the screens, there's actually
these full-screen images.
And around subtle design touches, you can see here it
sort of fades in as you swipe out.
You can read some information about the design and then,
again, see another really nice full-screen image here.
And an interesting thing that we can't actually show here is
that if you go into portrait mode, it is a slightly
different representation where you can view the images at the
top of the screen and then the content below that.
Can't show that here because we're on HDMI, and it's kind
of hard to rotate around.
And then I'm not going to talk too much more about this
because we're low on time.
But for previous items that they've talked about, the sort
of non-featured items, they have this nice, clean grid
view of items.
And again, it's multi-column, so it scales very well to
different screen sizes.
You can go back and browse all of the previous items that
they've actually reviewed in the past.
NICK BUTCHER: And the Grand St. Team, actually, they had a
really nice blog post about the iterations of design they
went through in order to arrive here.
So if you check out their blog [INAUDIBLE].
It's pretty interesting.
ROMAN NURIK: Cool.
You'll have to share that in the comments somehow.
My favorite thing about this app is just the complete focus
on full-bleed imagery and typography.
And that really makes it feel more like a magazine because
there's no Chrome on magazines.
There's no buttons you can press in a magazine.
It's really all content that you're playing with.
So this really feels like that.
ADAM KOCH: And they even go to the point of engaging the
low-profile mode so that you're really engaged in the
full-screen content.
All right.
ROMAN NURIK: Let's move on to Eye in the Sky Weather.
Nick, do you want to talk about Eye in the Sky?
NICK BUTCHER: Yep.
OK, so my favorite thing about this application is the sheer
simplicity of it and the way it elegantly shows the
information hierarchy.
So I think they do a really, really great job of really
picking out the most important information and then making
the flow of that information really obvious.
So it instantly jumps out at you what the immediate
conditions are, and then you can tell by the layout and so
forth what the upcoming dates are.
I think it's a very simple application.
There's a ton of web applications out there.
But I think this one in particular does a great job of
just elegantly displaying what you need to know and putting
everything within easy reach.
Once again, it's also another example--
I think like all of the apps in this collection--
of great responsive design.
It'll move--
on a phone device, you'll have these three major sections on
the left will be swipeable tabs, and on a larger device,
at a certain point, they get broken out into this dedicated
navigation section.
And it rearranges what we call the macro reflow.
It rearranges the major content blocks in order to use
the space well.
ROMAN NURIK: I also personally love the upgrade
banner at the bottom.
It's not in your face.
You can actually dismiss it.
And I think if you dismiss it, it shows ads.
Well, at some point it shows-- yeah, there it is.
But it's basically kind of an unobtrusive way to hint at
other features that are available.
Or it's like an upsell, but it's an
unobtrusive upsell, basically.
So it's kind of a nice way of doing it.
ADAM KOCH: I think weather apps are actually an
interesting problem because there's so much information
you can display.
And it's actually challenging to get everything displaying
in a nice, concise format, as Nick was saying.
ROMAN NURIK: Shall we move on?
NICK BUTCHER: Yeah.
We need to go quickly.
ROMAN NURIK: All right.
What are we at?
10:48.
Ah, that's fine.
We got plenty of time, guys.
All right, next, let's look at Press.
So Press is an app that-- let me just go to the very
beginning here.
Press is an app that is basically your feed reader.
Formerly, it hooked up to Google Reader.
So it was basically a Google Reader client.
It would show you all your different subscriptions and
all the different articles that you haven't read under
each subscription.
And now it supports a variety of different services,
including Feedly, which is what we have hooked up here.
But the idea is that it's basically a client your
reading stuff, your reading queue.
I would call it the pre-Pocket.
You look at something here, and maybe if you want to read
it later, you throw it into Pocket.
ADAM KOCH: That's definitely my workflow,
like press to Pocket.
ROMAN NURIK: Yeah.
But the idea here--
the reason we like this app so much is that it's just very
clean, again, very minimal.
It's all about content.
You can even look here.
The tabs here on the left--
actually, on a phone, this would be one
screen here on the left.
And this would be the next screen.
We basically have tabs here on the left.
And the icons for the tabs are incredibly minimal.
The filled circle means that it's unread.
The outlined circle means it's read.
And the star just means it's your starred content.
So it's a very interesting workflow.
You basically have your step one, you have stuff that you
haven't read.
Step two is the next evolution of that, stuff you've read.
And step three is stuff that you really care about and
you've starred.
So the hierarchy there is very clear.
So once you jump into a category and then a feed--
let's look at the Verge, for example.
Actually, yeah, the Verge is fine.
That'll do.
ADAM KOCH: You could do all.
ROMAN NURIK: Yeah, let's look at all, all subscriptions.
So you basically have this very simple master detail flow
on the left.
And you can expand this fully.
And you have another very, very nice reading view.
The one thing that I love about this app is that the
typography is great.
You have lots of different choices for fonts.
But their default choice--
I think it's Source Sans by Adobe, looks great here.
The other thing is that there are some variations to the
design guidelines.
So for example, if you long press, you get this kind of
embedded contextual actions.
We generally prefer doing things a different way, but it
is one way of doing things.
And actually, the nice thing about doing it this way is
that it offers an in-place, contextual kind of mark
everything above me as red, mark
everything below me as red.
So it's almost like you have an immediate sense of what
you're marking as red.
In general, we tend to use the contextual action bar instead,
but this is an alternative.
And then they have nice little touches.
You can mark something as red here and things like that.
So overall, it's a very well-branded app.
You'll see that the highlights throughout are very sharp red.
And the general color scheme is almost like USSR, like dark
gray and bright red.
It's almost a little--
not stock, but it's almost USSR-colored.
But it's kind of cool.
It gives it a very simple, sharp feeling.
So yeah, that's Press.
And like we said before, it's very much following responsive
design best practices, supports tablets, phones, all
sorts of things.
ADAM KOCH: All right, let's keep going.
All right.
So the next up is "New York Times." Hopefully you're
familiar with "New York Times." it's a
very well known newspaper.
And we really like this app.
What they've done here really is use two things which are
very sort of central, core to the Android design guidelines,
is typography and white space, to really show hierarchy and
also make it feel like a newspaper.
So you can immediately see here, the titles of each
article really jumps out at you.
And then it's got the brief blurb below that and then some
imagery in certain cases.
So let's have a look at one of the articles here.
It's a very clean layout.
I also like how they've used white space on the sides here
to bring in the margins to make it a better reading
experience.
And as recommended, they have this swipe to
navigate between articles.
ROMAN NURIK: The images are really, really crisp.
So they're serving the right size images for tablets.
ADAM KOCH: Yep.
And they've done also a great job here of, again, merging
the brand colors.
In particular, typography really screams "New York
Times." You look at this, and immediately, you're like, oh,
that looks like the "New York Times." That feels like the
"New York Times." But it also feels very much Android, very
much Holo designed.
ROMAN NURIK: One quick thing about typography I wanted to
mention is that in general, you can't just throw any TTF
file at Android's rendering engine.
Just because it may look great on your desktop machine
doesn't mean it will look great on Android.
Specifically, there are some character spacing things that
come up with fonts that aren't optimized.
So "New York Times's" font here is specifically optimized
for mobile, so it works just great with Android's native
type rendering system.
ADAM KOCH: Now obviously, the focus of "New York Times" is
on text, on reading, on articles.
But they also actually have a really nice photos screen.
And as Roman was saying, the images are really crisp,
really nice.
This on a Nexus 10.
They engage the low-profile mode here so you can really
just get immersed in these images.
And they have a similar screen for videos, as well.
All right.
Let's keep going.
ROMAN NURIK: All right.
Next, we have Expedia.
Nick, do you want to talk about Expedia?
NICK BUTCHER: Yeah.
It's almost a shame we're showing this on a tablet
because they have quite different running modes on a
tablet and a phone.
And I think the phone's been updated most recently, and it
knocks my socks off.
But the aspects of the Expedia app that I really wanted to
call out are the elements of fun and
whimsy which they introduce.
So if you can see here, they have a loading spinner, which
is a hotel door hanger.
And this actually responds to the accelerometer.
So I'm not sure if we'll be able to show it.
ADAM KOCH: For some reason, we can't.
NICK BUTCHER: If you tilt the device side to side, this
swings back and forth to remain level.
Things like that.
All the animations are super smooth.
And one of the things the does really, really well,
especially the phone one, is inspire you.
So it uses imagery to inspire you about different
destinations you might want to travel to.
So while searching for a hotel or a flight could be quite a
dry task, they actually really introduce fun elements and
inspirational elements that make the
process much more enjoyable.
You actually find yourself really enjoying using the
application.
ROMAN NURIK: Yeah, it is a shame we can't
show the phone version.
On the phone version, there's this really beautiful two-tab
system, where on the first tab, you have this kind of
parallax scrolling list of hotels and flights, kind of
like deals that give you some ideas on where to go.
ADAM KOCH: And among the design touches, as well,
there's one loading screen, I think, where it's like an
aeroplane window, and you can actually open the window and
close the window as well.
It's really cool.
NICK BUTCHER: Yeah, if you do a flight search, you can play
with the shade on the window.
ROMAN NURIK: Oh, there is planes.
ADAM KOCH: I'm not sure if we can do it.
ROMAN NURIK: So not the entire app is tablet-optimized, but
certainly this immediate screen.
OK, so let's move on.
Just take our word for it.
Check out Expedia on your phone.
It's really awesome.
The next app is Flipboard.
So I don't think Flipboard needs too much of an
introduction.
But it's, again, a very simple--
"Now optimized for Android tablet screens.
If you prefer, you can switch back to the phone mode."
That's fine.
So Flipboard is kind of an interactive magazine.
It aggregates everything from Facebook to Google+ to tech
blogs to news to things like that and puts it in this kind
of unique UI.
And as you can see here, just from the beginning, it
immediately starts interacting.
It starts zooming in photos, panning photos.
And it really is immersive.
You open this, and you really feel like you're getting a
full view of your content.
So let's actually flip through this page.
And actually, you'll notice that they have this kind of
unique Flipboard interaction that's the same across all
their different platforms.
I believe that's part of their branding, that flip.
So if we open up one of these items, you'll notice that it's
still very much customized.
The UI is--
again, just like some of the other apps that we've talked
about, it's very much about the content.
There's minimal Chrome.
It recedes, fades out of the way.
But they are, like in Grand St.'s case, they're using
their visual styling but applying our interaction
design and UI pattern best practices.
So they still have the up button in the top left.
They still have the overflow that gives
you additional things.
They do have this additional option for navigation there,
but whatever.
And they do have search in the top right, which is kind of
the standard place to expose search.
But all throughout, their flipping UI is still there.
And so it still feels like Flipboard, just
customized for Android.
And then if you open up one of these articles, you'll notice
that, again, they include large margins on the sides.
They tweak the font sizes and line spacing, especially, to
make sure that on a tablet, things look great.
And they don't really have a top action bar here.
But they do have kind of like a split action bar.
We'll give them that.
And basically, all the actions are available on the bottom
right, and then with an overflow, as you'd expect.
So yeah, Flipboard, overall, really custom visual styling,
but still following a lot of our
interaction design best practices.
ADAM KOCH: All right.
Better get a move on, as always.
Last is TED, right?
ROMAN NURIK: Yeah.
ADAM KOCH: All right.
So TED, hopefully you're familiar with it.
They post up some great free TED talks to inspire you.
This app actually follows the Holo design
language quite closely.
They've just customized the colors accordingly to fit in
really nicely with the TED colors, which are just the
white and red.
The focus, purely on content.
You see these great big, large video thumbnails.
Multi-column, again, scales very well to
different screen sizes.
You can swipe between the tabs here, between these three main
tabs, My Talks, All Talks, and Featured.
They've got these three larger banner images at the top here
to promote the featured or latest.
And then again, once you're viewing the talks, you can
swipe between the talks very nicely here.
It's a great app.
Hopefully, a lot of you have seen it before.
There's really not that much more to say, other than
they've done a really good job merging TED brand
with Android Holo.
ROMAN NURIK: Yeah.
Solid.
ADAM KOCH: All right.
We've got one more.
ROMAN NURIK: OK, so those are the 11 apps in the Beautiful
Design collection, summer 2013.
If you just search for Beautiful Design 2013, you
should find our blog post announcing it.
And I think that it's currently visible on Google
Play, if you go to Apps and scroll all
the way to the bottom.
Now there's one more app we wanted to talk about.
Nick, do you want to talk about Timely?
NICK BUTCHER: Yeah.
So this is a new app that launched just yesterday, I
think, which is an alarm and stopwatch and timer
application.
But I really love this app.
So I think the one word which I would use to summarize this
app is polish.
Every single thing you do in this application
is extremely polished.
So from right here, we can show--
so this panel on the right hand side showing the current
time is the main display.
On the phone app, this would be the launch screen.
And I love the way that as you swipe between the three major
tabs, that content always stays persistent.
So whether it's larger when you're in the center view or
over on the side, it's a really fun way to use the
extra space on larger devices.
But as Roman is swiping around, you can see the
changes in the background color and the subtly moving
background images.
Everything about this application screams polish.
So I think one of the fun things I like, they have a lot
of custom items in here.
So like the background, for example, is very, very custom.
And you can even go ahead and can tweak the colors on that,
which is kind of fun.
So if you go into the overflow menu and change themes and
then click on that little thing, you have this really,
really fun color picker that lets you just completely,
completely customize this application to whatever color
scheme you want.
And I really love the-- and I think it's actually quite a
clever marketing idea, that lets you do the full
customization.
But if you want to save it, that's an in-app purchase.
So I think it's really fun to demonstrate its value before
charging you for that.
If you want to show the stopwatch and timer.
So for example, if you look at the interaction used for
setting a timer--
actually, the stopwatch is fine.
ROMAN NURIK: OK, stopwatch.
Got it.
ADAM KOCH: We're just having too much fun here.
NICK BUTCHER: So hopefully, the framerate
is picking up here.
But you have this almost like a heartbeat.
You see the pulse moving around the circle, tracking
the time as it goes up.
Little details like that, they've gone beyond the level
of just having the time ticking up.
They actually have these beautiful, interactive
animations.
And if you go the timer as well, I think very similar to
the Timer application we looked at before that had a
very visceral way of setting it.
But these beautifully engaging kind of animations.
And I love the way, as you go past the minute or hour or
whatever, how it shrinks in and grows out.
ROMAN NURIK: Also, one of the coolest things is that the
text actually morphs.
So 6 morphs into 5 into 4 and so on.
So I don't know how they're doing that, but it's really,
really cool.
One thing that I wanted to mention is that I feel like
they've done a crazy good job of styling everything to fit
their almost transparent UI.
So even the setting screen that you would expect to be
kind of boring has this immersive, interactive,
animated background.
And all of the controls just blend
beautifully on top of it.
So they've just done an insanely good job on that.
NICK BUTCHER: Yeah, so just animations, polish everywhere.
This app is incredibly polished.
ADAM KOCH: Yeah, they have a lot of those subtle
animations.
NICK BUTCHER: I love that interaction.
ADAM KOCH: Sorry, Nick.
NICK BUTCHER: No worries.
ROMAN NURIK: OK.
I think that's all the time we have, right?
ADAM KOCH: Yeah, we're a bit--
ROMAN NURIK: OK.
So I think that's all the time we have for today.
Thanks again for joining.
And yeah, just one last reminder.
If you haven't seen this collection, if you haven't
downloaded and installed some of these apps, definitely make
sure to do so.
Just search for Beautiful Design summer 2013,
and you'll get there.
All right.
That's it.
NICK BUTCHER: And a challenge to all you
designers out there.
As Roman said at the top of the show, the plan is to
update this collection periodically.
So we're going to cycle out some apps,
bring in some new apps.
So this is really a challenge for you designers out there.
This is the goal you want be aiming for is to be getting
into this collection.
And so let's see what you can do.
ROMAN NURIK: All right.
All right, thanks, everyone.
ADAM KOCH: Thanks, guys.
ROMAN NURIK: See you later.
NICK BUTCHER: Bye.
ADAM KOCH: Bye.