Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
93 lines (86 sloc) 4.43 KB
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Ed Ngai is a Product Designer and Front-End Developer. With skills
in both fields, his passion lies in the process of creating the perfect user
experience from design to implementation.">
<meta property=“og:image” content=“images/hero-mobile.jpg” />
<meta name="author" content="Ed Ngai">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<!-- Bootstrap -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r"
crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
crossorigin="anonymous"></script>
<title>Ed Ngai</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<nav class="case-study__nav">
<div class="back-button">
<a href="./index.html#projects"><img src="./images/back.png" alt="go back"/></a>
</div>
</nav>
<div class="case-study">
<h1 class="case-study__title">Lightning Design System</h1>
<div class="case-study__hero">
<img src="./images/slds.png"/ >
</div>
<div class="case-study__body">
<p>
The Salesforce Lightning Design System is a component and pattern library that enhances
the workflow of both designers and developers. We help users create clear, efficient,
consistent, and beautify user interfaces that look and feel like a Salesforce product. By
defining patterns and guidelines, we enable designers to focus on user experience, and
developers to focus on implementation.
</p>
<h2>
Key Responsibilities
</h2>
<h3>
Creating Components & Guidelines
</h3>
<p>
The core of my work on the SLDS team revolves around creating new components and extending
existing ones. My focus here is on building scalable HTML component blueprints with semantic and
accessible markup, along with quality CSS styles. At SLDS I build with React, Sass, and Node.
</p>
<h3>Advising on Design Patterns</h3>
<p>
Our team sits in a very unique position within the User Experience organization at Salesforce.
Given that our components and styles are consumed by the core Salesforce products, our team
advises designers and engineers on how to follow our current patterns. With this high visibility within UX,
I have developed unique skills in recognizing design patterns and working with designers to create
new ones.
</p>
<h3>Engineering Support</h3>
<p>
The Lightning Design System provides a CSS framework to the core engineering teams at Salesforce. By
providing a shared stylesheet, we enable engineers to focus on implementation rather than the styles
of their component. Not only does this simplify the development process, but it also ensures a more
consistent UI accross all products. A large part of my role on the team is supporting the engineering side,
by assisting in adoption of the design system and working to resolve incoming bugs.
</p>
<h2>
Components I've Worked On
</h2>
<a href="https://lightningdesignsystem.com/components/popovers/"><h3>Popovers</h3></a>
<img src="./images/popovers.png" />
<a href="https://lightningdesignsystem.com/components/illustration/"><h3>Illustrations</h3></a>
<img src="./images/illustrations.png" />
<a href="https://lightningdesignsystem.com/components/visual-picker/"><h3>Visual Picker</h3></a>
<img src="./images/visual_picker.png" />
</div>
</div>
</body>
</html>