Preview and overlook of the new cast page (Patreon)

Hi guys! To make up for the fact posts will be a little less often, I will share something I have been working on for a while on the side of the comic, for the site. There will not be a link to it yet, only screenshots, but I will try to cover all the major points of this page!

(Please do not share this post or the screenshots in it outside of Patreon, I don't want to ruin the surprise for the general audience!)

So, the cast page's revamp's biggest aspect is that the cards for the characters are no longer images, but instead dynamic page elements. For people unfamiliar with code, that means the objects and contents of the card are all made with code as opposed to drawn in a drawing program.

The new cast page will have a title similar to the one on the archive designating that these are the cards for the cast of ES. As new series are released, there will be new sections depicting the new characters (including updated cards for characters that exist in ES). There is also going to be a directory that jumps and scrolls to each section of the page for different character roles (seen above).

This is what the new cards look like, using Barry as the primary example. Again, these are not single images so you will be able to highlight and select and copy-paste the text on the cards if needed.

Hovering on the flags on a card will not only enlarge them, but provide text as to what the flag represents (in this case, Barry has the trans flag and the bisexual flag.) 

Characters can have up to 3 flags on their card as of now because of how the elements are styled.

Next, the references button. Clicking on "references" will take you to a modal that contains existing reference sheets for the character, including hex codes for each color the character has.

Design changes between volumes will also show updated reference sheets with updated colors, if any are present.

Next, the character traits.

Hovering on a trait box will enlarge it, and when you click on the "details" button, another modal opens, this time with information about the selected trait.

The purpose of the trait modals is not only to make it so I can edit any of the descriptions more easily than remaking the static card images, but also so I can further elaborate on a character trait in more detail than what would fit in a tiny description box.

Here is an example of another trait description, this time one of Doom's traits. As you can see, there is a lot of text here, and a lot of detail about what the trait means for the character and their personality. In the tiny boxes used before, I was not able to elaborate in this much detail.

The updated cast cards are also responsive (mobile device friendly) like the rest of the site, so you don't have to zoom in a lot to read the cards like on the existing cast page.

A big question and potential complaint I know people are going to have about the new cast page: What about OC cards? We can't code these. Don't worry, the template for the original card style will not be taken down and can still be used. If possible, in the future, I may try to find a way to make a png template of the new card style. That's a project for another day, though - but it's not impossible. Getting this revamped cast page done is my main priority at this moment.

I hope you guys like the look of the new cards and cast page! I was really excited to finally share these. There may be tweaks and small improvements to the cards and the layout/style before they officially go live, and there are a few surprises and updates to the characters on these cards that I'm not gonna share on here just yet!

Feedback is also greatly appreciated, if you have any. Thanks for reading this post! Have a lovely day!