[ { "name":"art", "title":"Art", "items":[ { "id": "1", "title":"Tooling Up", "author":"Amber Bravo", "date":"June 14 2015", "primaryColor":"#5a7785", "secondaryColor":"#455a64", "image":"https://g-design.storage.googleapis.com/production/v5/assets/tooling-up-header-a13cfd9a.svg", "desc":"How a new generation of prototyping tools at Google will help designers build better software.", "content":"The road from design to production is often hard-won, filled with well-intended design detours, steep learning curves, and the occasional road block. Here’s a common scenario: A team of designers begins building wireframes for a new product. Several weeks, revisions, and pin-ups later, they emerge with a “final,” “shippable” file, which they hand off to the development team. The engineers poke holes in the design, deeming several elements “unbuildable,” and begin rendering out some semblance of the design in code. Several weeks later, they deliver a staging site. The designers are thrilled—this is the first time they’ve seen their design IRL—but are quickly deflated when they realize how much of the design has been lost in translation. The typography is wonky. The animations and interactive elements need to be re-tuned. A volley of annotated emails with screenshots ensues, until finally, the designer and developer sit side-by-side, and visually adjust the design directly in code." }, { "id": "2", "title":"Expressing Brand in Material", "author":"Viktor Persson & Rachel Been", "date":"July 4 2015", "primaryColor":"#202226", "secondaryColor":"#333", "image":"https://g-design.storage.googleapis.com/production/v5/assets/article_brand_2x1_202226-fc539618.svg", "desc":"Material design offers a system for designing functional and elegant software. How does your brand fit into the framework? We’ve created a step-by-step guide to staying on-brand while going material.", "content":"Nobody knows your brand better than you do. This is why when we set out to create the framework for material design, we were sensitive to the ways in which third-party developers might leverage the system. We wanted material design to give comprehensive guidance for designing effective and elegant UIs — taking a strong position on motion, dimensionality, color, and graphic hierarchy — but with enough latitude to allow for various levels of engagement. You don’t have to adopt every element of the material design system in order for it to be beneficial to your identity system. Whether it’s a custom font, a unique color story, or distinct voice, everything that provides stylistic distinction in a product should be celebrated and supported in the material design framework. We’ve laid out the top brand touchpoints to help illustrate the system’s flexibility and give designers and developers a road map for showcasing their brand identity." }, { "id": "3", "title":"New Design Tools", "author":"Amber Bravo", "date":"July 29 2015", "primaryColor":"#3e50b4", "secondaryColor":"#303fc3", "image":"https://g-design.storage.googleapis.com/production/v5/assets/150727_GD_Article_ToolingUpFurther_1x1Tile-01-86c8e03e.svg", "desc":"See Also: (More) thoughts on design tools", "content":"This week on Google Design, we published a roundtable discussion with Matias Duarte and the founders of Pixate and RelativeWave, Paul Colton and Max Wiesel. To prepare for the interview, I turned to my design brethren on Medium (and beyond!) to learn more about their experiences working with some of the more popular prototyping tools available today, as well as their hopes and dreams for the next generation of design software. Here are a few of the stories I found helpful for framing the discussion. A thorough account of using Form (pre 1.3) for the first time, from the perspective of a designer who is less familiar with Quarz Composer, with built prototypes to help synthesize the material covered in each section. Also worth reading: Ces’ great tutorial exploring material design in Origami." } ] }, { "name":"film", "title":"Film", "items":[ { "id": "1", "title":"Design from iOS to Android (and Back Again)", "author":"Roman Nurik & Viltor Persson", "date":"Aug 20 2015", "primaryColor":"#3e50b4", "secondaryColor":"#303F9F", "image":"https://g-design.storage.googleapis.com/production/v5/assets/renditions/Article_iOS_to_Android_Header_3e50b4-f064882f-1240.png", "desc":"A practical guide to designing across platforms", "content":"Designing and developing between platforms is a lot like traveling through different countries. You go through the same motions — sleeping, eating, sightseeing, regardless of where you are — but the customs of the country you’re visiting dictate how you go about doing them. In some countries, it’s ok to push people into the train, or eat a burger with a knife and fork. Similarly, if you developed your product first for iOS, you shouldn’t simply expect that you can port it into Android without issue, because your app will feel lost in translation. It’s important to understand the idioms and behaviors of each platform before you start design and development. That way your users will be able to use and easily understand your app on the platform that is native to them, and you will have the most clear and true version of your product — no matter where it’s used. This guide will walk you through some practical tips for moving from iOS to Android (and back again) without suffering a cultural divide." }, { "id": "2", "title":"Demystifying Density", "author":"Sebastien Gabriel", "date":"July 10 2015", "primaryColor":"#00ccb8", "secondaryColor":"#00b7a5", "image":"https://g-design.storage.googleapis.com/production/v5/assets/article_dpi_00ccb8-34fdd39e.svg", "desc":"Sebastien Gabriel takes one for the team with his exhaustive guide to DPI & PPI", "content":"Dots Per Inch and Pixels Per Inch, DPI and PPI respectively, are units for measuring the tiny bits of color that come together to form a printed image or an image on a screen. The higher the density of those dots or pixels, the higher the resolution. For most, a rudimentary understanding of DPI or PPI amounts to knowing whether or not an image is clear but small enough to print, email, or post to social media. However, for designers, understanding screen density and ratio is essential to delivering delightful user experiences across devices. Designing for phones, tablets, laptops, watches, and hybrids without a proper knowledge of dpi and ratio is a lot like building a house using the wrong measurement — things are going to look very weird very quickly (and good luck getting through the door!)." }, { "id": "3", "title":"Pixate and Form 1.3", "author":"Google Design", "date":"May 30 2015", "primaryColor":"#eeeeee", "secondaryColor":"#9e9e9e", "image":"https://g-design.storage.googleapis.com/production/v5/assets/pixate-and-form-1-3-header-2061f19f.svg", "desc":"Discover the latest features and start designing native prototypes on your device.", "content":"We’re thrilled to announce that Pixate has joined Google! Pixate adds to our ongoing effort to develop new design and prototyping tools, including Form 1.3. Explore the latest features of both products below, and check out our roundtable conversation with Matias Duarte, VP Design at Google, and the the founders of Pixate and Form. A visual prototyping platform that allows designers to create sophisticated, fluid mobile prototypes that run natively on iOS and Android devices. Creating complete app prototypes or crafting carefully choreographed interactions that look and feel completely real, and sharing them so entire product teams or clients can experience them right on their device." }, { "id": "4", "title":"Welcome to the New Google Design", "author":"Google Design", "date":"Sep 10 2015", "primaryColor":"#3367d6", "secondaryColor":"#2755CC", "image":"https://g-design.storage.googleapis.com/production/v5/assets/Article_Welcome_Header_2880-ce3ec22d.svg", "desc":"More design, all the time", "content":"Much has happened in the year since we launched Google Design and introduced our material design framework at Google I/O 2014. We hosted FORM, Google’s first-ever design conference in San Francisco and engaged in numerous outreach efforts through workshops, design sprints, and online discussions. We’ve continued to improve and expand on the material design guidelines and have witnessed countless teams both inside and outside Google adopt the framework and ship beautiful, materialized products across platforms. To better capture all this great design work happening at Google and around the community, we’ve completely reconceived Google Design. In addition to all the guidelines and resources you’ve come to rely on, we’ve also released guides for TV, Auto, and Cardboard, our virtual reality product. Our new Icon Library allows you to download our icon font and source from the over 800 material system icons. We’ve also added a whole new layer of written and video content — everything from tutorials, case-studies, interviews, and essays, to a listing of job opportunities and design-related events, like our upcoming FORM conference. The goal is to provide a new perspective on our design process and ample opportunity for cross pollination. Now you can watch an animated color tutorial before you dive into the nitty gritty details in our material design guidelines, or get some practical guidance around designing between platforms. Our Making Material Design series takes you behind-the-scenes to find out what it takes to create a new visual framework for Google. Additionally, we’ve launched new Dribbble and YouTube channels to complement our active Twitter and Google+ presence and can share even more real-time content from our design teams. We hope you enjoy the the new Google Design, and we look forward to hearing your feedback on Twitter and Google+. After all, good design is never done." } ] }, { "name":"photography", "title":"Photography", "items":[] }, { "name":"design", "title":"Design", "items":[] }, { "name":"topten", "title":"Top Ten", "items":[] }, { "name":"aday", "title":"A Day in the Life", "items":[] } ]