Chrome tablet

4 Attachments

21 Responses

  1. Sebastien Gabriel Sebastien Gabriel

    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.

    likes

    3 months ago

  2. Christophe Tauziet Christophe Tauziet

    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.

    likes

    3 months ago

  3. Sebastien Gabriel Sebastien Gabriel

    @Christophe Tauziet Thanks man :)

    3 months ago

  4. Igor Syvets Igor Syvets

    Why there's no favicons on Android?

    3 months ago

  5. Sebastien Gabriel Sebastien Gabriel

    -- edited, I misunderstood--

    My mock didn't have the favicon on the new tab page tab at the time.

    3 months ago

  6. Tim Parker Tim Parker

    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!

    likes

    3 months ago

  7. Bertrand Fouillet Bertrand Fouillet

    Cleanest work ever :)

    likes

    3 months ago

  8. Sean Fallon Sean Fallon

    Extremely clean. Amazing stuff!

    likes

    3 months ago

  9. John Cockrell John Cockrell

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

    3 months ago

  10. Sebastien Gabriel Sebastien Gabriel

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

    3 months ago

  11. Kenneth Jensen Kenneth Jensen

    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!

    likes

    3 months ago

  12. John Cockrell John Cockrell

    @Sebastien Gabriel Ah, sounds good. I should take a look at how Chrome works on a Nexus 7 or Tab sometime.

    Good work!

    likes

    3 months ago

  13. Sebastien Gabriel Sebastien Gabriel

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

    3 months ago

  14. Justin Mezzell Justin Mezzell

    Your attention to detail is inspiring.

    likes

    3 months ago

  15. Rich Smith Rich Smith

    Genuine question, how come you decided to make it quite different visually between iOS7 and Android?

    3 months ago

  16. Sebastien Gabriel Sebastien Gabriel

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

    likes

    3 months ago

  17. Ryan O. Hicks Ryan O. Hicks

    @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

    3 months ago

  18. Sebastien Gabriel Sebastien Gabriel

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

    likes

    3 months ago

  19. Albert Xing Albert Xing

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

    3 months ago

  20. Sebastien Gabriel Sebastien Gabriel

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

    3 months ago

  21. Albert Xing Albert Xing

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

    3 months ago

keyboard shortcuts: previous shot next shot L or F like