Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Help Wanted: Designer needed #296

Open
ShankarBUS opened this issue Dec 11, 2020 · 46 comments
Open

Help Wanted: Designer needed #296

ShankarBUS opened this issue Dec 11, 2020 · 46 comments
Labels
Community Feedback Wanted Enhancement New feature or request Help Wanted Extra attention is needed High Priority UI/UX Related to appearance of the app and flyout.

Comments

@ShankarBUS
Copy link
Member

We need a UI/UX/Logo designer to help us design the UI, UX and Logo of our app. (For free lol, we can't spend any money right now)

Our current team consists of beginner programmers who are not experienced in designing.

Our current design is either stolen or not pleasing.

And the current logo is also poopy.

We're currently struggling with some design issues.

They are listed below: (some require mockup designs to start the actual implementation and some need updating)

If anyone know any designers personally, ask them if they're willing to help us.

If there are some designers out there who wants to contribute to this open source project, please express your presence commenting on this thread.

If you also want to modify other parts of the app's UI, you can do that too.

And if anyone wants to design us a new logo, you're absolutely welcomed.

Please consider helping us.

@ShankarBUS ShankarBUS added Enhancement New feature or request Help Wanted Extra attention is needed UI/UX Related to appearance of the app and flyout. High Priority Community Feedback Wanted labels Dec 11, 2020
@ShankarBUS
Copy link
Member Author

ShankarBUS commented Dec 11, 2020

@WinstonSepruko,

Thank you so much stepping up!!!! It means a lot to me.

So you want to redesign the logo, right?

I don't plan to change the UI drastically. The future UI will be similar how it is now. Little tweaks that's it.

It would be great if can come up with a redesigned logo (or even polish the current one).

P.S.

That art is dope 🔥🔥🔥!

@ShankarBUS
Copy link
Member Author

ShankarBUS commented Dec 11, 2020

What dimensions (in pixels) are you looking for, in terms of the logo/icon design?

How am I supposed to know!
You're the designer.

It would be better if the grid is based on 1024 px and logo is done in vector art instead of rastor art (pls use AI and not PS).

I tried something but something but it wasn't good enough.

I assume certain sizes work best for the two taskbar sizes on Windows, the tray icon, the app icon in the menus and the one on the Microsoft Store.

Visual Studio automatically scales and transforms a single logo to match multiple dimensions and layouts. So, a vector logo would be enough.

And also don't forget to provide monochrome (one in black and one in white) variants of it.

Tray icon (i.e. 16px) requires some special treatment. I had to do pixel arts for 16px, 24px and 32px icons.

Do you know any shortcuts? Could we use just the vector logo and workaround it?

@ShankarBUS
Copy link
Member Author

Ok, keep me and others updated with your progress.

Please ask our contributors and active users for their opinions and try to improve your design.

Thanks for helping us out! I'll never forget your help ❤️.

@Samuel12321
Copy link
Member

I think the logo is low priority for now, current one looks ok. But rest of the ui, i agree ui/ux designer help would be great.

With regards to you doodle @WinstonSepruko, if you want to redesign the logo perhaps see if you can come up with more of an evolution of our current one. My personal opinion is that the doodle above is a bit too busy and wont scale down well.

With that being said, thanks so much @WinstonSepruko for your help

@Samuel12321
Copy link
Member

Hi @WinstonSepruko,
Amazing work, while i like what you have done, I still wonder if it is a tad too busy. Are you able to do something perhaps more of an evolution of the current icon?

@ShankarBUS
Copy link
Member Author

Yeah, this won't look good scaled down.

You would need to simply it further more.

@ShankarBUS
Copy link
Member Author

ShankarBUS commented Dec 12, 2020

Imagine how "good" it will look on my 1366x768 built-in laptop monitor.

The logo need to be stripped down.

You can try any kind of combos. Mess with it in what ever way you like.

But keep this in mind, logo should be as simple and meaningful as possible.

This one look hella cool. But for the tray icon it won't even be visible. It'll just be a blob. That's why I'm worried.

@ShankarBUS
Copy link
Member Author

ShankarBUS commented Dec 12, 2020

What should our logo mean is something that makes our brain overheat.

It must convey the right message.

The current one conveys:

  • stacked cards (meaning multiple flyouts)
  • a slider in the first one (hinting either volume or brightness control)

Your redesign seems to convey the same meaning expect it shows media flyout as the lead.

What about being either more inclusive (include airplane mode and lock keys flyouts) or being simple and generic (not tied to any specific flyout module)?

Could you try that?

@prakharb5
Copy link
Member

What about being either more inclusive (include airplane mode and lock keys flyouts) or being simple and generic (not tied to any specific flyout module)?

Could you try that?

The banner that would be made for the app should be inclusive, while the app icon should be mainly generic, or like how it shows the slider currently without telling which flyout it is.

@ShankarBUS
Copy link
Member Author

@WinstonSepruko,

Re-designing doesn't mean building from ground up. You can also change the colour schemes, fills, dimensions, shadows and etc.
We just need somethings a bit better than the current one.

I'm sorry for making you redo the work again 😅. I do know how time consuming it is to get the right art.

This is what I tried before dropping the idea and leaving it to professionals.

My redesign
image

Current
ModernFlyouts_256

But people started to nit-pick (looking at you @Cyberdroid1) and said it "wasn't good enough".

Give your shot!

@prakharb5
Copy link
Member

See, Gradient effect does not look good. That too of White. The icon should be friendly for both light and dark mode viewers.

@GSonofNun
Copy link

Just stating my presence. I'm a designer/developer who was actually considering starting a project that would have been extremely similar to this one, until someone pointed out this project's existence.

@Samuel12321
Copy link
Member

HI @GSonofNun, welcome to ModernFlyouts. You are more than welcome to get involved with this project. It would be great to have someone with lots of design experience. We are accepting all ideas and contributions.

@Samuel12321
Copy link
Member

@GSonofNun Do you have any ideas for the logo or flyouts?

@jayasio
Copy link

jayasio commented Dec 16, 2020

Group 1
Hi, here's just a quick thing I made up, the proportions could be varied.
Hopefully, it characterizes a stack of generic flyouts?

Group 2
Still maybe a bit busy; could play around with colors too.

I'm more of a UI/UX designer so, I might be able to contribute more in that space.
Love this app, fits the newer Fluent Design language nicely.
:)

@jayasio
Copy link

jayasio commented Dec 16, 2020

Group 3

One more! (Honestly, it looks like a honeycomb in smaller sizes)

@prakharb5
Copy link
Member

Why are we sticking to just blue colors? Why not grey, black, white also?

@ShankarBUS
Copy link
Member Author

@jayasio,

Your redesign looks just like my redesign 🤣.

I'm more of a UI/UX designer so, I might be able to contribute more in that space

Thank you mate! We have @WinstonSepruko, taking care of the logo. So, it would be great if you could take care of other parts. No offense 😅. Just splitting up tasks since you said you're more experienced in UX/UI design.

@ShankarBUS ShankarBUS pinned this issue Dec 18, 2020
@venhryk
Copy link

venhryk commented Dec 20, 2020

Hey!
I am gonna help you with the design if u want. I have seven year's experience in digital designing and front web development.
Please provide me with some information about your design needs.

@ShankarBUS
Copy link
Member Author

@venhryk,

Thank you so much pal!

So, what we basically need are some redesigned mockup designs of some parts of the app (see the listed issues).

We have some UX issues. We would need your mockups to solve those issues.
And we need mockups to begin work on some new features.

We need a professional's guidance in designing to eliminate existing and future UX/UI issues.

It would be great if your mockups abide the Fluent Design Language guidances.

You can also revamp any parts of the app's UX/UI that you consider is not good.

@venhryk
Copy link

venhryk commented Dec 22, 2020

@venhryk,

Thank you so much pal!

So, what we basically need are some redesigned mockup designs of some parts of the app (see the listed issues).

We have some UX issues. We would need your mockups to solve those issues.
And we need mockups to begin work on some new features.

We need a professional's guidance in designing to eliminate existing and future UX/UI issues.

It would be great if your mockups abide the Fluent Design Language guidances.

You can also revamp any parts of the app's UX/UI that you consider is not good.

Okay, tomorrow I will study this question and send some results

@prakharb5
Copy link
Member

@venhryk it would really great if you can join the discord/telegram group (discord more preferred for this stuff) and share the samples there!

@Tropix126
Copy link

Group 1
Hi, here's just a quick thing I made up, the proportions could be varied.
Hopefully, it characterizes a stack of generic flyouts?

Group 2
Still maybe a bit busy; could play around with colors too.

I'm more of a UI/UX designer so, I might be able to contribute more in that space.
Love this app, fits the newer Fluent Design language nicely.
:)

This is probably my favorite one out of the options. I would probably make it smaller when applied as a taskbar icon though.

@venhryk
Copy link

venhryk commented Jan 3, 2021

Group 1
Hi, here's just a quick thing I made up, the proportions could be varied.
Hopefully, it characterizes a stack of generic flyouts?
Group 2
Still maybe a bit busy; could play around with colors too.
I'm more of a UI/UX designer so, I might be able to contribute more in that space.
Love this app, fits the newer Fluent Design language nicely.
:)

This is probably my favorite one out of the options. I would probably make it smaller when applied as a taskbar icon though.

Hi. A new logo will replace this icon. Guys don't like it much.
I will work on it this week, has no time because of the holidays.

@FireCubeStudios
Copy link
Collaborator

FireCubeStudios commented Jan 5, 2021

I was thinking about how every icon has the same style. I know its fluent design and all of the concepts above are great but it all blends in to the OS fluent style. While using the native design language is great i was thinking why not do something that will stand out and not be dull. Modern flyouts is an app that stands out its like a part of windows from another better reality where windows actually had features we all wanted.

I was thinking the new icon can have same layout which represents the app well but without colors or any depth or such that are parts of Fluent UI and instead use a new design language focusing on simplicity and minimalism yet conveying a lot of information at a simple glance

Introducing the Doodle UI version of modern flyouts icon:
image

Doodle UI is a new design language I created while writing this comment thinking about how I could contribute as I'm not an experienced UI/UX icon designer. Doodle UI is supposed to represent everything thats not Fluent, something that stands out and is noticeable. Something that is memorable. Doodle UI invokes the primitive mind of humanity creating a new feeling that connects with the user. Doodle UI is accessible with a blank canvas that doesnt overload the user and is visually appealing to all. Doodle UI is so simple infect that even non experienced UI/UX designers like myself can utilize it to create professional class icons for real life world applications.

This is all I have to say about Doodle UI and my icon contribution using a new unique style. (note this isnt serious)

@prakharb5
Copy link
Member

While I appreciate your ideology and the design, our app stands as a replacement for a feature of windows, so blending it in should be an important step, so that after installing and using it for some time, you would feel like it is an inseparable aspect of the OS.

@FireCubeStudios
Copy link
Collaborator

While I appreciate your ideology and the design, our app stands as a replacement for a feature of windows, so blending it in should be an important step, so that after installing and using it for some time, you would feel like it is an inseparable aspect of the OS.

considering how inconsistent the OS is I think that the icon should have a touch of Fluent, Metro, Aero and legacy designs to represent the operating system as it is.

but in all seriousness a monochrome icon might be good because all of the utilities in windows use monochrome icons
image

a fluent icon would stand out even more

@prakharb5
Copy link
Member

A monochrome icon for where? The app logo?

@FireCubeStudios
Copy link
Collaborator

A monochrome icon for where? The app logo?

system tray is probably better for monotone icon and app icon can be fluent then

@prakharb5
Copy link
Member

There is already an option for monochrome icon for the system tray. Have a look in the settings.

@FireCubeStudios
Copy link
Collaborator

There is already an option for monochrome icon for the system tray. Have a look in the settings.

image
very cool

@zeealeid
Copy link

zeealeid commented Jan 5, 2021

Maybe a more "outlined" icon would look better

image

@prakharb5
Copy link
Member

prakharb5 commented Jan 5, 2021

image
very cool

Which app language are you using? You got a bug, thanks!

@prakharb5
Copy link
Member

Maybe a more "outlined" icon would look better

image

Agreed. Can you help us with it? 😁

@Tropix126
Copy link

Tropix126 commented Jan 5, 2021

This is all I have to say about Doodle UI and my icon contribution using a new unique style. (note this isnt serious)

get out the crayons boys, we're making a logo

@tsukiaru
Copy link

tsukiaru commented Jan 9, 2021

How about something like this for the tray icon?
Made to match Microsoft fluent icon set, which is coming to Windows (and can already be seen with the Meet Now tray icon in latest builds)

Capture d’écran 2021-01-09 122916
Capture d’écran 2021-01-09 122754
Capture d’écran 2021-01-09 122813

@ShankarBUS
Copy link
Member Author

@tsukiaru,

Ay ay ay!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Now, that looks fantastic!
Thank you so much mate!

@WinstonSepruko @venhryk @jayasio Guys, sorry for disturbing you guyms 😅, could this somehow be an inspiration for you in making our logo?

@tsukiaru
Copy link

tsukiaru commented Jan 9, 2021

@tsukiaru,

Ay ay ay!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Now, that looks fantastic!
Thank you so much mate!

@WinstonSepruko @venhryk @jayasio Guys, sorry for disturbing you guyms 😅, could this somehow be an inspiration for you in making our logo?

Glad you like it!!
Should I upload the svg file somewhere? I'm new to github, I joined just to post this ^^

@ShankarBUS
Copy link
Member Author

Are you on Discord or Telegram? You could join us there. If no, then upload the SVG in a *. zip file here on GitHub. 😄

@tsukiaru
Copy link

tsukiaru commented Jan 9, 2021 via email

@prakharb5
Copy link
Member

Oh my god! It's awesome!

@Tropix126
Copy link

Tropix126 commented Jan 9, 2021

I have a discord! It'd be easier to send it there. Le sam. 9 janv. 2021 à 13:08, Shankar [email protected] a écrit :

Are you on Discord or Telegram? You could join us there. If no, then upload the SVG in a *. zip file here on GitHub. 😄 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#296 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/ASM6GPLJY3VOCORSCORA7YTSZBBK5ANCNFSM4UXFV3IQ .

Discord server is mentioned in the README if you'd like to join.

@venhryk
Copy link

venhryk commented Jan 9, 2021

How about something like this for the tray icon?
Made to match Microsoft fluent icon set, which is coming to Windows (and can already be seen with the Meet Now tray icon in latest builds)

Capture d’écran 2021-01-09 122916
Capture d’écran 2021-01-09 122754
Capture d’écran 2021-01-09 122813

I thought about this model also, but I want it without underline, I will also work it out morrow

@prakharb5 prakharb5 unpinned this issue Jan 26, 2021
@ghost
Copy link

ghost commented Feb 4, 2021

I made a little doodle today w/ adobe XD (Yes, i know it is supposed to be on Illustrator but i am broke af)
Component 1 – 1

@ghost
Copy link

ghost commented Feb 4, 2021

It looks good when big but on my 13' inch built-in display, well... it looks so tiny that i don't even know what it is.
Screenshot 2021-02-04 135738

@jeengbe
Copy link

jeengbe commented Mar 12, 2021

I love it

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Community Feedback Wanted Enhancement New feature or request Help Wanted Extra attention is needed High Priority UI/UX Related to appearance of the app and flyout.
Projects
None yet
Development

No branches or pull requests