(Prototype in Under 20 Minutes)
Today I put my idea into action and designed a simple prototype of my web app, using completely free software.
Yes its basic, but I’m making concrete steps forward, even if I’m not sure how I’m gonna build this thing.
Here’s what I achieved today:
So it’s day three of the Learn to Code Challenge. Today’s mission is “Can I take the simple design that I created in the sketchpad the other day, and create a prototype?”
The outcome at the end of it is I need a prototype that visually looks how my web app will look. So I can then figure out how to start coding how to take that design, get it into code, so I can get it onto a website. And that’s what I’m about to get into. Now, I did some looking at some prototype tools, and I think I found a good one to get started. You’re gonna watch me build my prototype live on the screen. And my hope is going to be about 20 minutes, Max. Let’s get into it.
So last time, we checked in on the challenge on day two, we got to this point where I made my prototype drawing for my web app that’s called a vegan checkup and the next step was to actually figure out a prototyping tool to design the front end. So the tool that I found, so the tool that I found after a lot of searching is called Fluid UI. And they all they’re all premium tools that have plans. But this has a free forever plan. That’s the best. So when you come here to the plans page, you click on free forever. And you’re going to find one project 10 pages, and this is going to be enough. So we’re going to register right now.
We’re going to select here website application, and it gives us the size that we need, Create Account. to double click anywhere to create your first page. I like that I didn’t have to go into the website, excuse me to my email to verify access, click the page to zoom in.
There we go. So this is nice. We’ve already got the, I guess the bars that we’re gonna use The layout lists, maps. Okay, so this is pretty nice. It’s quite basic, but that’s all good. So just one click. And that goes there. Let’s put that at the top. I’ve never used this before, by the way. I don’t know what pin does or lock, I guess it leaves it there. Okay, so let’s just check the app. So it’s a simple page with a button claim page. So maybe I want a logo.
And what I’m gonna do is just use a random logo that we have for the brand This is probably going to be for she’s our website, which is veganism.co. Okay, so adding images, you need to upgrade she’s random.
This wider center. Let’s go a bit bigger. There we go.
Okay, there’s the gridlines. So we know that that center, okay, see that little line that came up down here. We’re gonna need a button, some point somewhere in the middle, make the button a little bit bigger. Let’s get that centered. There we go. There’s the line. Let’s change the color, my color coding.
And actually, I’m gonna want the darker color. So I’ve got a darker green. I already saved these here. So the way to choose those, by the way, they’re called hex codes.
So you can type hex code and HTML color codes calm is a good site. And you basically go here, and you’re going to choose your color. So you click and you can see the color selected here. So you just kind of play around. And then this is the color code here. So you Take that, then when you come to these tools, and they’re asking you for the color, you just put it there. Okay, and then you can see I’ve got the color code that’s quite easy.
Anyway, I’ve got the color code that I want. Let’s click on there. Dark green.
Let’s make that text a little bit bigger. What did we say the button was gonna be check brand?
Make this a little bit wider. Okay. Let’s get that button back. So I’m just pressing Ctrl Z.
Ctrl Z. You’re in Europe like me. Okay, I just needed to make the textbox bigger. So this is a little bit fiddly. It’s not terrible. Okay, so you click the button. And then let’s just make this the same as the bottom. And then we’ve got it centered here. So no, we’re good. Okay, cool. So then the next thing is a box where they’re going to type in the name of the brand. So text input, so I clicked there it is in here, where it says text input. I think we had enter brand.
So let’s take that out. And that’s just plain that’s centered. Let’s go with the h2. So h2, smaller tech. So one thing when you’re designing you want a hierarchy. The biggest thing is the title of the page. And then the next thing that you want them to do Is, is what becomes the second thing, the hierarchy that’s just a design principle.
Okay, there we go. And then we probably need a footer at the bottom of the page. Something just to make it look a little bit professional. I don’t think we’ve got footer here, there’s nothing. So these are the backgrounds and stuff we can apply to, we want grey. I think just why clean, slightly simple like a Google.
So that one’s good. I’m okay with that as a very, very basic page. So let’s go. Let’s go to the next one. Okay, so that’s about done. So I want to add another page. So I can add a page but this sheep thing here clone, I think it’s gonna save me the hassle of having to set all of that again. So so let’s go to the Back to the design. Okay, so here’s what the second page looks like. So the brand name, if you remember was gonna be dynamic. So here was brand
is vegan cruelty free and then products so we need some text find it birds it is the text there sorry so h3 parent company so let’s leave that for now.
So I want to make this bold Ctrl B doesn’t work. Helpful. Text options, okay, great. So let’s put that back over there. text bold. And I want to make this green so that the same color that I had, it’s important to use the same colors everywhere just to keep branding. So this is a little bit too dark this color. So what I’m gonna do is just drag this I want a lighter green. And again, I’ve got this option here just to lighten up so something like that is good. This out, and this text needs to be bigger. So the minimum for the web by the way you want is a 16. So an 18 is okay, I’m going to go 22 here.
Now what I want is some check marks. So if you see here, I’ve got a check if it’s vegan and the check of is cruelty free.
Okay, we’ve got some other stuff here. Doesn’t look like there’s a tick checkbox.
Oh, here we go. icons. Let’s try that Apple icons. Okay, gotta be a checkbox in here somewhere. There we go. So I might have to adjust that a little bit. So we can see here we put the width and the height. So I’m keeping it simple. I just pressed width down five times and then height down five times. So my simple thinking is if I make it match, then it’s going to fit the color. Now I forgotten what this color was. So I clicked on it, I’m going back to the text. And then see I can just get the color code. Now when I come back here, and I go to color, can just pop that color coding.
Be careful here. See there was two of these. So take one out. There we go. So let’s align things. So that’s good. What I’ll probably do now is I need some spacing between this. So we’ll come back to the text, the letter spacing is not working. Setting that to zero, maybe line height. There we go. So that’s good.
So that looks like that’s lined up. Now I’m doing Ctrl C Ctrl, V, and that worked, copy and paste. So that’s good. I’m going to select all of that so I can move everything in one go. And I’m centering it here. This I think needs to move across. Now that’s centered. That kind of looks off. So I think what I’m going to do is adjust the size of that text.
So let’s just say instead of brand, I’m just going to use the actual name of a brand could be one we use and listen to that. Okay, I think this, you might want to just line that. I think that looks better, doesn’t it? You see, it’s all aligned now. So it’s vegan and it’s cruelty free. Okay, so let’s go back to diagram. So we have here’s a line and a little bit more text. So let’s go back. So let’s look for a line. I think I saw one here. Okay, so it gives us a plus we need to draw that. That’s nice. That’s come pretty straight and center it so I’ve just centered it here and the width Maybe just make that a little bit shorter. And I want to make it a touch darker. So again, let’s go to the colors.
Here we go. Okay, color, and I want to make it darker. So I’m just gonna pull that down.
A little bit too dark or something like that. So then we add a little bit more text. So widgets,
close this. Maybe we drag this down. It’s not what we want to do. How do we go back?
Wireframe maybe? Okay, good. There we go. Let’s go back down to our text list. Sit down. In fact, you know what, we probably want the same size. By the way, I don’t know if I need to save this, I think it’s saving automatically. Okay, I’m just gonna drag this in, it’s faster.
Just check the size of that text was 24 up there. In this text says this 12 which I doubt is okay fine 24 looks about the same. Okay, so the text here I think was parent company was let’s make this a little bit wider and let’s line it up there we go like this.
We don’t want this involves we’ll take this out. Let’s make it this grey colour is quite a nice color for the body text. And we want another one of those Apple icons. Here, icons, iOS icons. Okay, good. Okay, so we’re going to use this stop sign here. Instead, we’re going to need to move this text across.
So you can see if I line it up here are the lines show me that it meets the green text. So that’s good. In terms of the size, I want these icons all to match. So let’s check those out.
That’s roughly the right size. Let’s get the color red. This text color codes match back to the icon that in the system is running a little bit slow today, it seems. Let’s just take second.
So let’s click back on the icon. Let’s go to colors. There we go. We want to read in okay. Now, let’s just check the size looks pretty much the same size, maybe a shape bigger. But again, I could always fix that later. It’s made to fit the screen. This is good. And then what can we do here? We can share. Present. Okay.
So I think the way this is set up, you can only preview one page at a time, which is a bit bit silly, I guess. Anyway, so there’s two pages, okay, I was going up and down. That’s the problem is right and left like a computer would be so my mistake. Okay. So my question is, how do you take this design? And you actually get it to being able to be coded? Like, is there a way that this becomes code and then you just customize it or what?
So that’s the next step. For me. Today was really about just prototyping. design. So that’s now done. So then my next step is going to be how do I take, how I want it to look and their basic design and actually start coding it and getting it live on a website. So that’ll be in the next video. I hope you enjoyed this one. Any questions? Leave them for me in the comments below. Make sure to subscribe and check out the playlist if you want to see the earlier days videos in the first video, where I walked you through why I’m doing it and the rules for this challenge.
Alright guys, see in the next video.