AIFC About page quote and image carousel

[rachwyatt]

@devincdillon's comment: Rachel, can we create a thing that cycles through these 5 quotes overlaying the pictures we have in the quotes + pics folder here https://drive.google.com/drive/u/0/folders/1ACCE77hSPOJQ7PtzRD--E2kD2CI2bIM3 :

[With AI Family Challenge], our analytical thinking has improved and we now explore different ways of solving or arriving at a conclusion. We also realize that we should always try and keep trying with projects, not getting it right the first time does not mean we should give up. Laura, Mother in Nigeria

This course gives a lot of opportunities not only to get more information about AI, but also teaches us how to work like one team, our family team. Practice [helps us learn], and this method differs from methods which our children have been taught at schools. Saddat, Mother in Uzbekistan

We had a grandmother that joined the group in Cape Town for a few sessions. She was very shy but loved watching the children build and create. She came to me after the sessions and asked if we could teach her more activities that she could do with her grandchildren at home. She said she would like to continue to see them grow and be joyful together. -Trisha, Coach from South Africa

[With AI Family Challenge, we got] more than we expected. We gained knowledge on robotics, AI, we made new friends and brainstormed an idea of how to AI to help to improve our lives. - Rustamkhuja, Mother from Uzbekistan

[rachwyatt]

full google doc here: https://docs.google.com/document/d/1N2xqjdD2T3USIpc8d5fIMMkAXe_4ID5_FNeQkhX9kXY/edit?ts=5bae9049

[rachwyatt]

@devincdillon Is there any way to have these images all be cropped to the same dimensions? I think it will look better on the page especially with the quotes on top of them if they are all in landscape. What do you think? Also, do you want them tinted to match the ones on level 3 lessons? Should I be asking Ruby these questions?

[devincdillon]

@RRios00 can probably help us here. ruby, for the pictures linking in the folder below, can you

• crop them to be the same dimensions

• put a tint on all the pictures (similar to stage 3 pictures)

here they are: https://drive.google.com/drive/u/0/folders/19GyTyvKu2cgu1Rs8-RzaYJbU3FuvQ4N0

[RRios00]

Hey @rachwyatt Yes, feel free to come to me with any image editing requests. I like the storytelling aspects of the carousel. :) I've added the images on a 1:1 ratio, 600x600 pixels here @devincdillon: https://drive.google.com/drive/folders/1fkEVv6tHo7vweM-b0IAFlSRFuEH4lTXH?usp=sharing

[rachwyatt]

@RRios00 and @devincdillon thank you for your help!! :)

[rachwyatt]

This is pretty tricky to make this text readable over the images. i've tried giving the text some pretty heavy shadow. any thoughts from from visual aesthetic type people? @RRios00 @devincdillon :)

[devincdillon]

thank rachel for taking a stab, and ruby for helping with the pictures! this is coming along!

@RRios00 do you have any thoughts on how to make the pictures and text look good? maybe if we put the text more at the bottom and maybe a bit smaller? or we could also just put it as a caption on the bottom?

[rachwyatt]

@devincdillon @RRios00 here it is with the caption at bottom

[RRios00]

I like the potential for both directions. This is just an idea, but I've • changed the ration of the image to be 16:9 so the text can fit better • changed the drop shadow color to be HEX #590019, the solid black can be too harsh

[RRios00]

Hey @rachwyatt Can I see a screenshot of this page? :)

[rachwyatt]

For the layout, we should also consider ticket #2056

[RRios00]

Hey @rachwyatt Thanks for the screenshot! This is the first draft for the page with the carousel.

Are we including two carousels?

[rachwyatt]

@RRios00 I like this! The original request did have actually two quote carousels and a revolving photo album. If @devincdillon is ok focusing down to just the tinted images with quotes, I'm good doing that. Devin also asked for 3 bullet points like this:

(but with different text). You guys are much better at visual stuff, so if you tell me what to do , I will do it! :) I do think your layout looks good and balanced.

[devincdillon]

Hi Ruby and Rachel,

Ruby- Thanks for taking the time to review this. Happy to go with your recommendations and remove one of the image carousels.

The three bullet points go above the badges, I think it would be nice to retain those to help break up the text some.

[RRios00]

I think it's best to just have one carousel. The SVGs for the stage badges are located here: https://www.dropbox.com/sh/ushgm5wczrc4cpb/AAAXOxfDuU8Hy9-ExXLLug9Xa?dl=0

Is there a particular place you're thinking of including the bullet points @devincdillon ? I'm referrencing off of this document: https://docs.google.com/document/d/1N2xqjdD2T3USIpc8d5fIMMkAXe_4ID5_FNeQkhX9kXY/edit?ts=5bae9049

[devincdillon]

Here is the ticket https://huboard.com/Iridescent-CM/curiosity-machine#/issues/374386385

Trying to do a better job with the text above the badges (in your version)

[RRios00]

Ahh I see. Thanks for linking in that ticket!

I rearranged the text like this.

But please let me know if I missed anything.

[devincdillon]

This looks great to me. Ruby, can you integrate the copy edits that were in that ticket (or maybe you already did)? They are minor but removed some redundancies.

[rachwyatt]

This looks great, @RRios00 I'll start working on integrating these changes. So just to clarify, are the 3 bullet points from ticket #2056 going to be the turquoise background part instead of having the orange bullet numbers?

[rachwyatt]

Oh, and I guess I need the images edited to the 16:9 with the tint to make the new layout work now. Sorry for so much back and forth! :(

[RRios00]

So referencing back to ticket #2056, the two bullets will replace the four paragraphs. I think the turquoise works better than plain bullets, but I'm open to both ideas.

Here's a mockup of the third mockup:

The 16:9 edited images with the tint are here @rachwyatt : https://www.dropbox.com/sh/l5dst061y66t4m1/AAAtYZ1Wg_WZdirLSrXRyEm0a?dl=0

Some of the photos (especially the one of the boys from Uzbekistan) is of pretty low quality to begin with. Do we have other of the same boys @devincdillon ?

[rachwyatt]

@RRios00 If it helps, these can be smaller. Mike did say that one of the things that would most help the page efficiency with so many images, is not making the images larger than they need to be and then scaling them down on the page. I'm not sure if that will help with that image or not. I see that it's very pixelated.

[rachwyatt]

@RRios00 Here's what I have so far. Is it looking right?

[rachwyatt]

@RRios00 There are two things I would improve if I could:

1. The size of the badge images could be smaller according to the new mindset of keeping images only as big as they will be displayed. Plus they size weird when resizing the window.
2. You're right about that last image in the carousel. @devincdillon is there another image you would like to use? I'm not sure if you can tell here but it looks really "pixely" (as my daughter would say).

[devincdillon]

we can use one from the carousel we no longer are using. Ruby do you want to pick the one you think will be best from here https://drive.google.com/drive/u/0/folders/18ThyMH-oINU4ox-rf0MkNbvOZLaE6grr

[RRios00]

This looks great @rachwyatt ! 😄 Do you think setting the images to a standard size of 720px x 407px good?

Thanks for providing the picture folder @devincdillon , I'm trying to find one from Uzbekistan so it can stay true to the quote. I'll dig through our Dropbox right now

[rachwyatt]

@RRios00 I think the way I have the images with the quotes in there, the height is set to 350px. The badges could be even smaller. The largest the badges get is 175px. Does this even make sense? I'm not good with graphics.

[RRios00]

Hey @rachwyatt I think I know what you mean :)

I've minimized the badges to be 80px x 80px: https://www.dropbox.com/sh/tgkf6huydqrra36/AAC071fo2nv11ustX2HDNEkIa?dl=0

The images have been edited down to 600x338 and compressed to 36kb-54kb: https://www.dropbox.com/sh/l5dst061y66t4m1/AAAtYZ1Wg_WZdirLSrXRyEm0a?dl=0

Please let me know if these assets work for you!

[rachwyatt]

Thank you @RRios00!

[RRios00]

Cool! Let me know if you need anything else @rachwyatt :)

[devincdillon]

Hi All,

This looks great--just want to update this area

"Here’s what you can expect in all 3 stages of our program" change to --> "Here's what you can expect in our program"

update all of the stage 1 text ---> "Stage 1: Foundations of AI 5 design challenges that introduce fundamental AI concepts."

stage 2 text --> "Stage 2: Exploring Robotics 3 design challenges that encourage your family to build models that move."

stage 3 --> "Stage 3: AI in Your Community Complete these 10 lessons to solve a problem in your community with AI and submit to the AI World Championship"