RideRecon UI (with Button PSD)

Riderecon-progress-crop

2 Attachments

24 Responses

  1. Adam Whitcroft Adam Whitcroft

    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.

    likes

    9 months ago

  2. Ben Howdle Ben Howdle

    Can you give any pointers on the sorts of layer styles you used for the UI plastic feel?

    9 months ago

  3. Pro Haziq Mir Haziq Mir

    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?

    likes

    9 months ago

  4. Adam Whitcroft Adam Whitcroft

    @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)

    likes

    9 months ago

  5. Pro Glenn Hitchcock Glenn Hitchcock

    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.

    likes

    9 months ago

  6. Pro Davey Heuser Davey Heuser

    I like the attention to detail. nice work, man

    likes

    9 months ago

  7. Jeremy Swinnen Jeremy Swinnen

    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.

    9 months ago

  8. Ben Howdle Ben Howdle

    @Jeremy Swinnen TweetBot wins because of its UI. IMO they own UI design.

    9 months ago

  9. Adam Whitcroft Adam Whitcroft

    @Jeremy Swinnen Thanks for the input, ultimately that comes down to personal preference though :)

    9 months ago

  10. Ari Ari

    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.

    likes

    9 months ago

  11. Pro Victor Erixon Victor Erixon

    I think this is a cool style.

    likes

    9 months ago

  12. Pro Luboš Volkov Luboš Volkov

    Everything is great - but the pressed button is little bit wierd. would like to see more even with the content :)

    9 months ago

  13. Pro Jack Bingham Jack Bingham

    Sick. Good to see someone trying something different!

    9 months ago

  14. Pro Paresh Khatri ::::✈ Paresh Khatri ::::✈

    amazing but I am not sure about those tabs buttons :( may be they need some better perspective shadows..

    9 months ago

  15. Pro Dmitriy Chuta Dmitriy Chuta

    Awesome, thx)

    likes

    9 months ago

  16. Pro Matthew Morek Matthew Morek

    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!

    likes

    9 months ago

  17. Pro Martin Kool Martin Kool

    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.

    likes

    9 months ago

  18. Alex Toth Alex Toth

    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.

    likes

    9 months ago

  19. Adam Whitcroft Adam Whitcroft

    @Alex Toth thanks Alex, I am aiming for a slightly more rugged appearance so glad you picked that up.

    9 months ago

  20. 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

  21. Pro Matt McDaniel Matt McDaniel

    Easier to show than tell: http://mttmcd.nl/Is1X

    likes

    9 months ago

  22. Adam Whitcroft Adam Whitcroft

    @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!

    9 months ago

  23. Pro Asif Aleem Asif Aleem

    wow wow wow, amazing share!

    8 months ago

  24. Pro Tobia Crivellari  Tobia Crivellari 

    Amazing! Thanks for sharing mate!!! @Adam Whitcroft

    7 months ago

keyboard shortcuts: previous shot next shot L or F like