Google design

Jul 13, 201415 likes2,115 views

This document discusses Google's design guidelines and the process used to translate them into other languages. It provides an overview of the motivation, key technologies used, and some of the design principles covered in the guidelines, including material design, use of depth, animation and response to touch. The goals are to create a visual language that combines design best practices with innovative technology and to develop a unified experience across platforms. Roboto font, cards, buttons and use of color, shadow and motion are discussed. Translating the guidelines to other languages involved using Hackpad, Github and Gitbook tools.

?王志誠
軟體?工程師
!
專??長：CSS、Sass
!
Blog：wcc723.github.io
(設計師?)

感謝
Thanks
? Charlene
? Frances
? Helen
? Mkdodos
? Till
? Peter
? Sheng-Bo
? Xuan
? Xunyi

? 這是?一份相當優質的Design Guideline 。?
(沒?見過這麼強的)
? 跨平台的Design guideline。?
(幻想可以?用在Web上)
? 英?文是看?一分鐘，休息30分鐘的東?西。
? 希望引起許多?人的興趣。

主要技術
? Hackpad
? Github
? Markdown
? GitBook

Hackpad ? 管理翻譯章節不重複
? 讓翻譯者了解??目前進度
? 公告相關事項

Github ? Open Source 版本控管
? ?支援 Markdown

Gitbook
? 核?心?工具
? Node.js
? 還可以發佈
? https://www.gitbook.io/

Goals
? 創造?一種設計語?言，融合先進技術與設計經典準則
? ?支援跨平臺且不同螢幕?大?小裝置的設計?風格
? create a visual language for our users that synthesizes the classic principles of good
design with the innovation and possibility of technology and science.
? Develop a single underlying system that allows for a uni?ed experience across platforms
and device sizes.

Material
Manual creative
http://manualcreative.com/

Depth
What if pixels didn't just have color, but also depth?

Depth is not ornament.
? Think in terms of element priority within z-space, not absolute position.

Shadows
? Shadows consist of two layers: a top shadow for depth and a bottom shadow for
de?nition.

Response
What if there was an intelligent material that was as simple as
paper but could transform and change shape in response to touch?

Fonts - Roboto
? The new version of Roboto is slightly wider and rounder, giving it greater clarity and
making it more optimistic.
? 相較於舊版，新版變得更寬、更圓潤，提?高它的可識
度且更活潑。

Helvetica Neue VS Roboto
Helvetica Neue VS Roboto
? 60pt, light?
“R”
上:Helvetica Neue
下:Roboto

Helvetica Neue VS Roboto
Helvetica Neue VS Roboto
? 60pt, regular
上:Helvetica Neue
下:Roboto

Helvetica Neue VS Roboto
Helvetica Neue VS Roboto
? 60pt, blod
上:Helvetica Neue
下:Roboto

The document discusses integrating UX design processes into Agile development. It describes the author's experience trying different approaches, including designing one or two sprints ahead of development which caused the design and development teams to fall out of sync. Another approach involved designing within the current sprint alongside developers. This led to higher collaboration and trust between teams. The author advocates for user-centered design activities and artifacts to be incorporated into Agile processes.

Design is a process, not a DocumentTrisha Gee

G so c-2013-preso-np_Nepali TranslationSovita Dahal

建立 Sass 環境，透過 Node sassChih-cheng Wang

Sass 基礎教學 - 高雄前端社群(CSS 讀書會)Chih-cheng Wang

Google Design Sprinting WebinarRafiq Elmansy

Emotional Design for Google LaunchpadBorrys Hasian

Bootstrap4 與他的好搭檔Chih-cheng Wang

Go - A Key Language in Enterprise Application Development?C4Media

Video and slides synchronized, mp3 and slide download available at URL https://bit.ly/2COBbRN. Aarti Parikh goes over the Go language design and talks about why Go matters in the age of multicores and cloud-native computing. Filmed at qconsf.com. Aarti Parikh is a software engineering manager with a decade of experience building teams and products for the Internet, IoT and now Fintech. Currently, she works at PayPal.

Building & Scaling a Front End Practice & TeamMonika Piotrowicz

As a discipline, front end development (FED) has recently seen enormous growth with new focus areas like performance, design patterns, build tools, and frameworks emerge and mature. There’s a lot of new excitement for all things client-side, but how do these new technologies fit alongside a traditional Engineering team and an existing code base? At Shopify, we’ve been exploring the dynamic more closely as our FED team continues to grow company-wide. In this talk, I will share my perspective on how FED can work alongside other disciplines to form robust, creative product teams at scale. Shared tools like coding standards, processes, and style guides, can make it possible for all developers to confidently build UI, while specialist FED build those systems and solve unique use cases. By investing in in tools and process, we’ve been able to find common focus for our team and a stronger understanding of our role across disciplines.

Stash – Taking Expedia to New Heights - David Williams and Christopher PepeAtlassian

Tooling for the JavaScript Eramartinlippert

The document summarizes the development of Scripted, a lightweight browser-based code editor. It discusses observations that heavy IDEs are not ideal for JavaScript development and speed is essential. Two prototypes were created - Orion and Scripted. Scripted focused on speed, code awareness through static analysis, and module system comprehension. Near term goals include improved content assistance and a plugin model. Long term goals include debugging integration and support for additional languages.

Greenfield Java 2013Will Iverson

Engineering Culture and InfrastructureSchubert Zhang

Case Study: Building a Conference Website with Drupalcspin

The Great Consolidation - Entertainment Weekly Migration Case Study - SANDcam...Jon Peck

The migration project involved moving content from Entertainment Weekly's WordPress and Vignette systems to Drupal. A team of 4 developers from Four Kitchens and 1 from Time Inc worked on the migration over 17 sprints from April 2014 to January 2015. Key aspects of the project included theming the site with Aurora, implementing JavaScript standards, migrating over 100,000 posts, images and terms from WordPress and Vignette, improving performance, and collaborating with Time Inc on custom content types and workflows. Testing was done to ensure the migrated site met performance standards.

Managing changes to eZPublish DatabaseGaetano Giunta

Managing Changes to the Database Across the Project Life Cycle (presented by ...eZ Systems

Be faster then rabbitsVladislav Bauer

The document discusses various topics related to web development including Java principles, Spring frameworks, PHP, high-load web applications, mobile backend as a service (mBaas), web frameworks, Java web development frameworks like JSF and GWT, rendering on the server-side vs client-side, distribution of work between designers and developers, web browsers and their support for HTML5 and CSS3, programming languages, GUI frameworks, AngularJS, testing tools like JUnit, and build tools like Maven, Ant, and Ivy.

1 (10 files merged).pptpptwork2

Front-end development focuses on the user interface and experience of websites and applications. A front-end developer is responsible for designing and implementing visual and interactive elements, ensuring responsiveness across browsers, collaborating with designers, and enhancing interactivity. Core skills include proficiency in HTML, CSS, JavaScript, responsive design, version control, and problem-solving. Common tools are text editors, browser developer tools, version control systems, and frameworks. Front-end development involves using HTML for structure, CSS for styling, JavaScript for interactivity, and responsive design principles for adapting layouts across devices.

Intro to GoClarence Bakirtzidis

Basics for front end developernamrataa0108

This document discusses the misunderstanding of the complexity of front-end development. It notes that while visual design and CSS/HTML may look easy, front-end development requires skills like communication, analyzing layouts, identifying components, abstracting behaviors, shaping appearance, and integrating different aspects. The development process takes around 9 months and involves tasks at different stages from design to deployment. It also discusses the reasons one may or may not want to pursue front-end development as a career.

Rabbit Hole? – A User Experience Case StudyCx ux engage_2014_rabbit_holeAvtex

Agile Development with PloneSally Kleinfeldt

This document discusses how to adopt agile techniques for managing Plone projects with distributed, part-time teams on a fixed budget. Key points include: - Defining roles like project owner, developer, designer, and project manager - Scheduling projects into planning, deployment, and development iterations - Using tools like Trac, Pivotal Tracker, ScrumDo, and Google Docs to facilitate communication, tracking stories and tasks, and planning iterations - Integrating UX/UI design by including designers in the team and having them work closely with developers

Agile Development with PloneJazkarta, Inc.

At Jazkarta, our Plone projects typically consist of a mix of custom functionality and theming. The client's budget is usually fixed and their requirements are imperfectly defined at the start of the project. This cries out for an agile, iterative approach, however our development environment is not what most agile experts would recommend. No one is co-located - our clients are remote and our developers are distributed, and they are not working full time on a single project. Sally Kleinfeldt describes Jazkarta's approach to managing a Plone website development project in an agile fashion, with a part time, distributed team. Topics include roles, scheduling, estimation, and project management tools. Links to videos of the presentation are here: http://weblion.psu.edu/symposium/talks/agile-development-with-plone

You Don't Know ES ModulesTeppei Sato

サイボウズのフロントエンド開発現在とこれからの挑戦Teppei Sato

This document summarizes a Cybozu Meetup event focused on frontend technologies. It discusses Cybozu's transition from traditional server-rendered web applications to single-page applications built with React. It also covers Cybozu's use of Closure Compiler, TypeScript, JSDoc, and other tools for JavaScript development. Best practices are shared around testing, linting, and integrating third-party code. Accessibility standards and strategies for securely embedding third-party code are also mentioned.

Code the docs-yu liuStreamNative

The document discusses the concept of "Docs Like Code", which treats documentation like code by storing docs in version control systems, using plain text formats, and integrating doc writing and publishing into the same workflow as software development. It provides the case study of Apache Pulsar, which uses GitHub and other tools to collaborate effectively on docs between developers, writers and users. Benefits include better doc quality and syncing with code through continuous integration/deployment of docs.

六角學院 - 從社群到公司Chih-cheng Wang

網址管理與 DNS 託管全攻略Chih-cheng Wang

More Related Content

Similar to Google design (20)

Go - A Key Language in Enterprise Application Development?C4Media

Building & Scaling a Front End Practice & TeamMonika Piotrowicz

Stash – Taking Expedia to New Heights - David Williams and Christopher PepeAtlassian

Tooling for the JavaScript Eramartinlippert

Greenfield Java 2013Will Iverson

Engineering Culture and InfrastructureSchubert Zhang

Case Study: Building a Conference Website with Drupalcspin

The Great Consolidation - Entertainment Weekly Migration Case Study - SANDcam...Jon Peck

Managing changes to eZPublish DatabaseGaetano Giunta

Managing Changes to the Database Across the Project Life Cycle (presented by ...eZ Systems

Be faster then rabbitsVladislav Bauer

1 (10 files merged).pptpptwork2

Intro to GoClarence Bakirtzidis

Basics for front end developernamrataa0108

Rabbit Hole? – A User Experience Case StudyCx ux engage_2014_rabbit_holeAvtex

Agile Development with PloneSally Kleinfeldt

Agile Development with PloneJazkarta, Inc.

You Don't Know ES ModulesTeppei Sato

サイボウズのフロントエンド開発現在とこれからの挑戦Teppei Sato

Code the docs-yu liuStreamNative

Go - A Key Language in Enterprise Application Development?C4Media

Building & Scaling a Front End Practice & TeamMonika Piotrowicz

Stash – Taking Expedia to New Heights - David Williams and Christopher PepeAtlassian

Tooling for the JavaScript Eramartinlippert

Greenfield Java 2013Will Iverson

Engineering Culture and InfrastructureSchubert Zhang

Case Study: Building a Conference Website with Drupalcspin

The Great Consolidation - Entertainment Weekly Migration Case Study - SANDcam...Jon Peck

Managing changes to eZPublish DatabaseGaetano Giunta

Managing Changes to the Database Across the Project Life Cycle (presented by ...eZ Systems

Be faster then rabbitsVladislav Bauer

1 (10 files merged).pptpptwork2

Intro to GoClarence Bakirtzidis

Basics for front end developernamrataa0108

Rabbit Hole? – A User Experience Case StudyCx ux engage_2014_rabbit_holeAvtex

Agile Development with PloneSally Kleinfeldt

Agile Development with PloneJazkarta, Inc.

You Don't Know ES ModulesTeppei Sato

サイボウズのフロントエンド開発現在とこれからの挑戦Teppei Sato

Code the docs-yu liuStreamNative

More from Chih-cheng Wang (9)

六角學院 - 從社群到公司Chih-cheng Wang

網址管理與 DNS 託管全攻略Chih-cheng Wang

高雄前端社群 Web 開發讀書會 - 網頁設計規劃Chih-cheng Wang

Bootstrap 4 超詳盡解析Chih-cheng Wang

[Modern Web] CSS3 Grid Layout Chih-cheng Wang

專業前端都如何管理 CSSChih-cheng Wang

响应式网页实作坊Chih-cheng Wang

CSS 讀書會 - 1 (Grid system)Chih-cheng Wang

Slack 基本功能介紹Chih-cheng Wang

六角學院 - 從社群到公司Chih-cheng Wang

網址管理與 DNS 託管全攻略Chih-cheng Wang

高雄前端社群 Web 開發讀書會 - 網頁設計規劃Chih-cheng Wang

Bootstrap 4 超詳盡解析Chih-cheng Wang

[Modern Web] CSS3 Grid Layout Chih-cheng Wang

專業前端都如何管理 CSSChih-cheng Wang

响应式网页实作坊Chih-cheng Wang

CSS 讀書會 - 1 (Grid system)Chih-cheng Wang

Slack 基本功能介紹Chih-cheng Wang

Recently uploaded (20)

Unlock AI Creativity: Image Generation with DALL·EExpeed Software

Discover the power of AI image generation with DALL·E, an advanced AI model that transforms text prompts into stunning, high-quality visuals. This presentation explores how artificial intelligence is revolutionizing digital creativity, from graphic design to content creation and marketing. Learn about the technology behind DALL·E, its real-world applications, and how businesses can leverage AI-generated art for innovation. Whether you're a designer, developer, or marketer, this guide will help you unlock new creative possibilities with AI-driven image synthesis.

Cloud of everything Tech of the 21 century in AviationAssem mousa

Early Adopter's Guide to AI Moderation (Preview)nick896721

Gojek Clone Multi-Service Super App.pptxV3cube

UiPath Agentic Automation Capabilities and OpportunitiesDianaGray10

Learn what UiPath Agentic Automation capabilities are and how you can empower your agents with dynamic decision making. In this session we will cover these topics: What do we mean by Agents Components of Agents Agentic Automation capabilities What Agentic automation delivers and AI Tools Identifying Agent opportunities ? If you have any questions or feedback, please refer to the "Women in Automation 2025" dedicated Forum thread. You can find there extra details and updates.

Technology use over time and its impact on consumers and businesses.pptxkaylagaze

How Discord Indexes Trillions of Messages: Scaling Search Infrastructure by V...ScyllaDB

30B Images and Counting: Scaling Canva's Content-Understanding Pipelines by K...ScyllaDB

Inside Freshworks' Migration from Cassandra to ScyllaDB by Premkumar PatturajScyllaDB

The Future of Repair: Transparent and Incremental by Botond De?nesScyllaDB

Regularly run repairs are essential to keep clusters healthy, yet having a good repair schedule is more challenging than it should be. Repairs often take a long time, preventing running them often. This has an impact on data consistency and also limits the usefulness of the new repair based tombstone garbage collection. We want to address these challenges by making repairs incremental and allowing for automatic repair scheduling, without relying on external tools.

Build with AI on Google Cloud Session #4Margaret Maynard-Reid

[Webinar] Scaling Made Simple: Getting Started with No-Code Web AppsSafe Software

Ready to simplify workflow sharing across your organization without diving into complex coding? With FME Flow Apps, you can build no-code web apps that make your data work harder for you — fast. In this webinar, we’ll show you how to: Build and deploy Workspace Apps to create an intuitive user interface for self-serve data processing and validation. Automate processes using Automation Apps. Learn to create a no-code web app to kick off workflows tailored to your needs, trigger multiple workspaces and external actions, and use conditional filtering within automations to control your workflows. Create a centralized portal with Gallery Apps to share a collection of no-code web apps across your organization. Through real-world examples and practical demos, you’ll learn how to transform your workflows into intuitive, self-serve solutions that empower your team and save you time. We can’t wait to show you what’s possible!

EaseUS Partition Master Crack 2025 + Serial Keykherorpacca127

https://ncracked.com/7961-2/ Note: >> Please copy the link and paste it into Google New Tab now Download link EASEUS Partition Master Crack is a professional hard disk partition management tool and system partition optimization software. It is an all-in-one PC and server disk management toolkit for IT professionals, system administrators, technicians, and consultants to provide technical services to customers with unlimited use. EASEUS Partition Master 18.0 Technician Edition Crack interface is clean and tidy, so all options are at your fingertips. Whether you want to resize, move, copy, merge, browse, check, convert partitions, or change their labels, you can do everything with a few clicks. The defragmentation tool is also designed to merge fragmented files and folders and store them in contiguous locations on the hard drive.

MIND Revenue Release Quarter 4 2024 - Finacial PresentationMIND CTI

DAO UTokyo 2025 DLT mass adoption case studies IBM Tsuyoshi Hirayama (平山毅)Tsuyoshi Hirayama

Wondershare Filmora Crack 14.3.2.11147 Latestudkg888

https://ncracked.com/7961-2/ Note: >> Please copy the link and paste it into Google New Tab now Download link Free Download Wondershare Filmora 14.3.2.11147 Full Version - All-in-one home video editor to make a great video.Free Download Wondershare Filmora for Windows PC is an all-in-one home video editor with powerful functionality and a fully stacked feature set. Filmora has a simple drag-and-drop top interface, allowing you to be artistic with the story you want to create.Video Editing Simplified - Ignite Your Story. A powerful and intuitive video editing experience. Filmora 10 hash two new ways to edit: Action Cam Tool (Correct lens distortion, Clean up your audio, New speed controls) and Instant Cutter (Trim or merge clips quickly, Instant export).Filmora allows you to create projects in 4:3 or 16:9, so you can crop the videos or resize them to fit the size you want. This way, quickly converting a widescreen material to SD format is possible.

UiPath Automation Developer Associate Training Series 2025 - Session 1DianaGray10

Welcome to UiPath Automation Developer Associate Training Series 2025 - Session 1. In this session, we will cover the following topics: Introduction to RPA & UiPath Studio Overview of RPA and its applications Introduction to UiPath Studio Variables & Data Types Control Flows You are requested to finish the following self-paced training for this session: Variables, Constants and Arguments in Studio 2 modules - 1h 30m - https://academy.uipath.com/courses/variables-constants-and-arguments-in-studio Control Flow in Studio 2 modules - 2h 15m - https:/academy.uipath.com/courses/control-flow-in-studio ?? For any questions you may have, please use the dedicated Forum thread. You can tag the hosts and mentors directly and they will reply as soon as possible.

Stronger Together: Combining Data Quality and Governance for Confident AI & A...Precisely

Future-Proof Your Career with AI OptionsDianaGray10

Learn about the difference between automation, AI and agentic and ways you can harness these to further your career. In this session you will learn: Introduction to automation, AI, agentic Trends in the marketplace Take advantage of UiPath training and certification In demand skills needed to strategically position yourself to stay ahead ? If you have any questions or feedback, please refer to the "Women in Automation 2025" dedicated Forum thread. You can find there extra details and updates.

A Framework for Model-Driven Digital Twin EngineeringDaniel Lehner

Unlock AI Creativity: Image Generation with DALL·EExpeed Software

Cloud of everything Tech of the 21 century in AviationAssem mousa

Early Adopter's Guide to AI Moderation (Preview)nick896721

Gojek Clone Multi-Service Super App.pptxV3cube

UiPath Agentic Automation Capabilities and OpportunitiesDianaGray10

Technology use over time and its impact on consumers and businesses.pptxkaylagaze

How Discord Indexes Trillions of Messages: Scaling Search Infrastructure by V...ScyllaDB

30B Images and Counting: Scaling Canva's Content-Understanding Pipelines by K...ScyllaDB

Inside Freshworks' Migration from Cassandra to ScyllaDB by Premkumar PatturajScyllaDB

The Future of Repair: Transparent and Incremental by Botond De?nesScyllaDB

Build with AI on Google Cloud Session #4Margaret Maynard-Reid

[Webinar] Scaling Made Simple: Getting Started with No-Code Web AppsSafe Software

EaseUS Partition Master Crack 2025 + Serial Keykherorpacca127

MIND Revenue Release Quarter 4 2024 - Finacial PresentationMIND CTI

DAO UTokyo 2025 DLT mass adoption case studies IBM Tsuyoshi Hirayama (平山毅)Tsuyoshi Hirayama

Wondershare Filmora Crack 14.3.2.11147 Latestudkg888

UiPath Automation Developer Associate Training Series 2025 - Session 1DianaGray10

Stronger Together: Combining Data Quality and Governance for Confident AI & A...Precisely

Future-Proof Your Career with AI OptionsDianaGray10

A Framework for Model-Driven Digital Twin EngineeringDaniel Lehner

Google design

1. Google Design Translation and Intro

2. ?王志誠軟體?工程師 ! 專??長：CSS、Sass ! Blog：wcc723.github.io (設計師?)

3. 翻譯 Translation

4. 感謝 Thanks ? Charlene ? Frances ? Helen ? Mkdodos ? Till ? Peter ? Sheng-Bo ? Xuan ? Xunyi

5. 動機 Motivation

6. ? 這是?一份相當優質的Design Guideline 。? (沒?見過這麼強的) ? 跨平台的Design guideline。? (幻想可以?用在Web上) ? 英?文是看?一分鐘，休息30分鐘的東?西。 ? 希望引起許多?人的興趣。

7. 主要技術 ? Hackpad ? Github ? Markdown ? GitBook

8. Hackpad ? 管理翻譯章節不重複 ? 讓翻譯者了解??目前進度 ? 公告相關事項

9. Github ? Open Source 版本控管 ? ?支援 Markdown

10. Markdown ? 較易統?一格式 ? ?方便易学的语?言

11. Gitbook ? 核?心?工具 ? Node.js ? 還可以發佈 ? https://www.gitbook.io/

13. – 今天另外?一個?工作就是推坑 ?鼓勵?大家學Git

14. Google Design 希望?大家?一起來討論Google design

16. Goals ? 創造?一種設計語?言，融合先進技術與設計經典準則 ? ?支援跨平臺且不同螢幕?大?小裝置的設計?風格 ? create a visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science. ? Develop a single underlying system that allows for a uni?ed experience across platforms and device sizes.

17. Material design http://goo.gl/aVFhOa

18. Papers 1. Material 2. Depth 3. Response

19. Material Manual creative http://manualcreative.com/

21. ? Color

22. ? Float action button.

23. ? Depth

24. ? Material and animation

25. ? ink

31. Depth What if pixels didn't just have color, but also depth?

32. Seams

33. Step

34. Floating Actions

35. Depth is not ornament. ? Think in terms of element priority within z-space, not absolute position.

36. Shadows ? Shadows consist of two layers: a top shadow for depth and a bottom shadow for de?nition.

37. Button

38. Floating Action button

39. Raised button

40. Flat button

41. Response What if there was an intelligent material that was as simple as paper but could transform and change shape in response to touch?

46. Fonts - Roboto ? The new version of Roboto is slightly wider and rounder, giving it greater clarity and making it more optimistic. ? 相較於舊版，新版變得更寬、更圓潤，提?高它的可識度且更活潑。

48. Helvetica Neue VS Roboto Helvetica Neue VS Roboto ? 60pt, light? “R” 上:Helvetica Neue 下:Roboto

49. Helvetica Neue VS Roboto Helvetica Neue VS Roboto ? 60pt, regular 上:Helvetica Neue 下:Roboto

50. Helvetica Neue VS Roboto Helvetica Neue VS Roboto ? 60pt, blod 上:Helvetica Neue 下:Roboto

51. Application http://goo.gl/XVQK4p

52. 运?用在奥贰产上!?

54. 剩多少时间

55. 不寫Js也能體驗Google Design 體驗版

56. Polymer ? Import Template ? Tag

57. Demo

58. Thanks