[{"_1":2,"_196":-5,"_197":-5},"loaderData",{"_3":4},"pages/Activity.page",{"_5":6,"_7":8},"origin","http://www.mizzen.org","dehydratedState",{"_9":10,"_11":12},"mutations",[],"queries",[13,42],{"_14":15,"_16":17,"_36":37,"_40":41},"dehydratedAt",1755633368093,"state",{"_18":-5,"_19":20,"_21":22,"_23":-5,"_24":25,"_26":25,"_27":25,"_28":-5,"_29":-5,"_30":31,"_32":33,"_34":35},"data","dataUpdateCount",1,"dataUpdatedAt",1755633368076,"error","errorUpdateCount",0,"errorUpdatedAt","fetchFailureCount","fetchFailureReason","fetchMeta","isInvalidated",false,"status","success","fetchStatus","idle","queryKey",[38,39],"activity-collections","featured","queryHash","[\"activity-collections\",\"featured\"]",{"_14":15,"_16":43,"_36":192,"_40":195},{"_18":44,"_19":20,"_21":15,"_23":-5,"_24":25,"_26":25,"_27":25,"_28":-5,"_29":-5,"_30":31,"_32":33,"_34":35},{"_45":46,"_47":48,"_49":50,"_51":52,"_32":53,"_54":55,"_70":71,"_72":73,"_74":75,"_76":77,"_78":79,"_90":91,"_121":122,"_123":124,"_133":134,"_135":136,"_160":191,"_69":46},"id","e923d1e8-3405-4988-823d-2c49bd900532","createdAt","2025-07-28T19:34:48.057Z","updatedAt","2025-08-13T21:05:56.319Z","title","Website Design: Band Sites","PUBLISHED","partner",{"_45":56,"_47":57,"_49":58,"_59":60,"_61":-5,"_62":-5,"_63":64,"_65":66,"_67":31,"_68":-5,"_69":56},"f3c582e9-3453-48bf-a918-5399d6672576","2025-07-28T19:03:42.435Z","2025-08-18T23:55:36.044Z","name","Mizzen Education, Inc.","contact","profilePhoto","logo","13f7c227-1e7b-4390-a552-412ae92cca5e","visible",true,"deleted","slug","slugOrId","overview","Students use wireframe sketches and colored pencils or watercolors to plan, design, and present a new home page website idea for a favorite music group.","duration",45,"gradeFrom",9,"gradeTo",12,"tags",[80,81,82,83,84,85,86,87,88,89],"art","design","design thinking","creativity","music","collaboration","brainstorming","digital literacy","team building","problem solving","heroImage",{"_45":92,"_47":93,"_49":93,"_59":94,"_95":-5,"_32":96,"_97":98,"_99":31,"_100":101,"_102":101,"_103":104,"_105":94,"_106":107,"_108":109,"_110":111,"_112":94,"_113":96,"_114":101,"_115":-5,"_116":-5,"_117":118,"_119":120},"a55e4b67-82f0-49d8-bb29-442442be76c1","2025-08-05T16:45:52.353Z","hero-image-ck7e96akm09ad0713zhjsy3ku","note","ACTIVE","type","FILE","isAttachment","fileUuid","f13efdf4-d493-4be3-bdac-a7f078bdb3e3","fileS3Key","fileS3Bucket","mizzen-platform-asset-uploads-production","fileName","fileExtension","jpeg","fileMimeType","image/jpeg","fileSize",683869,"legacyFileKey","fileAutoThumbnailStatus","fileAutoThumbnailUuid","linkUrl","thumbnailUuid","fileUrl","https://ucarecdn.com/f13efdf4-d493-4be3-bdac-a7f078bdb3e3/","thumbnailUrl","https://ucarecdn.com/f13efdf4-d493-4be3-bdac-a7f078bdb3e3/-/resize/1000x/","template","DEFAULT","categories",[125,129],{"_45":126,"_59":127,"_69":128},"7e195ef1-025e-4a41-94f6-2e85c2c3b4e3","Arts in Action","arts",{"_45":130,"_59":131,"_69":132},"f6e93f23-bfdc-48ae-a780-9480fa2a95e9","Digital Voices","digital-voices","learningStandards",[],"collections",[137],{"_45":138,"_47":139,"_49":139,"_140":141,"_162":163,"_188":-5,"_189":46,"_190":164},"f16d6994-2018-4da3-ba47-61130812cf78","2025-07-28T21:53:08.276Z","activity",{"_45":46,"_47":48,"_49":50,"_51":52,"_32":53,"_54":56,"_70":71,"_72":73,"_74":75,"_76":77,"_78":142,"_143":144,"_145":146,"_147":148,"_149":150,"_151":150,"_152":153,"_154":150,"_155":150,"_156":157,"_90":92,"_121":122,"_123":158,"_133":159,"_160":161,"_69":46},[80,81,82,83,84,85,86,87,88,89],"learningObjective","

Demonstrate knowledge of the steps in design thinking.
Apply the elements and principles of design (color, contrast, line, form, texture, rhythm, pattern, and so on) to create a website design.
Demonstrate skill in creating a carefully crafted, balanced, and composed design product.
Use sketch materials effectively to plan an artistic creation.
Demonstrate effective ways to build consensus.

","materials","

For the whole group:

Smartboard, chalkboard, or chart paper
Access to a computer, tablet, and/or a projector for representing videos and web searches to students

For each small group of students:

Access to smartphones, computers, or tablets for researching images
Pencils and erasers
Graph paper, dot grid paper, plain white bond, or drawing paper
Colored markers or pencils

","preparation","

Read through and familiarize yourself with the entire activity. This activity's planning and sketching phase can be done in 1 session. If time allows for creating, evaluating, and revising complete color poster-size mockups, the activity will need 2-4 sessions.

Gather all materials.

Prepare tables or module areas for small groups to gather, plan, draw or create.

List these design-thinking steps on the board and the elements and principles that apply to this activity:

Step 1. Gather Information/Understand Needs and Wants
Step 2. Brainstorm Ideas/Discuss
Step 3. Sketch/Create

Elements: color, line, shape, value (dark to light), positive and negative space
Principles: balance, contrast, emphasis, movement, pattern, rhythm, variety

Step 4. Evaluate/Revise

Preview the following videos and websites for background information, which you may share and discuss during the activity.

Top Ten Favorite Musician Websites with Stunning Visual Appeal

33 Great Examples of Web Design Sketches

The Awwwards

What Are Wireframes?

","worksheets","","multimedia","steps","

Tell students to think of their favorite bands. Ask them if there is a band that is not as well-known that deserves greater visibility.
Tell students that they will be coming up with ideas for a new website home page for this band by following the design-thinking steps listed on the board. Explain that they'll be creating wireframe sketches using colored pencils or watercolors.
Step 1 involves gathering everything needed to fully understand a design task. Discuss the purposes websites serve for bands. (To make announcements, promote products, connect with fans)
As you show students examples, ask them to notice lines, font shapes, colors, and composition. Ask them to consider balance and lettering or fonts. Ask what they think makes the website attractive.
Students can choose to work individually or with like-minded friends. Ask them to pair up so they can talk about ideas and get suggestions.
Before they begin, remind students that in brainstorming, it is important to think of unusual ideas. Remind students not to react negatively to new ideas.
Have students choose an idea and do some sketches. Circulate and ask students questions. Praise the use of design elements and principles, craftsmanship, creativity, and effort.
If time allows, lay out all the sketches on a big table and have students describe their ideas to the rest of the students to get feedback and more ideas.

","examples","versions","variations","

Students can move to the next steps and create full-color mockups or poster-size designs with actual photographs.

",[126,130],[],"facilitationTips",[],"collection",{"_45":164,"_47":165,"_49":166,"_97":167,"_51":168,"_32":53,"_54":56,"_169":170,"_72":171,"_74":75,"_76":77,"_172":-5,"_90":173,"_181":31,"_39":31,"_78":182,"_187":-5,"_68":-5,"_121":122,"_69":164},"f7cb177c-8b5d-4ce9-bb94-02b68424a7c6","2025-07-28T21:53:08.275Z","2025-08-05T18:16:46.528Z","PLAYLIST","Real World Arts & Design","introduction","Students go through a variety of fun arts and design activities that have real world applications.",280,"updatedBy",{"_45":174,"_47":175,"_49":175,"_59":176,"_95":-5,"_32":96,"_97":98,"_99":31,"_100":177,"_102":177,"_103":104,"_105":176,"_106":107,"_108":109,"_110":178,"_112":176,"_113":96,"_114":177,"_115":-5,"_116":-5,"_117":179,"_119":180},"c9142933-b435-488a-8a9d-cd99132be7f6","2025-08-05T18:16:46.405Z","hero-image-ck84qcxbe63x90713b1aqx05m","401655bb-0b2f-4c6a-95da-4a4cbf235a9e",652887,"https://ucarecdn.com/401655bb-0b2f-4c6a-95da-4a4cbf235a9e/","https://ucarecdn.com/401655bb-0b2f-4c6a-95da-4a4cbf235a9e/-/resize/1000x/","hideListing",[80,83,81,82,183,89,184,185,186,85],"visual art","skills development","career awareness","communication skills","exploreOrder","order","activityId","collectionId",[],[193,46,194],"activities","preview","[\"activities\",\"e923d1e8-3405-4988-823d-2c49bd900532\",\"preview\"]","actionData","errors"]

Website Design: Band Sites

Website Design: Band Sites

Website Design: Band Sites

Overview