(epic music)
- When you close a door of a modern car,
(car door thwacks)
chances are that the sound you hear is engineered.
The latch mechanism is made in a way
that makes it sound a little bit more deeper
and more volt-like, and satisfying.
Old cars didn't have that. (car door thwacks)
In this talk, I want to show you how you can make
your Flutter apps more satisfying to use.
If you want to expand your expertise with some design shops,
this talk might be for you.
There's an important concept called perceived value.
This is the value of something
as it is perceived by the user.
A car, for example, is inherently valuable
because it can take you from point A to point B
in relative comfort.
But that's not the whole story, is it?
Two cars can both take you
from point A to point B in relative comfort,
but they don't have the same perceived value.
All it takes is something like
the sound that the car makes when you close the door.
You'll find that the perceived value of a car
is often as important as the functional one.
Similarly, your app can be functionally amazing,
but it could still be...
If it feels too bland or flimsy,
then people will just not use it as much.
The perceived value will be low.
Some people will still use it, of course,
but others will be put off.
On the other hand, just to be clear,
if your app, or if any app, is not valuable at all,
if it doesn't have any functional value,
then no amount of additional perceived design polish
is going to save it.
So, in this talk, we are assuming
that the app has some functional, actual value.
It's useful.
It just needs a little bit of polish.
You may be thinking, "Well, I'm not a designer.
"How is this relevant? I'm a developer.
You know, like I don't do this kind of thing."
And you're right.
You can have a perfectly, valuable,
good career in software engineering
without ever really thinking too much about design.
You can just implement whatever the designer
tells you to implement, and that's fine.
And there's nothing wrong about that.
This talk is for people who would like
to meet the designer halfway
or people who would like to even bridge the gap
between development and design
or maybe people who want to become
the mythical designer-developer.
Some people call these developers unicorn developers
because they are rare and valuable.
Okay, so what are some of the things that you can do
in Flutter to make your app more polished?
This app, for example, is not polished.
It shows the agenda of my talk,
starting with car doors, and ending with animations,
and it even, like, tracks my progress
and shows a little congrats card at the end.
So let's pretend it's valuable,
but its perceived value is pretty low.
Let's try and fix that.
We'll start with white space.
White space is the blank space around elements
of your app that make those elements stand out.
White space is sometimes perceived
by product makers as wasted.
It's like, "Oh, all these precious pixels
"used just for background?
"What?"
But white space is actually really important,
and it communicates meaning, hierarchy,
and relatedness between elements of your app.
So do we have a widget in Flutter for white space?
Yes. It's called padding. (laughing)
That's right.
Sometimes just playing around with padding in your app
will make a big difference
in the perceived value of your app.
And this is something that you can do very early on,
even if you're just playing with a prototype.
It's easy to play with using hot reload
so you can see immediately what the effect is.
And again, hot reload will just make it happen.
You don't need to do anything more.
A related simple thing to white space is alignment, right?
This is nothing more than making sure
that elements on your screen are lining up nicely.
For example, these paragraphs might look nicer
if they line up with the title.
Again, this is just padding,
most of the time and sometimes using the align widget,
for example, if you want to line up to the right.
Aligned elements aren't just nice to look at.
The alignment also communicates some meaning.
The paragraphs belong to the title
because, visually, they're in the same group.
Next up, typography.
In most apps, text is a big part of the screen.
Some apps are basically a vehicle for a lot of text, right?
So it's important.
So how do we improve typography in our apps?
How do we improve the way text looks like?
You're looking for consistency and delight.
Consistency means that you have only one textTheme,
and then you're using that one textTheme
throughout the app.
You try to keep the fonts, the styles,
the sizes, to the absolute minimum
that still communicates meaning.
If you find yourself overriding the text style too often,
then that's a good indication
that you might not be consistent enough.
Just extract the styles
into textTheme and then use that instead.
(upbeat music)
How do you delight with effects, though?
Well, that depends on the kind of audience
that your app is for.
Some apps can delight by being minimalist.
Others might go for absolute mayhem, just crazy things.
Still others, and I think the majority of them,
might delight with just the more classical approach
of having a good display font for the headlines,
and then something subtle but interesting for the body text.
Don't forget about letter spacing
and other typographical measurements.
They're there for you to play with, right?
For example, the letter spacing
of bigger headlines can be much tighter
because the increased size of the letters
makes up for the decreased readability
of the squeezed characters.
And the squeezed characters may look much nicer.
Line heights, similarly,
can be pretty tight in titles, but for body text,
they need to be more spaced out so that it's easier to read.
Again, hot reload is your friend.
You won't get to the right combination on your first try.
Trust me.
At least I can't.
This stuff needs direction.
Next, let's look at colors.
Once again,
there's a lot you can achieve just by being consistent.
So find a pallette and stick to it.
Finding a good color palette
is actually pretty hard.
Again, especially for me,
it's super hard, but there are online resources,
there are actually online tools that can help you,
and there are tutorials and articles.
You can also get inspired
by art and fashion and architecture and what have you.
When you have a pallette,
just use it in your material themes, ThemeData,
and then use it around your app.
So you can specify each color
in that material theme, themes data,
or you can just specify some
of the basic colors and let material theme guess
the good complementary colors from that.
I recommend using material color swatch,
which is just a fancy way of saying it's a color,
and nine of its other shades.
From a primary color, material theme
then can guess some of the other little things,
like for example, the color of text selection in your app.
But of course you can always override
to your heart's content, and you can make
the text selection whatever color you want.
Material theme has also the concept of accentColor.
This is the kind of color that you want to use sparingly,
but that adds a lot more life to your design.
If you don't have that,
then the app could look a little too bland.
But, again, use it sparingly.
Like, with red roses in a room, that looks great,
but if you have a room that is completely red,
that may not be such a good idea.
If you have a brand or visual to work with,
then of course use that, that's best.
Anyway, there's a lot to be learned about color, of course,
but you'll get a long way by just being consistent.
Next, iconography.
A nice, well-placed image makes a huge difference
in the perceived value of your app.
This can be photographs, illustrations, splats of color,
what have you.
Don't underestimate the power of adding a single image
to your app and placing it prominently on the screen.
(upbeat music)
Also, don't forget to make the image match the rest
of the design, or vice-versa, match the rest
of the design to the image.
Like here, I notice that there
is a subtle gradient on the image.
And so, I copied it to the background of my app.
So, first of all,
there's no discontinuity, and it also just looks nicer.
So, so far, we looked at white space,
typography, color, and iconography.
So basically, padding, text, color, and image, right?
Even with just these very basic simple elements,
you can make your app look much nicer.
But let's not stop there.
One of the coolest things you can do with an app
is make it move.
Let's talk about animations.
Well, actually first, let's talk about the basics of motion.
You want a car to fly
from the top to the center of the screen.
What do you do?
Well, you use something like slight transition
or animated position, and you're done, right?
Wrong!
You see, by default in Flutter,
these kinds of widget that move around things
default to Curves.linear.
This is an obvious default
because Flutter can't know what you want,
but it's also a pretty bad default to keep as is
because you almost never want Curves.linear
to move things around.
Once again, you should use hot reload
and experimentation to find out what's best for you.
But most of the time, a good, subtle
ease out or ease in curve will work.
In our case, you can see how Curves.isoutcubic
made a huge difference,
and you can now see how the linear curve
looks really weird and unnatural.
People, when they see movement like that in apps,
they can't put their finger on what exactly is wrong,
they just know it's wrong.
Well, what's wrong in this case
is that we're using the linear curve.
There's no acceleration.
It's just starts moving
in constant speed and then stops immediately.
And nothing in the real world moves like that,
so it feels unnatural.
Okay, so now we have this animation
where a card comes from the top,
and it's not literally animated, which is great.
Can we make it a little cooler, a little more satisfying?
So, just sliding is fine,
but we can also animate in the other stuff.
Like for example, we can make the confetti icon show up,
and then we can check out the text below.
If we try that and animate everything at once,
the result is actually terrible, I think.
Instead of making the animation look cooler,
it's just all muddled and confusing.
There's a concept called staggered introduction.
When you're introducing new elements to the UI,
you don't want to show everything at once.
You stagger their animations.
You space them out.
So how do you do this in Flutter?
Well, there's a great article on flutter.dev
called Staggered Animations,
and you should just go check it out.
It's really good, and it has code in it
that you can immediately use.
In short, this is done using interval.
Interval is a class that you can use
in combination with animation controller.
And so for the whole introduction,
using all these elements, like for example,
our sliding card and the icon and the text,
you use a single animation controller
that runs for the whole duration.
And then, for each of the sub animations, you use interval.
For example, an interval like this will do nothing
for the first 50%
of the whole animation controller's duration.
And then, between the 50% mark and the 60% mark,
it will do the whole thing,
and then it will be addressed for the rest of the animation.
You can combine this
with another sub animation, and another part of the theme
will use a different interval that can be overlapping
with the first one,
and, in this way,
you can orchestrate this belay of animations.
At the end, you will have this app that comes to life,
like (mouth popping).
Like, things are starting to come up to life.
So is this great design?
Probably not.
I don't think so.
I'm not a designer, but it's better than this, right?
And I spent about three hours doing this,
including lunch, instead of days
of back and forth with a designer.
Now I can ask an actual designer
about ways to improve what I already have.
And I have the vocabulary to talk to them
about these things.
By the way, I want to say that the code for this app,
both before and after, will be available on GitHub,
and I'll make sure it's accessible
so you can play around with it
and ideally make it even nicer
because I would really like that.
In conclusion, here's what you learned today:
Even without being a full-blown designer,
you can still make your apps more satisfying to use.
This will increase the perceived value of your app.
More people will be installing it.
More people will be keeping using it.
And research shows,
people will even think it's more user-friendly,
just by looking at it.
As I said before, if your app doesn't have any actual value,
then no amount of design polish will save it.
But on the other hand,
don't let a perfectly functional, valuable app
be overlooked by the users
just because it doesn't have that,
you know, satisfying element. (car door thwacks)
This additional perceived value of your app
will, in turn, make you (chuckles) more valuable.
If you're able to build apps that people value more,
then that's going to be good for your career.
So learn about the basics of design, color theory,
typography, psychology, sociology,
and use all that in your Flutter development.
Think of yourself as a maker,
not just a coder, a designer-developer.
Thanks for watching.
(epic music)