Homepage design

[fdoflorenzano]

Hello! We’ve been reviewing what’s left for the site on the development side before a first launch, and the homepage is the main item that was still a bit unresolved.

We went back and reviewed the homepage designs and with some small adjustments we are really happy with this layout. You can see the design below. For the first header background and character illustration (All Aboard), we just put a placeholder illustration, but we would love to have Jason create something for it.

@shiffman we would greatly appreciate for you to check it out and point out anything that stands out to you for us to review, so that we can start developing it with code. After this the specific text content can be also worked on.

[shiffman]

This looks amazing! A few misc comments, really excited and thrilled with the direction this is going!

• Just noting I need to do a pass on all copy/text but the amount of space and placement of the text looks great!
• How are the "pinned" tracks selected, manually curated? Cycled through?
• How should we approach designing the preview images for the tracks? I like the vertical tile look! I think it's do-able to make a custom image for tracks rather than just pull a YT thumbnail.
• Just noting a tiny thing that the text. below "Challenges" has a lot more space than the others.
• Is it possible to have the EVENTS section optionally viewable, only when I have an event? Or should we create something along the lines of "no events scheduled, check back for updates!"
• Let's remove "SHOP" for now, I might like to add it back someday but for now I'd rather emphasize the "become a member". Can we try renaming that to "SUPPORT" (I'm open to better ideas?). Would it work to have multiple buttons in that section? We can emphasize a "join on YouTube" option but also include Twitch, Patreon, and GitHub support as well? Come to think of it, this is a good place for a CuriosityStream+Nebula button as well, and maybe a small shop button. This is probably getting to be too many things! Maybe the footer is a better option for some. Or I could link as a list within the paragraph of text.
• Finally, This is the opposite of my usual comment of wanting to emphasize the visuals of the examples or the work of the community, but I'm wondering if we should consider a small photo of me? Yuck, I feel gross even just mentioning this! Just wondering about what will make the website most immediately recognizable? Maybe seeing me in the "TRACKS" is plenty enough! Or we could put a thumbnail like image in "NEW TO CODING"?

[fdoflorenzano]

• Just noting I need to do a pass on all copy/text but the amount of space and placement of the text looks great!

We can create a issue for that! :)

• How are the "pinned" tracks selected, manually curated? Cycled through?

Good question! That is also relates to content loading, so we can create a separate discussion in another issue, but I had an initial idea of curation. We could have a specific homepage./index.json file that specifies the slugs of tracks to add to homepage, we could do the same with challenges, highlighted contribution, and also add information related to events.

• How should we approach designing the preview images for the tracks? I like the vertical tile look! I think it's do-able to make a custom image for tracks rather than just pull a YT thumbnail.

Feel free to design them as you like them, but it would be a cool to have a consistent format across that differ to individual video thumbnails. So all tracks have a similar "look".

• Just noting a tiny thing that the text. below "Challenges" has a lot more space than the others.

Oh yes! That will probably be reduced.

• Is it possible to have the EVENTS section optionally viewable, only when I have an event? Or should we create something along the lines of "no events scheduled, check back for updates!"

It's totally possible! I can try out something not the no-event edge case.

• Let's remove "SHOP" for now, I might like to add it back someday but for now I'd rather emphasize the "become a member". Can we try renaming that to "SUPPORT" (I'm open to better ideas?). Would it work to have multiple buttons in that section? We can emphasize a "join on YouTube" option but also include Twitch, Patreon, and GitHub support as well? Come to think of it, this is a good place for a CuriosityStream+Nebula button as well, and maybe a small shop button. This is probably getting to be too many things! Maybe the footer is a better option for some. Or I could link as a list within the paragraph of text.

OK, will remove "SHOP" and change "become a member" to "SUPPORT", I like that. I was wondering what would be the main support link, and having multiple one's makes sense. I can try out other layouts to include them. Could you post here all possible platform support links?

• Finally, This is the opposite of my usual comment of wanting to emphasize the visuals of the examples or the work of the community, but I'm wondering if we should consider a small photo of me? Yuck, I feel gross even just mentioning this! Just wondering about what will make the website most immediately recognizable? Maybe seeing me in the "TRACKS" is plenty enough! Or we could put a thumbnail like image in "NEW TO CODING"?

Hahaha. I do think that makes sense though. It's important that people can recognize it. "NEW TO CODING" seems like a good place to add it since there's 2 CTAs next to one another. Or maybe the All Aboard panel at the beginning could include an image of you! Maybe we could talk to Jason about that.

[fdoflorenzano]

@shiffman Just a little remainder about this. I'm waiting on some content and thoughts to continue developing this page.

[shiffman]

Thanks for the reminder @fdoflorenzano! @elizabethslash and I are meeting tomorrow so I hope to be able to focus on the homepage after our discussion. A quick 👍 on the idea of having homepage/index.json as also discussed in #55!

[shiffman]

• How are the "pinned" tracks selected, manually curated? Cycled through? Good question! That is also relates to content loading, so we can create a separate discussion in another issue, but I had an initial idea of curation. We could have a specific homepage./index.json file that specifies the slugs of tracks to add to homepage, we could do the same with challenges, highlighted contribution, and also add information related to events.

Starting with curation works great for me! Having a special JSON file for this sounds good too!

OK, will remove "SHOP" and change "become a member" to "SUPPORT", I like that. I was wondering what would be the main support link, and having multiple one's makes sense. I can try out other layouts to include them. Could you post here all possible platform support links?

Here are all the ways to support at the moment:

• YouTube Membership: https://www.youtube.com/thecodingtrain/join
• Patreon: https://www.patreon.com/codingtrain
• GitHub Sponsor: https://github.com/sponsors/shiffman
• Twitch Subscriber: https://www.twitch.tv/subs/CodingTrainChooChoo
• Buy Nature of Code: https://natureofcode.com/

(Maybe I should leave out the Nature of Code option?)

• Finally, This is the opposite of my usual comment of wanting to emphasize the visuals of the examples or the work of the community, but I'm wondering if we should consider a small photo of me? Yuck, I feel gross even just mentioning this! Just wondering about what will make the website most immediately recognizable? Maybe seeing me in the "TRACKS" is plenty enough! Or we could put a thumbnail like image in "NEW TO CODING"?

Hahaha. I do think that makes sense though. It's important that people can recognize it. "NEW TO CODING" seems like a good place to add it since there's 2 CTAs next to one another. Or maybe the All Aboard panel at the beginning could include an image of you! Maybe we could talk to Jason about that.

I'll touch base with Jason about this last one!

[jasontheillustrator]

Well first, i was going to say i think the artwork for the all aboard section should change. it's currently using a version of the art that i made for the morning show, so it's got additional shading which i find distracting since there isnt a strong source of light. so, i'd love to make some adjustments to that artwork. as for getting an image of Dan, i think this could be a fun idea. what if i replaced the unicorn driving the train with an actual photo Dan? That could be fun.

[fdoflorenzano]

@jasontheillustrator I like those ideas! Good point about the source of light, now that you mention it, it does look odd.

Also feel free to work with the whole rectangle background in mind (including where we see clouds), not just the section where we now see the train. We can adjust where to put the "ALL ABOARD!" title and the description.

[jasontheillustrator]

@jasontheillustrator I like those ideas! Good point about the source of light, now that you mention it, it does look odd.

Also feel free to work with the whole rectangle background in mind (including where we see clouds), not just the section where we now see the train. We can adjust where to put the "ALL ABOARD!" title and the description.

Are there any responsive layout elements that I should consider?

[fdoflorenzano]

@jasontheillustrator Now that you mention it, I was having some trouble with the current artwork when trying the mobile layout, and if the artwork extends to a specific width and height (like including clouds in specific positions), then adjusting the elements for responsiveness would be difficult.

Maybe it's better to think about it as an image that will anchor to a corner and try to move it in different screen sizes along with the title and description. We could also manage clouds individually in a similar manner but always behind the title and description.

As an example, here are some screenshots of how it behaves in my current prototype (in development):

[jasontheillustrator]

@jasontheillustrator Now that you mention it, I was having some trouble with the current artwork when trying the mobile layout, and if the artwork extends to a specific width and height (like including clouds in specific positions), then adjusting the elements for responsiveness would be difficult.

Maybe it's better to think about it as an image that will anchor to a corner and try to move it in different screen sizes along with the title and description. We could also manage clouds individually in a similar manner but always behind the title and description.

As an example, here are some screenshots of how it behaves in my current prototype (in development):

These are really good reference screenshots. I think anchoring to the bottom right makes sense and it looks like this artwork is working well, meaning there is no text that overlaps the art.

[jasontheillustrator]

I noticed an issue with Choo Choo Bot. Looks like I didnt outline the font before converting to SVG. I just updated the Drive folder with a new version

[fdoflorenzano]

@jasontheillustrator good catch! thanks!

[fdoflorenzano]

@shiffman @jasontheillustrator here's a preview for the homepage: https://deploy-preview-112--thecodingtrain.netlify.app/

[shiffman]

Wow, this is very exciting! Quick comment, you are probably already aware, but just noting the top area takes up a lot of extra space.

Also, @jasontheillustrator made a version of the train with a photo of me driving it which we could try here? @jasontheillustrator can you share a link to that?

[jasontheillustrator]

Here's the homepage illustration with Dan driving the train .

[jasontheillustrator]

I've added the files to the Drive folder in case you need them: https://drive.google.com/open?id=1z00suJqjn8uHHdnMK2bJ1JLLCJxy9bc2&authuser=jason%40jasonheglund.com&usp=drive_fs

[fdoflorenzano]

@jasontheillustrator @shiffman Oh cool! I wasn't aware that was done! Thanks! I'll add it.

Wow, this is very exciting! Quick comment, you are probably already aware, but just noting the top area takes up a lot of extra space.

@shiffman what concearns you? The extra "blank" space on top and on the side of the train?

[fdoflorenzano]

@jasontheillustrator is there any way for you to export it as and SVG and without the extra space on the left? SVG is a bit easier for as to manage and the extra space makes it difficult to deal with for the different screen sizes.

[jasontheillustrator]

yes no problem.

[jasontheillustrator]

I also added that to the Drive folder

[fdoflorenzano]

Thank you so much! @jasontheillustrator

[shiffman]

@shiffman what concearns you? The extra "blank" space on top and on the side of the train?

@fdoflorenzano yes, that's right! Now that you have the SVG I'm guessing it'll be easier to condense that row.

[fdoflorenzano]

@shiffman got it! I'll try some stuff.

[fdoflorenzano]

@shiffman @jasontheillustrator here's an updated preview for the homepage: https://deploy-preview-112--thecodingtrain.netlify.app/

A first thing that comes to mind is that Dan's image is a big low res for big screens.

[jasontheillustrator]

@shiffman @jasontheillustrator here's an updated preview for the homepage: https://deploy-preview-112--thecodingtrain.netlify.app/

A first thing that comes to mind is that Dan's image is a big low res for big screens.

Ok, I'll chat with Dan about this. Thanks!

[jasontheillustrator]

@fdoflorenzano i made a few tweaks to the homepage illustration that I think will make it better. Take a look and let me know what you think. The image of Dan isnt high res, but it should look fine at the small size displayed on the website.

[fdoflorenzano]

@jasontheillustrator I updated the illustration in the preview: https://deploy-preview-112--thecodingtrain.netlify.app/

I agree it's better! I like the space you added between the cart and the train, makes Dan more clear.

Also to @shiffman: the spaces are reduced now too. Although the appear again when resizing 🤔. Now I'm considering doing a different layout so that it stays more consistently narrow across screen sizes. Like bringing the train and heading closet together, maybe placing the paragraph in another place. Do any of you have thoughts on this?

[jasontheillustrator]

@fdoflorenzano Is there any way to attach the SVG to the bottom of the container so that it doesnt look like they're floating?

[jasontheillustrator]

@fdoflorenzano i was reading your comment to Dan and I wanted to play around with the homepage just a bit, so I created this mockup. I changed the main header banner so that the content would be centered and include a full illustration with the header text sitting above the train. There's room on the left and right for the illustration to be cropped when the browser is resized. I imagine the illustration and header text would shrink when it gets to certain sizes. I moved the welcome message to a box below with a character. This way, we wont have to worry about awkward empty space when the browser is resized. What do you think of this?

[jasontheillustrator]

Another idea I had that would push things further would be to have the main header banner illustration change depending on the time of day. So mornings would display a morning illustration, afternoons would display a day illustration and night would be a night illustration. Not sure if that's possible, but thought it was a fun idea and wanted to pass it along to see what everyone else thought.

[fdoflorenzano]

@fdoflorenzano i was reading your comment to Dan and I wanted to play around with the homepage just a bit, so I created this mockup. I changed the main header banner so that the content would be centered and include a full illustration with the header text sitting above the train. There's room on the left and right for the illustration to be cropped when the browser is resized. I imagine the illustration and header text would shrink when it gets to certain sizes. I moved the welcome message to a box below with a character. This way, we wont have to worry about awkward empty space when the browser is resized.

Thanks for this @jasontheillustrator! It's great to get your side on these details. I think there some great stuff in here, but I'm mostly worried about the full illustration background and how it feels a bit off from the rest of the website. It kinda feels like a callback to the old website, which is kinda cool, but I'm not sure this would be the place to do that. Being the header of the new site, it has to help people recognize it, but also introduce them to the new layout and system.

The parts that I like are the centered title, the possibility of separating the description into another block and maybe introducing more illustrated images, which was part of the original ideas (having a couple clouds in the background). Maybe we could have the solid background, train and a couple extra elements: like the railroad and clouds.

I'll try to come up with a revised version of the header tomorrow, focusing on layout having these new ideas. @jasontheillustrator if you could supply me an image of the track and and image of a white cloud, I could also add these and see how a middle point between plain and full illustration feels.

@fdoflorenzano Is there any way to attach the SVG to the bottom of the container so that it doesnt look like they're floating?

It can! But it would be easier if the limits of the image itself end when the illustration ends. I think it has a bit of padding and that's why we see that space.

Another idea I had that would push things further would be to have the main header banner illustration change depending on the time of day. So mornings would display a morning illustration, afternoons would display a day illustration and night would be a night illustration. Not sure if that's possible, but thought it was a fun idea and wanted to pass it along to see what everyone else thought.

Something like that could definitely be done! Maybe one of the extra illustrations mentioned does that, like the sun. It could change outfits or change to a moon.

[jasontheillustrator]

@fdoflorenzano No problem. Here is artwork for the cloud and tracks. I also cropped the train illustration so there's no white space below the wheels.

[jasontheillustrator]

And in case you want this, here's the semicolon waving.

[fdoflorenzano]

@jasontheillustrator @shiffman

Here's another exploration of this idea. Positions are all manual so I don't have a working version for multiple screen sizes.

What do you think? The sun I made on Figma copying another sketch. @jasontheillustrator if you could send your version I would appreciate that too :)

[shiffman]

I really like this direction of making it more of a scene but not using the full color landscape so that it integrates / fits with the design. (someday we could even animate it / generate it as a canvas with some randomness built in!)

I also think having this on the site could then be a good reason for me to make a tutorial on how to build a p5 sketch that draws a scene based on the time of day!

Excited to push forward in this direction!

[jasontheillustrator]

@fdoflorenzano Here's the sun artwork .

[fdoflorenzano]

@shiffman @jasontheillustrator I updated the preview with a new version for multiple screen sizes: https://deploy-preview-112--thecodingtrain.netlify.app/

Here are some screenshots of the different layouts, I think it works much better now!

The only thing that bothers me right now is the contrast between the sun and the background. @jasontheillustrator could you maybe create a version that has a contour like the rest of the characters in the train?

[shiffman]

This is looking great!!

[jasontheillustrator]

@fdoflorenzano Here's the new art for the sun.

On a separate note: is there any way to make the scale of the train track match the scale of the train as the page resizes? On the first screenshot, the train track size is good, but once it gets to the mobile size, the train scales down while the track stays big, so it looks weird. If the train track can't match the scale of the train, maybe it'd be best to remove it and just have the train ride the bottom boundary of the container.

[fdoflorenzano]

On a separate note: is there any way to make the scale of the train track match the scale of the train as the page resizes? On the first screenshot, the train track size is good, but once it gets to the mobile size, the train scales down while the track stays big, so it looks weird. If the train track can't match the scale of the train, maybe it'd be best to remove it and just have the train ride the bottom boundary of the container.

Good catch! I'll fix it!

[fdoflorenzano]

Updated! https://deploy-preview-112--thecodingtrain.netlify.app/ Looks much better!

[jasontheillustrator]

Updated! https://deploy-preview-112--thecodingtrain.netlify.app/ Looks much better!

It's looking nice!