891565 - Design a webmaker.org-styled Thimble template for teaching activities

Status: RESOLVED FIXED

(Webmaker Graveyard :: webmaker.org, defect)

Description

[Cassie McDaniel [:cassiemc]]

This was begun in Bug 888272 but warrants its own to-do.

Activity
* How does this look without an illustration
* Quick overview should include:
  How long it takes
    15-30 min
    under an hour, 30min - an hour
    1 hour +
  What is the setup / Audience?
    entire room, small groups, individual
  materials
* Will be moving forward with blue background, 2 column layout (http://cl.ly/Q8sy)

Comment 1

[Cassie McDaniel [:cassiemc]]

Attachment: Activity template v2

Here's an updated activity template design. Removed the "quick overview" area up top, added how long, how many people, and grouped those as tags so they are searchable, as in the kit tutorial.

Cade, does the Make API support multi-word tagging at the moment? I believe I filed this as a bug last week. We might want to tag something "15-30 minutes" for example.

Chris A, we may engage you to create some awesome illustrations for us for these activities (those red scribbles at the top), depending on the amount of work required... In the meantime, could you review the design for me? We can talk things over tomorrow if that's easiest.

Comment 2

[Chris DeCairos (:cade)]

(In reply to Cassie McDaniel [:cassiemc] from comment #1)
> Cade, does the Make API support multi-word tagging at the moment? I believe
> I filed this as a bug last week. We might want to tag something "15-30
> minutes" for example.

I'm not sure if it will. I'll investigate.

Comment 3

[Cassie McDaniel [:cassiemc]]

(In reply to Chris DeCairos (:cade) from comment #2)
> (In reply to Cassie McDaniel [:cassiemc] from comment #1)
> > Cade, does the Make API support multi-word tagging at the moment? I believe
> > I filed this as a bug last week. We might want to tag something "15-30
> > minutes" for example.
> 
> I'm not sure if it will. I'll investigate.

Chris, I'm adding this comment to bug 890323, we can track tagging nomenclature progress there. Thanks!

Comment 4

[Chris DeCairos (:cade)]

See https://bugzilla.mozilla.org/show_bug.cgi?id=890323#c2

Comment 5

[inactivate account for kate]

Comment on attachment 772902 [details]
Activity template v2

- Love the use of <strong> to emphasize key words/actions in steps. We should call that out for people making activities.

- I really the idea of having times/groups be tags so they will be search-able/used for filters, but I'm not sure we can properly support tags with spaces. We should check that.

- Grey outline on green background for bullet points looks pretty weird. Personally I like using Webmaker green darkened by 5 or 10 per cent.

- The subtitle at the top would look better with a manual <br> somewhere -- that could be documented in the styleguide

- Again, the print button is not very noticeable/far away from other action areas

-

Comment 6

[inactivate account for kate]

Comment on attachment 772902 [details]
Activity template v2

Also, whoever is implementing should make sure to check bullet point styles for double-digit numbers

Comment 7

[Cassie McDaniel [:cassiemc]]

(In reply to Kate Hudson (:k88hudson) from comment #5)
> Comment on attachment 772902 [details]
> Activity template v2
> 
> - Love the use of <strong> to emphasize key words/actions in steps. We
> should call that out for people making activities.

Right now instructions for makers will be incorporated into code comments. Not the best solution long-term, but will work for MVP.


> - I really the idea of having times/groups be tags so they will be
> search-able/used for filters, but I'm not sure we can properly support tags
> with spaces. We should check that.

This is being sorted in bug 890323.

> - Grey outline on green background for bullet points looks pretty weird.
> Personally I like using Webmaker green darkened by 5 or 10 per cent.

I'm not sure what you're talking about here. Can you screenshot so I know which part you're referring to?

> - The subtitle at the top would look better with a manual <br> somewhere --
> that could be documented in the styleguide

Agreed. We should comment this in the build.

> - Again, the print button is not very noticeable/far away from other action
> areas

Fixed and made consistent with the new Teaching Kit design.

I've also updated tags, the numbers, the check list, icons next to the boxes, and have designed On states. Will add attachments shortly.

Kate, let me know what you meant by the bullets / outlines / green background...

Comment 8

[Cassie McDaniel [:cassiemc]]

Attachment: Activity template v3

Finalized activity template, more consistent now with the teaching kit.

Comment 9

[Cassie McDaniel [:cassiemc]]

Attachment: Activity template v3 On states

Comment 10

[inactivate account for kate]

For the bullet points/check boxes, I just meant the borders around each checkbox here: http://dl.dropboxusercontent.com/u/29163874/Screenshots/jg.png
but I think what you ended up with (green on light background) works better anyway

On states look good!

Comment 11

[Laura Hilliger [:epilepticrabbit]]

what is the appropriate size or format for individual images in the steps of an activity? Should the image be aligned left or right?

Comment 12

[Laura Hilliger [:epilepticrabbit]]

Cassie requested I link bug 895416

Comment 13

[Cassie McDaniel [:cassiemc]]

(In reply to Laura Hilliger [:epilepticrabbit] from comment #11)
> what is the appropriate size or format for individual images in the steps of
> an activity? Should the image be aligned left or right?

We'll have to update the mockup for this. Will try to do this in the next couple of days.

(In reply to Laura Hilliger [:epilepticrabbit] from comment #12)
> Cassie requested I link bug 895416

Did I? Aren't I clever! :) When possible maybe you can remind me where I said that (call? etherpad? irc?) Thanks!

Comment 14

[Laura Hilliger [:epilepticrabbit]]

>Did I? Aren't I clever! :) When possible maybe you can remind me where I said that (call? etherpad? irc?) Thanks!
You asked in IRC, I believe so you could take a look at the content that would require images. This is actually just an etherpad at the moment, but the meeting revealed the "Oh crap, we better put in a way for people to add images to steps!" design issue.

Sorry for not catching this sooner!

Comment 15

[Cassie McDaniel [:cassiemc]]

Oh, beautiful, I didn't realize that's what this was. Thanks!

Comment 16

[Cassie McDaniel [:cassiemc]]

Attachment: activity-template-v4.pdf

This version incorporates photos into the steps - showing what it might look like with photos on all the steps, on some of the steps, and on none of the steps.

Have also removed the dynamic functionality such as the gravatar and the language section (which should be visible in the make details bar).

I won't be creating print or mobile styles for this page, as Dale said the ones for the teaching kit template should help and if he has questions, we can work it out IRL. So this is the last review before I close this bug, woot!

Comment 17

[Cassie McDaniel [:cassiemc]]

Oh, I also updated the Discussion icon.

Comment 18

[inactivate account for kate]

Comment on attachment 781051 [details]
activity-template-v4.pdf

Looks good, alignment seems off to me here though: http://dl.dropbox.com/u/29163874/Screenshots/kd.png

How does this work for a single-line step? Might want to consider aligning number to baseline instead

Comment 19

[Laura Hilliger [:epilepticrabbit]]

Looks nice Cassie. Can you give me the dimensions for that image? Chloe is prepping the Games images for the Aug first launch (even though we may launch with the kit template!)

Comment 20

[Cassie McDaniel [:cassiemc]]

(In reply to Kate Hudson (:k88hudson) from comment #18)
> Comment on attachment 781051 [details]
> activity-template-v4.pdf
> 
> Looks good, alignment seems off to me here though:
> http://dl.dropbox.com/u/29163874/Screenshots/kd.png
> 
> How does this work for a single-line step? Might want to consider aligning
> number to baseline instead

Not sure which alignment you mean – baseline, left, top? Regardless, I think Dale and I can work this out in the build. Thanks for the review!

Comment 21

[Cassie McDaniel [:cassiemc]]

(In reply to Laura Hilliger [:epilepticrabbit] from comment #19)
> Looks nice Cassie. Can you give me the dimensions for that image? Chloe is
> prepping the Games images for the Aug first launch (even though we may
> launch with the kit template!)

No problemo! The small images have a width of 100px (x100 tall, if you want to keep the square ratio I have). I was thinking you could create the images larger though, and Dale can scale them down in the build (so the user can click for a more detailed view).

Also, bear in mind retina displays, so ideally the images are saved at least at 200px wide, twice the size for twice the resolution.

And just a tiny aside, there's a cool ff add-on I use called Measure It that lets me grab quick dimensions if that helps you out for the future. https://addons.mozilla.org/en-us/firefox/addon/measureit/

Going to close the bug now!

Comment 22

[Laura Hilliger [:epilepticrabbit]]

Cassie - is it cool if we add next to "made by mozteach" a text link that says "See the kit this activity is included in" or something to that affect (will find nicer way to say it)? 

It's annoying to go from kit to activity and then have no way (other than the back button) to return to the kit page. And if you come in from an activity, you wouldn't know there's a kit...