Lessons

Lesson Info

Create a "Working" Mock Up with MarvelApp

creating a prototype. And if we have a little bit of time, I'm gonna try and sneak in a little bit about four to shop integration, to talk about a few things like that. But if we want to, let's say we're designing this and we decided to take it and make it so we can make it available to our customer and they want to able to see sort of what it's gonna act like interact, etcetera. What a lot of people will do is they'll make a PdF out of this right, ***, pdf send it off to the client. Take a look at it. Approve, disapprove, etcetera block. But they don't get the feel for the interaction. That's kind of a hard part about it. One thing or a couple things that we can do is we can use prototyping software to our advantage. So there are she a bunch of these out here. There are a bunch. Envision is one. And I'm just gonna mention some of these because there's a lot out there. But this is a sort of ah, collaboration prototype workflow tool. And this is what a lot of these are all about and the...

ideas were trying to iterate quickly. So we maybe create pixel perfect design or were using illustrator just to create a wire frame. But we want to get the idea of OK, well, how is this actually gonna work? How's it can interact. So what we could do is we can take that content and some of these will say Build it all in here, and then you can, like, show your client. A lot of these, though, will actually let you take illustrator content to see that I was imagery. And you can add the interactivity to it in here, which is pretty useful. This is one example we can use. There's another one called hot glue, which is interesting. This is more like a full on robust, like wire framing prototyping tool. Um, we have proto which is coming eat like this one. We can add, you know, interactions. They have libraries, we can use our own content and none granted, One thing I need to make clear is that we're not bringing in all the vector content. We're bringing in a snapshot of what we have. But that's all we need for cricket orations. T check and test the one I tend to use a decent amount is called Marvel App. It's simple. It's so simple and you want you may wind up doing is you may create this and be like, Well, can it answer if I know, But it actually pretty cool. So the idea behind this is if I want to create a project in here, just even idea. I'll create a new project and I'll say I test whatever I want. We can add password protection if we decide. I think you have to pay for that. To be part of this is free for most part, and then we go and we start to add imagery. What I love about this is that if we are just sketching, we just quick take a picture and upload it and put it up there. If you want to, you can also upload designs. Time to take a look. This is pretty cool. You can use direct PSD, so it'll take native PSD in just a little while. They're gonna take native ai files, which is awesome. So you just taking it elsewhere, file jamming up in Dropbox. Put it right over here and you've got it. So that's pretty cool. I actually have gone in, and for some of these, let me just show you I'm gonna go back overnight projects for some of these. I've done quick sketches and just said, you know, hey, here's kind of what the interface might look like. Let's just quickly test it out, etcetera. Let me go through this one and we're starting here. So what I want to do is I want to kind of uploaded design, hear someone say, Let's do it from Dropbox, for instance. And of course, it's gonna make me sign in here on you. Gotta created account with a lot of these, Which makes sense. There we go. Okay, so it's gonna say, Let's go to Dropbox economy. All my stuff out there and what I can do is I can go back over. Let's say the illustrator here and I'm gonna go in and just, like, grab this whole area, I can take a screenshot of it. It really is just for quick prototyping, so we don't have to say for Web. Exactly. So what I might do is take a screenshot. I can also go safer Web if I want to do that and, you know, save out the entire thing. It's all one big slice. Now, unfortunately, you're gonna see it's to everything. OK, so one of the things we're gonna wind up doing one of you have done this before, I'm sure. Slights. Okay, so I honestly think taking a screenshot is the best idea I gotta be honest slice tools stink. I hate him. We use him. But I hate him. Somebody take a quick screen shot. You gotta watch out for sizing. That's one of the key things. So I will go in and take a screenshot here, and I use something called Snaps Pro. There's a bunch of amount there, and we just do this for a quick grab it, Uh, like I said, eventually, it's gonna be native. I got to say this and say I home is my home page and I'll just set it on my desktop. I'm just It takes me right over to photo shop. I just do a quick safe. It's J. Peg. Just do one of the file formats. They accept a Pigpen gift. I can't go back over there, and I'm gonna put it right up in my dropbox. So I'm gonna go to Dropbox quick transfer, and I'll say, Let me just stick it right up in here and I'll say I home J Peg, put it right there. Take a second to go up there, but eventually it's gonna happen. Is it should show up in here. I should Bill C somewhere. Maybe I need a refresher photos here. It is Jews. It's gonna take a second bringing in. But once we get in there, now we can do is you start to kind of prototype. What's cool about this is that you can then take if you have different iterations or pages in Illustrator. And I'm gonna show you that in just a second how we can set that up. We're gonna stay quick. Snapshot, bring that next one up on. And then when I can do is I can say, All right, let's have it. This I'm gonna click on edit and it's going to show it to me. And what I can do now is I can say Okay, I want this button create a hot spot to go to another page. I wanted to go to a link we can actually have it smooth scroll down the page if you have a really tall page. I love that because then you can give the client the feel of it's gonna go this way, you know, and use like J Crew to do it. We can transition, push left, push right, do all these different things that we might do on the web, that type of thing that a lot of us will do today. So we're adding these different hot spots to get to work. One of the examples I really love about this is that we can and I've shown us a lot. But we can actually set up an interface where if somebody taps on like, let's say, sign up like a sign up button, you can actually have a screenshot that in Illustrator, you put a translucent black box and a form on top of it. Take a snapshot and they get the feeling it'll fade, transition or slide in, and they'll get the feeling of clicking on that, and suddenly this box appears so they can see exactly how it works. So this this is the type of prototyping tool that we could use just kind of quickly show our client what schools you can. I love this. We close this up, we could go in. And if we start to add, are different pages in our different content, I can go in the settings here. And if we're designing, we could design for, like, apple Watch weaken, designed for phone, desktop tablet, all these different things here. And we basically just pick it when we say Okay, well, right now I'm going for web. So that's cool. And then we set up certain behaviours, which is really need the client can then actually view this or preview this kind of in the device if you want to kind of faking it, but in the device. So this is something that I think kind of takes the illustrator, I don't know design, if you will A next to the next level. So you can really kind of iterated see the prototype and see what happens. And just to give an example Here, let me go back over to my projects, and this is just dead simple. But so what I did for this one. I've got two quick napkin captures that I have here And what I would do is just quick play and the client itself. If I set this up right, you can see Okay, they could kind of see it in phone body. We can just click and go to the next page, click and go back, and we could see the interface happen, you know, just generic. So you can use this. Is Weir framing or actual full un designed to show the client? I thought these were so clever. I really did about these kind of things. They're awesome. So that's one of marvel app. A lot of these work the kind of the same way. Some have more features. Some have left. Last second vision is a lot of features, but really pretty great. Okay, let me go back over the illustrator. And that kind of brought up a point that I think we kind of need to mention here. But if we are designing for different sizes, okay, a lot of us are gonna be taking this content and copying it across from size of size, doing our design work and scaling doing what we need to do, making sure we're snapping, getting all our content right But what about different pages? This is one of the things I think a lot of us kind of struggle with. I do, too. There's a lot of ways to do it. I know some people that will actually generate multiple art boards in the same sizes. For all the page main page sections, let's say designs another way. I know that people will do. It is well, actually going to generate different layers for the different sections. And this gets a little bit more complicated, I think. But I do this sometimes. If we have the layers panel, for instance, we might have like, let's say, desktop, we might have tabloid tablet like Portrait, tablet, landscape, that type of thing. But we're gonna generate the different layers and let me set one up real quick generated different layers for the different objects or the different devices we have. Let's say so, say like tablet landscape, that type of thing and then all the content for that device will try and put it on that layer. Obviously, right now the thing is, we're gonna have a lot of shared content, so we're gonna have things like the header nev the foot or knave, etcetera. We're probably gonna want to take these objects right here and save them as symbols. Okay, that's gonna allow us to make it a lot easier. So going forward, we could just make quick edits, but we're gonna make sure that all the content that we have minus the guides obviously is gonna be on the right layer. And a lot of that's what I tend to do is I tend to do this after the fact, cause I forget everybody doesn't. Uh But if you selected stuff, you can see the little box. You can just drag it to the right layer wherever it's gonna go. Here we go. And then within that layer, I know a lot of people in illustrator that hate sub layers, but I use some players a lot. I will actually take header footer, etcetera, and make sure that they are separate sub layers. And that way I can lock those okay, and we'll also go in and will make sub layers. You can even make some layers of separate pages. So then we'll just have, like, the header. All that content is going out. One layer isa sub layer the footer all on one sub layer and then the main body content out in the centre. Whatever is not gonna repeat, we'll just have another sub layer. So we might have three sub layers total just for the one page. We'll put another sub Larry in for the body of another page, but we'll keep the header and footer in there so you can organize the kind of way want. What's cool about this is that if you have multiple layers here, we can select them. If you screwed up, you don't put him on the right layers. We can select layers. And we could say, Let's do something like this. Let's collect in a new layer. I use this all the time. So you collect, you can put a link on Attari. A shortcut puts all the new sub layer and I could do something like call that header and that way we can organize it the way we want kind of get all their content. I could select all the main body content out here. Okay, there it is right there. Collect a new layer if I'm a little lazy here and of course it's not gonna let me do it right now because I think something might be. But so it's separately. Er, let me just do this. I'm gonna create a sub layer. It's not letting me do it could sub layer and say, Uh, home, that's everything. Drag all that content in to the home layer and you could see were just kind of we're going into organizing. So this is some people will set it up, and then what we'll do is we'll actually create another sub layer called like info for the next page services for the next page, etcetera. That way we have the consistent elements out there, and we're making it a lot easier for ourselves toe work. So layering is one way Setting up a 1,000,000,000 art boards is another way. I mean, there's a couple ways to get this done and even, you know, I know some people that will take this illustrator file and just duplicate it, and that'll be the next set of pages or next section, if you will. But the problem that is your working across old state of files and you can't really keep them all the same. Same styles, all that stuff so I gotta gotta make it simple for ourselves. All right. Um, that honestly is a lot of what I wanted to cover a Sfar Aziz generating the site, creating the content, getting it out prototyping. I mean, we've learned a lot. I think, you know, just kind of going through different things and being will set up and take this, that we set up with all of these different features and make it a template, if you will, So we can kind of start from that going forward. So, Brian, before you wrap, give us a few words. Final words of encouragement for anybody who wants Teoh. Um, be designing websites and illustrator. What? What advice would you give? Yeah, that's Ah, that's kind of a tough question, because there's a lot, a lot you could tell people there is the more technical stuff. And then there's the more design oriented things. Just know what it's used for, what it's meant for a lot of people. Try and push the bombs of the program and they're going to hit a ceiling and say, Well, why can't do this? It's meant for vector artwork across printing web. So we're trying to stretch it to do something that maybe it wasn't intended for the one thing that I I don't mean to keep going here. But the one thing that we really haven't covered in this section is talking about how to export this content. We actually have gonna have a next class for that in a different class for that. But there's a lot of easy ways to get the content out of here. And that's actually a big problem in a lot of people have trying to figure out file types for you know how to get it out of here, you know, and save it and exporting. Optimize it, boy. But yeah, it's it's work within the bounds. Go find content out there on the Web that's already created. Don't reinvent the wheel. Somebody's already done it. And just follow a lot of the major things that we talked about it and should be should be great from a design standpoint. Yeah, I was just wondering if you had any suggestions for ratios of columns. Per I was, like, 12 61 or 10 or whatever Explain. You mean going for the different vice? Yeah. Yeah, you're gonna find it. It's kind of up to your design, like I split this one up, and this is kind of a silly ratio for guides having six guys on Tablet. Um, I know some people that would go with, like, three guides. They'll go with Mobile. I have one major guide running down the center. You know that kind of thing or don't have the guys on the sides type thing that, you know, make sure you go in. It's it's there's no golden rule. As far as I know, as far as I've seen, it's really just kind of up to your design and how you want to lay it out. I will say, though, that designing across the devices can be tricky. It really can. Going from desktop the tablet? Not as much, I think, because they're similar sizes. You can kind of people just gonna compress content and maybe go from 3 to 2 columns or something like that. But going in the mobile is the harder one, you know, it's always already thinks one column simple. You know, that kind of thing. Navigation is huge. Everybody in the day, back in the day when we first started doing this, they said. Well, we need three sets of navigation. We need desktop tablet and phone. It's coming down to two sets of navigation. You know, when you design, a lot of us are saying desktop and tablet that shares similar navigation. If it'll fit, that's the key, you know. And that makes it less work for us when you get to phone or that size, or even Phablet hate that word phone tablet. If you get to that, that's when we start going to something like the hamburger menu, etcetera. You know? So, yeah, good questions are that's good. That's awesome content.