Your path to becoming the mythical designer-developer hybrid with Flutter 2.0
How satisfying is it to hear the clickity-clack sound of your keyboard as you type or the silence(if you prefer that)? Now, what is the difference between the two, both have the same similar functionality where you press the key, right? The difference is how they are engineered, clicky for those who love sound and silent for those who don’t. But this is merely for user satisfaction and has no other implication. Both keyboards are equally functional whether or not they make sound or not. Good products are designed while keeping in mind the functional value as well as the Perceived Value.
Perceived value, in simple terms, is the value of the product how it is perceived by the user.
All it takes is the satisfying experience that is underlying the actually functional product for the user to be more drawn towards it than another equally functional product. This perceived value of the product is sometimes as important as the functional one.
Similarly, sometimes your app can be functionally amazing, with no bugs, smooth flow between tasks but still, you'll be wondering why aren’t people as eager to use it? The reason can be that it is bland to use which puts off people as they don’t see the perceived value in it. Although this doesn’t mean that having a great design without any functional value will give your app the success you wish.
The app must have functional value and then polish its design to improve its perceived value and make it a success.
But how is this relevant to developers? Often they don’t need to worry about the design, that’s why designers are there, right? And you are not wrong. But if you are want to meet the designer halfway or bridge the gap between the two, there is nothing wrong with that either. If you can be a mythical designer-developer, how incredible will it be?
Now, how Flutter can be used to make your app polished? Few things that will help your app stand out, both functionality-wise(that’s up to you) and satisfaction-wise(this is where Flutter comes in). These few things may seem small, but has a great overall impact on your app.
White Space:
It is the blank space around elements of your app that make those elements stand out. Often this is perceived as “wasted” but that is entirely wrong. It is very important to make your app look cleaner. Now, Flutter, being amazing as it is, has a widget just for this called Padding
Padding(
padding: const EdgeInsets.all(10),
child: MyWidget(),
)This can be used to play with the space around your elements be it left, right, top-bottom, etc.
Another thing that helps with using white space efficiently is Alignment. Now, this can be controlled to some extent using the Padding widget too or you can use align widget. Aligned elements not only make paragraphs look pretty but also increases readability.
Typography:
In almost every app, the text is a major part of the screen. So, how can we make this text look lovely to the users? The answer is Consistency and Delight. Consistency means maintaining the same theme for fonts, styles, and size, etc. for the entire app.
return MaterialApp(
theme: ThemeData(textTheme: TextTheme(// ...
)
),
);Text(
"Hello",style: Theme.of(context)
.textTheme
.headline1,
)
How do you delight with text? That depends on the kind of audience you are targeting with your app. It can be either a minimalist or complete mayhem. To generalize, use some good decorative font for headlines and some subtle but interesting font for the rest of the text. The font is not the only thing to keep in mind, letter spacing, line spacing are equally important.
Colors:
Colors are another thing that you just can’t forget(add the importance of color articles link from medium). Just pick a palette that matched the theme of your app and stick to it, play around with the colors in the palette, and make different elements in the app standout. All your colors will go in your ThemeData. Picking colors can be a tough task but there are many online tools that provide thousands of suggestions like Coolers.co, Colorswall, etc.
The most efficient way to do this by using primarySwatch which lets you choose a primary color and automatically generates different shades of mentioned color.
ThemeData(primarySwatch: Colors.lime), // will use multiple shades of the color lime
Material Theme also has the concept of accentColor which basically is used sparingly and adds life to your app.
Iconography:
A nice well-placed image can make a huge difference in the perceived value of your app. This may include a photograph, illustrations, icons, etc. Make sure your image matches the theme of the rest of the design of your app. To make a row of icons like this:
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: **const** <Widget>[
Icon(
Icons.favorite,
color: Colors.pink,
size: 24.0,
semanticLabel: 'Text to announce in accessibility modes',
),
Icon(
Icons.audiotrack,
color: Colors.green,
size: 30.0,
),
Icon(
Icons.beach_access,
color: Colors.blue,
size: 36.0,
),
],
)Animations:
Making certain elements in your app adds life to it and let’s agree, animations are cool. With Flutter, you can use — (find widgets name for moving things in Flutter). By default, it is set to Curves.linear but you can play around and find what suits best your elements as Curves.linear may seem weird and unnatural. There are many alternatives to this like Curves.easeIn, Curves.easeOutetc. There is a concept of Staggered Introduction which states when you are introducing your elements to UI you don't want to show everything at once and instead stagger a little, space them out. Here is how you can use this in Flutter docs here.
Even without being a full-blown designer, as a developer, you can make your app look cooler and have high perceived value, which will, in turn, make you more VALUABLE. Think of yourself as a maker, not just a developer, a designer-developer.
Article reference video here!
