Oussama (he) Rahmouni: nope we cannot hear you.
Alice Hayes: Your zoom settings correct zoom sometimes doesn't use the.
Alice Hayes: default microphone they all use something else can.
Oussama (he) Rahmouni: hear you now.
Oussama (he) Rahmouni: Oh wait nevermind oh somebody else might be.
Jeff Terrell: Goodness share screen again.
Jeff Terrell: Okay alright So here we are again sorry about that.
Jeff Terrell: Thank you for Ireland 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 dude and send it to keep you on track for your project.
Jeff Terrell: i'm.
Jeff Terrell: still thinking about what to require in terms of a journal i've been a little bit unstructured about my expectations for that and semesters past and i'm rethinking that.
Jeff Terrell: 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.
Jeff Terrell: week after next be aware that assignment for is a for coffee cup rated assignment, so I expect that that will require some more time and work from you.
Jeff Terrell: 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 low five is is either on paper or with a kind of a free form tool like free hand.
Jeff Terrell: To show your mentor when you meet and I guess that's just say this week actually.
Jeff Terrell: And just get a little bit of feedback on the direction that you're headed.
Jeff Terrell: Okay, so how many of you are how familiar, are you with user stories already.
Jeff Terrell: Let me open this full.
Jeff Terrell: Go.
Jeff Terrell: polivy.com slash Jeff terrell.
Jeff Terrell: And we can see the results.
Jeff Terrell: Well, I was really hoping i'm having some technical difficulties today this wanting to see.
Jeff Terrell: The results, there we go responses okay.
Jeff Terrell: My zoom controls are hiding an option right so some of you actually have written and use them yourself so probably you're very comfortable with your stories.
Jeff Terrell: 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.
Jeff Terrell: reactivate.
Jeff Terrell: sorry about that.
Jeff Terrell: explains why that picture wasn't moving.
Jeff Terrell: Okay, are familiar with them apart from class a few of you most of you are a lot of you have learned about in class and feel feel okay about it.
Jeff Terrell: 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.
Jeff Terrell: Your stories, so if that's you if you're one of the people who respond to G definitely plan to talk with your mentor about that to be a good good resource for you.
Jeff Terrell: yeah Okay, thank you.
Jeff Terrell: Okay, so covered some announcements today i'm I might move a little bit fast today because i've got a lot of ground to cover and trying to get through a figment tutorial and everything and time for us to take a quiz.
Jeff Terrell: But we're going to talk about testing for designs are 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 could be facing an assignment six.
Jeff Terrell: we're going to do a fitbit tutorial and we're going to do quiz one at the class.
Jeff Terrell: All right, I am continuing to use Graham linkedin slides from two years ago, or at least his content in this case with permission.
Jeff Terrell: And for testing design to it will talk about his prototyping what it is why we do it, how to do it and 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.
Jeff Terrell: I talked about this a little bit in.
Jeff Terrell: Oh wait see some questions in there, we go Okay, I think i'm kind of fun on zoom chat but if there's something I missed the new feel free to repost okay.
Jeff Terrell: I talked about this a little bit of a project narrative Arc lecture why why your prototype but think about it okay so normally what I think the default course of action for most developers would be is just a sort of let the ui emerged alongside features as you work on them.
Jeff Terrell: So you just kind of make it up as you go.
Jeff Terrell: And do the best you can at each step of the way somebody even say that's more of an agile approach to creating a design, creating user interface, why is that a bad idea Why would it make sense to create a prototype up front before you actually start iterating on code.
Jeff Terrell: Do you have thoughts on that feel free to be bold and raise your hand or mentioned it in zoom chat yeah.
Jeff Terrell: yeah the user experience is very important, and you might not want to leave that chance yeah.
Jeff Terrell: that's definitely one good reason.
Jeff Terrell: Other thoughts yeah.
Jeff Terrell: exactly right once you've committed something increase the user interface and 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 right.
Jeff Terrell: Any other thoughts.
Jeff Terrell: Going once going twice.
Jeff Terrell: Okay.
Jeff Terrell: Yes, the problem, one that I listed a few problems here.
Jeff Terrell: What does it 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 button should be and what colors things should be and how things are laid out etc, and so.
Jeff Terrell: You can really end up with a fairly chaotic and confused mess.
Jeff Terrell: 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.
Jeff Terrell: From Fred brooks he says conceptual integrity is the most important consideration and system design, which is a very strong statement.
Jeff Terrell: And he spent some time talking about what this is and why it's important and how to achieve that, and one of the things he says is that as this against stuck with me set the design must proceed from one mind or a very small number of agreeing resonant minds.
Jeff Terrell: And I always thought that was just so profound if you want to have consistency in your design.
Jeff Terrell: 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 the design, or else you really need to be in sync with whoever is creating that together.
Jeff Terrell: And that is the most important issue in designing thanks David.
Jeff Terrell: Okay, so Problem number two.
Jeff Terrell: 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.
Jeff Terrell: you're delaying that feedback loop whenever you wait to do the design, if you create the design up front, then you can very quickly iterate and get feedback on from the client on what How does that design fields that are what they might change.
Jeff Terrell: And, as was pointed out as well it's difficult to change the Code and the ui it's more difficult to do that and just to change appear design artifact.
Jeff Terrell: 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.
Jeff Terrell: 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.
Jeff Terrell: 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.
Jeff Terrell: So the solution as the slide title suggests is to prototype.
Jeff Terrell: 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 the client.
Jeff Terrell: and invite that feedback as early as possible and iterate only on the design artifact before you start writing code.
Jeff Terrell: Somebody who's familiar with design principles and design tools they could sit down with the client and hash out a clickable prototype in a matter of hours.
Jeff Terrell: And I know my colleague Graham could do this, you could sit down with an understanding about what needs to be built and get something at least a rough cut in front of the client by the next day.
Jeff Terrell: So it was a very good way early in a project to just iterate How does this look Okay, let me make some changes and get back to you if they had is that live version to.
Jeff Terrell: Its feedback and you just keep iterating until you get to a design that the client has no further feedback on it says through that that looks great.
Jeff Terrell: Now I will note that conceptual integrity is not guaranteed, even if your prototype so there there tends to be some consistencies, and this will be something, the more you design the more you'll learn how to do, how to be consistent in your design.
Jeff Terrell: 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.
Jeff Terrell: Okay, so that was prototyping any questions about prototyping.
Okay.
Jeff Terrell: Have you got to getting feedback um Why is feedback important we talked about this as well in the project narrative Arc lecture.
Jeff Terrell: 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 other confusing parts.
Jeff Terrell: Also, you don't know it might be confusing for others, if you, you might be surprised, some people use computers and how some people use software so.
Jeff Terrell: Maybe you always login through Google, but they like to do username and password and so you never noticed that the username and password style of authentication in your APP was confusing because you never really tried it is one example.
Jeff Terrell: 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 out see what you think I mean.
Jeff Terrell: 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.
Jeff Terrell: 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.
Jeff Terrell: 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.
Jeff Terrell: 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.
Jeff Terrell: You see, somebody stumble around and to you it's like really familiar like duh there's a big button right there, this is create post.
Jeff Terrell: But they're just not seeing it they're clicking everywhere else are like no don't click there, what are you doing so it can be hard to sort of bite your tongue and say.
Jeff Terrell: they're figuring it out i'm going to watch this i'm going to see how they're confused 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.
Jeff Terrell: You can ask open ended non judgmental questions about their experience, using the APP.
Jeff Terrell: You know why did you do this fine.
Jeff Terrell: How did you how did you expect that to happen, 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.
Jeff Terrell: Maybe don't say something like why didn't you do it this way.
Jeff Terrell: Definitely don't say, have you used it in here before.
Jeff Terrell: Probably not going to get some good feedback from that that's going to help you iterate on your design.
Jeff Terrell: It can be helpful to ask people to think out loud.
Jeff Terrell: Can you tell me what you're thinking as you're doing what is your plan before you actually start doing it, and just thinking out loud.
Jeff Terrell: Then afterwards, especially if somebody you know if your mom or somebody close to you is reviewing this that.
Jeff Terrell: You know they might be really impressed and really give you a lot of praise for all the work that you've done but shy away from actually criticizing it.
Jeff Terrell: 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.
Jeff Terrell: there's a whole class on this, by the way, in the middle school i've actually met the Professor who teaches this.
Jeff Terrell: it's it's generally called user testing So if you want a deeper dive on that you might be able to take that class and actually experienced that are of getting feedback from users.
Jeff Terrell: Questions i'm getting feedback.
Okay.
Jeff Terrell: So, now that you know which parts of your designer confusing you might be tempted to just scrap your design and start over with don't do that.
Jeff Terrell: might be kind of depressing once you actually start getting this in front of users and see how confused, they are or something that you thought was actually pretty good, you may be tempted this graphic design and start over, but I would encourage you not to do that.
Jeff Terrell: 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.
Jeff Terrell: don't have anything that you're not willing to change.
Jeff Terrell: No sacred cows just you know anything even even the thing that you really liked about it, if that turns out, they really confuse people be willing to scrap it.
Jeff Terrell: and try try the simplest thing that can possibly get that in front of users and get some feedback.
Jeff Terrell: Okay.
Jeff Terrell: Any questions about that.
Okay.
Jeff Terrell: So let's move on to design tools.
Jeff Terrell: But actually before we do that let's do another poll.
Jeff Terrell: Okay, good deal looks like everybody just most people have met their client already which is great color on.
Jeff Terrell: On pace, some of you have already created user stories.
Jeff Terrell: If you have a meeting scheduled that's that's fine and it's, especially if it's a meeting for this week, a few of you are still working to schedule a meeting.
Jeff Terrell: Maybe one of you has noted bigger 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.
Jeff Terrell: Sometimes I will be able to convince them that they really do need to respond to you might have more luck with that the new sort of by virtue of my role so do feel free to email me about that.
Jeff Terrell: But yeah looks like most of you are on pace here all right, and then how comfortable you feel extracting client does it the Rada feel confident good little bit less confident about creating good user stories so that's about a quarter of you.
Jeff Terrell: And if you have you're less confident by just asking the right questions of your client during me.
Jeff Terrell: 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 you feel free to talk to your mentor ask.
Jeff Terrell: Generally, for advice or bring up particular challenges or questions that you have, especially if you can think of.
Jeff Terrell: 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.
Jeff Terrell: I don't think I had anything else in there yeah okay.
Jeff Terrell: Good deal.
Jeff Terrell: For now.
Jeff Terrell: Yes, okay well alright so let's talk about some designed to give you some concrete suggestions to equip you to create your clickable prototype which again is to a week from Monday.
Jeff Terrell: Again we're we're stealing contents borrowing content from Graham linkedin with this permission.
Jeff Terrell: Right So what does it all of these are, these are all recommendations from Graham unless otherwise noted and Graham as I think you knew from the lecture that.
Jeff Terrell: The recording from last time that I told you all the watch Graham is a professional designer professional ux ui ux designer so.
Jeff Terrell: 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 remodel software probably I would guess created about.
Jeff Terrell: I clicked a brand new clickable prototype for a different APP every couple of weeks so definitely knows his way around all these tools.
Jeff Terrell: interesting point all of the tools that he recommends unless otherwise noted there's only like one or two.
Jeff Terrell: are free, and so you can actually do a lot without paying a bunch of money for professional grade tools, a lot of professional great tools are free.
Jeff Terrell: At least, in a sense that a very knowledgeable professional that I know uses them.
Jeff Terrell: 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, hence the name.
Jeff Terrell: I have not actually used this but Graham says he uses it sometimes Sigma will actually talk about that today so full grade.
Jeff Terrell: Design ux design system, a web APP will go through tutorial of that then now in project think it's Mt project COM, this is a place that you can get icons.
Jeff Terrell: Alright, so if you're wanting like that the trash can icon or a pencil icon or whatever it is, or even something more esoteric now project COM see there now project or calm or the non project a comma forget, but if you Google, that you should be able to find it and use those icons.
Jeff Terrell: I believe all of them are posted for you to be able to use with permission for free.
Jeff Terrell: Right and each of these actually has its own slide sorry about that so ui kits we'll talk about ui kits.
Jeff Terrell: All these are free, or have good free versions okay so envision freehand is a whiteboard on steroids, and the canvas and zoom it's approachable easy to figure out, you can collaborate with it remotely so I believe multiple users can be using it simultaneously like sharing the canvas.
Jeff Terrell: You can annotate screenshots and another thing that I have found out about since then, which I think is a similar tool is called neural neural.co.
Jeff Terrell: it's another web APP.
Jeff Terrell: Okay, think most another one will talk about this more create clickable prototypes.
Jeff Terrell: That can create components that you reuse and styles that you use.
Jeff Terrell: You can again collaborate remotely So if you if your whole team wanted to sit down together and collaborate sort of Google Doc style and see what other people are doing as you're all working on it together, you can totally do that.
Jeff Terrell: You can share your prototypes and you can get feedback on them at adding comments and things like that and will actually see this in significant detail later this lecture adobe xd is similar to figure, by the way.
Jeff Terrell: Right so icons material icons the noun project, these are some places, you can go to find icons for free.
Jeff Terrell: You want kits stigma freebies I have not checked this out.
Jeff Terrell: there's a stigma material design kits.
Jeff Terrell: 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.
Jeff Terrell: There, this is a paid kits and paid ui kit that Graham is actually found useful, but you might have to fork over some bucks do that, so you might not want to do that through this project that might be good to know about if you get more serious about design later to set product calm.
Jeff Terrell: 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 fig not accepted in sephora that you download rather than being a web APP.
Jeff Terrell: As far as I know, there's no real time collaboration abilities in there'll be actually somebody correct me if i'm wrong.
Jeff Terrell: there's also framer I believe it's framer guy Oh, and this is not nearly as flexible as a tool like Sigma or there'll be xd but is sort of specially targeted to.
Jeff Terrell: 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 not real sure what the limitations are there.
Jeff Terrell: i've heard recommendations for envision which I think is also like the next day, not used it myself.
Jeff Terrell: Well sonic with the Q has a wireframe product that can create some low five 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.
Jeff Terrell: I have not done 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've stayed away from it, although I saw recently that it might have.
Jeff Terrell: You might be able to use it for free in a classroom context, so I might be something I would do to for future iterations of this course, and if you're interested in that you might be able to get you'll be able to use it for free.
Jeff Terrell: Okay questions about any of the design tools that we talked about I was kind of a more of a survey overview of different things that are out there, like I said we'll dig into here in a bit, but any questions or comments about design tools.
Okay.
Jeff Terrell: Okay, so I want to check your familiarity about creating.
Jeff Terrell: clickable prototypes.
Jeff Terrell: And of course we haven't done the Sigma tutorial yet I hope is that i'll be able to quantify a significant difference between the before responses and the after the responses and you know, hopefully make sort of justify the use of class time this way for doing a figment tutorial.
Jeff Terrell: 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.
Jeff Terrell: there's one responsible way or the left.
Jeff Terrell: But and so there's actually a good chunk of people who feel pretty comfortable with creating clickable prototypes that's great.
OK.
Jeff Terrell: OK.
Jeff Terrell: OK so before we do, that the tutorial I want to talk about evaluating technologies.
Jeff Terrell: This is gonna come up in assignments 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.
Jeff Terrell: it's not due until October 4 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.
Jeff Terrell: choosing a database choosing a programming language choosing a web framework choosing you know ios or android or some of you don't really have that luxury because of your project or client has dictated to you what you have to use, but others do have that kinds of of choice to make.
Jeff Terrell: And again you're not behind schedule, if you haven't considered these questions yeah.
Jeff Terrell: This will be premature for for some of you, maybe not for all of you so, but again i'm trying to do this airing airing on the side of early rather than late.
Jeff Terrell: 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.
Jeff Terrell: So I would suggest trying to connect trying to kind of if you could like empathize with future you you you from four weeks from now, who has to think about this stuff.
Jeff Terrell: And it 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 you know you just take lunch and you're feeling kind of sleep the anyway.
Jeff Terrell: I get it, you can also just come back and watch the segment of the recording later either ways is cool.
Jeff Terrell: But but yeah just trying to keep things useful to you to equip y'all for the assignments and six to succeed on your project.
Jeff Terrell: Okay.
Jeff Terrell: So the big idea here you got to build an APP, how do you decide which tools to use.
Jeff Terrell: You might have to decide which programming language to use which framework to use, 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 use.
Jeff Terrell: There might be a choice of platform to use.
Jeff Terrell: Maybe you have to decide on aws versus says your versus Google cloud or something like that for roku or firebase or something.
Jeff Terrell: You might have to choose which build tools or ideas or libraries to use maybe you need to.
Jeff Terrell: 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.
Jeff Terrell: This also is a bit of like the quality of Max thing or some some choices are huge and big some choices are more finer grained, but there are still other choices to be made and in every case, you have to evaluate different options and figure out what the choice to go to.
Jeff Terrell: This, by the way, is, generally speaking, a.
Jeff Terrell: 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 function of that role and a company.
Jeff Terrell: And I was a cto for my little company after I graduated.
Jeff Terrell: Okay.
Jeff Terrell: So what i'm going to talk about what the value adding technology is.
Jeff Terrell: Different approaches to layering technologies i'm just going to serve a different approaches and analyze them briefly.
Jeff Terrell: And then, on Monday i'm planning to talk I need to review this content, make sure it still makes sense, but i'm plenty to talk about the virtue of simplicity, for making decisions about this, and what what I mean by simplicity.
Jeff Terrell: Okay, so, first of all, are today 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.
Jeff Terrell: You might decide, based on the clarity of the puzzle or the maturity of the idea or how flexible friendly and available your client seems to be.
Jeff Terrell: 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.
Jeff Terrell: same thing for evaluating technologies, there are different priorities, and I think that's important to stay starting out, otherwise you can get stuck in like.
Jeff Terrell: Which one's better without actually talking about what's actually important to you, and it is not the same as what's important to somebody else.
Jeff Terrell: 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.
Jeff Terrell: How popular is it you know how well trodden path is it to use this technology.
Jeff Terrell: isn't maintained, and those are somebody who's still responding to bug reports and issue requests.
Jeff Terrell: How easy does it seem to be to start with sort of pick up and start using even if you haven't read through the entire manual.
Jeff Terrell: and am I already comfortable with that that might be a priority for you so that you don't have to spend a lot of time learning and could just start doing.
Jeff Terrell: Or will it help me get hired after graduation.
Jeff Terrell: And how easy, is it to understand so different priorities here.
Jeff Terrell: A good 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.
Jeff Terrell: That can help build consensus for the whole team to figure out what technologies to adopt.
Jeff Terrell: You might realize that you're all on the same page about what the priorities are which would be you know great.
Jeff Terrell: 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 kind of do.
Jeff Terrell: But this might be a worthwhile conversation to have.
Jeff Terrell: Okay, so different approaches let's take a closer look at a few priorities newness.
Haopeng Huang: popularity.
Jeff Terrell: 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.
Jeff Terrell: So and i'm going to kind of go through these relatively quickly here, in fact, let me just check the time doing right on time okay pros for newness.
Jeff Terrell: 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.
Jeff Terrell: It can be fun to learn new things.
Jeff Terrell: 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.
Jeff Terrell: 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 field.
Jeff Terrell: 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.
Jeff Terrell: There may not be as much documentation.
Jeff Terrell: And you may be relatively alone using it, so it may be hard to get hot you know.
Jeff Terrell: Well yeah it's probably an upside there.
Jeff Terrell: Right its popularity pros of popularity.
Jeff Terrell: If others are already successful using this thing that implies that you should be able to as well.
Jeff Terrell: If they can do it, why can't I, it can be easy to get help, even for uncommon use cases, you know if 1% goes down this one rabbit trail.
Jeff Terrell: And you're part of that 1% 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 they're going down that path looks like.
Jeff Terrell: And following the crowd tends to be easier.
Jeff Terrell: But note that popularity is not.
Jeff Terrell: 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.
Jeff Terrell: that's 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.
Jeff Terrell: and vice versa, a lot of excellent marketers report 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.
Jeff Terrell: You know, there might be reasons to look more carefully ethics that are popular to see is this actually a good technology or not.
Jeff Terrell: Okay isn't maintained, which is a bit of a difficult question to answer, but at least for the purposes of evaluating technologies, a lot of people like Dr metric.
Jeff Terrell: Of what was the most recent permit to the repository and it was it yesterday was it last month, was it three years ago and it gives you a sense of how maintained it is even though it's not a perfect metric.
Jeff Terrell: 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 a better performance for free, as people are reporting bugs or improving things and you stay up to date with the latest versions.
Jeff Terrell: Which is kind of nice it messed up for free.
Jeff Terrell: cons might include that you know, maybe bug fixes are happening because it's still kind of money it's still got some some kinks to work out and it's kind of rough around the edges.
Jeff Terrell: 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.
Jeff Terrell: Also i'll say this you, you might be coupling your project to to a technology that is constantly moving and you might also have to stay moving to keep up.
Jeff Terrell: And this is something that i've noticed, especially I think a lot of people have commented on this in the javascript world in the known.
Jeff Terrell: world know package manager and stuff like that is that it is just constantly on the move.
Jeff Terrell: 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 as a breaking version or not.
Jeff Terrell: If it is, you have to go read a change log and figure out what actually broke, and what we 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.
Jeff Terrell: Okay, and then ease like how easy, is it to use and easy, is it to pick up and work with, even if, maybe you haven't read the entire manual.
Jeff Terrell: i'll note that the word origin here means to live near or to be adjacent to.
Jeff Terrell: which I think is interesting, because one of the things that implies, if you think about it is that that's a relative term.
Jeff Terrell: Right it's relative to where you are what your position is.
Jeff Terrell: Alright, 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.
Jeff Terrell: So you can start being productive fast which, frankly, is very important, so this would be maybe a reason to use technologies that you're already know and not try to learn and things.
Jeff Terrell: 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.
Jeff Terrell: 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 the client than it is to learn new things, new technologies here and I don't disagree.
Jeff Terrell: icons 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 by your teammates or not.
Jeff Terrell: And also, you know, maybe it's sticking with technology, you know, maybe a new tech or a different technology that you've heard about or the others use or whatever.
Jeff Terrell: might be worth learning curve, in the end, maybe you'll actually get farther even in the course of a semester it's did switch and climb that learning curve early on.
Jeff Terrell: 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 and then you actually have to get all the way to deploying and maintaining and things like that so.
Jeff Terrell: that's something that kind of comes for experience as you walk down this path with different technologies.
Jeff Terrell: The big idea here if you asked all those details, but you just hear one thing about evaluating technologies understand this, any priority, you have has trade offs.
Jeff Terrell: I was able to come up with the pros and cons list for each one of these different priorities.
Jeff Terrell: Because there are trade offs for each of them.
Jeff Terrell: 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.
Jeff Terrell: Trade one thing or the other, and try to find a solution that optimizes some space for client happiness user happiness.
Jeff Terrell: 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 understand the trade offs and even sort of consciously see them and put yourself at some point on that spectrum whatever spectrum it's.
Jeff Terrell: Good questions about evaluating technologies.
Jeff Terrell: Another poll, do you already know what technologies you'll be using.
Jeff Terrell: You know what no I didn't.
Jeff Terrell: Think I forgot to create a poll for this alright nevermind.
Jeff Terrell: Just kidding let's switch to a Sigma tutorial alright So here we kind of have I want to stop at 230 maybe maybe a little bit before me to 28 or so, so I can set up the quiz on sekai and y'all can have 10 minutes to finish it before the end of class.
Jeff Terrell: So let's switch gears here we're going to go to a stigma tutorial the.
Jeff Terrell: The right up is available i'm going to be walking through this.
Jeff Terrell: actually now to get there, if you just go to the course website go to calendar.
Jeff Terrell: shoe I don't think I didn't put that there i'm sorry.
Jeff Terrell: Go to calendar go to the fall 2020 calendar.
Jeff Terrell: And on the fall 2020 calendar September 2 talks about my workshop.
Jeff Terrell: In here hold on a second appalled 20 is the link to the hand.
Jeff Terrell: And let me post this link in zoom as well because, why not.
Jeff Terrell: Right, this is what i'm going to be walking through.
Jeff Terrell: And i'm going to have these instructions up on a screen that only I can see and i'm going to put 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.
Jeff Terrell: up in front of you, hopefully, those of you on zoom maybe have an external monitor or something like that that you get those instructions up on when you're watching me and following along.
Jeff Terrell: Okay, so we rearranged my windows, a little bit here.
Jeff Terrell: Okay.
Jeff Terrell: Okay, so if you go to sigma.com G ma calm.
Jeff Terrell: And if you haven't already created an account go ahead and do that I usually just login with Google.
Jeff Terrell: 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.
Jeff Terrell: and
Jeff Terrell: i'm gonna i'm just going to kind of keep moving but i'll try to check in from time to time.
Jeff Terrell: with both the zoom chat and everybody in the room to see, am I going too fast.
Jeff Terrell: 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.
Jeff Terrell: If you look at your furiously sort of.
Jeff Terrell: typing away or clicking away on your laptop and 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 if if you need me to slow down or explain something more.
Jeff Terrell: Okay, and then you know we'll cut this off at 228 if we don't get all the way to the payoff at the end, but creating a full prototype then.
Jeff Terrell: I might just fast forward to the one that I created this morning, when I was prepping for this class, because I do want to make sure that we have enough time for the quiz at the end of class.
Jeff Terrell: So, assuming you're in Sigma at this point again shout out if you need more time.
Jeff Terrell: This has actually changed a little bit from when these instructions were created and notice that this morning under drafts know if I can.
Jeff Terrell: might make things a little bit wonky but we'll try it anyway just increasing the zoom here under drafts there's a plus button and then the plus create a new design file is what their mind is now calling this so click creating a new design design file.
Jeff Terrell: Okay, so there's four parts to the figure ui along the top sort of a dark thing is the toolbar.
Jeff Terrell: Along the left is the list of layers and your design.
Jeff Terrell: On the right is the inspector.
Jeff Terrell: And in the middle, is the canvas and if you if you use 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.
Jeff Terrell: noticed that the inspector has three different tabs design prototype and inspect.
Jeff Terrell: and
Jeff Terrell: I can zoom into that unfortunately so that's really hard to see i'm sorry good zooming doesn't seem to take effect here.
Jeff Terrell: Okay yeah we'll spend most of our time of 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.
Jeff Terrell: we're going to rename our project to calculator so in this middle part of the toolbar where it says untitled the arrow and say rename.
Jeff Terrell: And you can say calculator i'm also.
Jeff Terrell: myself.
Jeff Terrell: Which version of my calculator.
Jeff Terrell: first thing we're going to do is create a frame.
Jeff Terrell: A frame represents the background for pitch for a particular screen of your APP.
Jeff Terrell: And we will have multiple views by the end but for now it's this third tool from the Left.
Jeff Terrell: 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.
Jeff Terrell: 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.
Jeff Terrell: And by the way, if you make a mistake use control 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.
Jeff Terrell: Right now, in the inspector notice the frame has different properties associated with it, including X, Y w is width if his height so let's change X to be zero.
Jeff Terrell: And why to be zero.
Jeff Terrell: let's change with to be.
Jeff Terrell: 283.
Jeff Terrell: And height to be 324.
Jeff Terrell: Okay.
Jeff Terrell: let's also change the bill.
Jeff Terrell: To be.
Jeff Terrell: B to B to be chooses rgb hexadecimal color coordinator so that's kind of a dark Gray or medium Gray.
Jeff Terrell: Now, if you kind of.
Jeff Terrell: 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.
Jeff Terrell: canvas horizontally or vertically to get that in the right spot.
Jeff Terrell: Okay anybody need me to slow down, we are good if you live in.
Jeff Terrell: OK.
Jeff Terrell: we're going to create so in the list of layers going to give this frame and name we're going to call this the weird layer and what this represents is, it is a particular screen of your APP.
Jeff Terrell: And yeah particular screen at a particular state of your application, so this is going to be declared state we are going to create a calculator, so this is going to represent the initial state of the calculator APP.
Jeff Terrell: 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.
Jeff Terrell: and
Jeff Terrell: create a rectangle somewhere in there again you don't have to be precise, before this is because will fine tune it, 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.
Jeff Terrell: For me, this is a little bit weird that might be because i'm using Linux.
Jeff Terrell: And same thing with why why any of these you can click on the label and pull your mouse to the left or right to change this.
Jeff Terrell: Or you can use your arrow keys up and down, you can hit shift down to go up and down by 10.
Jeff Terrell: Okay, so.
Jeff Terrell: X zero y zero.
Jeff Terrell: With is going to be 283, which is the full width of the frame and height is going to be 135.
Jeff Terrell: color is going to be your point so F F F F F F six f's.
Jeff Terrell: No good.
Okay.
Jeff Terrell: 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.
Jeff Terrell: we're going to just kind of gas it where it needs to be and how big, but this is essentially going to be the one button.
Jeff Terrell: And we're going to pick ax is 17.
Jeff Terrell: Why is 152.
Jeff Terrell: w is 50 that's the width of the button I just 30.
Jeff Terrell: This right here this.
Jeff Terrell: Sixth field in the inspector is the border radius let's set that to 10 nice border radius there and let's set the phil to actually already that feels good before see 44.
Jeff Terrell: So it's a bit lighter Gray.
Jeff Terrell: Okay, moving on.
Jeff Terrell: we're going to create a label for this button so we're going to use this T for text.
Jeff Terrell: and
Jeff Terrell: we're going 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 one there and hit escape to get out of the input mode.
Jeff Terrell: Okay, so I want.
You see here.
Jeff Terrell: If you missed that the X should be.
Jeff Terrell: know the actually 17, why should be 152 w is 50 and play is 30.
Jeff Terrell: Okay now.
Jeff Terrell: The text.
Jeff Terrell: I didn't do this well, but the text should be you need to actually select that text in there.
Jeff Terrell: Can.
Jeff Terrell: We go and then change the font size to be 24.
Jeff Terrell: And we also want to set this to the middle.
Jeff Terrell: Center aligned and middle aligned to be in the middle of your button.
Jeff Terrell: Okay, so then your your button with the label should look like that.
Jeff Terrell: Okay, nobody sent me to go slower so i'm gonna keep going.
Jeff Terrell: we're going to group the.
Jeff Terrell: rectangle the button rectangle and the button text together.
Jeff Terrell: 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 GA slash command.
Jeff Terrell: Alright, so now we have a group.
Jeff Terrell: we're going to call this instead of group one is Double Click on that to rename it.
Jeff Terrell: button one.
Jeff Terrell: Okay, so now we have a group.
Jeff Terrell: We are going to duplicate this group.
Jeff Terrell: That includes the rectangle and the label, so it controlled the.
Jeff Terrell: 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.
Jeff Terrell: And just kind of gas about where that button should be will fine tune it layer
Jeff Terrell: And if you Double Click and Double Click again you'll be able to edit the text and this change that make it to.
Jeff Terrell: button already is named button, to which is kind of Nice.
Jeff Terrell: To do same thing with three.
Jeff Terrell: Real quick a couple of times to get to be able to edit that text.
Jeff Terrell: And then, make sure you're selecting the group whenever you duplicate control the to duplicate.
Jeff Terrell: And this will actually be the.
Jeff Terrell: With the equal button, you know the plus button.
Jeff Terrell: In this group, we will rename.
Jeff Terrell: The call that.
Jeff Terrell: i'm assuming everybody's with me.
Jeff Terrell: Okay.
Jeff Terrell: Now let's.
Jeff Terrell: let's position, all these to be about right so.
Jeff Terrell: 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 there so.
Jeff Terrell: let's see what is the size of.
Jeff Terrell: The frame the frame is 283 pixels wide.
Jeff Terrell: Okay 283.
Jeff Terrell: And the button has a left margin away from air inside of the frame with 17 pixels.
Then select the other call.
know that way.
Jeff Terrell: like that.
Jeff Terrell: Okay.
Jeff Terrell: You might know how to use this better than me.
Jeff Terrell: yeah i'm not sure, maybe you could show me that after class.
Jeff Terrell: Okay, but anyway, we can we can do this I guess the hard way, we know that we're 17 pixels in and the total with is 283, we also know the buttons are 50 pixels wide.
Jeff Terrell: So, we could say that the acts of this third this last button here is 283 minus 17 minus 50.
Jeff Terrell: 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.
Jeff Terrell: This is the menu on the upper left it's the very first icon in the toolbar.
Jeff Terrell: If you go down to a range, you can say distribute horizontal spacing.
Jeff Terrell: might have all four of those distributed well they're aligned exactly where they were I want them to be within the frame and it looks pretty good.
Jeff Terrell: And now we're going to continue duplicating how we got to find oh boy we gotta go.
Jeff Terrell: So i'll do this we're about at a time for this part of it so i'm just going to start moving quickly.
Jeff Terrell: 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.
Jeff Terrell: Getting miss exactly right.
Jeff Terrell: 45678 again if you're probably going to be able to follow along at this rate, but that tutorial is available on the website.
Jeff Terrell: You want to check that out and basically just applying the things we've already learned at this point.
Jeff Terrell: Okay i'm not going to worry about all of my layers being named the right thing.
Jeff Terrell: But now we have all the buttons okay so last thing I want to do is add some text or.
Jeff Terrell: This time actually didn't get it right for the display of the calculator.
Jeff Terrell: i'm going to change this to one size 36 and zero i'm going to make the bottom right aligned.
Jeff Terrell: And i'm going to group those two things together.
Jeff Terrell: Okay.
Jeff Terrell: Now i'm going to select my frame the entire frame duplicate that.
Jeff Terrell: And this is going to be the three states i'm going to change the.
Jeff Terrell: display to be three.
Jeff Terrell: duplicate this would be.
Jeff Terrell: The three plus state.
Jeff Terrell: Change the display to be three plus.
Jeff Terrell: three plus three state.
Jeff Terrell: And finally, the six states.
Jeff Terrell: Okay i'm going to scroll and.
Jeff Terrell: Control and then scroll will.
Jeff Terrell: zoom out.
Jeff Terrell: Okay, and here's where it gets a little bit interesting i'm going to click the prototype tab in the in the inspector.
Jeff Terrell: And when I select.
Jeff Terrell: 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.
Jeff Terrell: 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 within three in it.
Jeff Terrell: 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.
Jeff Terrell: The three button here.
Jeff Terrell: and equal button here.
Jeff Terrell: And then i'm also going to connect all of the clear buttons.
Jeff Terrell: set for the first one back to the first frame.
Oh sorry.
let's go.
Jeff Terrell: And at this point, I can click the play button sorry that I do that too fast, this play button in the upper right when i'm on the prototype that can create that prototype and connect those different frames together.
Jeff Terrell: And then I can click the play button present that, and this is my clickable prototype for the calculator I click anywhere it'll tell me where I can click and if I click three plus three equals gives me six I can clear that and go back and do it again.
Jeff Terrell: So there's a little clickable prototype now, you should be equipped to use big line.
Jeff Terrell: Now, how comfortable do you feel.
Jeff Terrell: Now we kind of had to rush that at the end, but it seems like most.
Jeff Terrell: seems like maybe there's a little bit more weight up top than there was before so it's been.
Jeff Terrell: Okay.
Jeff Terrell: After did alright so.
Jeff Terrell: i'm going to stop the recording now and I will open up the supply quiz for everybody.