New Design

[Utkarshn10]

New minimal looking UI Design for Focusly.

[colinkiama]

Can we get more info about this please? Should it still look a bit similar to the current site or should it look drastically different?

[Utkarshn10]

Hey @colinkiama, I am open to all the ideas. It's just that the layout (i.e navbar -> cards -> footer) should be the same.

[colinkiama]

Cool! I'd be happy to work on this. I'll send updates here if that's okay with you.

By the way, does this issue also include the implementation of the new design too?

[Utkarshn10]

Awesome !! Currently, the issue mainly focuses on design. Once the design is finalised, we can create different issues for different components.

[colinkiama]

Hey I came up with an idea to control the volume of all playing sounds in one place. It did require me to move the footer content to make it work though. What do you think so far?

Note: I have a different way of dealing with this on large tablets and desktops but I haven't created a mockup for that yet.

[colinkiama]

Hey, just checking in since it's been 7 days since my last update. Any feedback?

[Utkarshn10]

Hey @colinkiama the design looks great but I was thinking of keeping the layout structure same and how about we just change the design for cards,navbar and footer. We can apply the extra changes in the further releases.

[colinkiama]

That's no problem. This is exactly why I wanted to check with you first.

[colinkiama]

So is this layout structure okay then?

[Utkarshn10]

So is this layout structure okay then?

Yes, this looks awesome but would love to keep it more minimal looking with bigger images and smaller names

[colinkiama]

Yes, this looks awesome but would love to keep it more minimal looking with bigger images and smaller names

How about this then?

[colinkiama]

In case you want the tracks currently playing to be very noticeable, I also made this mockup too:

[Utkarshn10]

Yes the last one looks much better. Instead of high lighting the whole card we can just color the boundaries like we are doing currently and also @colinkiama how about the desktop view ?

[colinkiama]

Yes the last one looks much better. Instead of high lighting the whole card we can just color the boundaries like we are doing currently

Sure:

...how about the desktop view ?

Yes, I'm planning on working on that too 😄. I prefer to design the mobile view first then scale up.

[colinkiama]

Here's the desktop view:

What do you think?

P.S. Thank you for your patience. Quite a bit has happened since my last reply.

[Vaporjawn]

Just wanted to chime in and say that I personally think this looks nice overall 💯

[colinkiama]

Thanks! I appreciate it.

[Utkarshn10]

Hey @colinkiama great design.

Some betterments that i would like to discuss :

Current Design

• Footer: More similarity between navbar and footer so that it can be separated from other cards.
• More colors can be added to make it look aesthetic while keeping it minimal.

[colinkiama]

This is as far as I can go with your suggestions I'm afraid. There are 4 main colours used as well as shades too. Any more and it'll start to get really messy.

I personally recommend using my previous design and using colourful icons for each sound if you want to increase the use of colours in the app.

[Utkarshn10]

This looks great and colorful icons would work great. Thanks @colinkiama for your contribution to Focusly :)

This is as far as I can go with your suggestions I'm afraid. There are 4 main colours used as well as shades too. Any more and it'll start to get really messy.

I personally recommend using my previous design and using colourful icons for each sound if you want to increase the use of colours in the app.

[colinkiama]

Oh whoops. I forgot to link the Figma document: https://www.figma.com/file/aNU5WOGvk4mQfrg4hyk9KH/Focusly?node-id=0%3A1&t=oMbxhmDafJU7oxDg-1

I've also sent an invite to your email which allows you to modify the design however you want :D

[Utkarshn10]

Thanks @colinkiama 💯