Here is something I designed at weekend, full screen mode for lyrics... If you check out the attachment and give feedback, I will be totally like this!
Thanks!
More to come soon and you're very welcome to follow me on Twitter for more information.
---------
Update:
Orange is current branding color. The background changes with the current track's artwork. At the shot, it rocks Metallica! when you tap on lyrics the player bar (80% opacity block) goes up and gives you more space for more lyrics, and it comes back when you tap on lyrics again.
In general, I like the concept: the interactions seem to be well thought out, so is the UI’s look and feel. It appears both strong and easy to use. Like it lots!
I want to use this app! Only thing that looks a bit odd to me is the shadow above the text in the orange bar, and the 'Repost Lyrics' button, it seems a bit too far up, or too dark I'm not sure. Perhaps it looks fine on retina. Apart from that it's all looking great to me! I love the lyrics area and that bar at the bottom. I like the rounded feel it has, with the icons at the bottom. The arrows feel a little more friendly and less pointy. I don't know if you could do the same with some of the other icons like the bottom left one. I suppose that's a standard apple icon.
Beautiful work @Oykun!! I especially dig the buttons at the bottom. May just be me... but the inner shadow on the type at the top looks a bit odd though. Maybe try a different angle or less strength?
@Jip hmm, yes the share should move slightly up. I aligned in line including arrow, but the rect in line looks better I guess. Thanks,
@Jonathan Ogden Thanks mate! the nav bar text shadow comes from other screens actually, but I guess I can change it in whole thing :) For report btn, I kept same padding at top and bottom actually, but I will try to reduce bottom. Regarding share icon, yes I wanted to keep the "share icon" as close as to standard one. The whole thing looks more fluid and softer on actual device. thanks for detailed feedback, I'm trying them ;)
@Jonny Delap and @Jonathan Moreira Thanks! yes I had actually same feeling for that text shadow, but it comes from other screens, I gotta change whole thing for that, and I guess I can do that :)
@Oykun Yilmaz - cool. I didn't explain myself very well at first. I think the position of the text in the report button is fine, it was just that the shadow looked a bit too high up, or too distant from the text. I had a bit of a play with the shadows in the button, and orange bar. Maybe something like this?
@Jonathan Ogden ha yes yes the text shadow issue, I fixed that with the updated attachment. Btw thanks for giving time to play with design, much appreciated! Thanks,
@Daryl Ginn yes I know. Anyways, fixed the text shadow with updated attachment, thanks.
@Marcus Lindgren Maybe one day I will be honoured to design Grooveshark as well :) Thanks,
@Brandon Emrich I have no idea what it means :) but what I know is that the dev is reading all these feedbacks ;) Thanks,
23 Responses
Pro
Oykun
Hello Monday-ers,
Here is something I designed at weekend, full screen mode for lyrics... If you check out the attachment and give feedback, I will be totally like this!
Thanks!
More to come soon and you're very welcome to follow me on Twitter for more information.
---------
Update:
Orange is current branding color. The background changes with the current track's artwork. At the shot, it rocks Metallica! when you tap on lyrics the player bar (80% opacity block) goes up and gives you more space for more lyrics, and it comes back when you tap on lyrics again.
11 months ago
Pro
Matthew Morek
In general, I like the concept: the interactions seem to be well thought out, so is the UI’s look and feel. It appears both strong and easy to use. Like it lots!
May I ask, is this a karaoke-kind of app?
11 months ago
Pro
Oykun
@Matthew Morek thanks mate! I can't tell more than what I already show for now, and apparently you have lyrics here ;)
11 months ago
Pro
Jip
The alignments of the bottom icons are a bit off..
However this looks really nice! Great job!
11 months ago
Pro
Jonathan Ogden
I want to use this app! Only thing that looks a bit odd to me is the shadow above the text in the orange bar, and the 'Repost Lyrics' button, it seems a bit too far up, or too dark I'm not sure. Perhaps it looks fine on retina. Apart from that it's all looking great to me! I love the lyrics area and that bar at the bottom. I like the rounded feel it has, with the icons at the bottom. The arrows feel a little more friendly and less pointy. I don't know if you could do the same with some of the other icons like the bottom left one. I suppose that's a standard apple icon.
11 months ago
Beautiful work @Oykun!! I especially dig the buttons at the bottom. May just be me... but the inner shadow on the type at the top looks a bit odd though. Maybe try a different angle or less strength?
11 months ago
Pro
Falko Joseph
Well crafted, as always though. :)
11 months ago
Pro
Jonathan Moreira
I agree with @Jonathan Ogden concerning the text shadow, a little too strong. Other than that great concept and solid design!
11 months ago
Pro
Justin Schueler
I agree with the others regarding the text shadow.
Tough it's just as great as the song!
http://www.youtube.com/watch?v=OHIEO1_0Ulo
|,,|
11 months ago
Pro
Haziq Mir
What's not to like? Except for the fat player controls :P I hate fat things.
11 months ago
Pro
Oykun
@Jip hmm, yes the share should move slightly up. I aligned in line including arrow, but the rect in line looks better I guess. Thanks,
@Jonathan Ogden Thanks mate! the nav bar text shadow comes from other screens actually, but I guess I can change it in whole thing :) For report btn, I kept same padding at top and bottom actually, but I will try to reduce bottom. Regarding share icon, yes I wanted to keep the "share icon" as close as to standard one. The whole thing looks more fluid and softer on actual device. thanks for detailed feedback, I'm trying them ;)
@Jonny Delap and @Jonathan Moreira Thanks! yes I had actually same feeling for that text shadow, but it comes from other screens, I gotta change whole thing for that, and I guess I can do that :)
@Falko ♔ Thanks!
@Justin Schueler Thanks for the amazing live performance link! I just stole it from your comment and added to my desc :)
11 months ago
Pro
Justin Schueler
yeah, sure thing dude ;)
11 months ago
Pro
Julia Khusainova
@Oykun Yilmaz, heart icon looks way better :)
11 months ago
Pro
Tanveer Junayed
Really nice concept!
11 months ago
Pro
Jonathan Ogden
@Oykun Yilmaz - cool. I didn't explain myself very well at first. I think the position of the text in the report button is fine, it was just that the shadow looked a bit too high up, or too distant from the text. I had a bit of a play with the shadows in the button, and orange bar. Maybe something like this?
11 months ago
nice one :)
11 months ago
Pro
Daryl Ginn
What's up with that text shadow on the 'report lyrics' button?
I like everything but that. Props.
11 months ago
Saw this, and though it was sa grooveshark app, would be awesome.
Is awesome anyways ;)
11 months ago
This would be fun to style with NSAttributedString in iOS 6
11 months ago
Pro
Mani
perfect.
11 months ago
Pro
Oykun
@Jonathan Ogden ha yes yes the text shadow issue, I fixed that with the updated attachment. Btw thanks for giving time to play with design, much appreciated! Thanks,
@Daryl Ginn yes I know. Anyways, fixed the text shadow with updated attachment, thanks.
@Marcus Lindgren Maybe one day I will be honoured to design Grooveshark as well :) Thanks,
@Brandon Emrich I have no idea what it means :) but what I know is that the dev is reading all these feedbacks ;) Thanks,
@Andrey S. Rodrigues , @Mani Thanks folks!
11 months ago
Pro
Jonathan Ogden
@Oykun Yilmaz - yes, perfect!
11 months ago
Pro
Ramy Majouji
If I could choose my life partner on their interface design skills I would probably marry you.
11 months ago