Profile Screen (+ real pixels)

Dribbble_template20

2 Attachments

29 Responses (page 1 of 2)

  1. Pro Julia Khusainova Julia Khusainova

    The first sneak peak of 23snaps iPhone app. This is a child's profile screen where you can view all the information about the child - photos, videos, measurements, comment and like his/her activity...

    You can scroll throw all the activity, switch between the timeline/gallery view, etc.

    The "Nudge" button allows someone like granny to softly remind that it's time to post some updates! Lol I wish there was something like that on Dribbble :)

    We were after clean look, nothing too baby like, no sex oriented colors (pink, blue) so we went with grey with some additions and variations.

    Please see attached for bigger view.

    Update:
    Real pixels
    attached when user scrolls down to showcase the top transparent bar.

    Comments are much welcomed. Thank you!

    *** Follow me on Twitter for updates on this project or just for chat! :)

    10 months ago

  2. Pro Mani Mani

    likes

    10 months ago

  3. Pro Mads Ejsing Mads Ejsing

    Looks crisp! Great job.

    What if a "cover" photo is white or whitish? Do you think the subtle drop shadow on the text will be enough to ensure contrast?

    likes

    10 months ago

  4. Pro Mads Ejsing Mads Ejsing

    @Mani Actually, it is slightly bigger. Althought not by much. :-)

    likes

    10 months ago

  5. Pro Julia Khusainova Julia Khusainova

    @Mads, @Mani Ok guys I attached even bigger. Let me know how many pixels you want :-P

    @Mads thank you! It's better not too upload the "white on whitish" however I gave a text enough shadow to make it stand out even on white background and not to be too dark on all kinds of backgrounds at the same time.

    10 months ago

  6. Pro Claudio Gomboli Claudio Gomboli

    Really clean, @Julia Khusainova I like it

    likes

    10 months ago

  7. Pro Julia Khusainova Julia Khusainova

    Thank you @Claudio!

    10 months ago

  8. Pro Mads Ejsing Mads Ejsing

    While aesthetically, I do like the clean approach with simply having the text upon the cover image, I think it is a severe flaw that people cannot upload whiteish images without the risk of having the name washed out.

    I would do something like this (done very quickly without the .psd, so don't mind the quality): http://img232.imageshack.us/img232/2083/515q.png

    Just a very subtle black bar in order to ensure readability on the most white images.

    likes

    10 months ago

  9. Pro Julia Khusainova Julia Khusainova

    @Mads thank you for putting it together. Well I thought along the same lines as you do. And this was the exact solution I proposed as well as a few others. I'll attach the variations of this view I had in mind.

    But the client doesn't want anything to overlap the top image as it might be a child's face or anything else important so we removed the subtle bar and went with the text shadow instead.

    I appreciate the discussion around my design! Thank you :)

    10 months ago

  10. Pro Daryl Ginn Daryl Ginn

    This looks great!

    @Mads Ejsing is on the right lines, but I think you should go for a more subtle option, pretty much how Facebook handles it (faint dark gradient).

    Say hello to my brother & nephew: http://c.daryl.im/Ia8A

    likes

    10 months ago

  11. Pro Mads Ejsing Mads Ejsing

    @Julia Khusainova I follow your reasoning, although I do not necessarily agree that it is the best solution. ;-)

    You are welcome. And as I said already: great design!

    likes

    10 months ago

  12. Pro Julia Khusainova Julia Khusainova

    @Daryl Thank you for the feedback! I'm attaching a view where the user scrolled down and the top bar appeared with the child's photo and info. This is how we handle the transparency problem on scroll.

    I would be happy to add such bar and I agree with you and @Mads - there is no harm to the top background image but... the client provided me with feedback from actual users (moms and dads) and they are saying the bar is distracting. So he doesn't want anything on top of that image.

    P.S. Nice family you have! :) There is no chance I have a nephew or a niece anytime soon tho.

    likes

    10 months ago

  13. Søren Horsbøll Hansen Søren Horsbøll Hansen

    How about keeping the stroke around the profile image on the scroll-view? The circle looks a little nekked.

    My 2 cents on the bar/text-shadow/gradient is keeping the text-shadow. I, for one, am getting tired of subtle bars overlapping photos, where it isn't needed, because of a "what if" scenario. I wouldn't mind the bar/gradient if the photo was too white for the text to be readable, but then (and only then) would it serve a valid purpose.

    All in all, great work @Julia Khusainova. I'm looking forward to seeing some shots on how the uploading/updating works.

    likes

    10 months ago

  14. Pro Julia Khusainova Julia Khusainova

    @Søren Horsbøll Hansen good point. Obviously you're on the one side with people who want clear top image.

    More is coming, we are wrapping up and preparing to the App Store and the Post an update flow is really cool. Can't wait to share.

    10 months ago

  15. Søren Horsbøll Hansen Søren Horsbøll Hansen

    Well, I'm not saying that the bar doesn't looks great in @Mads Ejsing suggestion (which I think it does). But for the sake of argument, what might save a white-ish photo, could possibly feel bloated on all other none-white-ish photos.

    It's never easy when users are handed control of these sort of things – I would've probably thrown in (and argued for) a bar first time around as well :]

    likes

    10 months ago

  16. Pro Kartik Mahant  Kartik Mahant 

    What cam is that ? And i think @Daryl Ginn is right here.

    10 months ago

  17. Pro Dhiren Adesara Dhiren Adesara

    nice !

    10 months ago

  18. Pro Mads Ejsing Mads Ejsing

    @Søren Horsbøll Hansen Look at it this way. What provides the most dissatisfying experience? Scenario one, 80%* sees a faint black bar (or any other option, for instance the one @Daryl suggested - a black bare might not be the best solution) on an image on which it isn't necessarily needed. Or scenario two, 20%* are not being able to distinguish their child's name on their profile?

    In scenario two, a majority of the people might even have to/want to find a new cover photo, even though they like the bright whiteish picture the most. Scenario one will at most constitute a slight (and presumably brief) annoyance, if any.

    I respect however the fact that Julia's client made user testing on the subject, but I am a bit unsure how they were made. I highly doubt that people in general would care much for a faint bar, unless they were faced directly with the choice of having it there or not having it there without considering the context.

    Anyways, this is not a major issue. I am sure people will find ways to live with both scenarios, I just wanted to point it out as there might be room for improvement here. The rest looks damn fine. ;-)

    _______

    *No, I am not sure that 20% of cover photos are bright/whiteish. You can change the values to your liking, the argument will probably still be valid. ;-)

    likes

    10 months ago

  19. Pro Julia Khusainova Julia Khusainova

    Agree with @Mads here - not a majority of people will be frustrated by not able to distinguish child's name.

    The thing is the image here is intended to be a child-related so it most probably be his/her face/closeup view or anything else people would love to be able as in much details as possible. I went with about 4 different options for the child's profile screen and as you guys opened up such an interesting discussion here I should post them as rebound to this one and let's see which has a right to live.

    I think there should be an assumption that young parents think a bit differently about such things than the rest of the world and I allow them (users who test) decide which option they like most.

    10 months ago

  20. Pro Julia Khusainova Julia Khusainova

    @Kartik Mahant ✦✦✦ this one is Canon EOS 1000D

    likes

    10 months ago

  21. Pro Stuart Norrie Stuart Norrie

    slow clap... great stuff here!

    likes

    10 months ago

  22. Pro Andrew Korytsev Andrew Korytsev

    Lovely work!

    likes

    10 months ago

  23. Pro Julia Khusainova Julia Khusainova

    @Stuart Norrie & @Andrew Korytsev thank you guys!

    10 months ago

  24. Pro Paresh Khatri ::::✈ Paresh Khatri ::::✈

    @Julia Khusainova I am really so lazzy for providing a feedback but for this i wasnt able to stop myself by making comment for it.. its superb :)

    likes

    10 months ago

  25. Pro M+O M+O

    slick! nice work. but don't you think that using too much 1px lines on retina will look not as good as mixing 2px lines with subtle 1px ones?

    likes

    10 months ago

keyboard shortcuts: previous shot next shot L or F like