Jeff Terrell: Okay.
Jeff Terrell: Now recording has started.
Jeff Terrell: Today we're going to talk about evaluating technologies and a few other things before we get into the main stuff for today.
Jeff Terrell: Let's have some announcements.
Jeff Terrell: All right, the intro music for those of you who joined a little bit early was any color you like Pink Floyd off of the famous album Dark Side of the Moon.
Jeff Terrell: Because first of all, you get to pick colors in your designs and, secondly, you get some say in what technologies use in your project. So
Jeff Terrell: There's some choice there alright tenuous connection, but maybe it's at least is something. All right. Um, I really appreciated all of your input on the ticket with questions yesterday or not yesterday Monday.
Jeff Terrell: That's actually super useful for me to just get a little bit of feedback on how things are going. What was confusing.
Jeff Terrell: And I think it's also a useful exercise for you to think about, okay, what it actually learned and that kind of submits some things in your head a little bit better. So there's, there's, there is a learning connection.
Jeff Terrell: But it's also feedback for me that is really helpful, especially because I you know I can't see you in person and sense the mood of the room or anything like that. So it is helpful to get that
Jeff Terrell: I do read all of that, by the way.
Jeff Terrell: The great book is current as of this morning so that reflects everything I know about
Jeff Terrell: Assignment three user stories is due next week. So I don't think that's going to be too hard. I rated it two cups of difficulty.
Jeff Terrell: And just to briefly mention I hope everything here is clear. If you have any questions, let me know better to ask beforehand and so you know what the answer is rather than
Jeff Terrell: Waiting until afterwards and finding out that you're wrong. We had a few people on the website assignment or know the project management assignment have some details wrong and so
Jeff Terrell: I think going back and forth a little bit about that. Some of that is because the right. It wasn't as clear as it could have been
Jeff Terrell: But also support to read carefully, especially in a software development context and you're seeing that list of requirements and make sure you understand if there's any doubt piano is a good place to ask and you can also feel free to email me or
Jeff Terrell: Attend office hours with Phil
Jeff Terrell: But okay, basically, there's information about you know what a user story is I'd encourage you, just to read this and and you know for feel for that.
Jeff Terrell: Those of you who still have mentor meetings this week I'm almost certain every mentor is going to know what a user story is so they might be able to answer questions as well.
Jeff Terrell: But hopefully that's enough to go on. Any questions about what's due next week.
Jeff Terrell: Okay.
Jeff Terrell: Okay, um. Note that now that the website is up.
Jeff Terrell: Or at least it will be this week in all future weeks you should be updating your journal
Jeff Terrell: This can be kind of a hard thing to remember. So I wanted to make sure that I noted that because that's one of the few cases in which I've written something and an assignment that talks about things you need to do in the future.
Jeff Terrell: So be aware of that you'll need to do that every week, you should be including at least decisions and maybe also discussions from team meetings and mentor meetings.
Jeff Terrell: And this is a really useful blog, not just for you to look back on later if you need to, but also for your mentor or your client or me to quickly get a feel for kind of what y'all have been up to lately we may need to just check in.
Jeff Terrell: So it might be worth having a conversation with your team and spending a little bit of thought on how can you remember to do this, you know, do you set a weekly reminder on your phone or something like that or how can you actually remember to get that done.
Jeff Terrell: There might be a way to do this with trash or there is a way to do this with fellow but
Jeff Terrell: Maybe have a rolling set a deadline for a certain time of the week. And then when you finish that set a deadline for the same time next week. I guess that would work.
Jeff Terrell: But, you know, think about how to do that. So you don't forget. All right. A week after next is a four cup assignment for cut difficulty assignment that clickable prototype.
Jeff Terrell: We've been talking about design principles yet last lecture. And today we'll talk more about that. And a lot of that is in service to this clickable prototype assignment and of course in service to your project as a whole.
Jeff Terrell: One suggestion that I got from a mentor that I thought was worth conveying on to you was to sketch some lo fi designs on paper, or maybe using a collaborative whiteboard tool like free hand and show your mentor next week to get a little bit of input on
Jeff Terrell: How things are shaping up
Jeff Terrell: So that could be a worthwhile thing to do. And then as you work on assignment for and trying to get something that's more of a hi fi design in place you'll have a good start at that
Jeff Terrell: And it's got a little bit cut off. But yeah, no class on Monday, BECAUSE OF LABOR DAY. So I won't see you all again until Wednesday.
Jeff Terrell: Questions so far.
Jeff Terrell: Assignments, or anything else.
Okay.
Jeff Terrell: Today what we're going to do is continue design principles from the last lecture.
Jeff Terrell: There's a couple of sections of Graham's lecture from last year that we didn't get to last time kind of ran out of time, so we'll could pick that up today.
Jeff Terrell: And that includes testing designs and getting feedback as well as some practical tools that you can use to build these designs.
Jeff Terrell: And then we'll talk about kind of the meat of today, which is evaluating technologies and how do you actually make decisions about what technologies to use in your project.
Jeff Terrell: And then we'll get to a figment tutorial at the final bit of class, hoping to reserve at least 20 maybe 30 minutes for that. We'll see how it goes.
Jeff Terrell: Okay, so let's continue.
Jeff Terrell: Kind of picking up where we left off last time I have sort of copied. Most of this. Well, I guess. For this section I didn't actually copy and more just kind of adapted from Graham's slides and lecture.
Jeff Terrell: So I have that information here just I didn't have to bounce back and forth between PowerPoint and my own slides system.
Jeff Terrell: But I am stealing a lot of content from him and I appreciate his, his willingness for that.
Jeff Terrell: Okay, so we're going to talk just a few topics here prototyping.
Jeff Terrell: Just some practical ideas about or maybe more conceptual and philosophical ideas about prototyping getting feedback and practical tips about that.
Jeff Terrell: And then iterating on your design and some tips for actually how to iterate effectively.
Jeff Terrell: Okay, so why do we prototype.
Jeff Terrell: The main problem that prototyping is solving is that it is hard to see something with new eyes after you're already familiar with it.
Jeff Terrell: So once the design is no longer new. It's hard to spot mistakes or rough spots because you're close to it. You're you've seen it before. It's familiar to you.
Jeff Terrell: And it's actually a really hard thing to break out of your previous knowledge of this thing and your previous experience with it and try to see something with fresh eyes.
Jeff Terrell: I know people who are actually very good at doing this and they can look at something that they've seen 100 times before and still
Jeff Terrell: Kind of click into a mode of seeing it with fresh eyes and thinking about what would somebody who's never seen this before. Think about it. And how would they react to it, that's a skill that you can cultivate but it's not it's not easy. I'm not sure.
Jeff Terrell: I guess probably everybody can learn to do that, but I'm I think probably it's not easy and and for some it might be very difficult, just depending on how your brain works, but
Jeff Terrell: Right. So if you're if you're not doing design first and you're not doing kind of prototyping up front.
Jeff Terrell: What can happen is the user interface emerges over the course of weeks or months as the development progresses.
Jeff Terrell: And then it's really hard to see any problems with that. I mean, you're not only are you may be kind of attached to what you've come up with. But it's so familiar at that point that good luck actually seeing it with fresh eyes and seeing what the rough spots might be
Jeff Terrell: So that's kind of the main reason why prototyping is important.
Jeff Terrell: It helps you just quickly dump your vision and be able to examine it while it's still fresh.
Jeff Terrell: And be able to see it with new eyes because you can maybe come up with a quick prototype in an afternoon, especially if you're familiar with some of these tools already that you can use.
Jeff Terrell: There are other benefits as well to having a design artifact. You might recall we talked about that earlier. I believe in them project narrative arc lecture in the beginning of the semester.
Jeff Terrell: But having just an artifact, to be able to put in front of people and give them a sense of what the app is going to be like when it's done is super helpful to get feedback and also it's a lot easier to change that and respond to feedback.
Jeff Terrell: Then that would be for code. For example, if you just had an app already written
Jeff Terrell: Okay. So speaking of feedback. How do we effectively get feedback on designs that we've created if we if we've come up with a prototype like a clickable prototype.
Jeff Terrell: How do we actually get feedback on it.
Jeff Terrell: And this, this is kind of true by the way of both getting feedback on clickable prototypes, but also getting feedback on an app. Once it's already been
Jeff Terrell: Created or at least started. So, all this kind of applies equally to both of these things.
Jeff Terrell: So to get some feedback you've just find some people with fresh eyes. And the important thing is that they have fresh eyes and haven't seen this before.
Jeff Terrell: And so I've actually been in a project once where it was, it was a fairly serious project. And one of the things I respected about what they did was they went out and they would actually fly across the country.
Jeff Terrell: And line up people to go and show the current tool to every month and people who'd never use the app. And they would have a team of people actually that went out, who are skilled at getting this kind of feedback.
Jeff Terrell: And just asking these kinds of questions and getting effective actionable, like we need to change this and that, based on on response from
Jeff Terrell: People using this app. So they knew their target market. They were in tune with kind of the people they're trying to sell to. And it was a useful sort of sales vehicle as well. But what they were really trying to do is to get feedback on
Jeff Terrell: What the app look like. So they're very diligent about that and I think that was great. But the important thing is you find people with fresh eyes, even if that's friends and family, you know, you can ask your mom. That's better than nobody, just to get some input and get some feedback.
Jeff Terrell: I give somebody a goal. And the idea is you would be sort of watching over somebody's shoulder as they're using the app. You give them a goal, but let them find their own way.
Jeff Terrell: Don't say, you know, click on this button. Now click here. What did you think say okay what you're trying to do is create a new post
Jeff Terrell: How do you think you could do that, what what my first step be and you're just watching
Jeff Terrell: You're watching them trying to find their own way.
Jeff Terrell: And this could be a Super painful to watch you think it's really obvious what you're supposed to do. And this is again where familiarity is kind of your enemy here.
Jeff Terrell: You think it's really familiar. Like of course you need to click on this button in the upper right hand corner, but you're sitting and watching this person, use your app. And you're like,
Jeff Terrell: No. What are you doing, why didn't you click there. No, that's not in your thinking this in your head, maybe, but you're you're trying to just watch and observe what they're doing and
Jeff Terrell: Remember people muddle through. And sometimes when you know the right thing to do. It's hard to watch somebody model.
Jeff Terrell: As things are unfolding and and also at the end, ask open ended non judgmental questions don't give
Jeff Terrell: Me. Try not to be judgmental at all. But even if you have, you know, some inner judgments on on how they use the app.
Jeff Terrell: I try to really keep that out of the content of what you're actually asking them, you know, people are pretty good at sensing criticism, so
Jeff Terrell: And that can really tamper with the information that you get people can clam up and not give you good feedback if they sense that you're
Jeff Terrell: being critical of them. So do your best to be non judgmental and also ask open ended questions that don't lead them a certain direction. So you could ask, for example, why didn't you do it that way.
Jeff Terrell: And just listen.
Jeff Terrell: You could ask, how did you expect that to happen.
Jeff Terrell: There's no criticism there. It's not, you're wrong, or something like that, just like what did you expect this is useful information. Information for me.
Jeff Terrell: Don't ask, you know, why didn't you do it this way. I mean, maybe you could ask that, being careful with your tone. But if you're saying like
Jeff Terrell: If you're thinking, there was this obvious way to do it. Why didn't you do that and you come across as critical maybe that's not not a helpful way to ask it.
Jeff Terrell: And don't ask, you know, have you used a computer before right not not not helpful. It's not going to give you any good info. It's probably gonna
Jeff Terrell: Send things downhill.
Jeff Terrell: Ask people to think out loud. I think I mentioned this question already. But you could start off by saying, Okay, let's think about accomplishing this thing.
Jeff Terrell: What would you do first. Can you describe what you do and then show me or maybe talk me through as you're doing why you're doing what you're doing.
Jeff Terrell: If you don't ask as things are unfolding those details will probably be forgotten.
Jeff Terrell: So it's important to ask as its as it's happening.
Jeff Terrell: One of the things that's especially important, especially if you're asking like friends and family and people you already have a relationship with is to invite them to tell you things that you could improve
Jeff Terrell: So a good question to start this is what was the most confusing confusing part of that for you.
Jeff Terrell: And, you know, because your mom, I say, Oh, this is amazing. I'm so impressed that you can do this and you can you know use these computers and all this stuff and I, you know,
Jeff Terrell: I don't know. I don't know. Your mom right but sometimes somebody who's close to you is, is not going to be inclined to criticize you. They'll just want to praise you. So actually asking these kinds of questions can give you some good feedback.
Jeff Terrell: Okay. And then once you get that feedback. How can you apply that to your design and improve it.
Jeff Terrell: One thing not to do is to scrap your design and start over. And this can actually be a temptation, as you're getting feedback and you're seeing somebody muddle through your app. And you're like,
Jeff Terrell: Oh my goodness this is painful. I didn't realize how bad my designs were getting so many suggestions about how to improve them and things seem so broken. I just want to start over.
Jeff Terrell: That can definitely be a temptation, but that's probably not the right thing to do. Instead, just try tweaking one thing and doing another interview with somebody with with new eyes.
Jeff Terrell: This is a little bit more scientific being able to rather than have a just a completely different experience being able to tweak one thing and test. A versus B on that one decision.
Jeff Terrell: Can help you kind of iterate and get closer to design that really works well.
Jeff Terrell: Don't be too attached to any particular aspect of your design. Be willing to change anything. You might think that this one aspect of your design was amazing and very aesthetically pleasing and whatever.
Jeff Terrell: But that might be the part that's really confusing, so be willing to throw that away and try again.
Jeff Terrell: And just try the simplest thing that can possibly work. We talked about simplicity already. I think so. I will hammer that point.
Jeff Terrell: Questions so far on testing designs and getting feedback.
Jeff Terrell: Okay.
Jeff Terrell: All right, design tools. A lot of you asked in your takeaway questions are expressed some amount of interest and maybe confusion on like, okay, but how do we actually do these things. How do we, what are some tools we can use and things like that so
Jeff Terrell: Graham has a set of suggestions I will augment his list with mine afterwards with a few extra suggestions and I'm actually at this point. I think you're just copying all the content from his slides.
Jeff Terrell: From that section of his slides.
Jeff Terrell: He recommends envision freehand. This is a tool for whiteboarding
Jeff Terrell: He said that there's a lot of different whiteboarding apps. But this one actually is is really effective. And I think he talks a little bit more about this in a minute.
Jeff Terrell: I'm sigma will see that in much more detail later.
Jeff Terrell: The noun project and he liked kits. We'll talk about all of these in more detail. And note that all of these are free, or have good free versions. So that was something
Jeff Terrell: He was interested in is not making y'all pay for anything. And he noted. Also, I thought this was kind of interesting. These are all things that he uses and
Jeff Terrell: I there might be some things that he pays for as a professional designer doing this full time, but a lot of what he does is use free tools. So it's kind of cool that you can use the same tools that a pro uses
Jeff Terrell: Alright so freehand Graham says is this whiteboard on steroids has infinite canvas and zoom. It's very approachable. It allows for remote collaboration. So multiple people using the same canvas. At the same time, similar to Google Docs Figment also has this ability, by the way.
Jeff Terrell: You can annotate screenshots and he said basically, this is just like it, at least at the time he was
Jeff Terrell: giving this lecture last year. This was the go to tool for whiteboarding
Jeff Terrell: So it's a pretty easy way just to sketch something out.
Jeff Terrell: And even if you don't know a tool already
Jeff Terrell: Okay, sigma. We'll talk more about this. I'll actually show it later this lecture.
Jeff Terrell: You can create clickable prototypes and will actually go all the way to the point of having a clickable prototype.
Jeff Terrell: Different you can have components and style them and you can actually kind of replicate those components in different places in your design.
Jeff Terrell: There's a lot to this that I haven't played with very much and don't understand very well. So if you might actually understand that better have an idea.
Jeff Terrell: Like freehand it actually allows real time remote collaboration. So you can actually see what people are doing in the same canvas in real time.
Jeff Terrell: You can share prototypes and so even not even sharing a design, but just like you publish a prototype, so that your client can see it and they can't change your design or even see your design or how its put together, but they can see the clickable prototype and click through it.
Jeff Terrell: And I guess the point of this bullet was that then you can get feedback okay for icons. There's actually a lot of good free resources for icons out there.
Jeff Terrell: Material icons. Remember we talked about material design last lecture and how that's kind of a standard set of ways of doing design and UI elements.
Jeff Terrell: Well, a lot of these icons are actually free to use. So check that out. There's also the noun projects com
Jeff Terrell: I use this a lot when I'm doing designs, I might should check out material icons me. I don't know if that might be better for some things, but
Jeff Terrell: Basically, they've got any icon you could want. Just about. I went to the homepage recently just to check it out and and they had just as one of their samples, a
Jeff Terrell: DNA cut icon. So it was like crisper cast nine like an icon of processor like cutting some DNA out. So I thought that was kind of finding something so specific is that
Jeff Terrell: As far as I guess UI kits are like a whole set of
Jeff Terrell: Components and icons and stuff at all sort of works together. There are some free UI kits at fig my freebies com there's material design kit that is available as a sigma
Jeff Terrell: I don't know sigma calls them design kits are you I kits, or what but basically you can import the this this design kit into sigma
Jeff Terrell: And have those resources available in your design projects.
Jeff Terrell: There's also some paid kits that grammar committed a set product if you're if you're getting serious about this. I think he said he does use some of these and helps things really look nice. So they are a little bit expensive, though. So, be warned think they're like $100 and more
Jeff Terrell: And then I wanted to add a few other things I know all of us at UNC have free access to Adobe XD
Jeff Terrell: And this is really similar to sigma, but it's a death a desktop app, rather than a web app.
Jeff Terrell: As far as I know there's no real time collaboration abilities like there isn't sigma
Jeff Terrell: So if you're doing any sort of collaboration on your design with your teammates. For example, you might have to share screens and zoom or something like that, rather than having
Jeff Terrell: Everybody have their own view of the same canvas. Like, you couldn't figure out if I'm wrong about that, by the way. Somebody mentioned that in in the chat.
Jeff Terrell: I'm not, I'm not an expert in next
Jeff Terrell: Oh, maybe, maybe a beta collaboration feature that's good to know. So maybe that's coming
Jeff Terrell: Okay framer is one that I just now found one of one of the tool Smith's projects that I manage for the department, actually.
Jeff Terrell: One of the students found this tool framer, and I thought it was kind of cool.
Jeff Terrell: Let me actually show this a little bit. It's kind of
Jeff Terrell: It's a web app like sigma maybe didn't mentioned the film as a web app. So it's not downloaded software for your desktop like XD is, but it's a web app. So you just access it through the web.
Jeff Terrell: Through website and its intended for relatively standard experiences. And so a lot of what you might do for an app is not. I mean, we talked a lot about just like
Jeff Terrell: reuse existing patterns for design don't don't reinvent the wheel. And so for a lot of you if you really don't need to get very fancy framer might actually be a better choice and
Jeff Terrell: I see here
Jeff Terrell: I reload this page, and now it's coming up blank. So what's going on here. There. Yeah, okay.
Jeff Terrell: So we have like different screens here and this is just an app that we're, we're thinking about or that we're starting on working on, but we have different screens and then
Jeff Terrell: It's relatively easy to create like vertical stacks and horizontal stacks that are aligned in different ways.
Jeff Terrell: And that idea stacks actually makes it I think a little bit easier and easier to use and something like figure
Jeff Terrell: Or XD figure out an XT and tools like that give you a lot more control than this does. And so this is more of like a standardized experience that takes shortcuts that are suited for that.
Jeff Terrell: But if you're wanting to do something that's a little bit more custom you might you might get frustrated by the constraints here. So be aware of that.
Jeff Terrell: I've also heard people recommend in Division, which I think is like XD. I've never actually fire that up and used it but i i think that's what that is.
Jeff Terrell: And one of the mentors actually recommended envision and balsamic I've heard of. And I've never really dug into it, they, they make low phi wireframe prototypes really easy to to create and these are just like black and white.
Jeff Terrell: Like I think literally black and white. I don't even know if it's gray scale but
Jeff Terrell: You're not choosing fonts. You're not choosing colors. All you're doing is kind of laying things out on a screen to see what it could look like so.
Jeff Terrell: That's a cool way just to quickly get something up to show people. I don't think there's a free version of this, but there is a 30 day free trial. And that's one of the reasons I haven't ever gotten into this is because
Jeff Terrell: I don't think there's a free version if somebody knows. Otherwise, feel free to say so.
Jeff Terrell: Okay, any questions so far on tools. That's all I was going to say about tools.
Jeff Terrell: Okay.
Jeff Terrell: Okay, I'm interested to know do yall already know what technologies, you'll be using. So go to polivy.com
Jeff Terrell: Hello should be active now and just let me know where you're at in terms of choosing technologies totally okay if you haven't started. It's not expected that you will have started bark right now. But I was curious if people had already started.
Jeff Terrell: And if you have. That's great.
Jeff Terrell: Okay, I think that's most of us here are up to 52 responses out of 59 of you.
Jeff Terrell: Um, and let me just look okay. Some people just have their choice they, your hands are tied 17%
Jeff Terrell: haven't started talking about it and I don't really have a strong preference is a good portion of faith view.
Jeff Terrell: I haven't started talking about it, but I have a preference.
Jeff Terrell: Maybe 10% of you.
Jeff Terrell: 20% have started evaluating technologies. Okay, that's impressive. You already agreed on some of the technologies that we use 22% and some have agreed on basically all of the major technologies to 7% Okay y'all are farther along than I expected you to be. So this is good for me to know
Jeff Terrell: Cool, thank you for that feedback.
Jeff Terrell: Okay.
Jeff Terrell: So I want to talk about evaluating technologies.
Jeff Terrell: And give you some tips for this. It sounds like some of you if you've already made all these decisions or if you don't really have the freedom to make decisions about this, then
Jeff Terrell: This might not be as useful for you on this project, but I think it might still be useful for you if if only on sort of hobby projects.
Jeff Terrell: But maybe even on some of the projects that you work on professionally. So I wanted to mention a few things about evaluating technologies that is something you have to do as a software engineer from time to time.
Jeff Terrell: So in the context of our course. This lecture is kind of addressing assignment six which is not due until the week of September 27 so we're looking fairly far into the future.
Jeff Terrell: And this is premature for some of you who
Jeff Terrell: Don't need to worry about this yet. I'm surprised how many of you have been worrying about this. Yeah. And kudos that you are. It's good to look ahead and know what's coming.
Jeff Terrell: And there's no reason not to go ahead and try to tackle as many assignments, as you can and get ahead so
Jeff Terrell: Uh, so, yeah, this will be premature for some and if that's you, my suggestion would be. Connect with future you who needs to know this stuff. So try to get yourself in the mindset of
Jeff Terrell: Actually having to choose technologies for your project and think about how you're going to do that. And I think that'll help you connect to this content more and find it more relevant.
Jeff Terrell: Or
Jeff Terrell: The other option is if you if you do find yourself zoning out and find it hard to connect because it doesn't seem as relevant, you can always come back and watch the recording of this lecture later.
Jeff Terrell: One thing I mentioned, by the way, in terms of just the design of course is that I'm trying to keep the lectures as relevant as I can, by staying ahead of assignments.
Jeff Terrell: And so if you look at the class calendar, you'll see that the topics that I'm covering are roughly following the assignments that are do the order of the assignments.
Jeff Terrell: So that is one aspect of the course design, just in case you're curious for a little peek behind the curtain.
Jeff Terrell: And then the other thing i mean i don't know if i actually mentioned this on the first day of class, but
Jeff Terrell: The assignments are actually there to provide some some structure to keep things moving on your project and specifically to have some project and generic structure to keep things moving. So something that isn't as specific for a particular project.
Jeff Terrell: But but works for all projects. So all of this is intended to serve you and
Jeff Terrell: Help you make progress on things, but
Jeff Terrell: Yeah, anyway, just mentioned that as, as an aside,
Jeff Terrell: Alright, so the big idea of evaluating technology.
Jeff Terrell: You know, you have to build an app and you have to decide which tools to use
Jeff Terrell: So how do you do it. And there's a number of different kinds of tools that you need to figure out
Jeff Terrell: And that could include programming languages. So at the bottom level like What language are you actually going to be using
Jeff Terrell: There are choices, sometimes about frameworks to use. So if you're building a web app. There's frameworks on the back end, there's frameworks on the front end, there's choices to be made frameworks are essentially
Jeff Terrell: Things that call your code in certain ways.
Jeff Terrell: All right, good.
Jeff Terrell: Info bond.
Jeff Terrell: Okay, um,
Jeff Terrell: Another thing that sometimes you need to make a choice about is which database to use and sometimes they're like backend services that you can use.
Jeff Terrell: You might need to figure out what platform you use. So how are you going to deploy your app. What kinds of infrastructure is your app going to run on, you know, Amazon Web Services or her Roku or GitHub pages or what
Jeff Terrell: And then there's also choices to make about what build tools, what it is for libraries, etc. So lots of choices to be made.
Jeff Terrell: Both at a sort of strategic level, you know, programming languages and frameworks and things like that are fairly strategic but also in a fairly fine grained level tactical level. You know what library. Do we want to use to do
Jeff Terrell: QR code generation, you know, or something like that. There's there's various choices available.
Jeff Terrell: And what I am going to talk about. I'm intending to apply this to as much of that as I can. So to give you some sort of generic advice that can work for all of this.
Jeff Terrell: So we'll see. Hopefully that's useful for you.
Jeff Terrell: get distracted by all the, I don't know if you can hear the footfalls on the floor above me here. Kids are running around. I'm getting distracted anyway.
Jeff Terrell: Right. So there's kind of two big topics here for evaluating technologies. Today I want to talk about different evaluation approaches.
Jeff Terrell: And then I didn't think I'd have time to get into simplicity and why simplicity is a really good thing to focus on when you're evaluating technologies. So today, I'm just going to talk about the first of those things and the survey different approaches that you can use to evaluate technology.
Jeff Terrell: So let's talk about different approaches. Remember assignment zero when you actually submitted what projects you prefer to work on.
Jeff Terrell: You know, some of you decided on. I want. I have people that I want to work with and I care less about which project, among others of you said I want to work on projects, x, y, and z. And I don't care about the others as much and you had a, you know, an order of which projects you wanted
Jeff Terrell: And as I said before you turn that assignment in there are many ways to decide on a project. Some of you cared about this thing. So we cared about that thing maybe
Jeff Terrell: Trying to get back and think of an example, real quick I listed some in the assignment zero right up. But maybe you want to work on cool technologies.
Jeff Terrell: Maybe you want to work with somebody who's connected to potential job and employment opportunities. Maybe you
Jeff Terrell: Have technologies that you prefer, and you want to find a project that could work with that maybe you care about social impact.
Jeff Terrell: And any of these things are totally fine ways to approach making these decisions are just different values, right. Like, I forgot I had options here listed
Jeff Terrell: So there's nothing wrong with choosing based on these different values that that you might have and different people have, you have to her values and chosen different ways and that's fine.
Jeff Terrell: The same thing applies to evaluating technologies. People have different values. So here are a few things that you can
Jeff Terrell: Value or prioritize when you're looking at time technologies how new is it how popular is it is it maintained.
Jeff Terrell: Is easy to start with. Maybe related Lee has the documentation.
Jeff Terrell: Am I already comfortable with it. That's actually a really important one thats related to how easy is it like if I already know it it would make sense that I would use it again because I don't have to learn anything to be productive in it.
Jeff Terrell: Will help me get hired after graduation. Is this a really arcane technology that nobody's gonna want to hire me for or is it popular is in demand.
Jeff Terrell: And how easy is it to actually understand what this technology is doing and I say allergy. And again, it could be language. It could be framework, it could be library infrastructure, any of these things.
Jeff Terrell: Now, one of the big differences between assignment zero the project preferences and evaluating technologies and making decisions about this.
Jeff Terrell: Is that now you have to collaborate with other people and maybe you did already. Maybe you had a team that you wanted to work with and you guys had to collaborate on
Jeff Terrell: What your project preferences were. But certainly, now you're on a team and you have to figure out together. What choices you're going to make
Jeff Terrell: So what I wanted to mention as a key idea here is that discussing your priorities explicitly with your team might help y'all find consensus.
Jeff Terrell: This is a classic way to be effective in her personally this. This is a technique that I've heard people who are more trained in psychology talk about this as collaboration.
Jeff Terrell: They are using collaboration, a little bit differently than we would use here in this class, but it actually is a very similar idea, the idea is just like if you want to use x and a teammate wants to use why
Jeff Terrell: One of the things that can really help is to back away from the particulars of those things. I mean, I can't help to talk about the particulars. But one of the things that can help us to back away from those particulars and say,
Jeff Terrell: What things am I actually valuing that lead me to this this choice this this preference if you can back away from that and have a conversation about what the values are you might find that you're actually have a pretty compatible set of values and priorities.
Jeff Terrell: And maybe those values express themselves in different ways, but to find out that you actually have some shared values here might help you figure out
Jeff Terrell: What you know make a decision and resolve a conflict. So, so I wanted to mention that because
Jeff Terrell: Something that you might run into
Jeff Terrell: Okay, so let's take a closer look at a few of these priorities. Let's look at newness popularity, you know, isn't maintained and is it easy and take a closer look at this
Jeff Terrell: Alright so newness.
Jeff Terrell: There are some pros to newness.
Jeff Terrell: Is this technology, new
Jeff Terrell: It can expand your mind if it's new. You know, if you have to learn something to to use it, you're growing and knowledge, you're growing and understanding. Maybe you're you're being exposed to a whole new paradigm. It's really strengthening your brain and that can be really good.
Jeff Terrell: Can help sort of expand your, your toolbox of available tools that you can use to solve problems. It can be fun. I new things can be fun. That's kind of a generally true statement.
Jeff Terrell: And it can feel cool to be using cutting edge things your pioneer, or it could be fun to use things that are relatively new.
Jeff Terrell: Because it's something that's maybe more in demand and industry and things like that.
Jeff Terrell: Also, I think there's probably a bit of a bias in terms of the types of people who are attracted to this field.
Jeff Terrell: We're into computers and programming. So I'm thinking, we've got to have at least some tolerance of new things.
Jeff Terrell: Yeah, I don't know, maybe there's some sociological studies on that. I don't know.
Jeff Terrell: But there are some cons to newness as well.
Jeff Terrell: Right there may be bugs documentation may be lacking.
Jeff Terrell: And you might be relatively alone using it. So maybe hard to get help.
Jeff Terrell: So pros and cons right choices.
Jeff Terrell: Popularity let me mention some pros and cons here.
Jeff Terrell: Pros would include if others are successfully using this, that implies that you can too. And that's kind of a big deal. It's there's a there's a usefulness to hurts, right.
Jeff Terrell: herds can show you what ways are relatively safe to go if you follow the beaten path and plenty of others have solved various problems and you can
Jeff Terrell: You can feel confident that you'll be able to as well. And it can be easy to get help, even for Uncommon uses because if it's a very beaten path and a lot of people have done it.
Jeff Terrell: You know, even, even if only 1% of the the herd has taken this fork in the road that's still maybe enough people that you have some really good answers out there.
Jeff Terrell: And following the crowd tends to be an easy thing to do for at least for a lot of us, some of us really like to break the mold and do our own thing, but
Jeff Terrell: Most of us don't. That's why there are hurts.
Jeff Terrell: Okay cons of popularity though popularity is a bit of a cruel and whimsical master and it it's, it can be frustrating to
Jeff Terrell: Try to figure out why some things are become popular and some things don't and, in particular, here's a couple of ways to think about this, just different axes many excellent engineers are poor marketers
Jeff Terrell: And their excellent work isn't popular right i mean do you know i mean do you, do you have the, the sense that
Jeff Terrell: Good engineering skill and good marketing skill are a little bit anti correlated. It's definitely my impression. I don't know of any studies to sort of back that up. But that's my impression
Jeff Terrell: And conversely, many excellent marketers are poor engineers and their mediocre work is popular. Alright so popularity might be misleading the pros still apply. But there are some some cons and some things to be aware of here.
Jeff Terrell: And. Okay. Another way to evaluate a technology is to look how maintains. Does this seem to be
Jeff Terrell: A proxy measure that many people use for this is, when was the most recent commit to the repository.
Jeff Terrell: And this is decent, I would say that this is not necessarily
Jeff Terrell: totally reliable way to gauge how well something's maintained. There's a category of tools out there that have reached a level of maturity that they're just complete
Jeff Terrell: No further bugs have been found, or people have feature requests like it'd be really nice to get this, but the author is like that's not really what I'm trying to do here, this, this is what it needs to be. And I haven't found yet a reason in the past two years or five years to touch this.
Jeff Terrell: So there is a category of tools out there. And those can actually be really good tools.
Jeff Terrell: When something is is complete and seems to be bug free if you find something that's relatively popular and doesn't have recent commits
Jeff Terrell: That's probably a really good tool to use. And that tends to be correlated with things that are really simple. So they don't have a lot of complexity and then they're not trying to do a ton of things.
Jeff Terrell: So yeah, just be aware that
Jeff Terrell: All right, pros of it being maintained, is that if you discover and report a bug, it may get fixed quickly.
Jeff Terrell: And you may get new features or better performance for free by staying up to date with the latest versions.
Jeff Terrell: Cons would include that maybe bug fixes are still happening because it's buggy software and there are plenty more bugs, not yet found
Jeff Terrell: It's just because there's a lot of bug reports that are getting solved quickly and that might not actually be a good thing.
Jeff Terrell: And you might also be covering your project one that's constantly moving and you might have to stay moving to keep up.
Jeff Terrell: And keeping things up to date can be a maintenance burden.
Jeff Terrell: Okay, I'm almost done with the slides here. So I want to talk about ease and Enos
Jeff Terrell: The word origin here is actually interesting. It means to line near or to be adjacent to so you might be able to say for example you know this, my glass of water is easy to me. It's just right there.
Jeff Terrell: Pros have some some technology being easy include it's an easy lift for you to use. It doesn't require a lot of effort to actually use it and do something with it.
Jeff Terrell: Maybe there's no learning curve required or only a small learning curve. So you can start being productive fast.
Jeff Terrell: Cons would include maybe others on your team have a different sense of what's easy. And this is a really key idea for evaluating technologies.
Jeff Terrell: Easy is important but easy is relative. All right. It depends very much on your perspective, your prior knowledge.
Jeff Terrell: What paradigms. Have you understood in programming or in, you know, interesting, excuse me, infrastructure, or anything else, something that seems obvious and simple to you might not actually be it might just be a function of the things that you already know.
Jeff Terrell: So if you've already used react React is going to be easy to you because you've already used it right
Jeff Terrell: So it's hard to know. You know, it's hard to predict the future, the future, obviously, but maybe a different tool would be worth the learning curve in the end.
Jeff Terrell: And final con of Enos, is that easy to start doesn't necessarily mean easy to finish or easy to maintain. In the long run.
Jeff Terrell: So there are different kinds of easy
Jeff Terrell: The big idea of all of this talk about different you know diverse priorities and different ways of evaluating technologies is that there are trade offs.
Jeff Terrell: There are trade offs. Everywhere. Everywhere in software everywhere and engineering trade offs are such a fundamental thing with any sort of design of anything creative, it's, it's kind of an amazingly profound thing.
Jeff Terrell: So when you're evaluating technologies trade offs are there as well. And any particular value or priority that you have for evaluating technologies has pros, as well as cons.
Jeff Terrell: Okay, that's all I want to say about evaluating technologies for today now want to move into a sigma tutorial. But before I do, any questions about evaluating technologies.
Jeff Terrell: Okay.
Jeff Terrell: Okay so fingers tutorial I thought about different ways of doing this last time I did this last year, I just have printouts of handouts of like the steps to take.
Jeff Terrell: And everybody just did it on their computers, kind of an isolation and I wasn't really sure how well THAT worked with people.
Jeff Terrell: So I thought this time I would try something different and just do this more of like a I'm leading a tutorial and
Jeff Terrell: I do think it'd be worthwhile if you follow along with me. So if you want to go ahead to figure calm and create an account and we have the handouts here if you want to pull that up, you know, on a different screen or side by side with your admin window, but
Jeff Terrell: But yeah, I'd love for you to
Jeff Terrell: If I don't know if you have the screen real estate or you can switch back and forth and maybe have like my screen up somewhere so you can see what I'm doing but then also you do the same thing in your screen.
Jeff Terrell: And I think this is going to really help you know it better when you're actually using it, you know, we learn best sometimes by doing rather than just by watching or listening. So go ahead and pull up finger.com create an account.
Jeff Terrell: So, and then once you're in
Jeff Terrell: Um,
Jeff Terrell: Let's see, how am I going to know when y'all have caught up to me.
Jeff Terrell: I'm gonna, I think what I'll do is if you go to zoom and the participants panel. There are two buttons that are enabled for go slower and go faster.
Jeff Terrell: And then you can also raise your hand. So I think what I'll do is like
Jeff Terrell: If you're like ready to move on and you're waiting on the next step, then you can click the go faster button.
Jeff Terrell: And if you're if you're like, if I if I'm moving on and I'm going too fast. You can click the go slower button. I'm going to keep an eye on this as, as I go. So maybe that'll be a way that we can. I can tune this to where everybody's at
Jeff Terrell: Okay, so I'm hoping you've created an account by now infamous
Jeff Terrell: If not now would be a good time to hit the ghost lower button. If you have, then click this plus button in the upper right hand corner.
Jeff Terrell: And it says upper left corner, either that's changed or or that's wrong.
Jeff Terrell: Okay, one go silver one go faster or a new file. So I'm creating a new one.
Jeff Terrell: So I've created a new project.
Jeff Terrell: I can title it if I want to. So I'm going to title it
Jeff Terrell: Calculator.
Jeff Terrell: Which is what we will be designing today and for my own notes. I'm just going to say
Jeff Terrell: Contract 23 fall of 2020
Jeff Terrell: Okay, so next thing I'm going to do is create a frame.
Jeff Terrell: That's what this tool over here. Notice that there's like this top level toolbar. There's a list of layers over on the left hand side and then there's like an property inspector on the right.
Jeff Terrell: And then the main area is the canvas. So in the toolbar. This third icon here says frame. I'm going to click that and I'm going to drag over an area to create a frame a frame is effectively a screen in your app.
Jeff Terrell: So,
Jeff Terrell: So right so we created a screen. What I want to do is
Jeff Terrell: I've if you if you don't already have it selected, click on it so that you can see it's details in the inspector over on the right hand side and then I want to set x to zero y zero.
Jeff Terrell: So let's do that. There's a few different ways to do that. You could just click it and type in
Jeff Terrell: You can also see how your icon changes when you hover over the Y, you can actually drag this left and right. So if you're making finer adjustments you can do that. I think you can also hit up and down when your keyboard is focused here if you hold down shift.
Jeff Terrell: You can go faster. So that's the way to do it. If you kind of move things off screen. You can drag you can scroll around to get back to where you need to go.
Jeff Terrell: Okay.
Jeff Terrell: I'm gonna change the width to 283
Jeff Terrell: And the height to 324
Jeff Terrell: If I were actually creating this I probably would have to play around with this a little bit to figure out what felt right. But I've already created at once and I happen to know. That's what we want. I want
Jeff Terrell: And so, for the sake of specificity. I'll go ahead and do the same thing with of 23 I have 324
Jeff Terrell: I don't see anybody telling me to slow down or speed up. So I'm going to keep going. I'm also going to change the background color of this frame.
Jeff Terrell: And that's in this Phil
Jeff Terrell: Thing down here. So I'm going to change that to be to B to B to C to kind of a light gray color.
Jeff Terrell: This is done in RGB. I assume most of you have seen that, but
Jeff Terrell: Hex
Jeff Terrell: Red coordinates x green X blue or blue and the green, green, and blue RGB
Jeff Terrell: Okay, so that's my frame is where I want it to be.
Jeff Terrell: Next I'm going to rename my frame layer from frame one to win a common double click over here on frame one. And then there are rename that to cleared.
Jeff Terrell: You can see that changed, both in this list of layers and also in the canvas itself.
Jeff Terrell: I'm basically naming this screen. This is going to represent the cleared state of my calculator.
Jeff Terrell: Okay.
Jeff Terrell: Next I'm going to create the calculator display. And so for this. I'm going to go to my toolbar. I'm going to add a rectangle so so forth icon here and then rectangle could also hit are on your keyboard to do this.
Jeff Terrell: I want to get something approximately right. And I'm going to fill it in later with
Jeff Terrell: Just the way I wanted
Jeff Terrell: So I kind of got snapped to the same to the frame and that's fine.
Jeff Terrell: But, OK, so what I want in terms of dimensions is I want x and y to be zero.
Jeff Terrell: So I wanted to start in the upper left of my frame.
Jeff Terrell: And I want the width to be the full width which is 283 stretches all the way across my frame and I want my height to be 135
Jeff Terrell: With the 23 height of 135
Jeff Terrell: Okay, so that's good. And then I went to color the Phil color to be white, which is F, F, F, F, F, F.
Jeff Terrell: And that's the field on here in the property inspector.
Jeff Terrell: Right. Nobody's saying slower, faster, so I'm gonna keep going.
Let's see here.
Jeff Terrell: I'm going to rename the layer here set of rectangle one I'm going to rename it to be.
Jeff Terrell: Display
Jeff Terrell: And this is a way for me to just kind of see what each of these things. It has and give them meaningful names so that I can understand the intent behind these different visual elements. Same way you would name a variable in code.
Jeff Terrell: OK. And now I want to start creating these buttons for the calculator.
Jeff Terrell: So I'm going to create another rectangle toolbar fourth icon rectangle and I'm going to draw something it doesn't need to be perfect, but I'm going to tweak it later just draw a rectangle somewhere, kind of in the bottom area and
Jeff Terrell: Let's set the width to 50 and the height to 30
Jeff Terrell: Okay.
Jeff Terrell: I also want to set the
Jeff Terrell: Border radius to 10 the border radius is right here. I guess they call it corner radius.
Jeff Terrell: So,
Jeff Terrell: Interesting my browser popped up that
Jeff Terrell: Morning about that.
Jeff Terrell: Okay, so I set the border radius to 10 corner radius 10
Jeff Terrell: And then I want to set the Phil color, actually, to see foresee foresee for. So that's actually already correct
Jeff Terrell: Also going to set the X to 17
Jeff Terrell: And the wine to 152
Jeff Terrell: And these again are just tell us that I happen to know work. But if you were designing this yourself, you would be able to just play around with it until you sauce you found something that looked right
Jeff Terrell: Okay, now I want to add a label to this button.
Jeff Terrell: So I'm going to click this
Jeff Terrell: Text tool from the toolbar.
Jeff Terrell: And I'm going to click. I'm just going to click once on that button.
Jeff Terrell: And I'm going to type one
Jeff Terrell: Okay, I got some sort of a hint here that I don't care about. I just, I'm going to type one and that's going to be my button label, I can click away from that to remove the keyboard focus from that that text.
Jeff Terrell: And I'm going to change some of the properties here. I think the first thing I'm going to do is change the font Roberto is fine, but I'm going to change the font size to be 24
Jeff Terrell: OK.
Jeff Terrell: And now I'm going to align this correctly with where the button actually needs to be
Jeff Terrell: What you can do is just pull and drag it around. And so that's a good way to do it. Notice that it kind of snaps different alignments. And this alignment here is actually a good one, where we saw we saw it relative to
Jeff Terrell: The button. We saw the it's centered vertically and horizontally in the button. So that's kind of what I want. If you don't have that option show up very well. You can zoom in.
Jeff Terrell: You can either zoom in with this control over here on the right hand side of the toolbar or you can at least on Mac OS. You can hold down the command button and scroll up and down.
Jeff Terrell: That can be a way also.
Jeff Terrell: To drag us around and find the right alignment guide. Now I just did something accidentally did the wrong thing and I should have mentioned this earlier but Control Z. As your friend controls you for Windows command Z for Mac.
Jeff Terrell: If you make a mistake. In fact, go ahead and and do something that you, you want to undo and just take command Z on Mac or Control Z on windows to undo it. And if you hit shift. In addition to that, so Command Shift Z or control shift. See, then you'll redo what you had on done
Jeff Terrell: So that's a really good thing to get used to. And this can give you some some boldness, as you're making these changes that if you make a mistake. You can you can fix it or you can undo it.
Jeff Terrell: Okay.
Jeff Terrell: So for this text. Another thing that we want to do actually is set the alignment of the text.
Jeff Terrell: Itself, we're, what we're doing is we already aligned the text box to the middle of the button, but we also want to within that text box set the alignment properties of the
Jeff Terrell: The text that's in that text box. So we're going to set vertical alignment to middle and horizontal alignment to center.
Jeff Terrell: And that's just kind of a
Jeff Terrell: I don't know if it just helps your text be in the right spot.
Jeff Terrell: Okay, I'm
Jeff Terrell: Still not seeing anybody saying, slow down. So I'm gonna keep going.
Jeff Terrell: Next thing I want to do is I want to group these two. The two things together. It's the label and the button.
Jeff Terrell: So what I can do is I can either click over here and hold down its command on Mac. I think control on Windows will do it and click the second thing.
Jeff Terrell: And I'll have both of those selected. I could also do this from the canvas. I can click here, hold down Command or Control and click that. Oh wait, I didn't actually work.
Jeff Terrell: I think on the canvas. Maybe it shifts know
Jeff Terrell: I know that to do it. I did the right thing that is I always selected the wrong thing here is that rectangle and display. It's rectangle and text.
Jeff Terrell: So yeah, that and so it wasn't command. For me it was shift.
Jeff Terrell: Did it correctly in the canvas. But command actually did it up here. So either way, I want to select both of those things. And then I want to group them.
Jeff Terrell: So you can right click
Jeff Terrell: And notice that this is not your browser's context menu. This is fitness context menu.
Jeff Terrell: So it's a pretty rich Web app that they have here and we're going to do this thing right here group selection, which you can also see the keyboard shortcut for that air.
Jeff Terrell: So I'm going to group that selection and I'm gonna now see I have something I can expand here. It's a group with two elements inside. I could select these individually. If I wanted my layers list, but I'm going to actually name this
Jeff Terrell: So group one, I'm going to name it button one nice semantic meaning now.
Jeff Terrell: Okay.
Jeff Terrell: Let's move on to the next thing. Now I want to duplicate this and create my other buttons.
Jeff Terrell: So, I still have their group selected and I can hit, I can. I think I can right click and say duplicate. Maybe I can't
Jeff Terrell: I don't actually see how would I do that.
Jeff Terrell: No.
Jeff Terrell: Edit duplicate. There we go. So that would do it if you wanted to use your mouse, you can also do i'm doing Command D i suspect on Windows. It's something like control it.
Jeff Terrell: But I'm going to Command D.
Jeff Terrell: And we have a second button.
Jeff Terrell: Sigma correctly guest what the name of the group should be, but it actually has exactly the same properties as the first button, including the position.
Jeff Terrell: So what we're going to do is just kind of move it over a little bit something you can do is hold shift as you're dragging and then you'll only be able to move it in a single direction.
Jeff Terrell: So it remains aligned horizontally in this case.
Jeff Terrell: Whoops, I
Jeff Terrell: picked my shift key up before I really start drag. All right, now you have button to
Jeff Terrell: And for button to
Jeff Terrell: You want the text label to be too. So, I can do that by in the layers list. I can actually double click over here. Oh wait, no, that didn't work actually do need to click here and say to their
Jeff Terrell: Okay.
Jeff Terrell: Now I've gotten to I'm going to do the same thing for three
Jeff Terrell: Once you get familiar with it, you can go quite a bit faster.
Jeff Terrell: And then for or plus rather
Jeff Terrell: One thing that I have to do is I have to click once to get the group selected. And then I have to double click within that to get the text selected if I'm trying to select it from the canvas.
Jeff Terrell: And I have to double click again to actually make the edit.
Jeff Terrell: So that's about right. These are not really aligned to where I want them to be. I think I want
Jeff Terrell: The plus button to come in a little bit from the edge. I'm just kind of eyeballing it here. I don't have a
Jeff Terrell: Turn to eyeball that this distance on the right is the same as assistance on the left.
Jeff Terrell: But there's there's other ways to do it. So for example, if I want to
Jeff Terrell: Select all of these. I'm just holding Shift to select multiple
Jeff Terrell: And I can go over to my context menu and
Jeff Terrell: Not have to find this
Jeff Terrell: Arrange there's an arranged menu.
Jeff Terrell: And if you didn't hold shift when you were dragging you can align
Jeff Terrell: I think it would be vertical centers have already done that. So I'm not going to do that again.
Jeff Terrell: Or I helped shift. So I don't need to. I'm going to distribute horizontal spacing. So this is a way to make the spacing equal between each of these elements. So it's kind of nice.
Jeff Terrell: All right. Still see anybody saying, slow down. Next thing I want to do is actually do the same thing, but for rose. And so before I duplicate. I'm going to go ahead and group these
Jeff Terrell: Well, yeah. Yeah, I'll go ahead and group it. So that's Command G for me and I'm going to call this
Jeff Terrell: Bro, one
Jeff Terrell: And I realized that button for is actually not correct. I want to name that button last
Jeff Terrell: Okay, you don't have to assign meaningful names to your layers, but it can help you navigate around the project.
Jeff Terrell: Okay, so now I'm going to select the button, row one group, and I'm going to duplicate that and do a similar thing.
Jeff Terrell: For the rose
Jeff Terrell: I can go ahead and create all four rows.
Jeff Terrell: Pick this up a little bit from the bottom.
Jeff Terrell: And I will
Jeff Terrell: distribute these vertically
Jeff Terrell: A range distribute vertical spacing. OK, so now I have a grid.
Jeff Terrell: It occurs to me. It might be hard to hit that slow down button if you're trying to stay caught up. But all right, now what I'm going to do is just
Jeff Terrell: Double play double click double click and start changing these button labels. So, for
Jeff Terrell: I've six. That's cool. Once you have the text selected it automatic, it makes it easier to select other texts labels.
Jeff Terrell: Um, I want this to be minus
Jeff Terrell: It's seven
Jeff Terrell: Eight.
Jeff Terrell: X times zero
Jeff Terrell: Period.
Jeff Terrell: Equal
Jeff Terrell: See
Jeff Terrell: Okay.
Jeff Terrell: So now we have our for button layers starting to come together a little bit.
Jeff Terrell: Okay, if I'm not wait just just a sec. For people to finish that I I suspect you might not be quite as fast as I am, since I'm familiar with this.
Cool.
Jeff Terrell: How do we distribute spacing Daniels asking
Jeff Terrell: That would be under a range and then distribute and you have to have the items selected that you want to distribute, we need to distribute horizontal spacing or vertical spacing.
Jeff Terrell: For example, I can select these groups.
Jeff Terrell: And then I can say a range distribute vertical spacing.
Well,
Jeff Terrell: No division. I'm good point, yeah, maybe, maybe division is hard, and we don't want to do division. I don't know.
Jeff Terrell: Christopher mentions can tidy up control shift all t works well with all row selected as well. That's cool. I didn't know about that. I'm no expert. I just have played around with it a little bit.
Jeff Terrell: Tidy up. Okay. I don't know why that's great out for me. But, good to know.
Jeff Terrell: division by multiplying decimals. Yeah.
Jeff Terrell: Yeah, we just need to to the power of negative one button. Then we'll. We don't need division anymore. Right.
Jeff Terrell: we're collaborating here. We don't divide
Jeff Terrell: Nice one.
Jeff Terrell: Okay, so let's keep going, hopefully, you all have caught up this point, um,
Jeff Terrell: What's next, and what's that the display label. So I want to add a label to this. So I'm going to click text.
Jeff Terrell: Oh question. How do you copy one line of buttons. Alright, so for that.
Jeff Terrell: Okay, so I selected my texts icon. By the way, I'm going to go back and just click move to get back to the regular icon.
Jeff Terrell: For that one of the things I did is I already had grouped my row of buttons into a button row group and then I could just duplicate. So that was edit duplicate or in my case, Command D.
Jeff Terrell: Any other questions before I move on.
Jeff Terrell: Okay.
Jeff Terrell: Alright, so I'm going to add
Jeff Terrell: Text to here.
Jeff Terrell: And this text is going to be. I'm going to start with. It's saying
Jeff Terrell: Zero. Okay.
Jeff Terrell: I'm going to move this to be somewhere near the bottom right of the display area I don't particularly care what it's aligned with. By the way, if you want to move it without having it snap to align alignments, um,
Jeff Terrell: Let's see now. I thought I could hold down Command and have it avoid the snapping, but I don't know. Anyway, doesn't super matter exactly where it is. I'm going to change the text alignment to right
Jeff Terrell: So that it grows in the right direction. And I'm going to call that zero or zero is actually the
Jeff Terrell: The text that I have here. Okay.
Jeff Terrell: I want the font size to actually be bigger. I'm going to make that 36
Jeff Terrell: Oh, and I guess I'll make that bottom line as well.
Jeff Terrell: Um,
Jeff Terrell: And I don't know, just tweak this until it kind of feels right. Okay.
Jeff Terrell: So that's one screen. This is the cleared screen. And what I want to do is actually create another screen basing it on this one. So, and this is where we're going to start to get into the clickable prototype stuff.
Jeff Terrell: So I'm going to select the entire frame and I'm going to duplicate that
Jeff Terrell: And figure will actually put the new frame in a different spot. So that's kind of nifty. And this frame. I'm not gonna call to clear, I'm going to call
Jeff Terrell: Three.
Jeff Terrell: And I'm going to change the display, two, three, as well.
Jeff Terrell: Okay, so now I have a cleared state that has zero and A three state that has three
Jeff Terrell: Then I'm going to do another one for three plus. Alright, so I'm going to select that frame and my layer list duplicate
Jeff Terrell: And this is going to be three plus
Jeff Terrell: Three plus
Jeff Terrell: One to do the same thing with three plus three.
Jeff Terrell: And then finally, last one I'm going to say this one is called six
Jeff Terrell: Now I have screens representing various states of the app.
Jeff Terrell: I scroll out our zoom out a little bit, you can see you can you can start to see kind of what story I'm trying to tell here. But what I want to do is show you the clickable prototype feature, which is where all of this comes together into a single prototype.
Jeff Terrell: This is this is super cool is is the big payoff.
Jeff Terrell: Okay, so what I want to do. I'm going to switch over to I've been in the design view of my inspector. I'm going to switch to the prototype.
Jeff Terrell: tab of the inspector.
Jeff Terrell: And I'm going to connect within this
Jeff Terrell: row of the first screen. I'm going to connect button three
Jeff Terrell: Over to the state or the frame for three seven zoom in a little Festus is easier to see. I had to click the do this again. I had to click the row to get that group selected.
Jeff Terrell: And then I could select the three so double click here and this little thing right here on the right hand side of the button, or in this case the group, I can drag this over to another frame to connect it
Jeff Terrell: You can
Jeff Terrell: Change details of what that connection is exactly, but the default is fine. We're going to say on click
Jeff Terrell: We're going to navigate to three, we could do animations, if we wanted to, you know, there's some things that we have some control over. But the idea is this three
Jeff Terrell: When you click it, it goes to this different frame, right. So we're going to keep moving forward with that do the similar thing here for
Jeff Terrell: The plus button.
Jeff Terrell: I'm going to connect the plus button to the three plus state.
Jeff Terrell: From the three plus state. I'm going to connect the three button there to the three plus three state.
Jeff Terrell: And then finally, from the pre plus three state. I'm going to connect the equal button to the six state. So let me zoom out a little bit so you can see all of those connections.
Jeff Terrell: The other thing I want to do is get the clear button working so with any of these non cleared states. If you click clear it's going to go to the clear state. So I'm going to connect those as well.
Jeff Terrell: This is, this is pretty neat. Oh, so as a tie. Yeah, I agree. It's just kind of fun.
Jeff Terrell: Now we have everything connected. I think maybe there's a question.
Okay.
Jeff Terrell: Ask you a question and I'll keep moving. But I'll come back to you.
Jeff Terrell: When you have everything all connected.
Jeff Terrell: Click this plus button to actually present the clickable prototype.
Jeff Terrell: And it looks like for me. It opened up in a new window.
Jeff Terrell: Alright, so now
Jeff Terrell: If I, if I actually click on the buttons that I need to click on, it'll navigate through. But if I don't know where to click
Jeff Terrell: Like I don't know which buttons are actually enabled for this prototype, I can just click somewhere on the screen.
Jeff Terrell: And it'll tell me which regions are actually sort of live or connected to something. So I kind of highlights that blue. I don't know if you can see that very well in the zoom presentation but
Jeff Terrell: That highlights that three. And if I click on that three and actually goes to the three state. Now we know because we just did the design. We know the behind the scenes here. We know that we've got different frames connected
Jeff Terrell: But imagine doing this as somebody using this app or seeing this prototype for the first time, it's a little bit different, that you you have to know where to click but
Jeff Terrell: You can really get a feel for what the app is doing right. Oops, I had the wrong connection there. It's good to see
Jeff Terrell: Three plus three.
Jeff Terrell: And yeah. Oh, so I did the wrong thing for my
Jeff Terrell: Clear state there. Alright, so if you make a mistake. You can select that and actually just hit delete or backspace on that.
Jeff Terrell: So,
Jeff Terrell: I fixed that. Okay, there we play
Jeff Terrell: A
Jeff Terrell: Emily asks, How do you show the blue highlights in the prototype.
Jeff Terrell: I think if you hover over it and you can even select one of these transitions. That's when it sort of turns blue to indicate that that's being selected to answer your question.
Jeff Terrell: Okay, so anyway, you get a feel for it. Right, this, this is actually feeling like a real app, right. Three plus Three equals six. I can clear, I can go back. I mean, obviously I can't do everything. It's not a real calculator, but
Jeff Terrell: This is a very effective sense of what the app is going to be once it grows up
Jeff Terrell: Um,
Jeff Terrell: The buttons. When you press play. Oh, you just have to click on the yeah okay so Tanner answer your question, you have to click somewhere outside of the buttons to see that.
Jeff Terrell: Great, we're at a time, hopefully this was interesting and enjoyable. But I guess I'll see you on that Monday. That's Labor Day. I'll see you. See you Wednesday. Have a good weekend.