[ `Design` ] : Anime Info page

[AKindWorld]

Mockups, design guidelines & Figma prototypes for the Anime Info page.

Any feedback is welcome :)

^^

[baseplate-admin]

Lemme get back to you in 24 hours 👀

[AKindWorld]

Redesign results - [Ongoing]

Old:

Laptop Layout:  Desktop Layout:  Episode page Layout: 

New:

Summary tab:  Summary tab expanded:  Episodes tab:  Episodes tab expanded (scrollable):  [working on the others]

Advantages:

1. One-page tabbed layout over Side tabs pagination.
2. Easier to navigate on large & small screens alike.
3. Essential utilities (Title, poster & watch buttons) remain on top.

Disadvantages:

1. Might have a contrast issue on the tabs layout - mainly makes it difficult for first time users (but I'll work on it).

Working prototype soon!

^^

[baseplate-admin]

Hi there,

@AKindWorld

So take a look at this slide

Umm in my opinion theres too much spacing in the middle. Like cant we put the search box in the middle ? Also what does the icon here do?

---

This white button... Do you think we can make it a little bit more fancy ( maybe change color ? )

---

Might have a contrast issue on the tabs layout - mainly makes it difficult for first time users (but I'll work on it).

About this. Some white background images are really problematic. So we have 2 choices here.

1. Go for a tint ( bg-opacity )
2. Add font border.

All in all it looks good to me.. just a few more polishes here and there and it would be a perfect page ^^

[baseplate-admin]

hey i will be working on this next :D

[AKindWorld]

Heyo!

alrighty I worked a bit more on it, and now I have managed to solve almost all of the issues while having it synced to the design system.

Here's a few screenshots:

  

Issues solved:

1. Text contrast issue - now we have a cool background tint effect on scroll.
2. Start watching button more attractive - am working on it (the idea is done but I need to link the frames together).
3. Episode tab spacing issue - now we show essential information on there.
4. Tab contrast issue - changed colors and added 2px strokes for even more contrast.

>> Working prototype

unfortunately scroll events don't exist in Figma, so you have to drag the mouse up/down. In the real thing, this would be done by scroll, so it should be like: page loads on full viewport (onboarding)-> user scrolls (trigger) -> top shrinks, background darkens and the rest of the tab contents load (full contents) and then the user can scroll endlessly all the way till contents exist. Let me know if there's any problems with this method.

I'll make a separate comment detailing some of the parts soon.

^^

[baseplate-admin]

Got it.

Gimme some time :D

In the mean time please take a look at https://github.com/baseplate-admin/CoreProject/pull/427#issuecomment-1202990260

[AKindWorld]

Hey,

just a small heads-up: don't start working on this just yet - I got a different wave of ideas in my head, and am currently prototyping it (almost finished). The newer idea doesn't mess with animations and should be more stable in terms of performance.

if you already started on it, I'm really sorry for letting you know late.

I'll upload the prototype in a bit.

Good day to you ^^

[baseplate-admin]

just a small heads-up: don't start working on this just yet - I got a different wave of ideas in my head, and am currently prototyping it (almost finished). The newer idea doesn't mess with animations and should be more stable in terms of performance. if you already started on it, I'm really sorry for letting you know late.

No worries. I haven't started working on this page yet

I'll upload the prototype in a bit.

Sure :D Take your time

Good day to you ^^

Same to you

[AKindWorld]

Hi hi!

Here's the full-height prototype:


Pros:

1. Everything in one scrollable page, with a simple layout (reduces scrolling/clicking too much).
2. No complex animations/pagination system - also reduces space wastage by a lot.
3. For smaller viewports, simply rearranging the right structures will suffice.
4. Makes it possible for the future - a feature where the user can hide/rearrange particular sections if they want to (not needed currently - but this layout makes it possible to use separate divisions for each sections). Also gives the user choice regarding what they want to expand/load instead of preloading all sections.

I'm working on the version containing all the data and will upload it soon ^^

[baseplate-admin]

As usual it Looks Awesome :D

Awesome work :D

One more request. Please send the data here too :) ( if its possible )

[baseplate-admin]

Also you forgot to add a con :

1. It needs to be coded

[baseplate-admin]

@AKindWorld i have addressed some issues in discord. Take a look.

• https://discord.com/channels/@me/958266195654639646/1029567024034234368
• https://discord.com/channels/@me/958266195654639646/1028488574464708689
• https://discord.com/channels/@me/958266195654639646/1026743401296703488
• https://discord.com/channels/@me/958266195654639646/1025754369846673490
• https://discord.com/channels/@me/958266195654639646/1025613758309093457

[baseplate-admin]

Hey @AKindWorld,

Do you think prototype 4 is ready?

Cause i will start working on that :D