building uis
TRANSCRIPT
Building UIs
Building fast, maintainable and scalable user interfaces on the web
HTML
HTML gives content structure and meaning (headings, paragraphs, images, etc.)
CSS
CSS defines the presentation (typography, colors, layout, etc.)
<h1 class=“title”>I’m a title</h1>
<div class=“box”>I’m a box</div>
<img src=“image.jpg”>
.title { font-size: 32px; color: black;}
.box { border-radius: 5px;}
img { border: 1px solid red;}
www.affirm.com
Building fast, maintainable and scalable user interfaces on the web
1. Modules
Break down the user interface into isolated, reusable modules (buttons, tooltips, etc.)
basefontslayoutmodulesutilities
badge.scssbuttons.scsscard.scsscontrol.scssdate-picker.scssfab.scssforms.scssicons.scssmodal.scsspopover.scssprogress.scsstooltip.scss
imagesscriptsstyles
2. Naming
Specific, functional and consistent class names are a must for scalable UIs
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
Choose class names that describe an element’s functionality, not its presentation
Functional
<button class=“btn-green”>…</button>
Don’t do this
<button class=“btn-primary”>…</button>
.btn-primary { background-color: green;}
Do this instead
Adopt a single naming convention and stick to it
Consistent
<header class=“site-header”></header><main class=“siteContent”></main><footer class=“site_footer”></footer>
Don’t do this
<header class=“site-header”></header><main class=“site-content”></main><footer class=“site-footer”></footer>
Do this instead
MAKE PAYMENT
Upcoming Payment Due on May 10, 2015
$238.71/mo
Touch of Modern
header
content
footer
<div class=“card”> <header class=“header”></header> <main class=“content”></main> <footer class=“footer”></footer></div>
Don’t do this
<div class=“card”> <header class=“card__header”></header> <main class=“card__content”></main> <footer class=“card__footer”></footer></div>
Do this instead
<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>
3. Performance
Perceived performance is more important than actual performance
SVG
Vector graphics that scale infinitely, without losing clarity
1.5kb 0.8kb
FastClick
Eliminating the 300ms delay between a physical tap and the firing of a click event on mobile browsers
Normal behavior w/ FastClick
Why invest resources into this?
Speed
Developing new features and products will be much faster
Consistency
Ensure that future products remain consistent (design, naming conventions, patterns, etc.)
Scalability
Establish a solid foundation for designing and developing new products
Questions?