UI work on the web is incredibly important

ppk

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?

Note:

  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:

Performance

Note:

  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

Measurement

Note:

  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

Note:

  1. Mention Pesticide alongside ugly + obvious + outline

4. Understand Your Code

The CSS Layout Engine

Note:

  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:

Resources

Resources