UI work on the web is incredibly important


Building Better UIs

Five Weird Tricks To Improve UI Build Quality

Noah Chase (@nchase), 2015

1. Code Review: Dive Deeper Than Syntax-Scanning

How can we improve this?


  1. Maybe you're not as good at reviewing design as Justin, but you're probably better than QBurst (unless we're talking about Lovely)
  2. There are many ways to do this, but semi-transparent screenshot overlay helps quite a bit.

2. Challenge The Definition of 'Done'

First working attempts can often be achieved more simply on second pass

Reflection Questions:



  1. Steve Souders literally wrote the book on performance. Has worked at Google and Yahoo as head of performance engineering.
  2. If possible, be mindful of how a page feels before and after a change is introduced. If you have a weird feeling, open developer tools's Network or Profiling panels



  1. On pixels: our smallest elements are sometimes in the 20s of pixels. If you're off by 2 pixels, you're off by 10%.

If it feels like there's a lot of code, often times, yeah, there's just too much code.

3. Building Something Challenging? Reduce Your UI


  1. Mention Pesticide alongside ugly + obvious + outline

4. Understand Your Code

The CSS Layout Engine


  1. The fact that there's no CSS3 or CSS4 is much like ECMAScript 2015, 2016, etc.

People in the World are 'Down' on CSS.

We can build beautiful, transformative, high-performance experiences on the web.

We can build slow, middling experiences on web, native, or anywhere else.

How can we improve?

Read the Spec [HTML, CSS]

5. Practice & Build, Get Regular Healthy 'Exercise'

If you really like this stuff, read + explore more widely!

e.g. print design principles (The Elements of Typographic Style), web design principles (Don't Make Me Think), The Design of Everyday Things, past/present trends, philosophy, etc

And if you don't like this stuff, the next slide is for you!

The Sidestep

Fair reasons to go disavowal route: