COMP 523 (fall '21) - Prototypes and Tools, User Feedback, Evaluating Technologies, & Figma Tutorial

nope we cannot hear you is your zoom setting correct zoom sometimes doesn't use the um default microphone and it'll use something else can hear you now oh wait never mind no somebody else might be oh goodness okay share screen again [Music] okay all right so here we are again um sorry about that y'all uh thank you ryland for raising your hand and alerting me to that okay remember user stories are due on monday this is the ongoing march of assignments that are due intended to keep you on track for your project um i've i'm i'm still thinking about what to require in terms of a journal i i've been a little bit uh unstructured about my expectations for that in semesters past and i'm rethinking that uh so i think you did create a journal section on your website for now feel free to do whatever you want with that and if i have different requirements later i'll let you know week after next be aware that assignment 4 is a 4 coffee cup rated assignment so i expect that that will require some more time and work from you so might be smart to not wait until the last minute on that one might even get a head start on that this week to even out the workload a little bit i would suggest sketching even just some lo-fi designs either on paper or with a kind of a free-form tool like freehand to show your mentor when you meet and i guess i should say this week actually um and just get a little bit of feedback on the direction that you're headed okay so how many of you or how familiar are you with user stories already let me open this poll up there we go [Music] fully v.com jeff terrell um i know i can't see the results [Music] well i was really hoping i'm having some technical difficulties today just wanting to see the results there we go responses okay [Music] my zoom controls are hiding that option all right so some of you actually have written and used them yourself so probably you're very comfortable with uh user stories um some of you have are pretty familiar i've used them before maybe even been on a team that wrote them before is there a question in the back reactivate sorry about that that explains why that picture wasn't moving um okay familiar with them apart from class a few of you uh most of you or a lot of you have learned about them in class and feel feel okay about it some of you don't feel comfortable with them yet but you're not worried about getting there and a few of you actually are a little bit worried about uh you just choice so uh if that's you if you're one of the people who responded g um definitely uh plan to talk with your mentor about that to be a good good resource for you yeah okay thank you [Music] okay so cover some announcements today i'm i might move a little bit fast today because i've got a lot of ground to cover i'm trying to get through a figma tutorial and everything in time for us to take a quiz but we're going to talk about testing for designs we're going to talk about some design tools give you some concrete suggestions for tools to use and resources we're going to talk about how to evaluate technologies which is something that you'll be facing in assignment 6. we're going to do a figma tutorial and we're going to do quiz one at the end of class [Music] all right i am continuing to use graham langdon's slides from two years ago or at least his content in this case uh with permission and for testing designs what we'll talk about is uh prototyping what it is why we do it how to do it um getting feedback on your prototype and iterating on that prototype just a few kind of tips for each of these things okay prototyping why do we prototype i talked about this a little bit in um [Music] oh wait seen some questions in there we go okay i think i'm caught up on on zoom chat but if there's something i missed then feel free to repost okay i talked about this a little bit in the project narrative arc lecture why prototype but think about it okay so normally what i think the default course of action for most developers would be is just to sort of let the ui emerge alongside features as you work on them so you just kind of make it up as you go and do the best you can at each step of the way some might even say that's more of an agile approach to creating a design creating user interface uh why is that a bad idea why would it make sense to create a prototype up front before you actually start iterating on code if you have thoughts on that feel free to be bold and raise your hand or mention it in the zoom chat yeah yeah the the user experience is very important and you might not want to leave that to chance yeah that's definitely one good reason other thoughts yeah in the back exactly right once you've committed something and create a user interface some code that's a lot harder to change so you can't afford to you won't be able to iterate as quickly on that that's right any other thoughts going once going twice okay um yeah so problem one that i've listed i listed a few problems here what is it just tends to be a mess if you do it this way especially if there are multiple people involved different people might have different ideas about where buttons should be and what colors things should be and how things are laid out etc and so you can really end up with a fairly chaotic and confused mess and there's a really great quote that i think has really stuck with me over the years ever since i read the mythical man month tennis years ago from fred brooks he says conceptual integrity is the most important consideration in system design which is a very strong statement and he spent some time talking about uh what this is and and why it's important and how to achieve that and one of the things he says is that this this again stuck with me he said the design must proceed from one mind or a very small number of agreeing resonant minds i always thought that was just so profound if you want to have consistency in your design which is kind of what he's talking about with conceptual integrity to have a consistent design then you need one person to come up with a design or else you really need to be in sync with whoever is creating that together and that is the most important issue in design strong statement okay so problem number two if you're wanting to get feedback from your client about the user interface which i would hope that your client would have some good feedback for you on that that is the thing that their users will see so it's pretty important um you're delaying that feedback loop whenever you wait to do the design if you create the design upfront then you can very quickly iterate and get feedback on uh from the client on what how does that design feels to them what they might change and as was pointed out as well it's difficult to change the code and the ui it's more difficult to do that than just to change a peer design artifact [Music] and problem number four is a little bit subtle it's kind of hard to see something that's familiar to you with new eyes so if you over time this ui emerges from your work you're going to be pretty familiar with it and it's really hard to kind of break out of your own uh familiarity and see it with fresh eyes to figure out what parts are actually confusing because you know how to use the app at that point how do you sort of separate yourself from that knowledge and say what if i didn't know how to use the app how would it feel what would be confusing [Music] so the solution as the slide title suggests is to prototype and what we mean by that is to quickly hopefully hopefully quickly dump your vision of design into some form that allows for feedback from a client and invite that feedback as early as possible and iterate only on the design artifact before you start writing code somebody who's familiar with design principles and design tools they could sit down with a client and hash out a clickable prototype in a matter of hours um and i know my colleague graham could do this he could sit down get an understanding about what needed to be built and get something at least a rough cut in front of the client by the next day so it was a very good way early in a project to just iterate how does this look okay let me make some changes to get back to you okay how does that look version two gets feedback and you just keep iterating until you get to a design that the client has no further feedback on and says do that that looks great [Music] now i will note that conceptual integrity is not guaranteed even if you prototype uh so there can still be some inconsistencies and this will be something the more you design the more you'll learn how to do how to be consistent in your design but it's a lot more likely if you're able to do this in you know in an afternoon or something like that where everything is still in your working memory okay so that was prototyping any questions about prototyping okay moving on to getting feedback um why is feedback important we talked about this as well in the project narrative architecture [Music] we talked about this a second ago you're too close to the design to see it with new eyes and so getting that in front of somebody with fresh eyes will let you figure out what are the confusing parts also you don't know what might be confusing for others uh if you you might be surprised how some people use computers and how some people use software so maybe you always log in through google but they like to do username and password and so you never notice the username and password style of authentication in your app was confusing because you never really tried it that's one example [Music] so it's important to find people with fresh eyes even friends and family and ask for their perspective you know if you don't have anybody else ask your mom you know hey can you try this clickable prototype i'll see what you think let me know um now are you going to have to do this in class not necessarily this is something that might be good for you to know and have in your back pocket just how you might be able to do this if it's important for your project or maybe you could help your client learn how to sort of gather this feedback but let me just go through this quickly so the way that you want to get feedback is not to say click here now do this now do this what did you think rather you want to sort of take a step back and not say how to do something but you want to give them a goal in the abstract okay you want to create a new blog post try to figure out how to do it on your own which is more realistic with how they would actually use the app right let them find their own way now this can be very painful to watch you see somebody stumble around and to you it's like really familiar like duh there's a big button right there that says create post but they're just not seeing it they're clicking everywhere else you're like no don't click there what are you doing so it can be hard to sort of bite your tongue and say they're figuring it out i'm gonna watch this i'm gonna see how they're confused and and maybe i can learn from that maybe that button needs to be bigger or farther to the left or farther up top or whatever [Music] you can ask open-ended non-judgmental questions about their experience using the app you know why did you do it this way how did you or how did you expect that to happen or or what did you expect to happen when you did this just open-ended let me understand what you were thinking as you were using this [Music] maybe don't say something like why didn't you do it this way definitely don't say have you used a computer before probably not gonna get some good feedback from that that's gonna help you iterate on your design it can be helpful to ask people to think out loud um can you tell me what you're thinking as you're doing it what is your plan before you actually start doing it and uh just think out loud and afterwards especially if somebody you know if your mom or somebody close to you is reviewing this app you know they might be really impressed and really uh give you a lot of praise for all the work that you've done but shy away from actually criticizing it or maybe on the other hand if they don't know you that well they might show you from criticizing it so you might specifically need to invite criticism okay what was the most confusing part of using this app for you there's a whole class on this by the way in the media school i've actually met the professor who teaches this uh it's it's generally called user testing so if you want to deeper dive on that you might be able to take that class and and actually experience the art of uh getting feedback from users some questions on getting feedback okay so now that you know which parts of your design are confusing you might be tempted to just scrap your design and start over but don't do that might be kind of depressing once you actually start getting this in front of users and see how confused they are with something that you thought was actually pretty good uh you might be tempted to start scrap your design and start over but i would encourage you not to do that um instead just try tweaking something getting closer to something that actually works with people and doing another interview ideally with somebody different who has fresh eyes [Music] don't have anything that you're not willing to change no sacred cows just you know anything even even the thing that you really liked about it if that turns out to really confuse people be willing to scrap it [Music] and try try the simplest thing that can possibly work get that in front of users and get some feedback okay any questions about that okay [Music] so let's move on to design tools [Music] actually before we do that let's uh do another fold okay [Music] okay good deal looks like everybody just most people have met their client already which is great y'all are on uh on pace some of you have already created user stories a few of you have a meeting scheduled that's that's fine especially if it's a meeting for this week a few of you are still working to schedule a meeting maybe one of you has noted that your client is not very responsive if you have trouble contacting your client or find them not to be responsive please feel free to email me sometimes i will be able to convince them that they really do need to respond to you i might have more luck with that than you sort of by virtue of my role so do feel free to email me about that um but yeah it looks like most of you are on on pace here all right and then how comfortable do you feel extracting client as a dorada feel confident good a little bit less confident about creating good user stories so that's about a quarter of you um and then a few of you are less confident about just asking the right questions of of your client during the meeting okay but for the most part most of you look like you feel pretty confident about this whole process that's great if you feel less confident again do feel free to talk to your mentor ask generally for advice or bring up particular challenges or questions that you have especially if you can think of um trying to pinpoint what the what the difficulty you have is that can really open up some good conversations with your mentor that's what they're there for okay i don't think i had anything else in there yeah okay [Music] good deal um i'm gonna leave that active for now okay yes okay cool all right so let's talk about some design tools give you some concrete suggestions to equip you to create your applicable prototype which again is due a week from monday [Music] um again we're stealing content borrowing content from graham langdon with his permission all right so one design tool these are these are all recommendations from graham unless otherwise noted and graham as i think you knew from the lecture that uh the recording from last time that i told you all to watch graham is a professional designer a professional ux ui ux designer so he's been in the industry for a while he's done a lot of clickable prototypes for different clients for different projects in fact i think probably at least when he was working with me at remodel software probably i would guess created about um i click a brand new clickable prototype for a different app every couple of weeks so definitely knows his way around all these tools interesting point all of the tools that he recommends unless otherwise noted there's only like one or two are free and so you can actually do a lot without paying a bunch of money for professional grade tools a lot of professional grade tools are free at least in the sense that a very knowledgeable professional that i know uses them uses them day to day so envision freehand is one that i think is kind of a virtual whiteboarding system you can just kind of sketch things freehand that's the name i have not actually used this but graham says he uses it sometimes figma we'll actually talk about that today so full grade design ux design system a web app we'll go through a tutorial of that the noun project i think it's nounproject.com this is a place you can get icons all right so if you're wanting like that you know the trashcan icon or pencil icon or whatever it is or even something more esoteric nounproject.com it's either nounproject.com or v9project.com i forget but if you google that you should be able to find it and use those icons i believe all of them are posted for you to be able to use with permission for free [Music] um all right and each of these actually has its own slide sorry about that so ui kits we'll talk about ui kits all these are free or have good free versions okay so in vision freehand there's a whiteboard on steroids infinite canvas and zoom it's approachable easy to figure out you can collaborate with it remotely um so i believe multiple users can be using it simultaneously like sharing the canvas you can annotate screenshots and another thing that i have found out about since then which i think is a similar tool is called mural mural.co

it's another web app okay figma's another one we'll talk about this more create clickable prototypes um you can create components that you reuse and styles that you reuse you can again collaborate remotely so if you if your whole team wanted to sit down together and collaborate sort of google docs style and see what other people are doing as you're all working on it together you can totally do that [Music] you can share your prototypes um you can get feedback on them and adding comments and things like that and we'll actually see this in significant detail later this lecture adobe xd is similar to figma by the way right so icons material icons the noun project these are some places you can go to find icons for free ui kits sigma freebies i have not checked this out there's a figma material design kit i think we talked about material design last lecture or at least in the recorded lecture so i don't think i need to cover that again there are this is a paid kit a paid ui kit that graham is actually found useful but you might have to fork over some bucks to do that so you might not want to do that through this project but might be good to know about if you get more serious about design later set products.com and i would i would add that all unc people have free access to adobe xd which is not a free product but we have access to it for free so that's a pretty similar tool to figma except it's software that you download rather than being a web app [Music] as far as i know there's no real-time collaboration abilities in adobe xd somebody correct me if i'm wrong there's also framer i believe it's framer.io and this is not nearly as flexible as a tool like sigma or adobe xd but it's sort of specially targeted to um web apps and so it's easier to create web apps with fairly standard layouts using framer so that might be maybe an easier thing to pick up i haven't dug deep on framer so i'm not real sure what the limitations are there [Music] um i've heard recommendations for envision which i think is also like the nxt not used it myself balsamic with the q has a wireframe product that can create some low-fly prototypes i think they're literally just black and white like there's not even the ability to add color to them i don't think i have not dug in on this one either there's a free 30-day trial but it's not a free product so that's one of the reasons i stayed away from it although i saw recently that it might have you might be able to use it for free in a classroom context so it might be something i look into for future iterations of this course and if you're interested in that you might be able to get you know be able to use it for free [Music] okay questions about any of the design tools that we talked about i it's kind of a more of a survey overview of different things that are out there like i said we'll dig into figma here in a bit but any questions or comments about design tools okay [Music] okay so i want to check your familiarity about creating um clickable prototypes and of course we haven't done the figma tutorial yet my hope is that i'll be able to quantify a significant difference between the before responses and the after responses and hopefully make sort of justify the use of class time this way if you're doing a figma tutorial looks like there's a lot of people kind of around the yellow face little face probably more on the happy side than the sad side there's one response way over the left uh but and so there's actually a good chunk of people who feel pretty comfortable um with quick creating clickable prototypes that's great okay um let's try that okay [Music] okay so before we do the figma tutorial i want to talk about evaluating technologies this is gonna come up in assignment six application architecture but some of you are already thinking about this and so i wanted to spend some time sooner rather than later on it before it was too late to be useful to anybody uh it's not due until october 4th so if you're not thinking about this stuff already that's okay you're not you don't have to start thinking about this yet you're not behind schedule if you haven't considered this at all but this is what i intend to talk about is um choosing a database choosing a programming language choosing a web framework choosing you know ios or android now some of you don't really have that luxury because of your project your client has dictated to you what you have to use but others do have that kind of of choice to make and again you're not behind schedule if you haven't considered these questions yet this will be premature for some of you maybe not for all of you so but again i'm trying to do this airing on the side of early rather than late and so this it might be a little bit hard to connect to this content if you know you don't have to worry about it for another month or so so i would suggest trying to connect trying to kind of if you could like empathize with future you you from four weeks from now who has to think about this stuff and he needs to know it and try to get yourself in that frame of mind so that you can connect to this content more or if that's a heavy lift for you and uh you know you just date lunch and you're feeling kind of sleepy anyway i get it um you can also just come back and watch this segment of the reporting later either ways is cool um but but yeah i'm just trying to keep things uh useful to you to equip y'all for the assignments and success to succeed on your project uh okay so the big idea here you've got to build an app how do you decide which tools to use you might have to decide which programming language to use which framework to use uh maybe even on the front end or the back end maybe there's two frameworks you have to use which database or back-end technology to [Music] oh use um there might be a choice of platform to use maybe you have to decide uh aws versus zero versus google cloud or something like that heroku or firebase or something you might have to choose which build tools or ides or libraries to use maybe you need to generate qr codes and there's three different choices for doing that in your programming language of choice and you have to make a decision about which one to choose so this also is a bit of like the koalas to the max thing where some some choices are huge and big some choices are more finer grained but there are still a lot of choices to be made and in every case you have to evaluate different options and figure out which choice to go to this by the way is generally speaking a a big sort of role that a cto would have is to figure out which technologies the company should invest in so this is a major sort of uh function of that role within a company and i was a cto for my little company after i graduated [Music] okay um so what i'm going to talk about with evaluating technology is different approaches to evaluating technologies i'm just going to survey different approaches and analyze them briefly and then on monday i'm planning to talk i need to review this content make sure it still makes sense but i'm planning to talk about the virtue of simplicity for making decisions about this and what what i mean by simplicity okay so first of all today uh let's look at different evaluation approaches now you remember in your project preferences i mentioned that there's a lot of different ways to decide which projects you want to pick um you might decide based on the clarity of the proposal or the maturity of the idea or how flexible friendly and available your client seems to be or maybe the social impact of the project you know whatever you remember this like you it was kind of up to you to figure out what are your priorities when you're picking which projects you're interested in um same thing for evaluating technologies there are different priorities and i think that's important to say starting out otherwise you can get stuck in like uh which one's better without actually talking about what's actually important to you and is that the same as what's important to somebody else [Music] so different priorities that you might have is how new is this technology knowing that newer things on the whole tend to be more advanced than older things you know it seems like sophistication of software is ever increasing um how popular is it you know how well trot a path is it to use this technology [Music] is it maintained you know is there somebody who's still responding to bug reports and issue requests um how easy does it seem to be to start with to sort of pick up and start using even if you haven't read through the entire manual [Music] and you know am i already comfortable with it that might be a priority for you so that you don't have to spend a lot of time learning and to just start doing [Music] or will it help me get hired after graduation and how easy is it to understand so different priorities here a big point that i want to make about this is that if you have a conversation with your team about what your priorities are in the abstract that can help build consensus for the whole team to figure out what technologies to adopt you might realize that you're all on the same page about what the priorities are which would be you know great um and then you can start evaluating these different technologies that you're looking at explicitly in terms of those priorities or maybe you're not on the same page and you have to kind of navigate a disagreement to figure out what the team as a whole is going to do but this might be a worthwhile conversation to have [Music] okay so different approaches let's take a closer look at a few priorities newness popularity is it maintained and is it easy and we're going to just discuss the sort of pros and cons of each of these approaches so and i'm going to kind of go through these relatively quickly here in fact let me just check the time oh we're doing all right on time okay prose for newness is it can expand your mind you all have probably experienced that at least in the course of your career as a student here at unc the more you learn about programming maybe you can relate that you feel like your mind has expanded since when you started learning about programming it can be fun to learn new things it feels cool to be using cutting edge things and feel like you're pioneering and how to use these things at least among your friends or something and i mean the field that we're in changes so much that we have to have at least some tolerance for learning new things and figuring out how to use new things because this is a relatively new field and rapidly changing fields now the cons of newness would include that there may be bugs you know it's maybe less battle tested than something that's older there may not be as much documentation and you may be relatively alone using it so it may be hard to get help enough oh yeah it's probably enough said there all right so popularity pros of popularity if others are already successful using this thing that implies that you should be able to as well if they can do it why can't i it can be easy to get help even for uncommon use cases you know if one percent goes down this one rabbit trail and you're part of that one percent you know if a million people are using it that's still a whole bunch of people chances are good that somebody has already documented what that going down that path looks like and following the crowd tends to be easier but note that popularity is not and i said it's a cruel and whimsical master like it's it's a little bit hard to predict anybody who's ever tried to create a viral video will know this uh that's you know easier said than done and a lot of engineers are poor marketers and their excellent work isn't popular because they don't know how to market it and get the word out and get people excited about it and vice versa a lot of excellent marketers are poor engineers and so maybe their work is popular but it's not really well engineered work those two things tend to kind of be anti-correlated so um you know there might be reason to look more carefully at things that are popular to see is this actually a good technology or not [Music] okay is it maintained which um is a bit of a difficult question to answer but at least for the purposes of evaluating technologies a lot of people will adopt a metric of what was the most recent permit to the repository you know was it yesterday was it last month was it three years ago and that gives you a sense of how maintained it is even though it's not a perfect metric [Music] so pros of this might mean that if you discover and report a bug it may get fixed quickly in which case you kind of get new features or better performance for free as people are reporting bugs or improving things and you stay up to date with the latest versions which is kind of nice getting that stuff for free cons might include that you know maybe bug fixes are happening because it's still kind of muddy it's still got some some kinks to work out and it's kind of rough around the edges and that usually if there are bugs being fixed that means there are more bugs to be found so you know maybe recent commits mean that it was buggy to start with and it will keep being buggy in different ways also i'll say this you you might be coupling your project to a technology that is constantly moving and you might also have to stay moving to keep up and this is something that i've noticed especially i think a lot of people have comments about this in the javascript world in the the node world node package manager and pm stuff like that is that it is just constantly on the move and it can be really challenging just to keep up with all the new versions of things that come out and each one you know you have to check to see is this a breaking version or not if it is you have to go read a change log and figure out what actually broke and what do i need to change my my usage of this library to be to make this work with the new version and there's a cost to this right it's not just completely for free [Music] okay and then ease like how easy is it to use how easy is it to pick up and work with even if maybe you haven't read the entire manual i'll note that the word origin here means to lie near or to be adjacent to which i think is interesting because one of the things that implies if you think about it is that that's a relative term right it's relative to where you are what your position is all right so pros of these is that it's easy for you to use it you can really get started quickly there's little to no learning curve required so you can start being productive fast which frankly is very important so this would be maybe a reason to use technologies that you already know and not try to learn new things i'm pretty sure some of your mentors have told you exactly that based on the reports i've seen some of you say some of the mentors have told you you know i recommend sticking with technologies that you already know rather than trying to learn something new for this project because it's more important to be productive for a client than it is to learn new things uh new technologies here and i don't disagree um [Music] a cause of the easy argument would be that maybe others on your team have a different sense of what's easy because easy is relative maybe you're used to a python django web app but your teammates are not uh also you know maybe instead of sticking with technology you know maybe a new tech or a different technology that you've heard about or that others use or whatever um might be worth learning carpenties maybe you'll actually get farther even in the course of a semester if you did switch and climb that learning curve early on [Music] and one other note about this easy to start does not imply easy to finish a lot of times actually some of the things that are easiest to start tend to get into some pretty tall weeds when you actually have to get all the way to deploying and maintaining and things like that so um that's something that kind of comes from experience as you walk down this path with different technologies the big idea here is if you lost all those details um but you just hear one thing about evaluating technologies understand this any priority you have has trade-offs i was able to come up with the pros and cons list for each one of these different priorities because there are trade-offs for each of them and in particular with design of any sorts there's always trade-offs trade-offs are a fundamental part of design you have to navigate those constraints and navigate those trade-offs trade one thing off for the other and try to find a solution that optimizes some space for client happiness user happiness and ability to get the project done so this is a fundamental part of design if you get good at design you'll be able to uh to understand the trade-offs and even sort of consciously see them and and put yourself at some point on that spectrum whatever spectrum it is okay questions about evaluating technologies okay another poll do you already know what technologies you'll be using uh you know what no i didn't um i think i forgot to create a poll for this sorry never mind just kidding let's switch to a sigma tutorial all right so here um which time do i have i want to stop at 2 30 maybe maybe a little bit before maybe 2 28 or so so i can set up the quiz on sakai and you all can have 10 minutes to finish it before the end of class so let's switch gears here we're going to go to a sigma tutorial the um the write-up is available i'm going to be walking through this uh let me actually navigate there if you just go to the course website go to calendar um shoot i don't think i didn't put that there i'm sorry um go to calendar and go to the fall 2020 calendar and on the fall 2020 calendar september 2nd talks about figma workshop [Music] and here called 20 september 2nd of call 20 is the link to the handout and let me post this link in zoom as well because why not all right this is what i'm going to be walking through and i'm going to have these instructions up on a screen that only i can see and i'm going to put figma on the screen that everybody else can see so if y'all want to follow along with this which i would recommend then pull those instructions up and have those uh up in front of you hopefully those of you on zoom maybe have an external monitor or something like that that you could put those instructions up on while you're watching me and following along okay so let me rearrange my windows a little bit here [Music] okay [Music] okay so if you uh go to figma.com fygma.com and if you haven't already created an account go ahead and do that um i usually just log in with google something easy so you don't create a password and all that but once you're logged in you should see a screen that's about like this although maybe less populated with stuff since i actually do have some recently viewed designs and i'm gonna i'm just gonna kind of keep moving but i'll try to check in from time to time with both the zoom chat and everybody in the room to see am i going too fast um i think if i see people kind of looking up at me and not even at the screen but if you're like looking at me i'll take that as a signal that you're ready to move on um if you look like you're furiously sort of uh typing away or clicking away on your laptop then i'll assume that you're still working on keeping up but also feel free to speak up either in the zoom chat or here if uh if if you need me to slow down or explain something more okay and then yeah we'll cut this off at 228 if we don't get all the way to the payoff at the end with creating a clipboard prototype then um i might just fast forward to the one that i created this morning when i was prepping for this class uh because i do want to make sure that we have enough time for the quiz at the end of class all right so assuming you're in figma at this point again shout out if you need more time um this has actually changed a little bit from when these instructions were created i noticed that this morning under drafts i don't know if i can this might make things a little bit wonky but we'll try it anyway um just increasing the zoom here under drafts there's a plus button and on the plus create a new design file is what figma is now calling this so click creating a new design or design file okay so there's four parts to the figma ui along the top sort of the dark thing is the toolbar along the left is the list of layers in your design along the right is the inspector and in the middle is the canvas and if you if you used various design tools before they're probably going to feel fairly similar so you might have seen something like this before even if you haven't used sigma notice that the inspector has three different tabs design prototype and inspect um and [Music] i don't i can't zoom into that unfortunately so that's really hard to see i'm sorry but zooming doesn't seem to take effect here okay yeah we'll spend most of our time the design tab of the inspector but we will go over to the prototype tab later on when we're ready to create a clickable prototype we're going to rename our project to calculator so in this middle part of the toolbar where it says untitled click the arrow and say rename and you can say calculator i'm also going to just add some notes to myself about which version of my calculator design is first thing we're going to do is create a frame a frame represents the background for for a particular screen of your app and we will have multiple of these by the end but for now it's this third tool from the left region tools if you click the down arrow it's just the first one you can also just click the button directly and that's a frame and just create a frame somewhere it doesn't matter how big doesn't matter where we'll actually fine tune that in just a bit but just drag a rectangle on the canvas to create your frame and by the way if you make a mistake use ctrl z on pc or command z on a mac to undo and add a shift modifier to redo you may have seen that with other tools as well all right now in the inspector notice the frame has different properties associated with it including x y w is width h is height so let's change x to be 0 and y to be 0.

let's change width to be 283 and height to be 324 [Music] okay let's also change the fill to be b2b2 b2 this is rgb hexadecimal color coordinate so that's kind of a dark gray or i don't know medium gray um now if you kind of uh this might be a little bit tricky but if you want to kind of bring this up closer to where like to the upper left of your canvas you can scroll over i think those of you with max might have an easier time of this but you can scroll the um the canvas horizontally or vertically to get that in the right spot okay anybody need me to slow down we all good keep moving okay okay um we're gonna create so in the list of layers we're gonna give this frame a name we're gonna call this the cleared layer and what this represents is a is a particular screen of your app and a yeah a particular screen at a particular state of your application so this is going to be the cleared state we are going to create a calculator so this is going to represent the initial state of the calculator app okay so let's create let's add a calculator display let's create a rectangle within this frame so this fourth from the left tool has different shapes and lines and things that you can draw we're going to click the first one rectangle and create a just a rectangle somewhere in there again you don't have to be precise with where this is because we'll find two knits we want the x to be zero and one thing to note here is that you can actually if you click on the x you can drag left and right now for me this is a little bit weird it might be because i'm using linux same thing with y wh any of these you can click on the label and pull your mouse to the left or right to change this or you can use your arrow keys up and down you can hit shift down to go up and down by 10 okay so [Music] x0 y0 width is going to be 283 which is the full width of the frame and height is going to be 135. color is going to be pure white so ffffff6f you all good okay um we're going to create a button things are going to get a little bit more interesting here so we're going to create another rectangle we're going to just kind of guess it where that needs to be and how big but this is essentially going to be the one button and we're going to pick x is 17 y is 152 w is 50 that's the width of the button height is 30. this right here this um sixth field in the inspector is the border radius let's set that to ten give it a nice border radius there and let's set the fill to actually already is good c4 c4 c4 so it's a bit lighter gray okay moving on we're going to create a label for this button so we're going to use this t for text and we're going i i'm going to try to do this just by clicking and dragging to be the same dimensions as the button i failed so i'll fix that later but just put a 1 there and hit escape to get out of the input mode [Music] okay so i want let me see here if you've missed that the x should be 18 no the x should be 17 y should be 152 w is 50 and height is 30.

okay now um the text i didn't do this well but the text should be you need to actually select that text in there you can there we go and then change the font size to be uh 24 and we also want to set this to be middle center aligned and middle aligned to be in the middle of your button okay so then your your button with the label should look like that okay nobody's telling me to go slower so i'm going to keep going we're going to group the um rectangle the button rectangle and the button text together so in the layer list click on one of those and hit control or command if you're on a mac and click the other one then you can right click and say group selection or hit control g slash command g all right so now we have a group we're going to call this instead of group one i just double click on that to rename it i'm gonna call it button one okay so now we have a group we are going to duplicate this group and that includes the rectangle on the label so hit ctrl d [Music] to duplicate and now we have two of them that are exactly the same including the same position so we're actually going to drag one of them over and just kind of guess about where that button should be we'll fine tune it later and if you double click and double click again you'll be able to edit the text in this change that make it two button already is named button two which is kind of nice i'm gonna do the same thing with three i will click a couple of times to get to be able to edit that text and then make sure you're selecting the group whenever you duplicate control d to duplicate and this will actually be the um leave the equal button no the plus button [Music] and this group we will rename to call that button plus okay i'm assuming everybody's with me okay um now let's um let's position all these to be about right so if you want to get this exactly right to where there's equal margin on the left and the right then what you can do is you could do a little bit of math here so um let's see what is the size of the frame the frame is 283 pixels wide okay it's 283 and the uh button has a left margin away from here inside of the frame of 17 pixels like that okay i you might know how to use this better than me there's ah [Music] yeah i'm not sure maybe you could show me that after class okay but anyway um we couldn't we can't do this i guess the hard way we know that we're 17 pixels in and the total width is 283 and we also know that buttons are 50 pixels wide so we could say that the x of this third this last button here is 283 minus 17 minus 50. and now the last button is where it needs to be and now we need to distribute all four of these buttons equally in between the first and last one so the way to do that is you select all four of those buttons this is the menu on the upper left it's that very first icon in the toolbar if you go down to arrange you can say distribute horizontal spacing now you have all four of those distributed well they're aligned exactly where they where i want them to be within the frame and that looks pretty good okay now we're going to continue duplicating how we got on time oh boy we got to go um so i'll do this we're we're about out of time for this part of it so i'm just going to start moving quickly and we'll see how far we get i'm going to click all four of these i'm going to group them duplicate duplicate duplicate i'm not going to worry about getting this exactly right this is four this is five this is six seven again if you're you probably might not be able to follow along at this rate but that tutorial is available on the website if you want to check that out i'm basically just applying the things we've already learned at this point [Music] okay i'm not going to worry about all of my layers being named the right thing but now we have all the buttons okay so last thing i want to do is add some text for this time i actually did get it right for the display of the calculator i'm going to change this to font size 36 and say 0 i'm going to make it bottom right align and i'm going to group those two things together okay now i'm gonna select my frame the entire frame i'm gonna duplicate that and this is going to be the three state i'm gonna change the display to be three i'm going to duplicate this to be the three plus state and change the display to be three plus duplicate that make this the three plus three state [Music] and finally the sixth state [Music] okay i'm going to scroll let me think how to do this control and then scroll will [Music] um zoom out okay and here's where it gets a little bit interesting i'm going to click the prototype tab in the in the inspector and when i select first i have to select this row of buttons then within that if i double click i can select that button and there's a little little circle here that has a plus in it when i hover and this is going to connect the three button make it a clickable region it's going to connect it to this screen with a three in it okay so i'm connecting that three button in the first frame with the second frame i'm going to do that with the plus button here the three button here and the equal button here and then i'm also going to connect all of the clear buttons except for the first one back to the first frame oh that's all right let's go and at this point i can click the play button sorry that probably wasn't i did that too fast this play button in the upper right when i'm on the prototype i can create that prototype and connect those different frames together and then i can click the play button to present that and this is my clickable prototype for the calculator if i click anywhere it'll tell me where i can click and if i click three plus three equals it gives me six i can clear that and go back and do it again so there's our little clickable prototype now you should be equipped to use sigma now how comfortable do you feel i know we kind of had to rush that at the end but it seems like most i don't know seems like maybe there's a little bit more weight up top than there was before so that's good okay i'll keep that activated all right so um i'm going to stop the recording now and i will open up the sakai quiz for everybody

2021-09-11 08:28

Other news