Search Menu


This site is available only to JEA members. Please log in below.

Creating a website mock-up


In this lesson on developing prototypes for web development, students will work collaboratively to establish the goals for their website and establish some goals for their theme, content, and use of media within the website (along with use of social media).

To review some design basics before creating a website mockup, please visit the “Principles of design basics” lesson to review some design basics.


  • Students will explore visual aids such as sample WordPress websites and possible themes (free and paid) that students can utilize to create their website.
  • Students will understand the basics of how to create a website sitemap (navigation for the website) that is both visual to represent their ideas, but will also organize the information and concepts so that anyone on a journalism team could decipher where the content, photos, and videos will go on the website.

Common Core State Standards

CCSS.ELA-Literacy.W.9-10.2a Organize complex ideas, concepts, and information to make important connections and distinctions; include formatting (e.g., headings), graphics (e.g., figures, tables), and multimedia when useful to aiding comprehension.
CCSS.ELA-Literacy.W.9-10.2b Develop the topic with well-chosen, relevant, and sufficient facts, extended definitions, concrete details


50 minutes


Berkeley’s School of Journalism Resource Tutorials:

Access to the Internet to show WordPress sample themes: and

Access to login to a WordPress website to show to add text, photos, change navigation, CSS code, change HTML and customize for your online website

*Once you have decided on a theme to use for each website, students have options to utilize the “free” WordPress website, or consider hosting the website in order to customize and add additional functionality to the website. See the hosting options lesson for more information.

Lesson step-by-step

1. Think-pair-share — 10 minutes

Students will work on defining goals for their website using the following activity:

  • THINK: Students should write down three goals for their website.

(Students can either utilize post-it notes, lino (online or an iPad app), or an interactive whiteboard like the website/app Baiboard.)

  • PAIR: Students will find another classmate and share their ideas with their classmate and compare if the ideas are the same or different. Students should also ask one another if more information is needed to clarify the goal.
  • SHARE: As a group, students should share their ideas and also talk about whether their goals will 1) appeal to their audience (who is their audience? 2) If the goals are attainable? 3) If the goals match the goals for any other publication.

For this discussion, questions you might address include, but are not limited to: What rules need to be in place? What is the workflow to add content? Will you repurpose content within the website, or will there be teasers that will entice the audience to the other publications? Be sure to pause and give ample time for students to think and respond. Embrace the uncomfortable silence!

2. Explore — 15 minutes

Students should explore a variety of websites in the showcase featured on the WordPress website. If your school happens to block WordPress, below is a list of a few school websites that you can analyze.

To prime to discussion about the design of the websites below, instruct students to examine a variety of categories for each site, including but not limited to: Navigation/Topic Categories, Color Schemes, Fonts, Format of Online Newsmagazine, Photos, Videos, Use of Social Media, Integration of Audience Voice (Comments/Twitter Feed), and Use of Video

3. Present — 20 minutes

Student pairs should present their findings. Based on what they found, what must be included on a journalism website?

Must have elements on the website.

  • Photo credit
  • Bylines
  • Editorial Policy
  • Links to archived stories
  • Links to archived magazines
  • Twitter feed
  • Other publications (yearbook, broadcast)

What is your online policy to publish student work/photos of work? (i.e., Releases to add student photos online)

Editorial Policy

OLHS online as well as The CANNON and The Silver Bullet are independent publications of Olentangy Liberty High School, 3584 Home Rd., Powell Ohio, 43065.

The CANNON is a student-run newsmagazine produced using Microsoft Word and InDesign. The Silver Bullet is a student-run yearbook produced using Microsoft Word, Adobe Indesign and Photoshop.

The purpose of this website is to provide a forum of expression for the students of Olentangy Liberty High School. It also serves to provide information, entertainment and commentary from Olentangy Liberty students on matters of school, local, state, national and international issues, with emphasis on local and school issues.


Readers may respond to The CANNON content and other issues through Letters to the Editor. Letters may be mailed or dropped off in Room 2223.

An honest attempt to print all letters, regardless of the views or opinions expressed, will be made. Letters must be signed, and any letters which are judged to be libelous, obscene, materially disruptive to school or an invasion of privacy will not be printed. The editors reserve the right to edit all letters.

Editorials or opinion columns representing the views of individual CANNON staff members carry bylines. The views in opinion columns do not necessarily reflect the opinions of The CANNON staff, the high school faculty or the administration.

Accuracy is a major goal of The CANNON; therefore, major errors will be acknowledged and corrected in the next issue.

The CANNON newsmagazine may be purchased 11 times a year at Olentangy Liberty High School or by mail subscription for $35 including postage.

Advertising can be purchased in The CANNON by calling The CANNON Advertising Manager at (740) 657-4271.

The CANNON and The Silver Bullet are members of the Ohio Scholastic Media Association and the Journalism Education Association. The adviser is Tracey Ward.