[MUSIC] Right, so we've got the vision for our idea. We've even kind of put in quite a few details about how the idea is going to be put into practice and we know how to explain our idea to other people in a very short time. So now it's time to really get down to work and start to sort of digitize the idea. So I'm joined again by Doctor James Eunigen from Dartmouth college. And we're gonna just have a chat about how we can go through this process of digitizing our idea. >> Yeah, well digitizing the idea is really putting it into a format, which is much more formalized again. So we're moving from the vaguery, or the abstractness of division through to the pitch. And now we're looking at how we represent it in the digitalized form on the computer. >> Does this happen before we get to coding? >> Absolutely. >> Because I can remember a video, earlier on in the specialization, where I remember Mick Gresham was really telling us don't start coding straight away. Get it clear, get the user experience clear, digitize the idea first. So I think it's great that we're gonna go through that again. And make sure they don't start coding until they're really ready right? >> Yeah, absolutely Matthew, it's very very important that you do all of the specifications before you start. You digitize that idea. What you want to try and do is create a visual guide to the project. So a visual guide may consist of things like a wire frame. >> Okay, so we spoke a bit about wire frames earlier on in the course, but maybe you want to go back and check out the videos about that. But what do you think of when you say wire frame? What picture appears in your head? >> Right, well within a system is always a skeleton. And a skeleton are like all the connecting parts of the system. Now that skeleton might be a hierarchy. So you might start at the top and then drop to a level, and another level and another level. Or it might be a web, where there's lots of interconnections or hyperlinks between. But it's very, very useful to know what kind of wireframe, or what kind of skeleton underpins your application or your project or your website. >> So, it's like a map. Which sort of says what all the pages are or the processes and how they connect together. >> Yes. >> But does it have more detail as well? About how on an individual process, how it actually looks? Or where things are on the page? >> Absolutely. What you can do, once you've got that whole wire frame or that skeleton, you can walk through paths through it. And you can say, well If we were going to, for example, be a customer who is looking up a house on the website for the state agency. We could say okay, what's the first thing I see? Its this screen on the wire frame. What happens next? Next I click this button and do this search and so you can walk your way through the system before it's built in a digitalized format. The great thing about keeping it digital means that you can change it. >> So if we did it on paper, maybe it's a bit trickier to move things around and reconnect things. So we should probably be looking for some software which helps us to kind of draw these diagrams. And we will be providing some information about good pieces of software for doing that with this video. >> Absolutely, that's really important. The other thing is of course to try and recreate what you believe some of the user interfaces will be like. So by that I mean create some of the screens. What will people see? It's very, very important for people to understand how something works by seeing what they're going to be faced with. What kinds of interactions they're gonna be asked to make, and what they'll see. >> So are we focusing on interactions here, or are we worrying about the layout and the design. I mean, because I imagined,if I was doing it, I would probably want to get all the right buttons on there first and worry about where they're going to be later but maybe have a different approach. >> Absolutely. I would be very similar to your self. I think the first thing is to worry about what buttons should be there. What control should be there, what people will be faced with. Later on we can, in effect, put the clothes on the design. So we can then make sure it looks beautiful, and that it's simple and easy to use. But if we get the functionality part wrong, then it's much more difficult to unpick that later. So what we're trying to do is to create some user interfaces or some screens which reflect what users will see. But only in a very sort of simple way. It's often, once again, much, much better to use software for this. Because you can, of course, do changes. >> Okay. And, so talking about designing and making it beautiful. We've got this idea of look and feel. Which we've talked about in some of the previous videos. But, how do I sort of work on my look and feel once I've got my Y frame, my skeleton and so on? >> Well, there are lots and lots of different ways to do it. In a sort of modern computing environment, we often use things like templates. >> Like Bootstrap, right? >> Absolutely. Bootstrap would be a really good example of an excellent templating system. But a templating system, basically, is a set of predefined styles and behaviors for the components in those styles. So I would suggest doing two things. Spend some time looking at other similar products, systems, or websites. To see if you can see any which have the look and feel that you like. That's very important. Secondly, if you can find a template that supports that look and feel, I would encourage that. Why? Because you don't want to be reinventing the wheel. >> That's right. And so, we've covered quite a lot of information about Bootstrap. And how to build all the different typical components you might want to have on a webpage using Bootstrap. We've also talked about how you can use Bootstrap themes to sort of really quickly adjust the colors and the general look and feel of your page. There are other types of CSS libraries and widget sets available online. You just go and have a look and see what works for you and what you like the look of. So there's one more thing we should probably think about when we are coming up with this design and its this idea of accessibility. We've talked about accessibility previously. But what do you understand by accessibility, James? >> Well, I always think of accessibility as being three things. The first if the ability for all different types of users to get access to that information. So, in order for that to be the case. We need to make sure, for example, users that have poor eyesight can increase the size of the text. Users who, for example, can't see can listen or read an audio recording or they can have support of extra text that can be read by a screen reader for example. So there are those components so we do things. If we put an image up we always put an alternative text description with that image. If we have a control. We always make sure that that control is in an order that if we tabbed through the page. We would be able to go logically between the right controls. >> Right. >> That's very important. The second thing in terms of accessibility, is on different platforms. So this is important. Today in computing, people use all kinds of different types of device and all kinds of sizes of device to access the same piece of software. >> So this is where are responsive design comes in so again go back to the earlier courses. There's a lot of information about how how to implement responsive layouts, which will react to the size of screen that people are using. And make sure that, it's as usable as possible on those different screen sizes. >> Yeah, absolutely. So, it's very, very important that it's accessible there. The third thing is this. If the design is too complex, if the design is written in a way that is to difficult for people to understand, it's also inaccessible. So, we've got the three things. We've got the accessibility for different types of users. We've got the accessibility for different types of platform to be delivered on, and the accessibility in terms of the user experience. >> So what we might call usability. >> Yes, absolutely. >> Yeah, okay. So we're gonna talk a little bit more about how we might investigate how usable our site is in a later video. But so, what I do is just sum up there and say. Okay so we start off with this idea. We wanna digitize our new kinda vision into something which we can, start really thinking about the nuts and bolts. But we don't start coding yet. We start off by building a site map effectively, or whatever it is. A flow diagram, or however you want to represent the different processes on your site. And then we start thinking about what the user can see on each page. By sort of creating very simple wireframe designs. And we then start thinking about, what's a walk-through? What's the experience? What do they see on each page? What's available to them? And think about look and feel as well. So investigate, how you're gonna use some templating library, or even your own design to really give it a certain character and consistent look and feel. And finally, we talked a bit about accessibility and the sort of key concepts there that you need to think about. [MUSIC]
