Mock Up Tools

Transcript

After investigating a couple of websites, I now have some really good ideas for mine. But I'm still not exactly sure what I want the pages on my site to look like. I'm going to use a mockup tool so that I can experiment with different looks. Mockup tools make it easy to create a basic version, or mockup of what you want your page to look like. I'm going to use a mockup tool called whimsical.com. This area is what we call a page, you can simply drag and drop elements from the elements pane to your page elements or like tags in your HTML. I'll drag a rectangle from the elements pane to my page. This might be a section or a header or some other tag that groups content, I can easily resize it, or drag it to a new position on the page.

You'll notice that the elements pane has a whole bunch of other elements like labels, text boxes, and so on. You can experiment with the other elements later. But for now, we'll use text elements for paragraphs, labels for headings, rectangles to group content, and images for images. And I'm going to mockup the plant gallery first because it should be pretty straightforward. Some of the things in my mockup will be based on the layout from save our water calm. layout is the way content is arranged on the page and how much space that content takes up. Save our waters layout has a nice white bar for the navigation and the logo.

This spans 100% of the width of my page. In my mockup, I'll add a rectangle element to the top that takes up 100% of the width of my page. Instead of adding a logo for my site to the far left and the links to the right, I'll make my navigation a little different. I'll add the logo for my site and put my three links below it. I'll add three links because I want my website to have three pages. Here's my first link home. The second about me and the third gallery. I also liked another part of save our waters layout.

This part has three columns and one row, and the content is centered in the middle of the page. Each section only takes up about 20% the width of the page. In my gallery, I really want the plant pictures to stand out. So we'll make sure my sections take up more space. I'll go back to my mockup and add a rectangle for the first section. each rectangle will take up a little less than half of the width of the page. Inside the rectangle, I'll put an image element, the image element has little placeholder picture over it.

Right below the image, I'll put a label to represent a heading. To make the label for my heading standout, I can select it and use the font pane to increase its font size. below my label, I'll put a text box with some placeholder text. I want four sections just like this one, so I'll select the whole section. And then I'll copy and paste it three times using the shortcuts Ctrl C and Ctrl V. Finally, I really liked that footer at the bottom of save our water. It had links to the other pages on the website. This makes it easy to go to different pages from the bottom of my page. To complete my first mockup, I'll add a rectangle to represent the footer and resize it to take up the full width. Then I'll add three links.

But I'm going to put mine all in one row. Below the links, I'll add a little bit of text to let everyone know who made the website. The markup for my gallery is done. It might not seem like it at first, but mockups save you a ton of time. mockups allow you to experiment with different sizes, positions, shapes and colors quickly. This can be tricky if you code the changes with HTML and CSS. You might spend hours just trying to position an image in just the right place only to find out that you don't even like the way it looks in the end. So go ahead and get to mocking up.