182.61 KB, image/png
133.58 KB, image/png
144.46 KB, image/png
180.77 KB, image/png
618.93 KB, image/png
2.17 MB, application/zip
We need an illustration for each activity in the initial 7 teaching kits. Thumbnails for the kits (just so whomever ends up assigned can see them all) are all on this page: https://mozteach.makes.org/thimble/how-to-use-the-hacking-guides Best bet is to quickly scan each activity. We'll be editing, so I'm only including those that won't drastically change: Thimble http://hivenyc.org/ThimblePrototype/ib_strongwind_thimble.html http://hivenyc.org/ThimblePrototype/su_internetdefense_thimble.html http://hivenyc.org/ThimblePrototype/hh_evilTwin_Thimble.html Popcorn http://hivenyc.org/PopcornPrototype/ib_storyrules_popcorn.html http://hivenyc.org/PopcornPrototype/su_hackvideo_popcorn.html http://hivenyc.org/PopcornPrototype/hh_culturalheritage_popcorn.html Online Storytelling http://hivenyc.org/storycamp/week01/ib_spectrogram_popcorn.html (Cassie did one for this, not sure if we're sticking with that style or not) Revolutions in Media http://hivenyc.org/storycamp/week02/ib_mediamesh_popcorn.html http://hivenyc.org/storycamp/week02/su_commercialremix_popcorn.html http://hivenyc.org/storycamp/week02/hh_radiointeractive_popcorn.html Remix http://hivenyc.org/storycamp/week03/ib_genderremix_popcorn.html (this may be something we remove here and put in the upcoming Gender Studies Kit. But I'm not sure yet) http://hivenyc.org/storycamp/week03/hh_streetjourno_popcorn.html Ways of the Web http://hivenyc.org/storycamp/week04/su_howto_thimble.html Make it! Share it! http://hivenyc.org/storycamp/weeks05and06/ib_collaborativeMindmapping_popcorn.html http://hivenyc.org/storycamp/weeks05and06/su_plantutorial_popcorn.html http://hivenyc.org/storycamp/weeks05and06/hh_buildinghowto_popcorn.html Reuse as many elements as possible (so the Mentor team can build new illustrations later). We have more kits in the pipeline. Finally, assigning to Cassie so she can reassign if need be.
@ Cassie: i believe you had some illustration ideas for Chris A. as well. Should we batch them all together?
@ Cassie / Chris / Laura: what's the status of this one?
(In reply to Matt Thompson (@OpenMatt) from comment #2) @Matt I haven't heard a word about this...
@ Cassie: do you still have illustration requirements for Chris as well?
@Matt as far as I know the only illustration req I've seen is to produce three graphics for https://webmaker.org/event-guides I don't think there's a bug for that yet, but probably belongs as a separate issue. I will file that. -Chris
I was holding on talking to Chris about this until the activity kits were finalized, then we'll have an idea of sizes we'll need.
(In reply to Cassie McDaniel [:cassiemc] from comment #6) just checkin' in on this one. Maybe the first thing to do is to make a default activity illustration (more generic than the one used for spectrogram in bug 891565) so that we always have a default we're happy with & don't get blocked b/c an illustration isn't ready yet?
Hey guys, I'd suggest waiting til the activity kits are finalized before coming up with a generic illustration for all of them. That graphic will help differentiate the kits from one another; whereas if we use a generic graphic for that space, it will unify all of them, and make them seem similar. As a user experience, that would probably get a bit stale, for people who are browsing multiple activity kits, and seeing the same image over and over (since it wouldn't tell them anything new, while taking up a good amount of real estate on the page). I can also see the value in not having illustration as a blocker -- but in terms of creating a nice product for the user, it's probably worth taking some extra time with it (we'd just need to be smart about resourcing for that); or adjust the design so that it doesn't hinge on that image. Just my 2-cents for now -- happy to circle back once the activity kits are finalized! -Chris
definitely agree we should not have a single illustration for all activities, I was suggesting starting with a default to use as a placeholder (so that in the future, I can publish kits without waiting for an illustrator to have time ;) Our deadline to relaunch the /teach page with the new kits is August 1st. Based on the design, it doesn't seem like the illustration absolutely HAS to be there (title and text would just move up). @Chris – with >or adjust the design so that it doesn't hinge on that image. are you saying that you think this design NEEDS the image?
I guess my point is that if we launch a bunch of kits with placeholder images, it doesn't signal to the user that the kits are fully-baked, and if they see that over and over, they lose a bit of faith in the offering. I'll let Cassie speak to whether or not we need the image in that design. But if we lose it and just move the title and text up, I would argue that counts as a different (yet similar) design. Also, I've only seen the design so far based on the Spectrogram in bug 891565, so apologies if that's not the latest being discussed. -Chris
I say let's get started on them now, Chris, if you can find the time. I didn't know August 1st was a deadline. The designs are finalized enough (yes bug 891565) to get started. Chris/Laura/Matt should work closely as content is being developed, so everyone is aware of what (if anything) in the above listed activities will be changing. Re. the links listed in the Description, I see 15 activities listed under 7 kits. It's confusing just to have them as URLs, so Laura, can you list the explicit names of the activities, prioritizing those that will definitely be included in the update? (Would be the worst for Chris to spend time on ones that may get scrapped.) Is 15 the right number? Seems a bit high for a # of illustrations to be created; 10 might be better if that's possible. Chris, we'll need to consider how / if Laura will be able to reuse components for future illustrations. Let's put our heads together on this one. I'm leaning towards this not being a requirement, as I'd like a stronger design review process on mozilla-created content anyway, and that involves a designer taking a look and contributing any necessary assets.
>Is 15 the right number? Seems a bit high for a # of illustrations to be created; >10 might be better if that's possible. At the moment it's 17, and those are just ours. We also have the 3 NWP kits. Maybe we should consider a default illustration of some sort? Maybe several defaults based on group size or something? No individual illustrations? More conceptual illustrations that we can reuse? I don't feel like there HAVE to be different illustrations on every single activity (it's nice, but it's not a deal breaker). HOWEVER, just for the record, this is UPFRONT work (you'd never get a pile like that again, you'd get "Can you make me 2 illustrations for X?" Thoughts? >can you list the explicit names of the activities, prioritizing those that will definitely be included in the update Hard to prioritize but: Spectrogram A Strong Wind Blows Media Mesh Hack the Web (with Thimble) Hacking Video (with Popcorn) Cultural Heritage Remix Make it Interactive Hack a Commercial (remix context) Make your own how to Collaborative Mindmapping Paper Prototyping and Schematics (plan the tutorial) Building a How-to (with popcorn) Localize it (street level journalism) Internet Defense League Alter Ego/Evil Twin Write the Rules Make a Mashup (Gender Remixer) >I'm leaning towards this not being a requirement, as I'd like a stronger design review process on mozilla-created content anyway If the components are reusable, we can at least play a little with illustrations before we send things to review. Plus, it's fun for us to fiddle, even if it does get trashed :)
(In reply to Laura Hilliger [:epilepticrabbit] from comment #12) > Maybe several defaults based on group size or something? No individual > illustrations? More conceptual illustrations that we can reuse? I like this strategy, and it would make sense long-term. Chris, what do you think? It seems like it would be hard to do unless there was a specific way of sorting each activity into a category... group size is definitely an option. Currently, "Large group, Small group and Single learner" are potential distinctions based on teaching kit tagging (https://etherpad.mozilla.org/Teaching-kit-tags). > If the components are reusable, we can at least play a little with > illustrations before we send things to review. Plus, it's fun for us to > fiddle, even if it does get trashed :) Fair enough! Ideas and play are *always* welcome. You can always send sketches and ideas, though, without having to work with vectors. It just saves us some time on the illustration-planning side and ensures we don't skip the design review process. Thanks for the list.
I like the strategy too. In terms of organizing principle, I'd suggest something that reflects the nature of the activity a bit more closely (not sure group size is the most interesting categorization) If we were to classify each activity based on their purpose, would we have a diverse enough taxonomy to be useful? i.e. discussion starters, etc, etc What other groups would there be based on that? -Chris
Mozilla Teaching Kits have 3 types of activities (shhhh don't tell anyone there's actually an educational model underpinning these!) Maybe we can make an illustration for each type: 1) Icebreaker: An introductory activity gets the blood pumping, forms connections between learners, and introduces a topic. 2) Explanatory Activity: gives pointed instruction to participants on tools or procedures. An example would be allowing the participants to get used to the interface of Thimble or Popcorn by having them make projects. Before learners can practically apply new skills, they need to be comfortable with the tools they'll be using and have a basic understanding of the skills they'll be sharpening. 3) Exploratory Activity: A practical, project based activity allows learners to delve deeper into the essential questions and allows them to explore a topic or theme with more specific design constraints than the 2nd activity type. Finally, it would still be nice to have a couple illustrations dotting the steps. See, for example: http://hivenyc.org/storycamp/week01/hh_culturalheritage_popcorn.html and imagine it without any images [sadface] The prototypes reused several elements (eg large group, small groups are in there), changing color based on tool. Large Group: http://hivenyc.org/storycamp/static/step01_group.png Small Groups: http://hivenyc.org/GogglesPrototype/static/step01_small_groups.png Perhaps we could do redesigns on some the illustrations from the prototypes? Even though they don't match our style, these illustrations don't suck. They teach you how to dance:) http://hivenyc.org/GogglesPrototype/static/ib_goggles/step02_dancecardRobot.png
I really like grouping the illustrations around the 3 themes: 1) Icebreaker 2) Explanatory Activity 3) Exploratory Activity As discussed in the cross-team call today, illustrating the steps is a bit out of scope for now. These smaller illustrations can always be reused for the time being. Chris, is this enough to get started? FYI, the Aug 1 deadline does not apply to the activities templates or to these illustrations. We do want them as soon as possible, but for Aug 1 we are going to simply use the Teaching-Kit template, rehacking that template as necessary since the build is almost finished.
Created attachment 783833 [details] activity-guide-illustration-ideas.png Hey guys, Here's what I'm thinking for the Activity Guide illustration ideas. Let me know what you think, and I can adjust or refine to make them fit with the current design.
Love it! I like the sketchy style too. I know this is just a sketch, so feel free to explore other aesthetics, but that's along the lines of what I was thinking to get across the "kit" feel. The only one I might say could use more iteration was the "explanatory." Feels like the same wiggly lines as on exploratory, though I like the 1/2/3 aspect of it. Is there a way to differentiate the two a little bit more? Am also wishing we had different words for "explanatory" or "exploratory" – I constantly read them as the same thing.
Hey - not sure we should include those words at all, actually. It's jargony. We had them as: Icebreaker Diving In Hands on Hacking but Matt said it was confusing to have different activity types. These three are probably better than "explanatory" and "exploratory" though. WE know which activity falls in which category, WE follow this particular model with our curriculum, but you don't have to...so maybe we shouldn't name them. Thoughts? Does it work without words?
* These are awesome! * +1 with Cassie's point about the squiggly arrows on "Explore" * Copy. Agree with Cassie and Laura -- let's not use those words. Or over-rotate on what the perfects terms are for this -- the images work on their own, anyway, so let's set aside the copy and just focus on the underlying concepts. Which these images already do really well. * One question: could we add a fourth image for: "making?" * reason being: the basic story we want to tell in general -- and we can use these images to tell that story in multiple places, beyond just these activity kits -- is: * 1) Break the ice. Get peoples' blood pumping. Get creative juices flowing. * 2) Explain. Outline the steps in the process. "Here's how to make a birdhouse." * 3) Explore. "Try using a saw for the first time. Cut something." * 4) Make. "Now make your own birdhouse!" Ta da -- here it is! * I'd love to have an image for (4) as well.
Hey all! Glad you like the direction! I think it might be helpful to include the category type, since that will help the user understand how we're classifying these activities and how they can best leverage them in that pattern that Matt outlined above. Agree we shouldn't over-rotate on finding the perfect name before we commit to the illustration, but I think it will be helpful if we can make sure the naming conventions align with the subjects of the illustration. I wonder if we could use the labels Matt used above? i.e. Break the ice Explain Explore Make (agree this is helpful -- will we have guides that support this one, under the educational model Laura and team are following?) Would that work with the content we have ready? Oh, and while we're at it, should we talk about L10N, and how these illustrations can work with (or be re-purposed for) pairing with the translated categories as well? Or is that a whole other can of worms? -Chris p.s. let's brainstorm where else we might use these images to insure we can make them useful for purposes beyond the guides as well.
Also, Matt -- thanks for the examples you mentioned above. They should help add some evocative imagery to the diagrams that will help tell that story better. Thanks Cassie and Laura for the feedback too -- I agree about differentiating the approach between 'explain' and 'explore'. I'll send some updated sketches over shortly! -Chris
Love how this is developing. Feel like the 4 areas are well differentiated and make sense together, too. I am still not sure we need to include the words/labels, just wanted to clarify for practical purposes as we discuss and name them. Mainly, as Chris brought up, for localization purposes, I'd really like to keep graphics language-agnostic. We could include text in the image dynamically, but that's more work I think we should try to avoid at this point. I wonder if these could or should be surfaced on the templates overview page (bug 897648) - so the activity template is actually four templates each with a different header image (or is that overcomplicatng things - is there a simpler way of letting them choose their header image?). The design in bug 897648 may need some adjustment.
No. Please don't make a 4th one, that's not the model. The education model we use at Mozilla is icebreaker, explain, explore. Icebreaker = introduce a topic/get people warmed up Explain = make without strict purpose to learn the tools, processes or procedures Explore = make with purpose, explore the topic and the tools processes or procedures together.
Also, I happy to explain this more wordy-like.
(In reply to Laura Hilliger [:epilepticrabbit] from comment #24) > No. Please don't make a 4th one, that's not the model. The education model > we use at Mozilla is icebreaker, explain, explore. > > Icebreaker = introduce a topic/get people warmed up > Explain = make without strict purpose to learn the tools, processes or > procedures > Explore = make with purpose, explore the topic and the tools processes or > procedures together. * So... is "explore" the same as "make?" Three steps is better than four. So if "explore" is the same as "make," that would help simplify.
(In reply to Cassie McDaniel [:cassiemc] from comment #23) > I am still not sure we need to include the words/labels.... for localization purposes, I'd really like to keep graphics language-agnostic. We could include text in the image dynamically, but that's more work I think we should try to avoid at this point. big +1
(In reply to Cassie McDaniel [:cassiemc] from comment #23) > I wonder if these could or should be surfaced on the templates overview page > (bug 897648) - so the activity template is actually four templates each with > a different header image (or is that over-complicatng things - is there a > simpler way of letting them choose their header image?). * Can we un-couple these two things for now, in the interest of simplicity? We can always iterate later.
>* So... is "explore" the same as "make?" Three steps is better than four. So if "explore" is the same as "make," that would help simplify. Both Explain AND Explore follow the Making as Learning educational meme. BOTH are "makes". As i said, "explain" is a make without strict purpose and explore is a make with specific purpose. 1) Break the ice and introduce the topic of the day. Get peoples' blood pumping. Get creative juices flowing. Frame things. "This is a bird house, and these are the tools we're going to use today." 2) Explain. Outline the steps in the process. Play with the tools. "Here's how to make a birdhouse. Here, cut this piece of wood to practice." 3) Explore. "Now make your own birdhouse! It should be a rectangle, blue and have a flat roof."
Hey guys, This sounds like a good conversation and I think we're close to nailing the direction. I just want make sure the naming conventions align with the subjects of the illustration, so it would be helpful if we can settle on a general direction. I think "Icebreaker", "Explain", and "Explore" work well with the imagery we've started with, whereas "diving in" and "hands on hacking" would benefit from a different image. Sounds like we're all good to go with Icebreaker, Explain, and Explore -- you guys cool with that? -Chris
@Laura I like those descriptions!
(In reply to Chris Appleton from comment #30) Yep! And +1 to language agnostic images. I'm fine with these illustrations without the words. We can explain the illustration choice in the pedagogy documentation (by using them to punctuate that part of the how to).
* Ok cool -- I get it now. Thanks Laura! * @ Chris: re: a new or different image for those other categories -- can you create one that is more explicitly *make* focused? * We want to telegraph that moment of accomplishment where you come away with that shiny new birdhouse you just created.
Hey guys, Here's what I'm thinking for the illustrations. I've added some extra details to add some of that evocative imagery you guys were using in your descriptions. I've attached blue versions here, as I feel it sits nicely on the page, but I've also included red versions in the .zip folder for comparison. Feel free to choose the one you like best. or let me know if you want any other colours. I've sized them at 265x400px to fit within the current dimensions allotted for the graphic based on the activity guide comp in bug 891565. Let me know what you guys think! -Chris
I love these
Hey Chris! These are *awesome*! Love! Can you share the vectors when you get a chance? Or do you have this at higher-res? Would like to save at double the res for retina displays. We also need to match the blue :) My only niggly is that they aren't *quite* horizontal enough for the layout. I'm actually going to see if I can adjust the layout a bit, as Dale said it's easy to change and since you're away. We are aiming to wrap up the /teach stuff by end of next week (the 9th).
Are these done? Anxious to start using them cuz they're awesome.
Chris, After putting these in the templates, I do have an additional request: * I think the Icebreaker illustration could be more differentiated from the other two, potentially by making it more people-focused. Feels like a mix of the two others, when it should be pretty different. * I don't feel bad SO bad about asking you to make changes there (even though the illustration totally rocks) because I have two reasons! We need the Icebreaker one to be more horizontal. This is my bad, I never gave you dimensions, but putting it in the page as is means it pushes the other content down much lower and that is not ideal. Can you make it more around 550 wide x 175 tall? Also, vector versions when you get a chance – or at least higher res so we can save out for retina display. Hoping to finish these off early next week when you're back from Vacay. Thanks!
@ Chris: I believe we finished these -- but can you paste links for the completed graphics here? thanks!