I've been wanting to post this for a while but since Chrome is evolving constantly I realized that it would never really be the right time so here it is.
Another side of my work is to design the visuals for Chrome on tablet (iOS and Android). My primary focus is the main UI, i.e tabs, toolbar, icons and search box.
This project was described in more details on my portoflio.
You can see the little differences by looking at the
iOS7,iOS6, and Android previews.
3 months ago
Dude, you always make things look cleaner. Knowing that you're in charge of Chrome makes me feel confident that it's in good hands. Love the pixxxxxxxels.
@Christophe Tauziet Thanks man :)
Why there's no favicons on Android?
-- edited, I misunderstood--
My mock didn't have the favicon on the new tab page tab at the time.
Fantastic work, and amazing that I see it for hours and hours a day - I'm glad to say it's beautiful and keep up the great work!
Cleanest work ever :)
Extremely clean. Amazing stuff!
One of the interesting things about Chrome for Android is that it typically omits forward and back buttons next to the omnibox because of the software (or hardware) back buttons.
What might Chrome for Android look like without the back button (and forward button, for that matter)?
@John Cockrell Chrome for Android relies on software or hardware back button for phone. Chrome Back and forward are available in the 3 dots menu though.
Tablet is closer to desktop in term of UI and use of space. Not having it would hurt usability and you would lack the long press feature (back and forward history).
I'm a big fan of the Chrome environment on all my devices.
With that been said, I've long wished for a slightly taller tab on tablets, otherwise I am fully satisfied :) Good work!
@Sebastien Gabriel Ah, sounds good. I should take a look at how Chrome works on a Nexus 7 or Tab sometime.
@Kenneth Jensen finding the right size for touch is tricky. We always want to leave as much place as possible to the content area. With that in mind we went for the OS recommended touch targets. On IOS, the toolbar is 44pt tall and if you add the Chrome tab height and the OS top status bar, you also get a 44pt touch target.
Your attention to detail is inspiring.
Genuine question, how come you decided to make it quite different visually between iOS7 and Android?
@Rich Smith At the time Chrome got released for Android, it was going to replace the default browser app. It had to fit right in with the OS. Same color, proportions, strokes and shadows.
Regarding iOS, Chrome - especially on tablet - was an extension of the OSX desktop. It inherited its visual style with grey gradients, noise and shadow. It felt right in place with iOS.
With the iOS7 release, Chrome tablet and phone went in a different direction than OSX's. Gradients and shadows went away and even the general color tone changed, the grey got lighter.
iOS7 and Android were still too different to consider an exact same Chrome for them.
We're always trying the find the right balance between the consistency with the OS it's deployed on and the consistency with its own brand. That's why the design of Chrome always fluctuates even if its core features stay the same, i.e tab shape, menu, icon positioning, new tab button, etc...
@Sebastien Gabriel in regards to your 44pt touch target comment; You have more experience than I do, but give this article a read - http://www.uxmatters.com/mt/archives/2013/03/common-misconceptions-about-touch.php
@Ryan O. Hicks Thanks for the feedback.
Points or pixels are indeed not an unit of measure of physical size.
However, in the case of Apple very controlled set of devices and screens, you can rely on this "virtual" and very subjective size because their screen will have a DPI and physical screen size that takes this guideline into account.
44 pt on the iPhone 4 and up will have the same physical size (in mm) than on an iPad. Of course this doesn't not apply to the iPad mini that has a slightly higher pixel density. The precision of the touch detection makes up for it, but the targets are indeed slightly physically smaller on a mini.
In the case of Android, they recommend a bigger/safer touch target of 48pt which can be used if the OEM does not go crazy on the DPI/Screen size ratio.
I think Windows 8 has a 70pt recommended touch target size (I'm not entirely sure of this one).
Ultimately, defining pt as physical size is a trick or shortcut that only works when you know what to expect from the devices your app will be deployed on. They are very useful when you design on a computer screen for other screens with different pixel density because you get to actually count the pixels, which is more natural - at least in my opinion - than counting millimeters. You definitely need some actual testing on the device though.
Love it - please please bring this to Desktop as well?
(and is it just me, or is the refresh button thinner than the back button?)
@Albert Xing Thanks! Well it is the same tab shape and icons as on desktop. The theming and size ratio are different.
Yes the refresh button is thinner for visual balance. Having the same line weight as the back and forward buttons would have made it too chubby.
@Sebastien Gabriel I guess it's just the simple flat look - the gradient on the desktop toolbar is getting a bit old.
I see, it just looked a bit strange to me, that's all.
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–2014 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.