Some progress on the UI for something I'm working on. The footer icons are just place-holders until I've finished creating the final ones.
I'd love to get some feedback on this.
I've been struggling a little with an overall look of this thing, but I think I'm getting somewhere close now. If you think the style looks a little familiar, it's because I saw Mikael's buttons and knew something similar would be perfect.
The attachment has a full-width view of the top and bottom bars.
Let me know what you guys think, I'm always happy to take on feedback.
9 months ago
Can you give any pointers on the sorts of layer styles you used for the UI plastic feel?
The tab bar feels very weird maybe just because it's a different execution. Gotta love the Bevel & Emboss here. You were talking about this design on Twitter, weren't you?
EDIT: Feedback -
There's not enough to give feedback about and my interpretation might be wrong. I feel like the tabs feel pretty weird, like I pointed earlier. How about using one shape? I love everything else. Tone down the drop shadow on the title bar maybe?
@Ben Howdle I can do you one better - I've attached a simple PSD for you to play with.
@Haziq Mir Yeah this is the Bevel & Emboss in effect :) Thanks for the feedback - the top bar is pretty different to what you might expect but I feel that gives it a nice sense of depth. Initially the bottom tabs were closer to the Instagram style, but it lost of of the effect i was going for (rugged, satellite phone type of vibe)
I like the idea, but feel as if the header might have too much depth to it. It might look better when there's content in the middle.
One idea to alleviate this could be removing the shadow from the left/right bolted on plates. Make them look like they're part of the main centre piece, joined by the bolt/dividing line . The List/Share button inside these plates already gives it the depth you want.
I like the attention to detail. nice work, man
As much as I like the detailed UI work here, I think it'll be too heavy on the eye for the user. Remember Tweetbot with all the double strokes and lines? Was way too heavy.
But again, I like it. Just think it's too heavy on the eye.
@Jeremy Swinnen TweetBot wins because of its UI. IMO they own UI design.
@Jeremy Swinnen Thanks for the input, ultimately that comes down to personal preference though :)
I like it, but it does feel heavy. There seems to be too many tabs in the lower tab bar. Good work on the layer styles though.
I think this is a cool style.
Everything is great - but the pressed button is little bit wierd. would like to see more even with the content :)
Sick. Good to see someone trying something different!
amazing but I am not sure about those tabs buttons :( may be they need some better perspective shadows..
I love what you did here, the style is something different and it works well. I wonder if that's going to be something for a gaming app with this dark UI?
As for the feedback, I do have my concerns only about the active button state at the botom bar. It seems that you've made it only slightly darker than the rest, which in my opinion doesn't do its justice. I know that a colourful icon indicates its active state as well, but I'd prefer to give it more depth to make sure it's easy to spot at a glance. Maybe try giving it some subtle white/blue backlight?
Apart from this, it's a solid visual execution man. Likey likey!
Nice heavy look, I like that a lot. I would craft the tabs out of one shape with only the far left and far right buttons rounded off. Just bit a more elegant than bunched together button in my opinion.
I like this "heavy" look a lot. I feel like it's a heavy duty military Black Ops UI. Not sure what the app will be but it's definitely the kind of different that I dig. Interested to see how this evolves.
@Alex Toth thanks Alex, I am aiming for a slightly more rugged appearance so glad you picked that up.
by Adam Whitcroft
Working on the icons for RideRecon. The stopwatch's outer ring was originally the same width (3px) as the radar's outer ring, but it looked odd, so beefed it up a bit. Might still tweak the stopwatch one but the rest I'm happy with.
I'd be interested in seeing what you think each icon does...
Edit: The attachment includes a small fix to some errant pixels on the 'settings' icon.
Edit 2: Some further ideas on the 'settings' icon.
9 months ago
Easier to show than tell: http://mttmcd.nl/Is1X
@Matt McDaniel good suggestion thanks - I've rounded off the corners on the top tabs but have left them as is on the bottom.
@Glenn Hitchcock @Davey Heuser @Ari @Victor Erixon @Luboš Volkov @Jack Bingham @Paresh Khatri ::::✈ @Dmitriy Chuta @Matthew Morek @Martin Kool @Alex Toth thanks guys!
wow wow wow, amazing share!
8 months ago
Amazing! Thanks for sharing mate!!! @Adam Whitcroft
7 months ago
keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
Copyright © 2009–2013 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.
Follow Dribbble on Twitter