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.
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! :)
over 1 year ago
nice job @Julia Khusainova
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?
@Mani Actually, it is slightly bigger. Althought not by much. :-)
@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.
Really clean, @Julia Khusainova I like it
Thank you @Claudio!
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.
@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 :)
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
@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!
@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.
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.
@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.
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 :]
What cam is that ? And i think @Daryl Ginn is right here.
@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. ;-)
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.
@Kartik Mahant ✦✦✦ this one is Canon EOS 1000D
slow clap... great stuff here!
@Stuart Norrie & @Andrew Korytsev thank you guys!
@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 :)
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?
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