I've been asked to share the real pixels of this iPhone app screen so I'm doing it. Apparently this project is going to be designed for iPad and as osx widget so I decided to share the initial stage of this view as real pixels.
I'm tweaking colors and icons but I think it somes together.
A few key points:
✎ The very first icon takes you to the list of emails.
✎ Next icon is pretty self-explanatory
✎ The number shows unread emails
✎ The reply button is on hover. is clicked!
✎ The user icon tells you Kanye is your contact. Don't want to have him as a contact anymore? There you go.
Attached is the widget on white background.
You feedback is welcome as always.
2 months ago
Great spacing, Julia
Please tell me this app is gonna be in the app store soon. Lovely!
Thanks so much @Joel, I'm working as a bee to make it real ;)
Thanks @Lukas! Appreciate that :)
optimal and yet so conveying!
Maybe a bit too many colors for me at one place, but they work really well together and are really nice. Hard to say anything else, it rox :)
@Avinash That's the goal, thanks!
Thanks so much for the feedback @Frantisek! Appreciated :)
I'd be inclined to swap the trash icon and the reply button location. Just me?
Very Nice Jul
@Jack Bingham True, most people will always search on the right side for reply buttons and such
Some thoughts btw:
"The very first icon takes you to the list of emails. "
Logically should take me to the grid of emails. 4 squares say nothing about list view.
"The user icon tells you Kanye is your contact".
As for me, user icon tells me only that it is a user, not that it is a person in my contact list.
very well done!
Amazing work! Isn't the Reply button in a clicked state though? An inner shadow is rather uncommon on hover. Also, I'm not sure about the "✖" next to the user icon. How about something like this instead? (really rough mockup)
really looks good :)
That inner shaddow on the hover state does not fit well with the overall flatness of the ui, remove the shadow and use just color to acentuate the hover state. Rather then that great work!
@Jack my thoughts :) Yes I was fighting with the idea of putting in on the right (osx style) rather than on the left (more native web app way of "Save", "Cancel") etc. I think you're right, I'll play around with it. Thanks!
@Joel Agree with you and Jack. Cheers!
@George Thanks for the feedback. You caught me on the work - I mean the grid of course like shown there
Again it's UI specific - please have a look at the link - the user icon is only near your contact, others you can add. User will quickly get used to that, I don't think it's something hard to remember.
@Mehmet, @Belaĝojo, @Leonardo, @Greg, @krishnachaitanya Thanks guys! :)
@Jona It's in clicked state, correct. What confuses you about the user and the cross icon? I'm worrying the single cross would imply something else - like removing the email or something (before user notices the trash icon which is likely to be on the left now)
@Virgil It's clicked state sorry. Appreciate the feedback!
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