Lollipop, as we’ve mentioned before, is the largest update to Android in years. Material, Google’s new design language, is at the forefront of those changes.

Android Material

Material, the huge undertaking aimed at giving Android a subtle new look, takes its inspiration from physical materials and makes them digital. New gestures, animations, lighting and colors lend affordances and style in ways that the OS previously did not. The new design language focuses on thin (1dp) “materials” that can play off of each other in flat space (for example, waves of light, called ripples), but don’t bend or fold in 3D.

Elevation is the crux of this paradigm. Elements are said to have a resting elevation they should return to when not in focus or use. Elevation changes can be magnified or reduced to match the depth of the interface (e.g., on a TV vs. a phone). Relationships between objects and the shadows that represent their elevation have also been carefully considered. Animation principles promote easing for lifelike feel. Responsive interactions take the place of skeuomorphic aesthetics.

This clarity makes an “authentically” digital language possible. Google should be lauded for its attention to the design docs; they’ve been out only a few months and already there’s an update.

What Android Material Means for Designers

None of this is terribly hard for UI designers to learn or utilize, but it does put heavier emphasis on interaction design. That means considering how UI elements animate in physical space, how screens transition, and how an interface can become a subconscious conversation with a user. If you’ve been putting off getting strong interaction design into your apps, now is the time. Users will expect more.

What Android Material Means for Developers

Material shifts the paradigm for developers, too. They are being pushed to improve their implementation of these ideas. We know it will be the center of many conversations going forward, especially as we learn the language of Google’s physical-inspired, digital-focused animation style versus iOS’s, which is less digital and more physical.

Play Newsstand Case Study

Instead of rehashing Google’s excellent app checklist, I thought it more pertinent to have a look at those standards in practice through Google’s Newsstand app.

Splash Screen

Immediately upon entering Newsstand, you are greeted with hallmarks of Material. The ripple effect plays across the full-bleed hero image and cards slide in from the bottom like pieces of paper on a smooth surface. The timing is clean and draws the eye to important pieces of hierarchy.

Color

The use of bold color across the app is both consistent and helpful. It makes wayfinding and returning to the app simple to learn and remember. Newsstand keeps the branding of article sources to an acceptable minimum. Read articles turn black and white.

Cards

While I was initially confused about how to interact with the cards as they appear in articles, it quickly became apparent. Layering makes this possible, if a little strange in this case (perhaps it’s because I’m an iOS user most of the time, or that the article was rather short). Cards drive thinking about content in smaller bites. While the Android docs warn against getting too “cardy,” they do make many kinds of interactions possible (sliding in or out of view for example, as opposed to appearing or transforming in place). These, along with the focus on subtle interactions, help push Material in the direction of a natural user interface.

Images

Newsstand is a clear example of Material’s full-bleed hero images. It’s a scheme inspired originally by print and owned more recently by sites like Medium. This app adds the twist of ever-moving headers, which, when paired with the dense color filters, gives it a nightly news feel.

It also adds to a feeling that pervades Material-designed apps: namely, that everything is always on the verge of springing. It’s a bit like a children’s TV show. Color! Flash! Attention! If Material were any more expressive, it would become tiring. Thankfully, the motion is suitably subtle, and it adds more character than bang.

Drawer

Google apparently didn’t get mired in the debate about whether to hamburger. This drawer was a bit hard to call up, but did cross over the current content, a scheme we’ve seen more of since the aforementioned debate.

Want another case study? Brian Lovin did a breakdown of Inbox, Google’s new email client, albeit on an iPhone.

Prototyping

Google has made it easy to design for Android 5.0. Not only have they supplied design files for their UI elements (see the resources section), but they’ve made Polymer match Material. If you’re into prototyping and have a few web chops, this is great news. You can quickly prototype ideas for proper user testing using web components. While our frontend web team agrees that these aren’t ready for production web work, they’re a great tool in the box for us designers. Or you could bootstrap it, if that’s your thing.

Notes on Implementation

New releases of Android typically stand in the long shadow of previous versions. This time, Google has done a good job of backwards compatibility. Android’s support libraries enable developers to implement certain newer features in previous versions of the OS.

The Material Design portion of the support libraries cover the look, but not the feel—the visuals are there, but the interaction isn’t. Developers will likely reach for libraries to fill this gap.

Which components are backwards compatible, and how far back?

• Material theme (shadows, cards, color extraction from images, aka palette): Some.
• Promoted action button and Snack bar: Technically these are patterns, not pre-built assets. Attainable through basic layout of views or libraries.
• New action bar/toolbar: Yes, AppCompat (back to 2.1 aka Eclair).
• Interactions (ripple, hero animations): No.

Lollipop also adds support for vector assets, if only as XML.

Performance is a UX metric, if a less sexy one. Lollipop improves battery life as well as connectivity. Users also gain more control over when notifications show up, which means that how you plan for the user to see those notifications may change. This will require a better understanding of how users want to be notified. Not that you were being annoying before, right?

Other Resources

Kits

• Android
• UI8
• BluefireX

Learning

• DesignBytes
• Google IO
• Design Docs

Inspiration

• Android Niceties
• Android UX
• Animation Samples
• Dr. Lollipop

The post All You Need to Know About Android Material appeared first on Big Nerd Ranch.

Centered around vector design and containing useful tools, Sketch is getting plenty of buzz among UI designers as an alternative to Adobe’s Creative Suite. But how does it stack up?

The Benefits of Sketch

Sketch gains a lot from being new and shiny. For one, it doesn’t run on the slow platform that Creative Suite programs do. For another, it’s geared specifically for digital-only, app-centric projects. It doesn’t have cruft for photographers, it doesn’t clutter the workspace with a million panels, and changing aspects of elements is clear and helpful. All this means that Sketch is pretty fast at what I use it for.

With Sketch, designs come out pixel perfect and in vector format, a requirement for multiple screen sizes. Shapes are easy to combine. You have the ability to preview on your device using Sketch Mirror, and @1x and @2x exporting is baked in, if you’re into that sort of thing. Sketch does all this with even less interface than Adobe Illustrator—and often does so more cleanly.

The Problems with Sketch

However, there are tradeoffs to using Sketch. At times, a bug (like a disappearing panel or weird artifacts all over the place) will appear in the beta version, requiring you to restart or simply wait for a fix.

Many of the frustrations I run into are leftovers from working with other programs. Handling layers and groups feels unintuitive in Sketch. Its guides seem slow and clunky. Why do I have to click twice to create a guide? It’s not that big a deal to some, but I’m all about shaving seconds off my workflow. I often use GuideGuide in Photoshop to create quick and easy guides, and I utilize many other extensions for saving files, resizing graphics and more.

Which brings me to another issue when it comes to using Sketch: a lack of extensions. A couple of notable exceptions are Ale Muñoz’s Orange Commands and Thomas Seng Hin Mak’s Sketch Plugin Scripts.

Sketch’s developers are a small team, and they are working as hard as they can to make Sketch great (use the beta for a few days and see how often you get bug fixes and improved features—it’s impressive). But the ‘Shop, and even Illustrator, have larger libraries of extensions and collections of design assets, not to mention the control they provide over your work. It’s for those reasons that many designers haven’t switched, and it’s part of why we eagerly await Skala, a competitor from the detail-oriented Bjango, slated for beta in late 2013.

Sketch in a Workflow

Sketch covers only part of a workflow. I often use pen and paper or a whiteboard first, and then move on to wireframes as necessary. Sketch will handle low- to high-fidelity wireframes with ease, though Omnigraffle is hard not to reach for, thanks to some of its time-saving features.

Pick your poison: faster low-fidelity wireframes in something like Omnigraffle (good if you’re in an iterative workflow) and recreation in Sketch when you need higher fidelity, or slower low-fidelity wireframes and faster translation into mockups. Either pairs well with Flinto, my go-to prototyping app.

Sketch also plays well with Illustrator if exported into the SVG format (PDF and EPS formats don’t work, for some reason). I then use Specctr to handle speccing. It’s a good replacement until Sketch gets its own features.

Should I switch from Photoshop, Illustrator or Fireworks?

It depends on a couple of things. Are you willing to wait and see if Skala will be any good? If so, I’d check that out before you go learning a new workflow. Keep in mind that even if Sketch is easier than Illustrator on the whole, you’re probably still faster for the time being on whatever you’re using, if not by much. (It’s kind of like switching from Qwerty to Dvorak. Dvorak is inherently better, but you’re still faster on Qwerty until you’ve made the transition). On the other hand, if you’re just starting out doing UI work, Sketch would be a great way to dive in.

Sketch might also make a good replacement for your current workflow if you’re interested in removing the speccing step and would instead prefer that your developers have access to the files. At $70, it costs less than two months of Creative Cloud. That said, this is not something I’d recommend for most shops. Pair programming/duo designing is often the best way of handling asset creation. Ultimately, your job as a designer is to deliver the assets. You don’t want a programmer mucking around in the layers and they don’t want you in their Categories.

TL;DR

I recommend Sketch. I’ve enjoyed the lighter interface and focused features. It’s actively supported and being iterated on by both the creators and the community. Even if Skala turns out to be great, Sketch will likely continue to be a useful alternative.

The post Made for UI Design: A Review of Sketch appeared first on Big Nerd Ranch.

My interview at Big Nerd Ranch was intense. I was in a room with glass on two sides, and anybody could look in. It quickly became crowded, with eight people in a room that fits four comfortably—and all focus was on me.

The interview was admittedly nerve wracking, as most are, but it is rare that the CEO drops in to ask a question or two. Or that candidates are evaluated for culture fit as well as their credentials. But afterward, I found this reassuring. I knew that that being a Nerd was taken seriously, because so many people took an interest.

I got the job as a mobile UX designer, and ninety days of design, dignity and doughnuts have flown by.

Design

While I had done design before starting at Big Nerd Ranch, it was never like this. The design team at Big Nerd Ranch is small but growing, so there’s a ton of flexibility as to what projects we’re on and what we get to delve into. We’re surrounded by extremely sharp developers who aren’t afraid to share their knowledge in order to make projects better. It’s been incredibly satisfying to combine UX, UI and visual principles with an agile approach to give deep consideration to everything we touch. We get to shape what design at Big Nerd Ranch means and spread the word that we’re open for business.

Dignity

We get our hands on amazing projects with customers who understand what it takes to make great products. A bias toward action and experimentation means that we can contribute to whatever we’re interested in, without fear. In fact, I think that’s part of the genius of Big Nerd Ranch: the removal of distractions. That focus enables people to establish flow in their lives.

As soon as I was made part of the team, I was trusted with responsibility and given the tools and time to rise to the occasion. I’ve been treated like an adult. I can work wherever and whenever I want as long as I get it done, and this has freed me to figure out how I work best. It’s fostered more experimentation in my life, and it’s inspiring.

Doughnuts

Doughnuts are simple pleasures: single-serving snacks in chewy yeast or crumbly cake. A dreary, rain-soaked Friday morning in April is no special occasion, but a few of us found reason to drive down the street and bring back a dozen or so doughnuts. And sharing little unexpected pleasures has pervaded my experience here. I can think of no better way to explain all the touches that make working here genuinely great. This level of comfort is hard won by those who have worked and continue to work to make Big Nerd Ranch what it is. I can only say thank you and do my best to contribute.

Three months has flown by. I left a group of friends to join Big Nerd Ranch and found so many new ones. I have a faint idea of what the future holds, but I’m confident that whatever it is will be faced properly, and with a bit of icing. Hopefully strawberry.

The post Design, Dignity and Doughnuts: My First 3 Months at the Ranch appeared first on Big Nerd Ranch.