How to Design A Website - Part 2 | Christine Tran | Skillshare
Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
14 Lessons (1h 25m)
    • 1. Intro To Wireframing

    • 2. Creating Wireframe Symbols

    • 3. Wireframing Navigation

    • 4. Wireframing Homepage

    • 5. Wireframing About Page

    • 6. Wireframing Books Gallery

    • 7. Wireframing Book Page

    • 8. Wireframing Articles Page

    • 9. Wireframing Contact Page

    • 10. Prototyping & Images

    • 11. Prototyping Navigation

    • 12. Prototyping Text

    • 13. Prototyping Connection

    • 14. Thank You


About This Class

This course is geared towards new and experienced students in Web Design. Through each video, students will learn the design process of building and design a website. They’ll learn how to build a Project Outline, Brand Profile, and build Wireframes.

What you’ll learn:

  • Design Process - Site Mapping, User Flow, WireFraming, Prototypes
  • Web Page Layout
  • Branding - Color, Typography

What you’ll create:

  • An author's personal website


1. Intro To Wireframing: why are free choir creams is a drawing of a design. It can be free hand or digital. It's used to communicate design ideas and show how a design will function. It focuses on the experience of the design without the detailed visuals. Due to this wire, French are like blueprints using blocks, lines and colors, usually black, gray and white. Here are some examples. So with wire frames that can be hand sketcher digitally drawn with hand drawn wire from sketches. Through these examples from speculate dot com, we can see it could be very detailed or as simple as just blocks of lines. So you can see here. The designer blocked out certain elements that indicate images or icons, and they labeled it by numbers to indicate what piece of object they were and texts were detailed. Which US lines maybe keep going down. We can see other examples. If you decide to do hand drawn sketches. I recommend using graph paper as you can utilize all the lines on breaks that the graph paper can provide you. There are some other examples as well. You can map details on the side just again idea what you're looking for or what you're planning to build. So the digital wire frames we see here, the designer chose to use the 12 column grit and making use of the 12 column Good. We can see the elements or place, just like so. Some are structure all the way from 12 columns, others at three others at four. As you can see it with the career that everything's really aligned really neatly and everything else is kind of me to balance one another for a class project, we're going to start working our authors wire free. See you in the next video. 2. Creating Wireframe Symbols: as we begin to design our wire frames, I would suggest you go to this Web link appear for Adobe Extra Designed. If what we're gonna be using are the wire frame elements Dobie X'd has already created for the Web and for mobile devices. And we're gonna be using a couple of those elements far wire free means upon opening your file one or the wire framed kit with same wires on hyphen web. From here, as you will be able to see, you have a variety of elements. Uh, landing pages, contents sections, presentation sections and so forth and water piece are basically elements that it'll be team has created to basically make work fools and process a lot faster. And if you took a closer look, um, this is where I created my system colors. I use the elements of the color palette provided from Ow! 60. The same went for the typography, um, elements. Though I added a few other ones from my personal usage, I back out to so bit more we could see some nap bars, buttons, letters, cards, flow charts, connectors and graphic elements. As I mentioned before that we're gonna be using committees elements to basically designed how it Worf aims and make it faster for us to design. So let's get started. So what I'm going todo is I'm gonna gather some content. And if you look closely, a lot of the content we see on our water freezes hit elements here are in Lauren Xom. If you remember back to our topography lesson Lauren Ipsum it's pretty much a text placeholder. So it kind of gives us a frame of mind of how our project will look without the details that we will include later on. So let's start by copy, pasting some other elements. So we're going to need a page title for our website along with some contacts and some buttons. So this is a pretty good example. So let's click on this. You can dio right click copy if you choose to do that, um, I like to use my, um, computer shortcut tools. So one just gonna do coffee? We're gonna move the society Gold star starter kit here, paste. You put that on the site and let's go back to our wire free files. And I'm gonna also look for longer text paragraphs advising back how you will go to the contact sections, and I'm just going to copy this area as well. Ted, pack. Don't be put full of start files. Copy pates. If you notice that we have a variety of symbols that were saved over because these were elements, What I'm gonna do is up here and because we don't need this particular element, I'm just gonna, like, click bad and saved elite, but neither some buttons that we can play with. So I'm gonna just leave those for now and see what we can use them with. So let's go back to our fire framing, See what other information we want to gather. So we also wanted to include some images. So let's gather this big guy here. Coffee. We're just gonna zoom back out here pates. So this is gonna be our element for the image. So let's click on this particular blood in here or if you like, quicken the element and right click and say, make symbol. You can also change the name if you like. So I'm just gonna say image, Let's get back to our wire, see what other elements we may be needing. So we have texts. So cutters. Well, let's get some some Petters. So I'm going to double click. Here we go See my and I'll show you what's happening. So I want this particular element. But because it's grouped within this Helen, it just kind of double click because it's still grouped within this element. Double click again, and as you can see, it's thought it out. So I'm going to copy that head back over to our start fire, and I'm gonna move on right here. So it seems like we have all our elements that we need from our buyer offerings from the Dolby kit. Well, I think for things start changing some of the symbols, so it's minimized. Kyle. So the last thing we copied over was what I called the sun Petr. But you can see the font size is pretty much the same as the other attacks. So first things first. Let's on the group everything missile. Like all the elements that can right click and say on good or do your shortcut keys. I am going to spread south. You want things to fit snugly. All you have to do is click this button here so What I'm gonna do now is called this salt Petre. So I mean, right click make some books change the name to that symbol to sub header. Let's call Essence Big title where we can see just cage title. We want this larger piece here to be our paragraph. So I'm gonna click that the symbol changed this two paragraph. I'm gonna need a smaller page title. So what I'm gonna do, right? Click this symbol its title It's gonna be different with From the Sub Header Right Click this felon and say quote, we have our buttons set up here. Two different types of button. Well, I'm gonna zero back. Go select them all here. But you notice some of the outlines are green. Some of the outlines of boots those in green symbolized the symbols. And I'll show you how we're gonna work around that in the next video 3. Wireframing Navigation: Now we have our simple set up. Let's start building our home page. First things first, we're gonna need the art court. Well, let's click on this element right here. Since art board could you come to the site? We conceive a variety of what screens or device screens that we can use in order to build out of the project. Because of this project on, I don't know how many of you are using a laptop or a large desktop computer? I'm going to go with the standard scream of 10 24. That way it can give you a better idea. Healthy Look, Whenever you start coating this out, click on this. I'm gonna click the letter mean to change my symbol back to like some book you drag art board down just a tad. So I'm going to start zooming in here. So what we need to include for our all our pages and those are the navigation and the footers. So let's talk about the footer really quickly because it's something very simplistic. I'm gonna go back to our wires web here, and we're gonna go back to our U Y elements and take a look at the footer. There are lots of footers to choose from. And it's up to you how you want to work out your design and for me. I just want this to be a little simple, just for teaching purposes and for you to understand how things work. So what? I'm going todo so like this one from your copy back. Since you're not here, Mina Coptic piece of footage. You know, back in because we don't need the top of this footer. For now, I'm just gonna right click and save one group. Simple. So if you look closely, it's still green symbol that's listed as footers. Three here because it's copy paste over from the wire kick. So I am going toe one group, the symbol to make it not a simple. And then from this point, Kin, just copy that or select that. I do think doing. And now this is a footer. So what I'm gonna do is tell me the previous elements symbol saying that now I'm gonna right quick. Cool. Actually, we have to select all that element through some. Make a symbol. You see, butter. What I'm gonna do is drag this back to the bottom of our web page. So we're still inside. The symbol, as you can see by the green lines, is your mother three. You see it? So what you do is drag to the side, get the same on the other side, click. So we're done with that footer at that point. So let's work on the navigation for our header. Now, I'm gonna go back to our when for you. So this seems like a better option for our navigation because I wanted to have each what page have their own navigation points as we built out from our site mapping. So I'm gonna just click on this particular 11 in the copy lab and head back to our project page and we're gonna treat it the same way we did to the floater Copy paste that here And because we're not necessarily removing any of this information, we're just going to change it. I am going to back at our symbols to see what was added. So after a floater, we had this particular marking. I'm not sure where it's at, so I can click on that and say, highlight on campus, and it's pointing me to this area here. So that's part of why. Couldn't see it so fine would assume men, and it's not there. I can just delete it, since I won't need it. And the local here is within the navigation bar. It's just symbol. So I'm just gonna leave that for now and we'll work on the navigation bar. So let's zoom back out. I'm gonna drag this back up to what we did similarly to the border. A line we can use the guides. Or you can have all the elements. Just click on this alignment Grades Zoom back up, Dr This. Look, I'm just click here. I see where that symbol came from. Since we don't need it. Weaken Just that. And with all our navigation here, I'm gonna dio she clicked each element. Well, what over? I want to know about it just a little bit. Mark back out. Let's double check our symbols. Everything looks good here. So the only thing we need to change appear would be, um, all our content information that's gonna be let to what page? But because this is a wire framing, we will necessarily have to worry about that. You can change it if you wish. So I'm gonna just back out here. So now we have our navigations for both the header and this letter mapped out. So I'll see you the next video when you start mapping out the inner contents of our home page to you the next video. 4. Wireframing Homepage: So now that we have our header and footer, I'm set up. Let's start working on the main body. So first I wanted to build out our hero image. So when it comes to a winding page or any sort of home page that your Web application has, they Teoh include a hero image. So that's like the image you see when you land on the website for what I'm going to, since we already have our symbol set up right here to the image of drag it over and then making sure that it's brought up right against better because I didn't want it this large. What I'm gonna do is break it away from the symbols. So the greatest thing about symbols is that we can ungroomed the symbols and put manipulate the information that we want to create for the simple. So I'm gonna right click and say, I'm group. It doesn't necessarily affect our previous symbols, but because we already set up the symbol, we can always really useless as, um, reusable element. So let's fix this in a chair, resize it to the hero image we're looking for, make it slightly bigger. Hello, our peril image. We were gonna have a button. That will be to, um, the user to see a synthetic of the book was being Britain. So I'm gonna do is click on the button here. What you're gonna do is this drag and release here we have our buttons. I'm gonna use the guide to help me out to center that button and because I don't want it to look like this Exactly. I'm gonna un group the symbol again. Here we have something that we can manipulate on uses guide again. And the Texan here I wanted to say sneak so below that I want the main title off our book. So I'm gonna use the big title. Yeah, put my sub header, Lache Parent trap here. So I am going to just select all these elements. Make sure they're align just so Exume out. You see, we're butting against the floater. Ready? The great thing about the art board is that we can actually make it as big or small as we need to, because this is the footer. All I have to do is hold the shift key. Just drag it to the bottom that was needed. Now we can head back and continue working on our content again. I am going toe one group symbol and adjust the elements to my needs. No, I also want ad block line just to give us an idea where the border starts page. So I click on that particular image off the line, and I'm going to hold the shift key like so you can crispy and head back out. So I also wanted to include the image of the the book itself. But what are you going to do is click the other Andrew size homage to my name. I want to create the title here for the new entitled Click Back Out for about 21 group. The symbol They changed this small, not another sub header. That's I also want small period right here. I drink a symbol just with long text. He's got a copy paste small title again. It's a little longer, and that's, um, buttons. So if these buttons will lead us to on the user to buy the book looks good on this guy again. Pace going to group. These guys I'm gonna see It's not cool. It's tractor stuck down here. Below that we wanted to include a section where the users can see all the other book titles that the author has written. What I'm gonna do, it's just drive the small title, don't you? And we wanted to build the images of the previous books and their title. So I'm gonna show you a neat trick on how to do that with the symbol. No, line it make it. You're gonna add the title of the book here. So I'm gonna do another small title. Call me Peace to be just a little bit smaller. It's just changed ball that Hawaiian from Zoom Back out Here's an interesting about Ah, wire free means just what design? What we see is something called McCombs column goods. We spoke about to do that or to activate it, you would have to click on the name of the art board. And then once you click on that, you click on the check mark for the grid. You can see Elio and its default it till the 12 column grid. So all we can dio is just ensure ourselves that everything flying up to the grid. But I am going to continue with our gallery of the books. Well, I want to hear we're gonna resize the image to before column. Great. Because I want only three images of the books you're going to get back to this particular Texas center. Having that set up, I select all the both of elements going all the way up here to say, repeat grid. I just select that and it's gonna give me a dream like simple what I meant. Hold on to this bar and drag it over. And if I want to in the next couple features can actually drag it down and show us more grids. But for now, I want this just one vote. Does that mean? So let's rearrange all our elements to make sure that they're lining to the to that center . That here move office to side because that in we're just kind of not sitting equal what I can do. It's just moved these texts over to butt up against The last column moved this year, and I want to leave at least a bit of a gap of our own. Collins. That way it needs a little nicer. I'm just gonna do it this way. Go back appears, but things aren't kind of butting up against each other. So let's fix that. You click on this item, bring it back to that editing tool. Just a just everything here. Simple commands . Ankle. Let these remain symbols and just same goes for this. So far, so good. Click the name of our pregnant. Checked the layout box to back out. Take a look at our page. Well, here's a big of a gap, so let's just move up. Quit the name of our back. So there we have our home page all set up and ready to be prototype. It's on the next video. I'll show you how to work on that belt page to you there. 5. Wireframing About Page: All right, So now we have the homepage set up. Let's start working on our about page. So what, we can do it? It's pretty simple is collect on our previous art board. Make sure you click on my name now she lets doubled quick that and say one page. So let's click on the home page name and everything's highlighted. I'm going to copy paste the art board again. You can do your, um, copy paste from the right click of the mouth. Well, for me, I like to use my shortcut keys. Even change this to about. And the great thing here is our header footer stays safe. You don't have to create using the symbols again. And what we can do now is just out of the body. So what I'm gonna do, just move all this aside? So, on our about page, we want to be authors up, image their name and some about bio on the bottom. So what I'm gonna dio is cook this image here and I wanted to have the author have a circular image. So what I needed to hear to believe that image there. Click on circle here, and I am going to hold the shift key down just about there. Back to my selection. Click both elements. I want to align it so and what I'm gonna do next, something really one of these pathfinders toe help also gather our image into that particular shape clicking this plan. Here we have her image and the third and shit. And what you can do is it can also resize the shape and do what you need to. I'm gonna resize it just to make it a little large. So when we're ready, we complete our authors photo right there on the about page. I'm gonna Thetis simple to put our author's name some of the Sun Petters about what bothers role is or what she considers herself. That's pretty much it. So all we have to do, ISS. So, like all the woman's nature, there's centered and click on the art boards need and make sure the layout is good to go. I am. That image is just the right size, the shift key to make sure it's still a perfect circle. We're pretty title as such mature earth, and it's good to go losing our guides to help us sharing that everything is still a line selective and click on the alignment. You can just remove all this turn off our Leo, but that's pretty much it. That's our about page. We'll see the next video when we start working on the book gallery. See you there. 6. Wireframing Books Gallery: next up, we're gonna spilled out our gallery page. This is where we conceive a list of all the books that the author has written. We'll see an image, the name of the book and a short description. Let's get started. What we can dio again Just click on our previous art board that we want Copy pays from Shorty. Whatever you want to make happen, we'll see Gallery. Now we just need things to the side and start it. No, I wanted to talk about how Book gallery. We're gonna have the book image, the title or the name and a description. So somewhere to what we did with the home page. When we get the small book gallery right here, we're gonna do the similar technique. The first off, let's click on the back alley, make sure the layout is turned on. What I'm gonna dio ISS group the grid here. Or you can just click on this piece and stay on grid grid here and because it's grouped up , I didn't see one group and now these are back to individual elements. Well, first off, what's put a big title denoting This is our webpage a line that. Now let's build up the gallery. Well, I'm just gonna coffee, pace or just select and drag. No. So we have the book image, a book title or the name of the book, and we want to sort description. So let's seem back out. We'll just grab this piece of informational text dude's movie like So you see a thought here it means that they're so content hidden beneath this last border, which you can drag. And as you can see it, it goes back to empty. But for this case, we don't necessarily need to exposed the rest of the content. We just want it for a placeholder. Well, now that that set up, I also want to make sure that my book title is left to left justifying So I can just select that and click, however way I want my text to align. But all said and done just that, and I'm going to group these elements before start using the grid. No, we keep the grid. There we have it track the bottom of the road like so I believe we currently have just six titles, so let's just do that for now. And if you can see the images were coming slightly off the grid, but that's totally fine. We'll figure out how to deal a in the next. Higher why you're framing for the prototypes. Why we'll figure out how to do that. We'll figure out how to do that when we do our prototype. So let's turn off my health grids. But it's a footer back. We don't necessarily have to, but I'm just gonna leave things back here just to make sure that everything's uniformed. Don't follow this element. Teoh Harry, how are book galleries? Just a jittery some images. Not just gonna do something like this, give you an idea of how it's gonna look so that the book gallery and up next, we're going to start working on the book page itself. So I'll see you in the next video 7. Wireframing Book Page: Now that we have our home page about page in the book gallery page all built out, we're going to start working on the individual book page itself. So, for example, when a user clicks on a book that they want to check out, it should lead them to a book page where we can see how look is all to see what the book is all about. So let's build that up. What I'm gonna do well, I'm gonna dio is just go back to our home page and no coffee that section. And I'm just gonna on this. I want to say here for the book names, and then we're gonna have the image of the book itself, and we're also gonna have some buttons or links that will allow us to see, um, where we can buy books. So I'm just gonna put that right here somewhere to what? We had a bar on our home page. The user conflict on hardcovers, clever or e books. Good going and put the title here. Here is where we'll see the title of the book again. And I walked out some of B headers. We're gonna have some more that content. So instead of this particular piece, I'm just gonna drag this and then let's get some reviews down here for the book. I'm gonna drag this to say that's gonna be the review's gonna move our court element here. I'm just gonna move on here for testimonials in book Come home, Early office. And there we have our far particular. But so whilst here in the next video, we'll start building out our articles. Page. We'll see you in the next video. 8. Wireframing Articles Page: in the previous video work on your model book page. So let's change the book, um, stage name to our work board. Now we finished the book page. We know that the author awesome, writes articles. So let's bet on the article page what I'm gonna do. It's just copy paste this section here, let's call this the article page. And right here is when we're gonna say article and because we don't necessarily need an image for now, I'm just gonna move everything on the side. So the article page will include the title of the article. Quick blurb are more of a segment of the article and only that will take the user to the main article on the site that the writer was a freelance for. So let's build that out. I have been back to image here. We'll make it smaller because the article comes with an image. Comes with the title. It's ad article. It's a little strange, so I'm gonna dio just that piece again. I feel like that particular paragraph is a little easier on the eyes. We need a link to that, particularly of the article, so I'm gonna dio select one of the links for the button here. And that, too, so you can see a little bit Go to back out. Looks pretty good. Delete all this area here, get it up. Click on the article, Borgo and quickly out so you can see the page of the grid. So as we can see, everything's coming in gold further out. But that's pretty much okay, but we're going to make sure that there's space. So what? I'm gonna do this a range our image makes do something like that because the taxes are on, like the column gap here. Eventually one, we'll work on our coding. I'm gonna add some padding to give such in a little breathing room. I don't like that Try. So here we have this one set of the articles. So the meeting back out, I'm gonna dio group this. I am going to make this a symbol. And what? This symbol is gonna be it. I'm gonna call it practical from now. I am going to try a few more symbols. The show that we have from a variety of articles that this artist has and to give it some design flair up what I'm gonna do to this middle piece is, um, move the image to the right. I'm gonna group that symbol instead. I'm going to just So look, this entire image, I mean, text track it over here might damage back to this life. And that's how we have one critical seeming out. I'm just gonna go all this since that symbolized that symbolized that. I want a good balance between these elements. So what I'm gonna do is click on this section so it evens out all our elements together. It's on the way. There are articles, simple lost. It's on the next video. We're going to start working on the contact page. We'll see your next video. 9. Wireframing Contact Page: That's but not least we have our final webpage to build out. And that's the contact page. So what, we're gonna dio, as always, we're gonna coffee paste our previous art boards. We're going to start building out our page. So here I said big title, which was in contact, and we're gonna need a section for our image for our contact icons. What unmin it isjust meet this aside. I'm gonna so left my title element here and I'm gonna want to included in it. Warms. Better yet, go back to her. Are sickle image here? Let's make that simple image coming back this way. I'm grouping symbol a little bit smaller. I don't talk on another, but a bit of a blurb down here in this country line everything here. This men, I am going to copy that click on this section Guinness's and make sure that everything has ample breathing room. Well, a graphical element will come here to our contact page. We sit in the mail and phone number or Twitter page and thats should for our contact page. It's very simple. Well, in the next video, we're going to start working on our prototyping where I'm gonna show you how to include all the images and all the content and the typography to finalize our fire things. Now it's your turn. Sketcher did usually design your wire free. Make sure you determine how you want to lay out your Web page with the wire frame blueprint to plead. We can start working on a prototype. See you in the next video. 10. Prototyping & Images: kredell. Typing perfect types are early samples, models or releases of a product built to test the cult support process. It's something you can learn from through testing. The third class project will start working on our prototype for our website. So now that we have our wire frames also up and done regular start working on the high fidelity out prototypes, and that means we're gonna start making our wire fame's look exactly the way we want our website toe look like. So let's get started by adding our images. What I'm gonna do, it's gonna start copy paste in how an entire previous wire frames do your shortcuts or your coffee pace. And this year, Monnin. Let's get started. It's after images. What I'm gonna Do Now, it's just dragged images that we have on our stock image folder. I provided you sit folder on the stock images, and you can use those for your, um, her images and what I'm gonna do it. This. Try this image here. You can also double, click and just image the way you want it to be. So remember how I said this was accorded? It's a repeated group. This is where you have multiple images here. So what's gonna happen is we're gonna on group this. That's the grid. You can also click that button up here as well. So what I'm gonna do now is just the images that we need it for This particular section Images for our home page have been included so far is looking pretty good. Let's move over to the about page and you can also review your Comes that I've included. I'll show you the home page. You can look something like this. Let's go to the about page more authors Just right on the look Gallery, The Miracle toe our book gallery cops Just to see what images abused previously Just a side . And that's not helping. Remember these Air Gris Group? Great. You can just leave that alone and just add the images that we need other around and images as well information here because you can see we have a variety of text and images for our book. Gallery looks pretty cool right now, my lord of the page, I'm gonna use this image. So it goes to show how the user were to click this particular book that I should show this page here. Let's make this a little taller. You know it's butting up against the page higher, but we can fix not enough it. Go to our articles page and head over to our articles. Calm. These were the images who were going to be adding really cool. New the graphical Elon's. Sometimes we can use graphical elements, but sometimes you can also use. Now I'm just gonna do photos for fun. Quick another for images are completely the next video working to start working on the header and foot. We'll see you next video. 11. Prototyping Navigation: now that we have their images sent up would start working on the header and splitter. Remember to the header acted to show you that anything that changes to the symbol will affect all the other symbols that are associated with it. So that means if I were to change this symbol a round thing, let's just put a quote because you can see everything changes. It's supposed to do that easily for other helpful tools, but there's some weird set up here that we've just designed. So what, we're gonna dio It's just here and ungroomed all the symbols on the top again. So what I want to do now, let's just focus on one particular area. So let's start on the other. What I want to do is change, but backroom toe are transparent. One first, let's select all the tax change, the color of the tax, this to none. And then we're gonna need to change our navigation. So we're gonna help the about page Brooks page articles contact. You wouldn't need the block tape, So let's delete that all these elements dismiss the Melo closer because Ext a symbol here is more of a We're just going toe at one and what I'm going todo It's just out our logo attempts put. So what's gonna happen here is like I want to start using our character styles. So I wanted to add some quick styles. So I'm gonna our character styles of our quicksand because the plot of the logo said it 20 . I wanted this to be a little bigger, so let's move this to 60. I have to drive. You can do this. Navigational links are kind of spread out now. So what I want to do is just item appear. It's like all the header. Make sure everything's all line centered. Very good. Make sure this is based up a bit. You can see there's not enough breathing room here for the text. I'm just gonna move everything down and I'm gonna a light all our talks together, Perfect. When they did the same treatment for did you transparency. But before we do that, I just want to select the text from the comments teams that to no pro changed the copyright in for you can actually make this evolve bigger. Sets up the tone here. So those are headers and footers near the prototype. How can we go about changing these guys here? Well, I'm just gonna make these a symbol. You call this header her to type? Let's see what happens if I do this. It doesn't carry over. So what's gonna happen is I need to make this assemble again, just for the sake of things being a symbol. Let's see what happens. Because these things have to be a symbol to break the connection from the wire frames symbol must do the shortcut keys to save us all the time. Never gonna move the header because we haven't made a quitter symbol with the foot or symbol. So you can see back in. No, we have to do now. It's still like these guys here. There you have headers and footers off purple typed out on the next video. We'll show you how to start adding our text and our character styles to the rest of the content. See you there 12. Prototyping Text: were there header footer in place. We're going to start working on our character styles for the entire content of our project . Let's get started on the home page. What I'm gonna do here is make this into a nice button. I'm gonna change the sneak peek White, but I'm here. I want to change it in two hours. Content of the Midnight Blue? No, but in now I wanted to change the character style. So remember we said the button would've been this particular character types. Let's do that because it iss darker. I'm going to make it white. I actually wanted to make it slightly bigger. It's not just gonna try like, so more paragraphs, our paragraphs. We're gonna be all in size 14. Select all my care about You can see it's a bit dark So let's see Tom Darker gray color. Here's our sub header. I wanted to say this. It was five office, just a just some of that's facing. I used this big title here. I forgot. It's still connected as a symbol. I'm gonna un group these from their symbols, just like the time when will change this clue need cheese, which is the title of the book, but I wanted it to be slightly bigger. So what? I'm gonna dio iss everything down a bit, its looseness to 60 still bit big, so I'm going to change it to 50. But I'm not feeling the character styles here, So its good this one again. That looks a little better. So it's head back to our previous side. More change. The spacing gold on Spacey to the lines. No, like a hope The Texas reading E. I'm going to be size elements and say, That's what Let's do the same for the header here Changed Mom. Tighter cheese. I'm gonna make it smaller, but I still wanted to match that. So let's just change this. Make this smaller. It's changed buttons. Click on the text of a button that the border itself I want it toe just like call your chosen small title again. Maybe I'll click on this with the other books. The name Small title, This note taker number if you consider her home pages finally been prototype minutes, all nice and neat, and now we can move on to our about page looking on the about page. We want the same type of page hunter similar to the title here. But what I'm gonna do is just at this character style, and I'm gonna say title, you know, we're using quick sent. So I'm just gonna do that now. All I have to do is under group B symbols. Just ask myself if I remember word it. Yeah, so you can highlight the item to see where these items are listed. So I'm gonna change this to some, However, drag it up here, so I know it's my little things. Okay? Yeah, We'll leave that as the proforma vile but her name. You can also copy paste our, um, text. So if you have your file open for our text, that's what we can do. I to coffee our summary. Just paste it in there. Quick blurb. Now we can move on till affects. Callie, It sounds a little more tricky. Did you conceive? Things are kind of, um chicken in oil. Too close for comfort. What I'm gonna do is drag items. Dont just brew some breathing room. Using guides to help me out I'm gonna do is uncovered all these elements in the small titles. I am going to select them all. I want it been told, just like that title here, so I should have just make this into a symbol first. So let's make that into a character styles and movement. Now we can sell it. Small titles, small particulars for two character style. Quote. Pretty simple. Tom cannot one group make sure you do. Making the symbols resize it, but articles contact. So the books gallery is just a bunch of, um, books that often holes written. Let's just make this a little more readable. Previous, it's the border. Remember, articles will have the same treatment. No way have to work on the contact page. Let's look at the cops there. Have contact. I didn't include any graphical elements, but I thought that something we can include just for fun. But it's up to you if you want to include it or not. Let's change. You make it a little picker. He said that Sarah, you know, So let's he's slightly bigger. I'm going there. You have a prototype of our at Web application. Pretty simple. It does take some tedious work, but all in all, it really helped us defy an hour website and what we want to do with it. So up next, I'm gonna show you how to make a working prototype through connection. See you in the next video. 13. Prototyping Connection: with our high fidelity prototypes complete, we can start making the connection to ensure that we have a with our little types. But there are high fidelity prototypes in place. We can start making the connection in terms of how user were navigator website. So let's get started. Let's click on the portal type tabs here. I'm going to be a law not telling navigation. I like only about three. Double quick and see the arrow here. Click and drag be about I'm gonna do the same toe every single item. Top position? Yes. You get the same here. Not here. While the logo will take us back to the home page, I'm gonna to have to slow go. You have to do now. Every once in while we're going to keep on doing this, it for all the other navigation links. Next up, we want to make sure that our connection for our home page Beatles toe the foot gallery. So let's do that. Well, I'm doing here is if a user were to click these individual books, you should be taken to the book page. Despite this being the image for this particular book title, it doesn't really matter as long as we're trying. Teoh, figure out how the connection works. Golden avocation. You can do the same for every. You can also group them back together and then do the collection. I think that's what I'll do back space on that one back together again. Now we can do the connection very well. It's quite a lot of connections, but hopefully it gets the point across because the articles page it wants the link ALS to, uh their party link. We don't have to do any connections if I notice a design issue that we did forget. So if the books were selected would bolster selected page. We want to be able to go back to the books page. So let's go back to her design. Do a quick added feature for our buttons, and this is part of the iteration process. Sometimes when you're building on certain types of what about vacations, you find that certain things are added on later because you didn't think about it or you come across a new idea. Change. This is a little bigger. This is what's considered a breadcrumb have been set up. I'm gonna go back to our credit on the button to the Bucks County. You forgot the button here to say, See all books. What's at another button? What are some things not changing? Oh, no, back to the All right. I think we're ready to test out the little type navigation. So with all the connections we built out, we can click, play and see how everything works out. Here's an issue. I forgot to notify that this was the home page the way you do. Is it quick on the art board name? And you click on the little blink image here that denotes your home page. Start again. Perfect. As you can see, this is our pig. So I want to see what our family usually wants to read about the office and click on the about page percent. Quick blurb Girl. The books page. You should be able to see all the books we have. Artful. See all the article option. Let's go back to the home page. I would say we want to look at all the books will click on that button we want to see. We'll see that. What if we want to see more of the books back And there you have it, guys. One way of designing Web page for a website. More like it. Now it's your turn. Did you design your prototypes? 14. Thank You: thank you so much for taking this course. I hope you learned a lot about what Development Web design. We covered a lot of ground, and I hope you learn enough for you to apply it to your whole future projects. In the meantime, you could follow along with to my courses with the follow button keeping an eye out for future courses. And if you like to learn more about what I do, please visit my website down below. And you can also email me our message that thank you.