Typical programmer screen:
Lot’s of function, no explanation. No verbs. No sentences.
Start with a model that works for both the implementation and the customer. “Ubiquitous language”
SCREENS
Which screens - REST conventions do a lot of work for us - what is the logical name of the noun-verb combination?
What’s on them - design from the inside out. Just the content without the outer frame of navigation. What matters to the user of the screen. What are they trying to do? Put in words what things they are trying to do on the screen, including the various paths they may take. (Don’t just assume the page should be a standard REST-template form.)
Visual style & tricks - be completely rational, “don’t make me think” - when i see the screen, I instantly know what to do with it, it’s easy to complete the task.
Least effective difference - give things visual priority, doing just enough to create the hierarchy
FLOWS
Think with actions instead of screens
Every action has 3 screens:
How you get to it
How do you do it
What happens afterwards - how do i know it worked. What do i want to do next?
TEMPLATES
No HTML in helpers
No clever builders
CSS/JS follow same REST-inspired naming conventions (action-specific blocks in each file)
Treat ERB like an image tag (i.e. small, maybe calling a helper, etc.)