DISCUSSION: redesign of Zen Audio Player
YuriBrunetto opened this issue · 24 comments
Why?
As a front-end developer who's also a little bit designer, I always try to think in how to make things more beautiful (for me, of course).
The redesign
So, I've decided to make a redesign - and it's just a start idea for you guys see and tell me what do you think about it. Oh, and I don't think that the current design is bad, is just an idea for improvement. You can check out the entire album on Imgur here.
Home page
Home page with search
Demo page
Demo page with video description
Hi @YuriBrunetto these are a great start, thanks so much!
Here's some suggestions:
- If we can make the gradient be the full height of the page let's do that.
- The red/orange backgrounds for buttons, search results & the player seem to clash with the nice gradient background
Hey @YuriBrunetto great design, but i think that the colors palette should be rethinked. Something more opaque would be a better choice.
Nice Work @YuriBrunetto.I think you can use material theme maybe materializecss. I think it will go good with it.
@shakeelmohamed so, I guess we can make the gradient with full height and create a ℹ️ button in the right corner which when you click it, it'll show the Zen Player's sponsors
I agree about the colors, I'll pick something different
@gpigatto thanks! Yeah, agree. I'll pick something more opaque, indeed
I would like to contribute to the redesigning too.
My suggestion would be to include three tabs at the top as a theme selector:
low key data usage efficient version. a gradient based look. a material design based look.
Can I start working towards this too? New to open source. sorry for any basic mistakes.
@parimatrix go for it! Ping me on gitter if you need anything
I am also interested in this...and like the idea of different themes.
@imnotjohn see #253, there is some work in progress - feel free to start there and submit a new PR
Hey Shakeel! I'm new to contributing and I'd love to work out some of my designing skills. Is this still up for grabs? Thanks!
@jacobkjhan go for it! Until this issue is closed, it will be up for grabs
@shakeelmohamed I was wondering if this was the kind of look that you would have wanted. Let me know what you think.
@jacobkjhan not a bad first cut! I like the rounded design, here's some thoughts:
- can we get the search box rounded on the left side?
- the yellow is a bit harsh, can we make it a bit lighter or less opaque?
- the anchor text is barely readable with blue on blue, maybe make it light gray or a very light blue?
Here are some screenshots of the updated changes. Let me know if you'd like me to improve anything else!
Also made sure that the design is responsive!
The yellow still looks a bit odd, and still can't clearly see the link text. The search box looks much nicer now
Sorry I'm submitting so many versions. Want to make sure that things are the way you want them to be :) Let me know what you think about the darker background.
@jacobkjhan I love it!
Awesome! I'll make a PR for the changes. I have another question, with how I altered the html, I am no longer passing two tests. One being:
- Page Structure should have logo configured correctly:
TypeError: Cannot read property 'src' of null
at Context. (test/index.js:73:78)
and the other being:
- Page Structure should have expected elements:
AssertionError [ERR_ASSERTION]: Couldn't find
at Context. (test/index.js:78:16)
I've noticed that this is because of the DOM traversal that we have set on our front end tests. Should this be something I alter? I just need some advice as to what I can do.
The test cases are:
describe("Page Structure", function () {
it("should have logo configured correctly", function () {
assert.equal(browser.query("header > figure > a").href, "https://zenplayer.audio/");
});
it("should have expected elements", function () {
assert.ok(browser.query("header > figure"), "Couldn't find <header><figure>");
});
});What I ended up doing is that I changed some of the specs to inspect any descendant of header to find figure rather than looking for figure as a direct descendant:
describe("Page Structure", function () {
it("should have logo configured correctly", function () {
assert.equal(browser.query("header figure > a").href, "https://zenplayer.audio/");
});
it("should have expected elements", function () {
assert.ok(browser.query("header figure"), "Couldn't find <header><figure>");
});
});With those changes, I was able to make all the test specs pass. Would it be alright to make a PR with these changes?
Thanks!
@jacobkjhan sure, those changes to the test code seem reasonable
Hey guys! So sorry for the delay, I'm working like hell lately.. hahah
Well, I guess I'll create a new branch and then code the new layout version there. What do you think about this, @shakeelmohamed? Then we could see what we can make better, etc.
Also, it's very nice to see other people helping us out!
Cheers 🤓
@YuriBrunetto my attitude is always, go for it!
@YuriBrunetto Hey dude.
I would like to contribute to help with coding the new UI. I liked your design.
If there is any way that I could help. Please let me know😁
@YuriBrunetto Hello!
The design is improving and can now suggest that a "hide" and "show" speed parameter be applied.
Regards.
@sombek hey 😄
Nice! You could transform the design to CSS, if you want to. 😉