WebDev1 - Creative Project Kickoff Session

Preparation

Spend a little planning time with your mentor team before this session to make sure everyone is on the same page.

Materials

Paper prototyping
- Paper (blank, lined, or graph paper)
- Pencils
- Colored pencils

Mentor Roles

Choose a mentor to be the activity leader for the day. This person should be comfortable leading the introduction , ideation , and brainstorming activities below, and come prepared to lead the session.
All other mentors should be working with students to encourage, inspire creativity, and also keep them on task. Mentors can also share their real-world experience with prototyping products and ideas.

Student teams

The creative project is an opportunity for students to collaborate in larger teams on a single project. Repl.it has a 'multiplayer' feature, which allows multiple coders to work on the same project.

Think about how you might divide your students into larger teams. You'll want to have team sizes of around 4-6 students.
If you are pair programming, and have an odd number on a team, make sure students are switching pairs frequently so that every student gets a chance to contribute. Also, be aware of how many computers you have available. You won't be able to put three students on one computer.
You might have students that are absent during this session. If this is the case, make sure there is a team for them to join when they come back. Their teammates will be responsible for catching up other students who might be joining late.

Brainstorming rules

Before the session, write the " Rules for Brainstorming " on the whiteboard. If you don't have a whiteboard at your location, you can write the rules on a posterboard, easel pad, or you can print individual sheets to hand out.

Icebreaker / warm-up (10-15 min)

Start the class with an icebreaker or warm-up game .

Introduction (5-10 min)

Explain what the students will be doing over the next few weeks.

Over the last few weeks, you built a website based on requirements that were given to you by a client. Starting today, you're going to make a new website where you get to make your own requirements. You're going to work in bigger teams to develop your website, decide on the layout and user experience, and ultimately, present your work at demo day.

Introduce the project development process

For the purpose of this course, the project development process is a continuous iteration of the following basic steps:

Ideate - Brainstorm ideas
Prototype - Experiment with your ideas on paper or in code
Share - Share your work with others and gather feedback

After sharing, use feedback to go back to the ideation step and start the process all over again. These steps aren't necessarily in order -- sometimes you might need to jump back-and-forth between prototyping and ideation before you're ready to share. Other times you might not require much ideation and can jump straight into prototyping. It's important to know, however, when each step is needed.

Before we jump in, we wanted to show show you a simple project development process' . You and your team will go through this process by brainstorming ideas (website topic, content, layout, etc.), prototyping your work by thinking through your ideas in greater detail, developing your work by drafting the pages/html that you want for your website, and then checking your work and improving it based on what works well, feedback from your team, and feedback from your peers.

We repeat these steps over and over, making steady improvements until we have a presentable website. Also, you don’t have to move through these steps in order. Maybe parts of your website will work really well but you need to go back to brainstorming additional content or revamp an entire page so don’t worry about jumping around some of these development steps, especially as you get feedback from peers and want to make changes as you move through these steps in upcoming weeks.

We’ll revisit the project development process each time we come together as a group to present progress on our projects. We’ll discuss which steps we’ve gone through, where we’re going, and talk about successes and challenges.

Project Requirements

Explain the following project requirements to the students:

Types of websites

Students will put their own spin on one of the following types of websites:

A website for an imaginary business (you can choose your business, the products you’re selling, etc.)
A website for encouraging people to take action on a cause (this could be a community cause that you’re passionate about)
A website that teaches something to the user (this could be about a subject in school, a hobby, or a certain topic about which you’re very knowledgeable)

Technical requirements

Every website must meet the following technical requirements:

A homepage with a navigation menu
At least 3 sub-pages (students may refer back to the Guided Project for ideas)
At least 3 unique and challenging "interactive features" that enhance the user experience (example: google map, slideshow, etc).

On the 3 unique "features", students should be encouraged to find opportunities to learn something new. Often they will uncover these opportunities during the ideation phase, however we will also provide additional challenges in the form of "how-to's" that can be incorporated into any website.

Ideation (25-35 min)

During this ideation phase, students will brainstorm ideas for the website they want to build. Once they've settled on an idea, they will create a simple sitemap that outlines the pages that will go on the site.

Break students into their teams (see top of page for how to do this) and begin brainstorming.

Before we go any farther, let’s divide up into our teams. You’ll work with your team for the rest of the semester on your creative project.

We're going to start brainstorming ideas for the website. As a reminder, here's three ideas for types of websites you could build:

A website for an imaginary business

A website for encouraging people to take action on a cause

A website that teaches something to the user

It may be useful write down the three topics on the board for easy reference during discussion time.

Brainstorming

The purpose of brainstorming is to generate as many idea as possible. Once we've generated lots of ideas, we pick the one we like best. You'll be using brainstorming as a tool any time you need to ideate. To help you out, we have a set of guidelines to follow when brainstorming.

Rules for Brainstorming

Generate as many ideas as possible.
Write down each idea.
Don't stop to judge, question, or criticize. There are no bad ideas.
Build on the ideas of others.
Encourage wild ideas.

Facilitating

Go ahead and give time for small group discussion, and mentors can help answer questions and guide thinking. See if one student would like to volunteer as "the scribe" to write down all the ideas they hear (a mentor can also serve as the scribe).

Students can be flexible on their ideas, as long as the idea incorporates the basics they've learned from the guided project and provides enough opportunity to challenge themselves. Here are some examples that students have done in the past:

A math website with math tips/rules and then like a math test section. it will be broken down by grade level.
A game recommendation website that rates video games based on 10 common characteristics.

Students might decide on features for their website that require technology they haven't learned yet. Don't discourage their ideas too early -- they can always start by "mocking" the functionality in HTML & CSS even if it's not fully functional. If they have time and you have mentors with relevant experience, you can challenge them to add advanced functionality that they haven't learned yet. In doing so, be mindful of how much extra learning might be involved and make sure whatever they do is at least feasible within the available timeline.

Getting ideas from existing websites

During brainstorming, it may help to show existing websites in each category. Allow students to visit these example websites, and begin thinking about which elements apply to their chosen topic:

Imaginary business

Emporium Pies: http://emporiumpies.com/about
Zeus Comics: https://www.zeuscomics.com/

Encourages people to take action on a cause

Unicef: https://www.unicef.org/take-action
World Wildlife Fund (WWF): https://www.worldwildlife.org/initiatives/wildlife-conservation

Teach something to someone

HomeTips: https://www.hometips.com/
GeekCrafts: http://geekcrafts.com/

Feel free to guide students to other websites that fit their topic areas. Students may want to write down notes or their impressions about a website to add to their brainstorming later. Since this is a short review time, we have provided a couple options here but certainly, there are other business/community cause/learning websites out there for review. Please be sure that you are monitoring students while they review websites and that they’re not deviating from suggested website options unless they check-in with a mentor first.

Create a basic site map

An example sitemap

Once students have decided on the general idea, spend time building out a site map.

On a piece of paper, draw a square at the top with the word "Home" in the center.
Think of different pages you'll need on the site and create a new square for each page
Think of what pages will have links to other pages, and draw a line to connect them.

The image on the right shows an example site map. The home page (aka index.html ) is at the top. The 2nd level of pages are called "sub-pages" or "sections". These typically represent what links go on the main navigation menu.

Paper Prototyping (15-20 min)

Rarely is it obvious which ideas are the best ideas. The purpose of prototyping is to experiment with your ideas so that you can test them. Prototypes are meant to be quick and cheap, so that we aren't losing much if we end up throwing it away.

Prototyping a website can be done on paper or in code. Your first prototype, however, will most likely be done on paper. This let's you do a lot of experimentation without having to waste time on code that you might not use. These "rough" prototypes are generally known as wireframes .

On another computer or projector , show students the following examples of hand-drawn wireframes so they can get some ideas of what they can do.

https://speckyboy.com/web-mobile-wireframe-sketch-examples/

Spend a few minutes in your groups reviewing these examples:

We have a few wireframing examples and we can see that people have different preferences or needs when wireframing their website.

Here are a few questions to think about while making your wireframes:

What content does your website need?

How should users navigate your website?

What are the common elements among pages and how should they be presented? (titles, navigation buttons, etc.)

Give each student several pages of sketch paper and tell them each to begin sketching a page. Have them work together and get ideas from each other. This early stage of prototyping is very creative and does include an element of brainstorming, so brainstorming rules still apply.

Just as a heads up, you will continue referencing and refining your wireframes as we move through the rest of the semester. This is continually a work in progress and you can update your content and add new pages to your wireframe as needed. Most likely, you won’t have the time today to outline everything and make it perfect but that’s ok. There’s no rush and we’ll revisit this. As a starting point, I’d like for every group to have their home page wireframe complete before the end of today’s session.

(You can learn more on wireframes here: https://en.wikipedia.org/wiki/Website_wireframe )

Project work plan (as time allows; 15-20 min)

Now that you have made progress on wireframing your website, it will be important to understand how to approach your project: what steps you need to take first, what deadlines are needed to ensure that you have a functional website for demo day, what your research needs are, and which tasks may take more time and efforts (especially related to your creative project challenges).

Take the next 15-20 minutes to spend time on your team's project plan. Work with students to help break down their project into requirements written on a sheet of paper. Requirements are basically the features of your website. These should be specific enough that the students will know exactly what to do when working on that item.

For each requirement, have students rate its effort on a "four-star" scale:

★	tiny: can do within a few minutes
★★	small: can do in around 15-20 minutes
★★★	medium: can do in under an hour
★★★★	large: might take a whole session

Anything larger than four stars should be broken down into smaller pieces.

For bigger groups, you may also need to divide up tasks among team members to ensure that you have a presentable website for demo day.

Once you have a list of tasks, work with students to prioritize the requirements on a new sheet of paper. For example, if a task involves choosing a background image or something "cosmetic", that can be left until the end. For each requirement, you can ask the question "Is this essential in order to demo my website?".

During each session, you can use this list of requirements to keep students focused and on-task.

Students should discuss what content should be completed by the end of each session and outline goals to structure their work (ideally, so that they have a final website by the end of session 12).