Have the studio page be more consistent to the other scratch-www pages (Mock-ups)

mybearworld

The comments, curators and studio icons are from Google.
A manager can edit the welcome text.

Here's the significant HTML (.outer):

<div class="outer"><div class="title-banner masthead" style="    background-color: #4280d7;"><div class="inner"><h1 class="title-banner-h1"><span>Magical Mixes</span></h1></div></div><div class="tab-background"><div class="sub-nav tabs"><a href="/explore/projects/all/"><li><span class="material-icons-outlined" style="    display: block;    padding: 2px;    color: #6b6b6b;">description</span><span>Studio</span><link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet"></li></a><a href="/explore/projects/all/"><li class="active"><img class="tab-icon projects" src="/svgs/tabs/projects-active.svg"><span>Projects</span></li></a><a href="/explore/projects/all/"><li><span class="material-icons-outlined" style="    display: block;    padding: 2px;    color: #6b6b6b;">comment</span><span>Comments</span><link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet"></li></a><a href="/explore/projects/all/"><li><span class="material-icons-outlined" style="    display: block;    padding: 2px;    color: #6b6b6b;">group</span><span>Curators</span></li></a><a href="/explore/studios/all/"><li class=""><img class="tab-icon studios" src="/svgs/tabs/studios-inactive.svg"><span>Activity</span></li></a></div></div><div class="sort-controls"><div class="sub-nav categories"><input placeholder="https://scratch-mit-edu.ezproxyberklee.flo.org/projects/xxxx" style="    width: 50%;    border: 2px solid rgba(0, 0, 0, 0.2);    max-height: 30px;    margin-top: 5px;" disabled=""><button class="button">Add by URL</button><button class="button">Browse Projects</button></div><button class="button" style="border-radius: 50px;border: 1px solid rgba(0, 0, 0, 0.1);padding: .75em 1.5em;max-height: 37px;margin-top: 8px;">Follow</button></div><div id="projectBox"><div class="grid"><div class="flex-row"><div class="thumbnail project"><a class="thumbnail-image" href="/projects/625834167/"><img alt="" src="https://mv-ezproxy-com.ezproxyberklee.flo.org/get_image/project/625713937_480x360.png"></a><div class="thumbnail-info"><a class="creator-image" href="/users/Tao196/"><img alt="Tao196" src="https://mv-ezproxy-com.ezproxyberklee.flo.org/get_image/user/37820182_32x32.png"></a><div class="thumbnail-title"><a href="/projects/625834167/" title="ADVENTURE 3 \Temple/ <a platformer> ">-ˏˋ☘~Potion Creator~☘ˊˎ-</a><div class="thumbnail-creator"><a href="/users/Tao196/">Euglena73</a></div></div></div></div><div class="thumbnail project"><a class="thumbnail-image" href="/projects/620023855/"><img alt="" src="https://mv-ezproxy-com.ezproxyberklee.flo.org/get_image/project/628889866_480x360.png"></a><div class="thumbnail-info"><a class="creator-image" href="/users/Fraiser-/"><img alt="Fraiser-" src="https://mv-ezproxy-com.ezproxyberklee.flo.org/get_image/user/45608643_32x32.png"></a><div class="thumbnail-title"><a href="/projects/620023855/" title="Night | A Platformer | #All #Games #Trending #Stories #Art #Animation #Music ">Potion Mixer</a><div class="thumbnail-creator"><a href="/users/Fraiser-/">nesseta</a></div></div></div></div><div class="thumbnail project"><a class="thumbnail-image" href="/projects/624027754/"><img alt="" src="https://mv-ezproxy-com.ezproxyberklee.flo.org/get_image/project/628603052_480x360.png"></a><div class="thumbnail-info"><a class="creator-image" href="/users/O2009H/"><img alt="O2009H" src="https://mv-ezproxy-com.ezproxyberklee.flo.org/get_image/user/7822124_32x32.png"></a><div class="thumbnail-title"><a href="/projects/624027754/" title="Cookie.io | ☁️ Cloud Multiplayer ☁️">Rowcat And Doctor Stupid Make a Potion</a><div class="thumbnail-creator"><a href="/users/O2009H/">rowdog</a></div></div></div></div><div class="thumbnail project"><a class="thumbnail-image" href="/projects/626877959/"><img alt="" src="https://mv-ezproxy-com.ezproxyberklee.flo.org/get_image/project/629116322_480x360.png"></a><div class="thumbnail-info"><a class="creator-image" href="/users/sharkyshar/"><img alt="sharkyshar" src="https://mv-ezproxy-com.ezproxyberklee.flo.org/get_image/user/default_32x32.png"></a><div class="thumbnail-title"><a href="/projects/626877959/" title="50000 Followers DMC">potion mixer</a><div class="thumbnail-creator"><a href="/users/sharkyshar/">yyavuzz123</a></div></div></div></div></div></div><button class="button"><span>Load More</span></button></div></div>

Here's the significant HTML for the studio page:

<div class="outer"><div class="title-banner masthead" style="    background-color: #4280d7;"><div class="inner"><h1 class="title-banner-h1"><span>Magical Mixes</span></h1></div></div><div class="tab-background"><div class="sub-nav tabs"><a href="/explore/projects/all/"><li class="active"><span class="material-icons-outlined" style="display: block;padding: 2px;color: #0fbd8c;">description</span><span>Studio</span></li></a><a href="/explore/projects/all/"><li><img class="tab-icon projects" src="/svgs/tabs/projects-inactive.svg"><span>Projects</span></li></a><a href="/explore/projects/all/"><li><span class="material-icons-outlined" style="    display: block;    padding: 2px;    color: #6b6b6b;">comment</span><span>Comments</span><link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet"></li></a><a href="/explore/projects/all/"><li><span class="material-icons-outlined" style="    display: block;    padding: 2px;    color: #6b6b6b;">group</span><span>Curators</span></li></a><a href="/explore/studios/all/"><li class=""><img class="tab-icon studios" src="/svgs/tabs/studios-inactive.svg"><span>Activity</span></li></a></div></div><div class="sort-controls"><div class="sub-nav categories"><span style="    color: #575e75;    font-size: 32px;">Welcome to Magical Mixes!</span></div><button class="button" style="border-radius: 50px;border: 1px solid rgba(0, 0, 0, 0.1);padding: .75em 1.5em;max-height: 37px;margin-top: 8px;">Follow</button></div><div id="projectBox"><div class="grid"><div class="flex-row"><div style="    width: 210px;    float: left;    margin-bottom: 935px;    margin-right: 10px;"><img src="https://mv-ezproxy-com.ezproxyberklee.flo.org/get_image/gallery/30875232_999x999.png" style="    width: 210px;">Created Jan 5, 2022<br>Last updated Jan 13, 2022<br>942 followers<br></div><div style="border-radius: 4px;border-color: #d9d9d9;max-width: 600px;background-color: white;padding: 5px;margin-bottom: 55px;">English | 简体中文 | 正體中文 | Deutsch | 日本語<br><br>Making a potion, casting a spell, or magically combining two objects into one might seem unlikely in real life, but they certainly are possible to create with your imagination! In this Scratch Design Studio, you are invited to create a project that shows off a magically mixed creation.<br><br>Need some ideas to get started? You could:<br>- Create a project where the viewer can cast spells on sprites with effect blocks<br>- Design what a sprite would look like if magically combined with another sprite<br>- Animate a wizard creating a potion inside a castle<br>- Create a dress-up game for your own magically inspired characters<br>- Make a game to collect ingredients for various potions that need to be created<br><br>Remember, these are only suggestions! You are welcome to come up with your own ideas as well, or take inspiration from projects already in the studio!<br><br><br>To have your project added to this studio, please post a comment with the link. You can find the link to your project by clicking the ‘Copy Link’ button on the project page. The button is located below the Notes and Credits section of your project.<br><br>Please submit a single project shared no earlier than one month before the start of this Design Studio (January 5, 2022). If you don't have any projects shared after that date which fit the theme, feel free to make a new project and submit it!<br><br>All projects must meet the community guidelines and be appropriate for all ages.<br><br>It may take some time for your project to be added. Please be patient, we add projects oldest to newest, so we see all of them. No need to double post!<br>_____<br><br>SDS (Scratch Design Studio) is a themed studio where Scratchers can submit projects that match the current theme, so long as it meets the requirements shown above.<br><br>Check out this project to see how new SDS Curators are selected:<br>https/scratch.mit.edu/projects/413689067/<br>Please do not simply ask to be a curator!<br>_____<br><br>Do you have an idea for a future Design Studio? Visit the studio linked below, read the studio description, and then submit your idea in the form of a project here:<br>https/scratch.mit.edu/studios/93627/<br>_____<br><br>Have questions about the Scratch Design Studio? Check out the Scratch Wiki's article on it:<br>https/en.scratch-wiki.info/wiki/SDS<br>_____<br><br>Check out this studio for updates on the SDS, new SDS curators, and more! https/scratch.mit.edu/studios/5257203/<br>_____<br><br>Theme idea by @1Oaktree2<br>Thumbnail by @2GS6<br><br>English | 简体中文 | 正體中文 | Deutsch | 日本語<br>https/scratch.mit.edu/studios/4679809</div></div></div><button class="button"><span>Load More</span></button></div></div>

This is based of the explore page, so there are still a few artifacts of that in the code.
Also, the code is not executed the best, but it works for a mock-up.

See the project here: https://scratch-mit-edu.ezproxyberklee.flo.org/projects/631471846/

Last edited by mybearworld (Feb. 6, 2022 09:15:39)

SuperMarioHome

Where is the thumbnail? Also, this might have an effect on autistic Scratchers.

mybearworld

SuperMarioHome wrote:
Where is the thumbnail?

Ah! Forgot about that.

mybearworld

SuperMarioHome wrote:
Where is the thumbnail?

Fixed.

-gr

Much better than the current 3.0 studios ._. at this point I semi-support because this looks cool, but I don't think another studio update would be the best thing…

1Oaktree2

It's making me so happy as I see my SDS idea being used as a template!! Anyways, this idea is great. It's much easier to read and register everything. Unlike the new studio, there's much less that's all showing at you at once. The description is on another page meaning that you're not seeing it beside the projects and comments.

mybearworld

1Oaktree2 wrote:
It's making me so happy as I see my SDS idea being used as a template!! Anyways, this idea is great. It's much easier to read and register everything. Unlike the new studio, there's much less that's all showing at you at once. The description is on another page meaning that you're not seeing it beside the projects and comments.

Thank you very much! I think that the ST noticed that the current page is too cramped, but their solution was to make everything bigger (so there's less items at a time). That might not be true though.

Last edited by mybearworld (Jan. 16, 2022 13:25:06)

mybearworld

I have added some metadata to the studio page.

Pianostar4

SuperMarioHome wrote:
Also, this might have an effect on autistic Scratchers.

I don’t see anything that signifies an effect on autistic users. If this style has an effect on them, then they shouldn’t even be on Scratch as this is the consistent style for almost every page but the 2.0 ones.

Support, this would be a welcome addition. I agree with the statement that another studio update is kind of unnecessary, but I still think it is a good design.

mybearworld

Pianostar4 wrote:
I agree with the statement that another studio update is kind of unnecessary,

It just makes everything be more consistent, I don't really think that is unnecessary.

your ocular status has a color I don't get it-

mybearworld

Bump

mybearworld

mybearworld wrote:
Bump

IDontNoWatIAm

Having the description be it's own separate page just doesn't feel right, like the current design lets you see both what the studio is about, and what types of projects are in the studio with a glance. This design sort of makes the “studio” tab more bland, as you can't really see any project examples

Ham19-01-2011

I feel like this would be a good idea, because the current layout looks small. This would especially help big studios who organise camps and shops, so you don't have to squeeze evrything in and have to scroll down a lot.

D-ScratchNinja

I like that your mock-up contains a “Studio” section containing the description and stuff. I thought of this in my studio mock-up, and maybe it could default to that section the first time you open a studio. I also like that since the description is not to the side but in its own section, the content is centered! Maybe you could have an option to show the details by the side like before too.

Oh and while I don't want to talk too much about Scratch 4.0, maybe the current studio design is a peek at Scratch 4.0.

mybearworld

D-ScratchNinja wrote:
Maybe you could have an option to show the details by the side like before too.

Isn't that already there?

IDontNoWatIAm wrote:
This design sort of makes the “studio” tab more bland, as you can't really see any project examples

But that's not really the point of the studio description…

mybearworld

Bump!

Myst--

Support! I know that there has just been a studio update, but I like this layout a lot better.

7salad3salad

This looks epic!!!!

mybearworld

Bump!

Discuss Scratch