Part One

Website Mockup

What is a Mockup?

When we create a mockup, we're planning out how our website looks.

Didn't we do that already?
Sort of...

We previously thought about the layout, what goes where... but not specifically focused on finer details of the aesthetics, like font, font color, background color, the specific header image, etc. When we create a mockup, we're focused on these aspects too. We take our concept for the layout, and include all these aspects.

A mockup is planning out what the final product will look like, and trying to be as accurate to the final product as we can be, without actually creating the final product. I'm going to create a quick mockup in Apple Pages. Yours could be in a different software if you want.

Task, Part 1:
Add a picture of your mockup on today's slide.

Compiled Planning Doc

We have most of what we need now for our planning document for the website aspect of your project. Let's put it together, along with a little extra bit here or there to complete it.

1. Create a new document in your Google Shared Folder,
   save it as "Website Planning", or something similar.

2. At the top of the document, add a heading, it should say something like "Website Planning Doc"

3. Write a couple sentences about the goal of your website. Something like...
   I am creating a game about ... tacos, capybaras, whatever. To accompany my game, I am creating a website to... advertise my game, provide players a guide, whatever. The website will be created using HTML, Javascript, and CSS.

4. Provide a sentence or two about how you've planned out the design of the website, including both the layout with a wireframe and the appearance with a mockup. Provide a sentence or two about how you want the website to feel.

5. Include the image of your wireframe and mockup in your document.

6. Provide a few sentences about what sort of content users will have access to on your website, like what information users will be able to find related to your game.

7. Include the image of your site map.

Task, Part 2:
Add the link to your planning doc on your slide for today.