Dressed for Success UYSDUG 11-05

As a web developer you are aware that today's design and development cover a range of devices and platforms: mobile, tablets, responsive web, desktop apps.
To deal with all these, you have to leverage CSS frameworks or toolkits such as Twitter Bootstrap, and most of the time you struggle to achieve the results you desire.
Find out how you can build applications that comply with the new Salesforce Lightning look and feel without writing any CSS with the new Lightning Design System, a whole new way to build pixel perfect apps.

Transcript

1. Lightning Design System Dressed for Success (#dressed4Success #UYSDUG) November 5, 2015
2. Sebastián Peraza Salesforce Developer @sebaperaza Andrea Morales App Curator/Team Lead @andrem2b
3. Safe harbor statement under the Private Securities Litigation Reform Act of 1995: This presentation may contain forward- looking statements that involve risks, uncertainties, and assumptions. If any such uncertainties materialize or if any of the assumptions proves incorrect, the results of salesforce.com, inc. could differ materially from the results expressed or implied by the forward-looking statements we make. All statements other than statements of historical fact could be deemed forward- looking, including any projections of subscriber growth, earnings, revenues, or other financial items and any statements regarding strategies or plans of management for future operations, statements of belief, any statements concerning new, planned, or upgraded services or technology developments and customer contracts or use of our services. The risks and uncertainties referred to above include – but are not limited to – risks associated with developing and delivering new functionality for our service, our new business model, our past operating losses, possible fluctuations in our operating results and rate of growth, interruptions or delays in our Web hosting, breach of our security measures, risks associated with possible mergers and acquisitions, the immature market in which we operate, our relatively limited operating history, our ability to expand, retain, and motivate our employees and manage our growth, new releases of our service and successful customer deployment, our limited history reselling non-salesforce.com products, and utilization and selling to larger enterprise customers. Further information on potential factors that could affect the financial results of salesforce.com, inc. is included in our annual report on Form 10-K for the most recent fiscal quarter ended July 31, 2011. This document and others are available on the SEC Filings section of the Investor Information section of our Web site. Any unreleased services or features referenced in this or other press releases or public statements are not currently available and may not be delivered on time or at all. Customers who purchase our services should make the purchase decisions based upon features that are currently available. Salesforce.com, inc. assumes no obligation and does not intend to update these forward-looking statements.
4. @uysdug #uysdug /Uruguay-Salesforce-Developer-User-Group/ www.uysdug.com Follow UYSDUG for the latest news
5. Lightning Experience Design GAP Lightning design system principles, target audience, design patterns, features , main components Demo Q&A Agenda
6. Previously on salesforce …. 2013 2014 The Customer Platform to Connect with Customers in a Whole New Way Lightning Platform
7. Lightning Experience
8. this is how we do … “Tried to make it little by little,tried to make it bit by bit on my own…” Reverse engineering to discover styles Resulting solutions grew out of sync with UI updates It was difficult to give a “salesforce” look & feel to our custom apps Frameworks that resolved cross device issues still needed tweaks Lightning Experience UI redesign has made previous custom solutions almost inviable Redline specs define pages, not user/product experiences
9. A brand new Design System A design system is a definition of the architecture, content and visual standards, supporting assets and templates to produce and/or sustain a consistent and effective product experience. ▪ for whom: ▪ developers so we providing scalable & accessible code at the beginning of the development cycle ▪ designers allowing them to design & iterate more efficiently in the browser
10. Improves Designer + Developer Communication UX Creates & Defines design prototype user research Design System style guide css framework design tokens assets tools Dev Consumes html/css android iOS win
11. Lightning Design System This tool is a collection of design patterns, components, and guidelines, aimed to help define an implement a unified User Experience across otherwise disconnected pieces of Enterprise Applications.
12. Lightning Design System Principles
13. Features Style with Ease Design with Expertise Contribute with Purpose Trustworthy Platform agnostic Living
14. Design Guidelines The Lightning Design System reflects the patterns and components that underpin the Salesforce product. These patterns and components provide a unified language and consistent look and feel when designing apps and products within the Salesforce ecosystem. Color Data Entry Displaying Data Layout Loading Messaging Motion Navigation Typography
15. Design : Colors & typography ▪ Font Families, Sizes & Weights ▪ Line Heights ▪ Colors for Background, Text & Borders ▪ Shadows ▪ Spacing & Sizing ▪ Usage tips for messaging, visual differentiation, visual hierarchy ▪ Compliance regarding accessibly standards
16. Design : typography Salesforce Sans
17. Design : Data Entry basic text input input sizing input help date picker lookup checkboxes radio picklist
18. Design : displaying data table tile interactive cards discussion feeds activity feeds
19. Design : Layout record layout workspace layout
20. Design : Layout table layout board layout
21. Design : loading ▪ Loading indicators help to reassure the user that the system is actively retrieving data. ▪ Spinners ▪ Show spinners when retrieving data or performing slow computations. ▪ Stencils ▪ Placeholders that visually communicate that content is in the process of loading
22. Design : messaging When the user or system takes action, various messaging patterns are used to show the result or impact. ▪ Icons ▪ Toast messages ▪ Prompts ▪ System level messaging
23. Design : messaging
24. Design : messaging toasts
25. Design : messaging Prompts System level messaging
26. Design : Navigation tabs trees breadcrumbs tabs
27. Ok, but how can I do all this stuff? Components Lightning Design System includes reusable UI elements from forms and lists, to modals and dropdowns
28. Utilities ▪ Floats ▪ Lists ▪ Scrollable ▪ Sizing ▪ Spacing ▪ Text ▪ Themes ▪ Truncation
29. How can we use it ? <apex:page showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0"> <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <head> <title>Salesforce Lightning Design System Trailhead Project</title> <apex:stylesheet value="{!URLFOR($Resource.SLDS090, 'assets/styles/salesforce-lightning-design-system-vf.css')}" /> </head> <body> <!-- REQUIRED SLDS WRAPPER --> <div class="slds"> </div> <!-- / REQUIRED SLDS WRAPPER --> </body> </html> </apex:page> VisualForce, as unmanaged package
30. How can we use it ? <aura:application> <ltng:require styles="/resource/SLDS090/assets/styles/salesforce-lightning-design-system-ltng.css" /> <div class="slds" style="margin-top:10px;margin-left:10px;"> </div> </aura:application> Lightning components install unmanaged package include it inside the component
31. How can we use it ? ▪ Heroku, mobile and any other platform ▪ download compresses resources ▪ reference it inside component <link rel="stylesheet" type="text/css" href="/assets/styles/salesforce-lightning-design-system.css">
32. Visual Force & SLDS ▪ Page Centric ▪ Server-side rendering ▪ tried & true model ▪ limited interactivity ▪ high latency ▪ App Centric ▪ Client-side rendering ▪ complex ▪ highly interactive ▪ low latency
33. Demo time I'm gonna get dressed for success, hitting a spot for the big time, baby. Get dressed for success shaping it up for your love. Look sharp!
34. Available Content ▪ stencils when home page loads ▪ design system show case ( navigation trough the web ) ▪ icons ▪ icons buttons ▪ grid system ▪ live example @ demo org
36. Resources + Kudos (optional) Build a Visualforce App with the Lightning Design System Build a Lightning App with the Lightning Design System Lightning Design System design system page home
37. Thank You! Lightning Design System Dressed for Success Uruguay Salesforce Developer Group November 5, 2015 #uysdug #dressed4Success Sebastián Peraza Salesforce Developer @sebaperaza Andrea Morales App Curator/Team Lead @andrem2b