The little things: Becoming the mythical designer-developer

[Music] when you close the door of a modern car 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 vault-like and satisfying old cars didn't have that 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 jobs 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 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 use 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 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 the gap between development and design or maybe people who want to become the mythical designer dash developer some people call these developers unicorn developers because they're 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 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 waste site 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 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 how to reload so you can see immediately what the effect is and again hot jolt 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 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 text theme and then you're using that one text theme 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 textile too often then that's a good indication that you might not be consistent enough just extract the styles into text theme and then use that [Music] instead [Music] how do you delight with text though well it 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 are 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 squeeze 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 iteration next let's look at colors once again there's a lot you can achieve just by being consistent so find a palette 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 palette just use it in your material themes theme data and then use it around your app so you can specify each color in that material theme themed 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 accent color 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 these 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 [Music] [Applause] 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 slide transition or animated position and you're done right wrong you see by default in flutter these kinds of widgets 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 object load 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 dot ease out cubic 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 there where the 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 direction and then for each of the sub animations you use interval for example an interval like this will will do nothing for the first 50 of the whole animation controllers duration and then between the 50 mark and the 60 mark it will do the whole thing and then it will be at rest for the rest of the animation you can combine this with another sub animation and another part of of the thing 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 ab that comes to life like 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 this additional perceived value of your app will in turn make you 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 uh typography psychology sociology and and and use all that in your flutter development think of yourself as a maker not just a coder a designer dash developer thanks for watching [Music] you

Channel: Flutter

Views: 40,949

Rating: 4.9799666 out of 5

Keywords: designer-developer, Flutter design, how to design in Flutter, Flutter widgets, Flutter tutorial, Flutter design best practices, Flutter, Flutter Engage, #FlutterEngage, Flutter events, Flutter conference, Flutter developers, Flutter community, Flutter developers news, Flutter news, mobile app developers, google developers, web app developers, app development, Flutter live, Google Flutter, Dart, type: Conference Talk (Full production);, pr_pr: Flutter, purpose: Educate

Id: MIepaf7ks40

Length: 18min 27sec (1107 seconds)

Published: Wed Mar 03 2021