Sketch.systems

Ryan Singer:

UI designers often define a flow of interaction with wireframes or higher fidelity mockups. This has some problems.

Wireframes require too many visual decisions too early. Even stripped back tools like Balsamiq require you to choose widths and heights for elements. The end product is a visual layout of elements.

The core of an interface design is made up of the affordances and the connections between them. What will the person see and do, in what order, to get from A to B. Once you work that out, there are thousands of ways to change the visual styling.

This is the like the difference between circuit design and industrial design. The components are the same in both, but you could waste a lot of time and effort early on debating on a steel vs plastic case or the proper alignment of the switch versus the indicator light.

https://twitter.com/rjs/status/1016739787125002240

https://twitter.com/rjs/status/1016740204575682560

Ryan Singer: UI Breadboards

https://twitter.com/rjs/status/1016747352043020288

https://twitter.com/rjs/status/1016747352043020288

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/1752847d-265f-45e1-8326-97c19791090c/Untitled.png