building uis
TRANSCRIPT
![Page 1: Building UIs](https://reader033.vdocuments.mx/reader033/viewer/2022042610/589ff6941a28ab46598b58df/html5/thumbnails/1.jpg)
Building UIs
![Page 2: Building UIs](https://reader033.vdocuments.mx/reader033/viewer/2022042610/589ff6941a28ab46598b58df/html5/thumbnails/2.jpg)
Building fast, maintainable and scalable user interfaces on the web
![Page 3: Building UIs](https://reader033.vdocuments.mx/reader033/viewer/2022042610/589ff6941a28ab46598b58df/html5/thumbnails/3.jpg)
HTML
HTML gives content structure and meaning (headings, paragraphs, images, etc.)
![Page 4: Building UIs](https://reader033.vdocuments.mx/reader033/viewer/2022042610/589ff6941a28ab46598b58df/html5/thumbnails/4.jpg)
CSS
CSS defines the presentation (typography, colors, layout, etc.)
![Page 5: Building UIs](https://reader033.vdocuments.mx/reader033/viewer/2022042610/589ff6941a28ab46598b58df/html5/thumbnails/5.jpg)
<h1 class=“title”>I’m a title</h1>
<div class=“box”>I’m a box</div>
<img src=“image.jpg”>
![Page 6: Building UIs](https://reader033.vdocuments.mx/reader033/viewer/2022042610/589ff6941a28ab46598b58df/html5/thumbnails/6.jpg)
.title { font-size: 32px; color: black;}
.box { border-radius: 5px;}
img { border: 1px solid red;}
![Page 7: Building UIs](https://reader033.vdocuments.mx/reader033/viewer/2022042610/589ff6941a28ab46598b58df/html5/thumbnails/7.jpg)
www.affirm.com
![Page 8: Building UIs](https://reader033.vdocuments.mx/reader033/viewer/2022042610/589ff6941a28ab46598b58df/html5/thumbnails/8.jpg)
Building fast, maintainable and scalable user interfaces on the web
![Page 9: Building UIs](https://reader033.vdocuments.mx/reader033/viewer/2022042610/589ff6941a28ab46598b58df/html5/thumbnails/9.jpg)
1. Modules
Break down the user interface into isolated, reusable modules (buttons, tooltips, etc.)
![Page 10: Building UIs](https://reader033.vdocuments.mx/reader033/viewer/2022042610/589ff6941a28ab46598b58df/html5/thumbnails/10.jpg)
basefontslayoutmodulesutilities
badge.scssbuttons.scsscard.scsscontrol.scssdate-picker.scssfab.scssforms.scssicons.scssmodal.scsspopover.scssprogress.scsstooltip.scss
imagesscriptsstyles
![Page 11: Building UIs](https://reader033.vdocuments.mx/reader033/viewer/2022042610/589ff6941a28ab46598b58df/html5/thumbnails/11.jpg)
2. Naming
Specific, functional and consistent class names are a must for scalable UIs
![Page 12: Building UIs](https://reader033.vdocuments.mx/reader033/viewer/2022042610/589ff6941a28ab46598b58df/html5/thumbnails/12.jpg)
Pick explicit and clear class names, butdon’t be overly specific
<header class=“site-header”></header><div class=“table-view”></div><div class=“bank-card”></div>
Specific
![Page 13: Building UIs](https://reader033.vdocuments.mx/reader033/viewer/2022042610/589ff6941a28ab46598b58df/html5/thumbnails/13.jpg)
Choose class names that describe an element’s functionality, not its presentation
Functional
![Page 14: Building UIs](https://reader033.vdocuments.mx/reader033/viewer/2022042610/589ff6941a28ab46598b58df/html5/thumbnails/14.jpg)
<button class=“btn-green”>…</button>
Don’t do this
![Page 15: Building UIs](https://reader033.vdocuments.mx/reader033/viewer/2022042610/589ff6941a28ab46598b58df/html5/thumbnails/15.jpg)
<button class=“btn-primary”>…</button>
.btn-primary { background-color: green;}
Do this instead
![Page 16: Building UIs](https://reader033.vdocuments.mx/reader033/viewer/2022042610/589ff6941a28ab46598b58df/html5/thumbnails/16.jpg)
Adopt a single naming convention and stick to it
Consistent
![Page 17: Building UIs](https://reader033.vdocuments.mx/reader033/viewer/2022042610/589ff6941a28ab46598b58df/html5/thumbnails/17.jpg)
<header class=“site-header”></header><main class=“siteContent”></main><footer class=“site_footer”></footer>
Don’t do this
![Page 18: Building UIs](https://reader033.vdocuments.mx/reader033/viewer/2022042610/589ff6941a28ab46598b58df/html5/thumbnails/18.jpg)
<header class=“site-header”></header><main class=“site-content”></main><footer class=“site-footer”></footer>
Do this instead
![Page 19: Building UIs](https://reader033.vdocuments.mx/reader033/viewer/2022042610/589ff6941a28ab46598b58df/html5/thumbnails/19.jpg)
MAKE PAYMENT
Upcoming Payment Due on May 10, 2015
$238.71/mo
Touch of Modern
![Page 20: Building UIs](https://reader033.vdocuments.mx/reader033/viewer/2022042610/589ff6941a28ab46598b58df/html5/thumbnails/20.jpg)
header
content
footer
![Page 21: Building UIs](https://reader033.vdocuments.mx/reader033/viewer/2022042610/589ff6941a28ab46598b58df/html5/thumbnails/21.jpg)
<div class=“card”> <header class=“header”></header> <main class=“content”></main> <footer class=“footer”></footer></div>
Don’t do this
![Page 22: Building UIs](https://reader033.vdocuments.mx/reader033/viewer/2022042610/589ff6941a28ab46598b58df/html5/thumbnails/22.jpg)
<div class=“card”> <header class=“card__header”></header> <main class=“card__content”></main> <footer class=“card__footer”></footer></div>
Do this instead
![Page 23: Building UIs](https://reader033.vdocuments.mx/reader033/viewer/2022042610/589ff6941a28ab46598b58df/html5/thumbnails/23.jpg)
<div class=“card card--loan”> <header class=“card__header”> <img class=“card__avatar” src=“avatar.jpg”> <h3 class=“card__title”>Touch of Modern</h3> <div class=“card__actions”> <span class=“icon”>…</span> </div> </header> <main class=“card__content”> <div class=“progress-bar”> <div class=“progress-bar__fill”></div> </div> </main> <footer class=“card__footer”> <a href=“#” class=“card__footer__link”>Link</a> </footer></div>
![Page 24: Building UIs](https://reader033.vdocuments.mx/reader033/viewer/2022042610/589ff6941a28ab46598b58df/html5/thumbnails/24.jpg)
3. Performance
Perceived performance is more important than actual performance
![Page 25: Building UIs](https://reader033.vdocuments.mx/reader033/viewer/2022042610/589ff6941a28ab46598b58df/html5/thumbnails/25.jpg)
SVG
Vector graphics that scale infinitely, without losing clarity
![Page 26: Building UIs](https://reader033.vdocuments.mx/reader033/viewer/2022042610/589ff6941a28ab46598b58df/html5/thumbnails/26.jpg)
1.5kb 0.8kb
![Page 27: Building UIs](https://reader033.vdocuments.mx/reader033/viewer/2022042610/589ff6941a28ab46598b58df/html5/thumbnails/27.jpg)
FastClick
Eliminating the 300ms delay between a physical tap and the firing of a click event on mobile browsers
![Page 28: Building UIs](https://reader033.vdocuments.mx/reader033/viewer/2022042610/589ff6941a28ab46598b58df/html5/thumbnails/28.jpg)
Normal behavior w/ FastClick
![Page 29: Building UIs](https://reader033.vdocuments.mx/reader033/viewer/2022042610/589ff6941a28ab46598b58df/html5/thumbnails/29.jpg)
Why invest resources into this?
![Page 30: Building UIs](https://reader033.vdocuments.mx/reader033/viewer/2022042610/589ff6941a28ab46598b58df/html5/thumbnails/30.jpg)
Speed
Developing new features and products will be much faster
![Page 31: Building UIs](https://reader033.vdocuments.mx/reader033/viewer/2022042610/589ff6941a28ab46598b58df/html5/thumbnails/31.jpg)
Consistency
Ensure that future products remain consistent (design, naming conventions, patterns, etc.)
![Page 32: Building UIs](https://reader033.vdocuments.mx/reader033/viewer/2022042610/589ff6941a28ab46598b58df/html5/thumbnails/32.jpg)
Scalability
Establish a solid foundation for designing and developing new products
![Page 33: Building UIs](https://reader033.vdocuments.mx/reader033/viewer/2022042610/589ff6941a28ab46598b58df/html5/thumbnails/33.jpg)
Questions?