WireFrame Suggestion

[Saibaba-Alapati]

MockDesign.

The work area will have its Scroll area, and I haven't included assuming that we can use touch actions or mouse pad actions.

While making this design my priority, it should handle both mobile and desktop with the help of breakpoints, so this type of design, the blocks, and other components will not take space horizontally. Hence, the work area is visible even on mobile, unlike the previous version of music blocks, which will mostly cover all the workspace areas. This design will be suitable for large, medium, and small size screens.

If this design is good and can be implemented, I can help implement it using React typescript.

Figma - https://www.figma.com/file/lbVRICZsYb8XPZGAcvKq7s/MusicBlocks?node-id=0%3A1

@meganindya @walterbender Please share your comments, thougths, and helpful design changes.

Desktop and medium-size screens:-

Hidden:-

Expanded blocks:- No horizontal Scroll Only Vertical

More Expanded:- No horizontal Scroll Only Vertical

This Action bar will have a horizontal scroll for medium size screens(like tabs)-

Mobile:-

Hidden-

Expanded:- There is Horizontal scrolling but not vertical.

More expanded- Has vertical but not horizontal.

Finally Search-

Comparing with previous: -

Desktop:-

Mobile:-

[walterbender]

We should take some inspiration from "Portfolio", Very simple, clean, compact.

https://flathub.org/apps/details/dev.tchx84.Portfolio

[Saibaba-Alapati]

sure I will check that out.

[Saibaba-Alapati]

We should take some inspiration from "Portfolio", Very simple, clean, compact.

https://flathub.org/apps/details/dev.tchx84.Portfolio

Hey, Walter, I saw the portfolio I get that we need a very simple clean, and compact design. The main problem is we have too many subcategories in the application. we can achieve a simple design for the web as we have a good amount of space but on mobile, we have to conserve space I been actively looking just going through my ideas a good idea for mobile hasn't struck me I think we have to do separately for mobile with a different approach from the web. For now, if we going through the web I think we can do some different and good-looking design. Also, I wanted to know your thoughts on tailwind CSS over materials cause we can create custom designs using Tailwind CSS, and the materials mounting speed very low compared to tailwind CSS. If you have some other inspirations that suites our use case cause( too many subcategories) drop those links here I will check them out.

[walterbender]

I was thinking Portfolio for inspiration around palettes -- both for mobile and browsers. But in general, I think we need to diverge the UX between the two worlds. But the good news is that we have very good separation in the code.

Re tailwind, I have never used it but it looks pretty cool.

[Saibaba-Alapati]

@meganindya @walterbender thoughts?

[meganindya]

Not sure I understand what you meant

[Saibaba-Alapati]

I think having a separate mobile app alongside with the website would be better and the advantages of having a separate mobile app would be :

• App can have their own offline and online capacities
• More user retention
• Instant updates and Notifications
• More convenient to the users
• Branding Possibilities

And I think working towards a separate Mobile app built using React Native would be more beneficial for us.

[Saibaba-Alapati]

I think it will be great if we are able musicblocks offline @meganindya

[meganindya]

That was the idea. I personally believe an application like MB needs separate design and interaction languages for a touch based small screen device and a pointer based large screen device. Hence, I am not particularly interested in a responsive design to adapt to the significant size changes.

The architecture of the new app is such that the core state management is totally separate from the UI. So, we can write completely separate UI relatively quickly while using the same core. I'd like to explore the idea of a progressive web app before a native app because it'll be easier to implement. Eventually, we could explore native wrapping frameworks like react native.

But the web app needs to be built first.