Create "Things to Try" page

mewtaylor commented 7 years ago

New page that will contains resources such as tutorials, educator guides and activity cards for getting started with Scratch.

Components this will need:

TitleBanner
Resource Tile (new component)
Resource Modal (new component) (see #980)

carljbowman commented 7 years ago

Things to Try page - Responsive Behavior

Desktop - 12col

The vertical size of resource tiles will vary. This variation can be more dramatic based on translation. So rather than setting a fix char length or hiding overflown content, we should use a 'masonry' grid and allow for tiles to paginate asymmetrically

r2 0_thing-to-try 12col

r2 0_thing-to-try 12col-grid

Tablet to Desktop - 8col

r2 0_thing-to-try 8col

r2 0_thing-to-try 8col-grid

Mobile to Tablet - 6col

A perfect example of where our current fixed grid system could use some tweaking. Lots of unused space. A flexible grid could help fill the space across more devices, but we would need to design with more variation in mind

r2 0_thing-to-try 6col

r2 0_thing-to-try 6col-grid

Mobile - 4col

r2 0_thing-to-try 4col

r2 0_thing-to-try 4col-grid

'See Cards & Guides' Modal - Responsive Behavior

Generally I have some concerns about scrolling paradigms with in modals. On smaller devices as the content will grow beyond the length of the screen the user will need to be able to scroll the modal rather than the page. Flagging in case we need to adapt the design to account for this behavior.

Desktop - 12col

r2 0_things-to-try 12col

r2 0_things-to-try 12col-grid

Tablet to Desktop - 8col

r2 0_thing-to-try 8col

r2 0_thing-to-try 8col-grid

Mobile to Tablet - 6col

Ideally the the modal would take up the entire screen and an example where scrolling gets tricky as mentioned above.
Close may need to be more visible and should become fixed as to follow the user scrolls. This way they have the ability to close the dialog at any point regardless of where they are on the page.

r2 0_thing-to-try 6col

r2 0_thing-to-try 6col-grid

Mobile - 4col

r2 0_thing-to-try 4col

r2 0_thing-to-try 4col-grid

carljbowman commented 7 years ago

@chrisgarrity - I will follow up with more detailed specs for the tiles & modals soon, as well as giving you the image assets and icons. Just wanted to get something up in the mean time.

chrisgarrity commented 7 years ago

@carljbowman Thanks for the head's up!

thisandagain commented 7 years ago

This looks great. Thanks for specs @carljbowman . 😄 👌

mewtaylor commented 7 years ago

@carljbowman quick question – for the banner images on the modal, are they going to be different from the ones on the resource tile/card/ethereal feeling component, or is it just an uncropped version of that image?

carljbowman commented 7 years ago

@mewtaylor - The banner image will be a different asset. Each resource tile will have two assets, one that will display on the tile and another for the banner image in the modal.

kaschm commented 7 years ago

Text for top of page

You can get started with Scratch in a variety of ways. Click an image to try the Tutorial. You can also download a set of Activity Cards and an Educator Guide for each theme.

Tutorial Tile Image, Titles, Descriptors:

Animate Your Name Animate the letters of your name, initials, or favorite word.

Make It Fly Animate the Scratch Cat, The Powerpuff Girls, or even a taco!

Make Music Choose instruments, add sounds, and press keys to play music.

Race to the Finish Make a game where two characters race each other.

Hide and Seek Make a hide-and-seek game with characters that appear and disappear.

Create a Story Choose characters, add conversation, and bring your story to life.

Fashion Game Dress up a character with different clothes and styles.

Pong Game Make a bouncing ball game with sounds, points, and other effects.

Let's Dance Design an animated dance scene with music and dance moves.

Catch Game Make a game where you catch things falling from the sky.

Virtual Pet Create an interactive pet that can eat, drink, and play.

kaschm commented 7 years ago

From web meeting 11/3: url for page will be at /try

/cc @ntlrsk for comments or concerns?

ntlrsk commented 7 years ago

Just talked to Mres and we both thing that sounds like a temporary test page. I'd suggest: /go Will run by a couple others to confirm.

ntlrsk commented 7 years ago

http://es.memegenerator.net/instance/46317245

ntlrsk commented 7 years ago

OK I talked with others and they suggested /do (as Yoda says) (Note: Another concern raised with /try was that it may sound like a trial version that you have to pay for later.)

ntlrsk commented 7 years ago

Talked further with mres and he says /go sounds better than do.

carljbowman commented 7 years ago

@chrisgarrity - Added the images to @kaschm 's content https://github.com/LLK/scratch-www/issues/979#issuecomment-257947919

I made that assets slightly larger than 2x as we prepare for higher dpi screens and a more flexible grid that may show images larger that 300px-ish.

kaschm commented 7 years ago

@chrisgarrity @mewtaylor just checked with @ntlrsk and the ordering of the page should follow the cards page (/info/cards). The top row should highlight the same three (in the same order) as the homepage. thanks!

chrisgarrity commented 7 years ago

@kaschm @ntlrsk Just to clarify... The first row should be Make It Fly, Animate Your Name, Make Music as shown in the mocks above... Not Animate Your Name, Make It Fly, Race to the Finish as shown on /info/cards

ntlrsk commented 7 years ago

@chrisgarrity I think Animate Your Name should come first. @carljbowman The thumbnails look great! (Finished pong game has red line across near bottom, but I think it's fine not to have it in the thumbnail.)

ntlrsk commented 7 years ago

To clarify, the order that @kaschm listed the 11 activities above with the thumbnails seems good to me (at least for the HOC period) - @chrisgarrity @carljbowman Does that seem OK?

chrisgarrity commented 7 years ago

@ntlrsk Sounds fine. I'll get the correct order implemented with images :)

chrisgarrity commented 7 years ago

@ntlrsk @kaschm Should we be using the current PDFs for the activity cards, or are there new ones? Do we have copies of the guides that can be added?

kaschm commented 7 years ago

@chrisgarrity: good questions. I believe we can use the cards found on /cards. However, there are new versions of the Guides that aren't yet done. @ntlrsk can confirm ...

ntlrsk commented 7 years ago

The cards on the Cards page are the latest. The guides are all being revised right now, getting as many as possible for the Nov. 14 freeze!

chrisgarrity commented 7 years ago

@ntlrsk What are all the links that the tutorials should go to? I know they all start https://scratch.mit.edu/projects/editor/?tip_bar=, but what's the tip bar parameter for each of them?

ntlrsk commented 7 years ago

name fly music racegame hide [story - not available yet - so don't include] [fashion - not available yet - so don't include] pong dance catch pet Thanks!

chrisgarrity commented 7 years ago

@ntlrsk Thanks. Just saw your email - I'll take Story and Fashion off the list of Things to Try. The other nine will be ready to freeze. Let me know on Monday if there are any more I need to take off the list.

ntlrsk commented 7 years ago

No they won't be. Thanks. ⁣

On Nov 10, 2016, 5:49 PM, at 5:49 PM, chrisgarrity notifications@github.com wrote:

@ntlrsk Thanks. Will story and fashion be available on Monday for the freeze? If not I'll take them out of the list.

You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub: https://github.com/LLK/scratch-www/issues/979#issuecomment-259829443

scratchfoundation / scratch-www